在GitHub上部署HEXO


经过三天的不断网上趴文和自我修炼,参考了众多网上大神的教程和文章,自己又填了无数个坑之后,终于成功在GitHub上部署了HEXO系统发布文章,使用GitHub Action功能自动编译HEXO程序并发布静态页面。我将用两个篇幅来记录部署过程。
第一部分介绍如何在本地部署HEXO程序,安装主题,本地预览,然后发布到Github Page。
第二部分介绍如何使用GitHub Action功能实现HEXO程序的自动编译和发布。

1.GitHub上新建仓库

登录你的Github,新建两个仓库:
一个仓库用于发布我们的HEXO站点,为了便于区分,我们在这里叫它公开仓库,新建的时候选在类型为Public,网址那里填入***.github.io,确保你可以使用域名https://***.github.com 访问到你的页面,这篇文章我们主要在这个仓库中进行操作;
另一个站点用于存放我们的HEXO程序源文件,用于和主仓库实现自动化编译和发布的联动,我们叫它私人仓库,类型选择Pravite,名称随便起,我们这里叫做hexo-action。

2.本地安装配置环境

需要安装的工具有git和node两个环境,安装包已经上传到了阿里云,大家可以自行下载。
git x64

1
https://www.aliyundrive.com/s/eWkiy8beBEj

node x64

1
https://www.aliyundrive.com/s/A6iLQPNecXt

安装完成之后在cmd窗口运行git --version及node -v 命令确保安装正确。

3.部署Github通讯密钥

我们在本地运行git bash命令窗,

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件:

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

连续回车,直到命令运行结束。
在本地用户名文件夹下会看到一个.ssh命名的文件夹,用记事本或是notepad++打开里面的id_rsa.pub文件并复制全部内容。
打开GitHub_Settings_keys 页面,新建new SSH Key,Title随便填,Key那里把刚才复制的公钥粘贴过去,然后点击Add SSH Key。

我们可以输入下面命令来测试一下密钥是否配置正确:

1
ssh git@github.com

3.运行安装命令进行HEXO的安装

在本地选择一个文件夹,作为你的hexo主目录,在这个文件夹下右键,选择git bash here打开git命令窗口。

运行命令安装hexo:

1
npm install -g hexo

运行命令在此文件夹新建站点:

1
hexo init

如果命令没有报错的话,在你选定的文件夹下应该会下载到hexo的文件。

我们可以编辑根目录下的_config.yml来配置HEXO站点的相关信息。
编辑完相关信息之后运行以下命令重新生成站点文件:

1
hexo g

4.打开本地演示模式

输入下面命令打开本地演示模式:

1
hexo s

打开之后在浏览器输入http://localhost:400 就可以访问到网站了。

5.安装主题butterfly

我们接下来安装一个主题,这里以butterfly这个主题为例,其他主题的安装也类似。

在hexo文件下下运行以下命令:

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save

运行完成之后我们编辑主题文件夹下的_config.yml文件来对主题进行配置。
编辑完成之后复制一份这个yml文件到hexo根目录,并命名为_config.butterfly.yml。
接着编辑根目录下面的站点配置文件_config.yml来更改主题

1
theme: butterfly

修改完成之后重新运行下面命令编译HEXO:

1
hexo g

然后本地预览新安装的主题:

1
hexo s

6.将站点发布到Github上

如果在本地演示没有报错,我们就可以将站点发布到Github上面了。
首先我们需要编辑根目录下的_config.yml文件,拉到文件最底部填入你的github地址:

1
2
3
4
5
deploy:
type: 'git'
repo: git@github.com:miaoyanginfo/miaoyanginfo.github.io.git
branch: master

然后运行下面的命令:

1
2
npm install hexo-deployer-git  --save
hexo clean && hexo g && hexo d

发布完成之后我们直接用域名https://***.github.io
就可以访问到我们搭建的HEXO站点了。