关于前端:通过-hexoserverless-快速搭建并部署一个自己的博客

先看一下我的博客成果：https://moohng.com，没有写一行代码，全都是一些简略的配置。

如果感觉还不错，接下来就从零开始介绍，照着做，差不多 1 个小时就能够搞定了。

创立站点我的项目

这是 Hexo 的官网：https://hexo.io/zh-cn/docs/，有根底的可间接参照官网文档来，而后跳到 Serveless 部署 局部。

1. 本地 node 环境装置

   关上 Node.js 官网：https://nodejs.org/zh-cn/，抉择最新的 长期保护版 下载，而后失常双击进行装置。

   装置实现之后，按住 Win + X，抉择PowerShell 并关上，而后在以后命令行下输出 npm -v 回车，如果打印出了一个版本号，就阐明 Node.js 装置胜利了。

2. Hexo 的装置

   在以后的命令行窗口输出 npm install -g hexo-cli 并回车，期待装置实现。

   npm install -g hexo-cli

3. 创立站点我的项目

   找一个你用来放站点我的项目的文件夹（或桌面），按住 Shift 并在空白处鼠标右键，在弹窗的菜单中点击 在此处关上 PowerShell 窗口。并顺次输出上面的命令：

   # 初始化
   hexo init my-site
   
   # 下面命令执行完之后，进入我的项目
   cd my-site
   
   # 装置依赖
   npm install
   
   # 运行
   npm run server

   这时候，你的站点我的项目就曾经创立好了，在浏览器输出 http://localhost:4000 就能够看到你的站点页面了。这是 hexo 官网默认的站点，接下来就配置成本人喜爱的站点格调吧。

hexo 配置

如果你电脑上没有适合的编辑器，倡议装置 Visual Studio Code 进行后续操作。间接上官网：https://code.visualstudio.com/ 点击下载并装置。

装置好了VS Code，在以后的命令行下输出：

code .

如果关上失败，就间接在以后我的项目文件夹 my-site 鼠标右键，抉择 通过 Code 关上。

在 VS Code 中，关上 _config.yml 文件，该文件就是以后站点的配置文件。

外面有很多配置信息，大家能够参照官网文档：https://hexo.io/zh-cn/docs/configuration 进行自定义，给大家看一下我的局部配置：

# Site
title: 末日码农 - 专一前端，记录生存
subtitle: 一个前端码农，会写一点代码
description: 专一前端，记录生存！大量的优质技术文章和干货分享，公众号 @末日码农
keywords: Hexo, js, Nodejs, React, Vue, JavaScript, CSS3, html, 前端, 程序员, 码农
author: 颜漠笑年
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://moohng.com
root: /
permalink: :year:month:day/:id/
permalink_defaults:

除了 Site 上面的站点信息相干配置，大多数配置都能够放弃默认就行。

而后就是主题的配置，我的站点抉择的是 Fluid 主题，这是官网文档：https://hexo.fluid-dev.com/docs/)，你也能够抉择一款本人喜爱的主题，这是官网的主题列表：https://hexo.io/themes/。不过倡议你上百度或谷歌下来搜寻他人举荐的比拟热门的主题，本人挑的话主题太多了，费时费力，而且主题参差不齐。

确定好主题之后，个别每个主题都有本人的配置文档介绍，我这里就依据我的主题来说一下吧。

1. 装置主题

npm install npm install --save hexo-theme-fluid

2. 在 _config.yml 文件中找到 theme 并配置fluid

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

3. 在我的项目根目录下创立 _config.fluid.yml 文件，并将主题中 _config.yml 文件中的内容复制到该文件里。接下来的所有配置批改都应该在 _config.fluid.yml 文件中进行。

   留神：主题中的 _config.yml 文件位于 node_modules\hexo-theme-fluid 目录下

当初就能够依据 fluid 的官网文档进行个性化配置了，这里的配置项比拟多，能够先全副放弃默认，持续往下进行。

主题确定好了之后，从新运行 npm run server 命令，就能够看到成果了，当初你的站点就跟我的那个站点看起来格调差不多了。

对于写文章，Hexo 都是基于 MarkDown 语法来的，如果不相熟的话，就须要花点工夫学习一下 MarkDown 语法，就能欢快的写本人的博客文章了。

最初，就能够部署上线了。

Github 部署

最简略的办法就是应用 github 的动态页面性能去部署了，然而对于小白的话就须要肯定的 Git 根底。有须要的能够参考一下我 17 年写过的一篇文章《前端工具篇：浅谈 Git 和 Github》：https://moohng.com/20170810/cl0albbhc00057wv28t0p5pti/

首先，在 _config.yml 配置文件中，配置 github 仓库信息（须要本人提前在 github 上建好，并将 master 分支开启 Page 性能）：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  branch: master
  repo: git@github.com:moohng/moohng.github.io.git

我是将 master 作为动态页面，dev 分支作为以后我的项目仓库，这是我的我的项目地址：https://github.com/moohng/moohng.github.io。

要留神我的项目的名称，必须是 moohng.github.io 这种格局，最后面用你本人的 github 用户名替换，否则就不能以这个 https://moohng.github.io 作为你站点的域名了。

上面就生成动态页面并推送到 GitHub 仓库中去：

# 生成动态页面
npm run build

# 部署到 GitHub 仓库
npm run deploy

到这一步，你的博客就算上线了。个别等上几分钟，就能够通过 GitHub 提供的域名拜访了。

通过 github 作为博客站点的劣势就是：自定义的域名不须要备案，而且还是完全免费的。

然而惟一的毛病就是：国内的访问速度很慢，有时候可能甚至打不开。

serverless 部署

抉择 serverless 的起因，一方面是国内服务器，访问速度很快；另一方面是 serverless 自身也很划算，每个月都有收费的额度，对于集体博客站点，基本上也是不花钱的。

当初国内最大的应该就是阿里云和腾讯云两家了，我用的是腾讯云的 serverless。

对于 serverless 相干的概念知识点比拟多，对于非专业人士的确有很高的学习老本，官网文档都跟小说似的太多了。能够去看一下 https://cloud.tencent.com/document/product。

增加配置文件

首先你得有一个腾讯云的账户，没有本人去官网注册一个，倡议绑定微信扫码登录，前面会不便很多。

接下来就在咱们的我的项目根目录外面增加一个腾讯云的配置文件serverless.yml，而后输出以下内容：

# serverless.yml
component: website # (必填) 援用 component 的名称，以后用到的是 tencent-website 组件
name: hexoComponent # (必填) 该 website 组件创立的实例名称
app: websiteApp # (可选) 该 website 利用名称
stage: dev # (可选) 用于辨别环境信息，默认值是 dev
inputs:
 src:
   src: ./public # Upload static files generated by HEXO
   index: index.html
   # dist: ./dist
   # hook: npm run build
   # websitePath: ./
 region: ap-guangzhou
 bucketName: my-bucket
 protocol: https

其中次要就是 inputs.src.src 要指定正确，因为 hexo 生成的站点页面，默认是放在 public 下的，所以这里就须要指定目录为 ./public。index 字段站点的入口，个别都是 index.html 就行了。其余的一些配置信息，刚开始不明确能够先不要动。

腾讯云的配置文件有了，站点页面也有了，当初就须要将本地的我的项目上传到腾讯云空间中去。

cli 命令装置

先在本地装置 serverless 命令：

npm install -g serverless

# 装置实现后，查看版本信息，确认是否装置胜利
serverless -v

其实上一步的配置文件也能够通过该命令生成：

命令行输出 serverless，而后抉择website-starter - 疾速部署一个动态网站，也能够生成配置文件信息，然而下面提到的入口src 肯定要改成./public。

部署到腾讯云

# 学生成动态页面到 public 目录
hexo g

# 部署到腾讯云
serverless deploy

serverless deploy命令须要受权，如果腾讯云绑定了微信，间接用微信扫码就能够了。更多详情配置和用法能够参考腾讯云官网文档。

自定义域名

首先须要本人领有一个域名，没有能够本人去注册，用哪一家的产品就倡议去哪一家注册域名，后续备案、解析、部署这些都会不便很多。

Github Page 服务

如果你是抉择的是 Github 动态页面托管，那么就不须要进行备案了。

• 首先在我的项目中开启相干的配置，设置好域名地址

• 而后再去域名服务商那里将域名解析到 github 的提供的域名地址，留神记录类型要抉择CNAME。

腾讯云服务

如果是腾讯云部署，自定义域名就会麻烦一些，首选域名必须要先进行备案。备案的话倡议应用腾讯云提供的域名备案流程来一步一步进行，有什么问题腾讯云客服都会给予领导，备案绝对会简略很多。

如果你曾经有了一个备案的域名，首先关上腾讯云的对象贮存服务，而后抉择博客我的项目中配置的 bucketName 关联的存储桶进行自定义域名的配置。

SSL 证书

当初腾讯云官网有提供收费的 SSL 证书服务，不过有效期只有 1 年，到期之后再从新申请就行了。申请完证书之后，再回到腾讯云对应的 bucket 自定义域名那里，配置就行了。

如果用腾讯云绑定了自定义的域名，必须在博客站点的底部增加备案号等信息，否则有可能会被登记备案，这是所有国内网站强制性的要求。在此也揭示大家，在网络上流传和公布任何货色，肯定要遵纪守法。

搞定出工

到这里，一个残缺的集体博客站点就算全副实现了。后续还能够依据官网的文档进行很多自定义的配置，比方：增加百度、谷歌统计，博客评论等很多个性化配置。

最初，感激浏览！如果感觉不错，能够关注我的公众号【末日码农】，获取更多技术常识。