Hexo + Github Pages博客搭建教程

短命女 2022-04-23 10:20 386阅读 0赞

## 前言 ##

一直以来自己都有书写文章的习惯，不管是收集资料还是表达自己的个人见解。最开始把资料都放在印象笔记里，但是印象笔记有个不好的点就是书写不方便，而且多设备登录不友好，需要升级账户。后来就搭建了一个WordPress站点，记录自己的点滴。慢慢的接触到了CSDN，也计划着在那里写博客。CSDN的编辑器有markdown版本，接触到了markdown就对其产生了好感。与此同时，我也将我的WordPress站点的编辑器换成了markdown编辑器，一处书写多处同步。  
慢慢的，我感受到了WordPress站点的臃肿，由于我的站点原因，做的并不是单独的博客站点，所有的文章展示方面不友好。所以萌生了搭建一个单独的博客的想法。

## 为什么选择hexo? ##

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒之内，即可利用靓丽的主题生成静态网页。  
很久之前就知道有这个博客框架，一直没有去体验过。而且，这个博客是不需要自己去购置服务器的，甚至域名都不用去买。

## 搭建环境准备 ##

### Node.js 的安装和准备 ###

Node.js的官网是在国外的，下载的服务可能不太友好，可以去国内的Nodejs中文网去下载，选择适合自己的版本安装就可以了。安装界面也是下一步下一步就可以了。  
网址：[http://nodejs.cn/download/][http_nodejs.cn_download]

![20190206115422.png][]

检验是否安装成功：

node -v
    npm -v

![20190206115616.png][]

显示版本号，没有报错就算装成功了。

### git的安装 ###

git是一个版本控制管理工具，这个主要是在Hexo发布的时候起作用。将本地的博客同步到GitHub上面。  
选择合适的版本安装。  
网址：[https://git-scm.com/downloads][https_git-scm.com_downloads]  
![20190206115834.png][]  
检验是否安装成功：

git --version

![20190206120050.png][]

## 博客本地搭建 ##

### 安装Hexo ###

通过npm来安装Hexo

npm install -g hexo-cli

### 创建网站 ###

在电脑里新建一个文件夹作为博客的目录，通过Hexo命令初始化并安装。

hexo init <folder>
    cd <folder>
    npm install

例如这里我将博客目录设置为`hexoblog`

hexo init hexoblog
    cd hexoblog
    npm install # 这一步也可以不执行，init操作时已经安装了

![20190206125453.png][]

### 网站目录介绍 ###

![20190206125821.png][]  
`config.yml`  
博客的配置文件，博客的名称、关键词、作者、语言、博客主题…设置都在里面。  
`package.json`  
应用程序信息，新添加的插件内容也会出现在这里面，我们可以不修改这里的内容。  
`scaffolds`  
scaffolds就是脚手架的意思，这里放了三个模板文件，分别是新添加博客文章（posts）、新添加博客页（page）和新添加草稿（draft）的目标样式。  
这部分可以修改的内容是，我们可以在模板上添加比如categories等自定义内容  
`source`  
source是放置我们博客内容的地方，里面初始只有两个文件夹，一个是drafts（草稿），一个posts（文章），但之后我们通过命令新建tags（标签）还有categories（分类）页后，这里会相应地增加文件夹。  
`themes`  
放置主题文件包的地方。Hexo会根据这个文件来生成静态页面。  
初始状态下只有landscape一个文件夹，后续我们可以添加自己喜欢的。

### Hexo命令 ###

Hexo有详尽的中文文档，网址：[https://hexo.io/zh-cn/docs/][https_hexo.io_zh-cn_docs]  
主要的命令如下：  
`init`新建一个网站。

hexo init <folder>

`new`新建文章或页面。

hexo new <layout> "title"

这里的对应我们要添加的内容，如果是posts就是添加新的文章，如果是page就是添加新的页面。  
默认是添加posts。  
然后我们就可以在对应的posts或drafts文件夹里找到我们新建的文件，然后在文件里用Markdown的格式来写作了。  
`generate`生成静态页面

hexo generate
    hexo g  // 简写

`deploy`将内容部署到网站

hexo deploy
    hexo -d  // 简写

`publish`发布内容，实际上是将内容从drafts（草稿）文件夹移到posts（文章）文件夹。

hexo publish <layout> <filename>

`server`启动服务器，默认情况下，访问网站为http://localhost:4000/

hexo server
    hexo s  // 简写

> 根据我的经验，除了第一次部署的时候，我们会重点用到hexo init这个命令外，在平时写博客和发布过程中最常用的就是：

*  hexo n 新建文章
 *  hexo s 启动服务器，在本地查看内容
 *  hexo g 生成静态页面
 *  hexo deploy 部署到网站  
    以上四个步骤。

我的步骤：

hexo new xxx    // 新建文章
    hexo g && hexo deploy  // 生成并部署

### 网站本地效果 ###

终端执行`hexo s`  
网站就在本地启动了，访问 [http://localhost:4000][http_localhost_4000]

![20190206130915.png][]

## 博客Github部署 ##

### 创建储存桶 ###

新建一个仓库，项目名一定要是用户名.github.io的形式(README.md可选可不选)  
比如，我的用户名是GeekMubai，则我的仓库名必须是`GeekMubai.github.io`  
![20190206131939.png][]

### 配置SSH-Key ###

没有SSH-Key的话，git是不能将本地的代码部署到GitHub的。所以需要先创建SSH-Key。  
本地生成秘钥：这里的用户名和邮箱仅做演示，根据自己的修改

git config --global user.name "geekmubai"
    git config --global user.email geekmubai@example.com
    ssh-keygen -t rsa -C "youremail@example.com"

![error3.png][]

此时在用户文件夹下有一个隐藏文件夹，里面会有相关的秘钥文件。  
以文本方式打开`id_rsa.pub`文件，将内容复制到GitHub。  
![20190206133426.png][]

标题随便起，将文本内容复制到Key，最后添加Key  
![20190206133454.png][]

### 同步代码 ###

使用hexo deploy部署需要安装一个插件：

npm install hexo-deployer-git --save

找到blog目录下的配置文件\_config.yml,用编辑器打开此文件找到此文件中的deploy字段，按照以下配置deploy:

type: git
    repo: git@github.com:GeekMubai/GeekMubai.github.io.git
    branch: master

repo在GitHub获取：  
![20190206134153.png][]

然后在命令行中执行

hexo d

![20190206134541.png][]

此时已经同步代码到GitHub了。  
![20190206134618.png][]

### 开启Github-Pages ###

当你按照项目名是用户名.github.io的形式创建仓库的时候，GitHub应该是默认开启了github-pages。  
进入仓库的设置，往下拉：  
![20190206134925.png][]

此时打开网址就可以看到Hexo博客了。  
![20190206135037.png][]

## 域名解析 ##

*  注册域名
 *  进入万网进行域名绑定
 *  进入public,新建CNAME
 *  把域名写到CNAME里
 *  传到github仓库里

注意域名解析的时候选择CNAME,主机记录可以按照下面的方式填写。  
比如我想用二级域名，我就填写blog。  
此时[blog.geekmubai.com][]就可以解析到我的Hexo博客。

> 主机记录就是域名前缀，常见用法有：  
> www：[解析后的域名为www.aliyun.com][www.aliyun.com]。  
> @：直接解析主域名 [aliyun.com][]。  
> \*：泛解析，匹配其他所有域名 \*.aliyun.com。  
> mail：[将域名解析为mail.aliyun.com][mail.aliyun.com]，通常用于解析邮箱服务器。  
> 二级域名：如：[abc.aliyun.com][]，填写abc。  
> 手机网站：如：[m.aliyun.com][]，填写m。  
> 显性URL：不支持泛解析（泛解析：将所有子域名解析到同一地址）

![20190206135417.png][]

在博客的页面添加CNAME文件，并在里面记录自己域名的地址，将这个文件放在public文件夹下。这里还有一个小坑，CNAME文件经常被覆盖，导致我们重新部署博客后，链接就不可用了，可以将CNAME文件放在source文件夹下，这样就不会覆盖了。

## 配置主题 ##

### 下载 ###

在hexo目录下执行

git clone https://github.com/GeekMubai/hexo-casper.git themes/hexo-casper

### 激活 ###

把hexo配置文件 `_config.yml` 里的 `theme` 字段内容改为 `hexo-casper` 。

### 升级 ###

建议先备份一下在执行下面的操作。

cd themes/casper 
    git pull

添加统一的文章模板参数  
把下面的内容加入到 `scaffolds/post.md`,

cover_img:     # 在文章摘要上显示
    feature_img:   # 在文章详细页面上置顶
    description:   # 文章描述
    keywords:      # 关键字

### valine 评论系统 ###

使用方法请到他的官网查看，并结合下面的配置文件详细添加appID和appKey  
[https://valine.js.org/][https_valine.js.org]

### 添加关于页面 ###

hexo new page about

[http_nodejs.cn_download]: http://nodejs.cn/download/
[20190206115422.png]: /images/20220321/ea22e2d817d9401aad37ca1d3bc8b8f4.png
[20190206115616.png]: /images/20220321/2aaf2ce7f7214ec6aacd52c0d7f15dab.png
[https_git-scm.com_downloads]: https://git-scm.com/downloads
[20190206115834.png]: /images/20220321/2df66ca9722b45249913753088af255e.png
[20190206120050.png]: /images/20220321/d2bbfa47ba544b33a220abb8aa919444.png
[20190206125453.png]: /images/20220321/a40dcd30e1d743d4b2da0eb01f68e842.png
[20190206125821.png]: /images/20220321/c726a9bae4bc495e92627e5dc782f191.png
[https_hexo.io_zh-cn_docs]: https://hexo.io/zh-cn/docs/
[http_localhost_4000]: http://localhost:4000
[20190206130915.png]: /images/20220321/1ec25c914dcc4432aee11491f5954d61.png
[20190206131939.png]: /images/20220321/b609a446ae8d4d87a138699079d488c8.png
[error3.png]: /images/20220321/ff1b0e98da504d79bf394a34e421d67f.png
[20190206133426.png]: /images/20220321/c09fc4b69b59453cafe95e8cd41e6036.png
[20190206133454.png]: /images/20220321/936c0146d4334c48bc9871d5050abcc2.png
[20190206134153.png]: /images/20220321/b27e60177b5e452b88afe45929871265.png
[20190206134541.png]: /images/20220321/8a2ec41bddfe4ed9b366ae035a7148f3.png
[20190206134618.png]: /images/20220321/b69dcc252e92418daf8cd07a52fed06a.png
[20190206134925.png]: /images/20220321/fcb6fcd6c6734e228192b37d2c543b1e.png
[20190206135037.png]: /images/20220321/825420d5bce5426884140547ac38dc80.png
[blog.geekmubai.com]: https://blog.geekmubai.com
[www.aliyun.com]: http://xn--www-c88d89xfa359de88ane2a1q4b.aliyun.com
[aliyun.com]: http://aliyun.com
[mail.aliyun.com]: http://xn--mail-uh5fn22au1g78ix50at99e.aliyun.com
[abc.aliyun.com]: http://abc.aliyun.com
[m.aliyun.com]: http://m.aliyun.com
[20190206135417.png]: /images/20220321/2c90662aee96405ebaeb8a0aeefcf6aa.png
[https_valine.js.org]: https://valine.js.org/