使用 Github Action 搭建 Hexo 博客

Hexo 是使用 nodejs 写的博客框架，使用 Markdown 引擎来解析文章，在几秒内，即可生成绚丽的主题生成静态网页。作为一名有追求的程序员，我们必须得有自己的个人网站，所以我要开始搭建自己的博客了，于是开始了我选择博客平台之旅，最终选择了 Hexo 。我为什么选择 Hexo 搭建我的博客，其中最主要原因是国内程序员使用广泛，可选择的主题也很多，还有最重要的可迁移性强。

这是我的个人博客效果：IT才华有限青年·dev4mobile

原理

我们可以通过命令 hexo init xxx 来生成 hexo 网站源码，然后通过 hexo generate 来编译源码，生成我们需要的静态文件，这些静态文件在 public目录下, 这个 public 目录就是我们要发布的网站目录。下面是我简单的画了一下 hexo 网站的运行原理 运行原理图

搭建过程

软件准备

这里只选择 mac 平台做说明，其它平台请 google

  1. 安装 nodejs
    #搜索 node 是否存在
brew search node
#安装 node 
brew install node
  2. 安装 cnpm 这里不用 cnpm 也行，使用 nodejs 自带的npm，只不过速度非常慢
    npm install cnpm -g
  3. 安装 hexo-cli
    cnpm install hexo-cli -g 或者 npm install hexo-cli -g
  4. 安装git
    brew install git

初始化 blog

搭建一个博客需要四步，初始化博客目录，安装博客依赖，本地发布，测试。记住目录名不能错,<github_user_name>.github.io，这里以我的 github 用户名 dev4mobile 为例，必须为dev4mobile.github.io, 我的博客目录结构 网站目录结构

  1. 初始化博客目录结构

    #hexo init <github_user_name>.github.io
hexo init dev4mobile.github.io

  2. 安装依赖

    cd dev4mobile.github.io
cnpm install

  3. 本地发布

    hexo server

  4. 测试

    hexo server 执行完之后，命令行会打印 http://localhost:4000，这个地址就是我们本地访问的博客地址，能打开说明，我们的网站初步搭建成功。

新建新 blog

网站初步搭建成功之后，我们就可以开始写我们的博客了

执行下面命令，我们就可以新建一个博客

#新建blog
hexo new '文章名称'
#本地预览
hexo server

发布 blog 到 github 上

本地测试都没问题了，那么我们可以使用免费的 VPS 空间 github pages 来发布我们的博客。我这里是使用develop 分支来存放我的网站源码，master 分支作为我的网站发布目录，整个构建过程是使用github actions来做的，配置文件可以参考我写的，我假设你已经有了github账户，在这里以我的账户 dev4mobile 为例来说明.

  1. 新建仓库 dev4mobile.github.io

  2. 创建 github action配置文件，也就是在网站目录下新建.github 目录, 然后新建 workflows 目录，创建配置文件 deploy.yml 文件，可参考 https://github.com/dev4mobile/dev4mobile.github.io/blob/develop/.github/workflows/deploy.yml

  3. 将本地创建的 hexo 网站推送到 dev4mobile.github.io 仓库的 develop 分支, 然后github action 会自动编译，部署到你的 master 分支上

    git push origin develop -f

  4. 查看 github actions 构建是否成功，成功之后你就可以使用 https://dev4mobile.github.io/ 来访问你的网站了

配置域名

如果你自己已经有个人域名，那么你可以配置一条CNAME记录来指向你的 https://dev4mobile.github.io/ 的记录。并且需要在你的网站目录 source 目录下创建一个文件CNAME，里面的内容是你的网站，比如我的是dev4mobiles.com

更改主题

默认的主题实在太难看了，我选择 again 这个主题，把主题下载下来放在 themes 目录下，然后在 _config.xml 目录配置 theme这个key为 again就行了

总结

最后我想说的是，博客不在于有多漂亮，关键是要多写，多输出，这样才能有进步，还有更多的详细过程请参考hexo 官方文档，如果有问题也可以在 twiter 上给我留言

参考:

Hexo 官方网站
Github Actions 入门