在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 | git config --global user.name "你的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 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
运行完成之后我们编辑主题文件夹下的_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 | deploy: |
然后运行下面的命令:
1 | npm install hexo-deployer-git --save |
发布完成之后我们直接用域名https://***.github.io
就可以访问到我们搭建的HEXO站点了。