Hexo+GitHub搭建博客平台 – Gary的个人技术记录

Hexo需要使用Git和Nodejs，因此需要提前安装好Git和Nodejs

详细文档（这网站不是很稳定）：https://hexo.io/zh-cn/docs/index.html

Hexo博客平台原理

Hexo使用Markdown解析器把Markdown文件配合主题生成静态网页，并且支持发布到GitHub Pages，方便个人生成博客网站。本质上生成了静态的html之后可以发布到任何web服务器平台。

但是只是一个静态的网站，没有自己的数据库，不支持后台管理等动态管理功能。

另外要支持评论的话需要使用第三方的数据库，可用Valine工具，数据存储到LeanCloud，或者gitalk。

安装Hexo

根据自己的平台选择最新版的安装：

Nodejs安装：http://nodejs.cn/download/

Git安装：https://git-scm.com/downloads

如果访问失败可以试试淘宝的镜像：https://npm.taobao.org/mirrors/git-for-windows/

安装完基本的工具之后，先看看环境：

$ npm -v
6.14.3

$ git --version
git version 2.26.0.windows.1

使用 npm 安装 Hexo，全局安装hexo-cli，方便使用，可以使用国内的registry加速。

参考地址：https://cnpmjs.org/

可以手动添加--registry或者设置registry

npm config set registry https://r.cnpmjs.org

$ npm install -g hexo-cli --registry=https://r.cnpmjs.org
C:\Users\gary.fu\AppData\Roaming\npm\hexo -> C:\Users\gary.fu\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\hexo-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ hexo-cli@3.1.0
added 81 packages from 322 contributors in 25.679s

安装后测试显示hexo -v：

hexo -v
hexo: 4.2.0
hexo-cli: 3.1.0
os: Windows_NT 6.1.7601 win32 x64
node: 12.10.0
v8: 7.6.303.29-node.16
uv: 1.31.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 4
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1c
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1

新建博客平台

初始化hexo项目命令如下hexo init xxxx：

$ hexo init MengStudyBlog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'C:\MyCodes\CustomCode\MengStudyBlog'...
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 161 (delta 12), reused 12 (delta 4), pack-reused 131
Receiving objects: 100% (161/161), 31.79 KiB | 75.00 KiB/s, done.
Resolving deltas: 100% (74/74), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'C:/MyCodes/CustomCode/MengStudyBlog/themes/landscape'...
remote: Enumerating objects: 1063, done.
remote: Total 1063 (delta 0), reused 0 (delta 0), pack-reused 1063
Receiving objects: 100% (1063/1063), 3.21 MiB | 232.00 KiB/s, done.
Resolving deltas: 100% (585/585), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies

> ejs@2.7.4 postinstall C:\MyCodes\CustomCode\MengStudyBlog\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 253 packages from 450 contributors and audited 470 packages in 49.115s

5 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
INFO  Start blogging with Hexo!

进入该目录，安装本地依赖：

cd MengStudyBlog
npm install

其实这个时候默认网站已经成型了，可以运行看看效果，后面再改配置，实现自己自定义的网站。

hexo server

打开浏览器访问：http://localhost:4000/

配置博客平台

参考地址: https://hexo.io/zh-cn/docs/configuration

配置基本信息

配置文件_config.yml，配置好自己的博客名称等：

title: 梦学园博客
subtitle: 'Gary的个人博客网站'
description: '技术博客，关注软件开发、微服务、分布式'
keywords:
author: Gary Fu
language: cn
timezone: 'Asia/Shanghai'

配置主题

主题配置文档：https://hexo.io/zh-cn/docs/themes

主题选择：https://hexo.io/themes，里面有很多主题，选择自己喜欢的主题之后下载源文件即可。

主题是在生成的文件夹下面有个themes目录，下面已经有一个默认主题了，名叫landscape，在_config.yml中配置有默认的主题名字。

theme: landscape

下载主题，我选择pure主题试用https://github.com/cofess/hexo-theme-pure：

git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

为了使用完整功能，需要安装一些插件（文档中有说明）。

npm install hexo-wordcount --save
npm install hexo-generator-json-content --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

发布到GitHub

首先要新建一个仓库，名称为GitHub账号名称加github.io结尾，如我自己的：fugary.github.io

安装发布git的插件
```
npm install hexo-deployer-git --save
```
然后配置_config.yml，添加deploy配置：

deploy:
  type: git
  repo: https://github.com/fugary/fugary.github.io.git
  branch: master

调用发布命令
```
hexo g
hexo d
```

如果没有配置免密码登录，需要输入用户名和密码

   ```bash
   Username for 'https://github.com': xxxx
   Password for 'https://xxxx@github.com':

绑定个人域名

要配置个人域名，主要有两个部分要配置，一部分是配置域名解析，已不是是源文件中需要配置一个CNAME文件

配置域名解析

要绑定个人域名，需要先申请一个域名，我目前使用的是阿里云的域名：

注意：域名状态如果是未实名认证，配置后也是不能正常访问的。必须先实名认证

配置解析CNAME：

理论上也是可以配置A记录的，配置IP地址，但是我们的github网站的IP地址并不固定，多次ping的时候会得到多个IP地址，因此还是先用CNAME方式配置。

然后要等待10分钟左右才能生效。

给Hexo添加CNAME

需要在我们的工程目录下的source文件夹中新建一个名为CNAME的文件（无扩展名），然后把自己的域名填进去。

然后重新生成并发布:

hexo clean
hexo g
hexo d

访问测试

等待域名解析生效之后就可以测试访问了。