Hexo+Github-pages: 免建站快速部署你的专属博客

本是古典何须时尚 2021-10-23 09:25 250阅读 0赞

## 前言 ##

C某某N博客的页面样式实在不敢恭维，广告不少，最厉害的在于写作积分还不能用于下载，近两年Hexo挺火的，结合github pages使用，纯md文档输出，自动生成简洁好看的web页面，建站的步骤都可以省略了，试用一番下来体验确实尚可，记录一下部署过程

### 1. 创建github pages ###

登录github，新建一个repo，repo名强制要求为`username.github.io`，其中username需与github账户owner一致，这是github pages的约定

![aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vMjAxOTA4MjAxNTUzMTIucG5n][]

### 2. 安装hexo ###

假设你的git、nodejs等工具都已经安装好了，如果没有安装好，先安装好再进行后面的操作

安装hexo:

`npm install hexo-cli -g`

### 3. 发布内容 ###

接下来用Hexo初始化一个博客，然后更改一些自定义的配置，然后发布到自己的个人Github网站(`username`.github.io)。

创建博客:

`hexo init username.github.io`

安装hexo中最常用的next主题，其他主题参考[hexo官网][hexo]

cd username.github.io
    git clone https://github.com/iissnan/hexo-theme-next themes/next

**博客配置**

博客基础配置文件位于`username.github.io/_config.yml`,简单测试，先修改配置文件内的下面几项:

title: 随笔漫谈瞎写  // 标题
    author: ywq
    language: zh-Hans  // 中文
    timezone: Asia/Chongqing  
    theme: next   //刚刚安装的主题名称
    deploy:
      type: git
      repo: https://www.github.com/yinwenqin/yinwenqin.github.io.git

**主题配置**

主题配置文件位于`themes/next/_config.yml`文件中,这里可以自定义的选项就很多了，[next主题官网][next]

**写文档**

md文档路径`themes/next/_config.yml`,后面需要展示的md文档都放在这个目录内，默认这个目录里有一个hello\_world.md

**测试**

`$ hexo s`

测试服务启动，你可以在浏览器中输入[https://localhost:4000][https_localhost_4000] 访问了

**安装[hexo-deployer-git][]自动部署发布工具**

必须在username.github.io项目目录内安装:

`npm install hexo-deployer-git --save`

**发布**

测试没问题后，生成静态网页文件发布至的Github pages 仓库中。  
`$ hexo clean && hexo g && hexo d`

**查看效果**

浏览器打开，输入https://yinwenqin.github.io ,记得替换成你的地址

![aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vMjAxOTA4MjAxNjIwNDQucG5n][]

默认的页面比这个要简陋一些，这里已经是做了一些美化的配置，如：头像、链接高亮、文章阴影、背景图、动态效果、访问数量统计等，具体怎么配置，建议安装好后浏览器搜索自己diy一番，可以部分参考下面链接,里面有些内容在当下已经不生效，需要再搜索一下别的文章:

https://www.jianshu.com/p/3a05351a37dc

### 3. 自定义博客域名 ###

用github page的默认域名`username.github.io`太过千篇一律，好在github page支持自定义域名,参考:

[github pages自定义域名][github pages]

首先假设你已经拥有一个域名，那么只需在你的域名服务商那里为它加一条CNAME记录,指向你的github pages地址:

![aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vYmxvZy8yMDE5MDgyMDE2MzYwMC5wbmc][]

回到你的项目中，在`source`目录下新建一个CNAME文件，里面加入刚刚新增的解析域名，注意，如果直接去仓库里添加Custom domain，那么每次push之后，Custom domain将会被还原为空，加上这一步之后，就不会有这个问题了

yinwenqin.github.io ywq$ cat source/CNAME
    blog.upweto.top

推送代码，过几分钟，你就可以通过自定义的域名访问github pages了:

`$ hexo clean && hexo g && hexo d`

浏览器打开，输入https://blog.upweto.top/tags ,记得替换成你的地址  
![aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vYmxvZy8yMDE5MDgyMDE2NDM0OS5wbmc][]

## Last ##

开始CxxN上的博客的迁移工作,下一篇记录一下图床迁移的过程

[aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vMjAxOTA4MjAxNTUzMTIucG5n]: /images/20211023/3e2f8bd87d9f4874b64fe51dbb61b842.png
[hexo]: https://hexo.io/themes/
[next]: http://theme-next.iissnan.com/getting-started.html
[https_localhost_4000]: https://link.jianshu.com/?t=https://localhost:4000
[hexo-deployer-git]: https://link.jianshu.com/?t=https://github.com/hexojs/hexo-deployer-git
[aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vMjAxOTA4MjAxNjIwNDQucG5n]: /images/20211023/1a3c18ad96334a14b4d30485da77a18c.png
[github pages]: https://help.github.com/en/articles/using-a-custom-domain-with-github-pages
[aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vYmxvZy8yMDE5MDgyMDE2MzYwMC5wbmc]: /images/20211023/d7379248c3a14c0c8ee4538607e3ea3c.png
[aHR0cDovL3B3aDhmOWF6NC5ia3QuY2xvdWRkbi5jb20vYmxvZy8yMDE5MDgyMDE2NDM0OS5wbmc]: /images/20211023/5a49e2ec43a84f36b599c66f217cdea8.png