Github Page + Hexo + Next 搭建个人博客

发表于 | 更新于 | 分类于 | 阅读次数：

介绍

Github Page：是 Github 提供的一种免费的静态网页托管服务，可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 等编译静态资源。

Hexo：是基于 Node.js 驱动的一款快速、简洁且高效的博客框架，有多个 主题 可选。通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。

Next：是一款高质量的 Hexo 主题。

搭建流程

安装 Node.js

下载地址

注意：在安装时，勾选 Add to PATH 选项

安装 Git

下载地址

1
2
3
$ git version
$ node -v
$ npm -v

安装 Hexo

1
2
3
4
$ npm install -g hexo-cli
$ hexo init blog
$ cd blog
$ npm install

文件夹目录说明：

1
2
3
4
5
6
7
8
.
├── _config.yml            # 站点配置文件 
├── package.json
├── scaffolds              # 模版文件夹
├── source                 # 资源文件夹
|   ├── _drafts            # 草稿文件
|   └── _posts             # *.md文件 
└── themes                 # 主题文件夹

如果上面的命令都没报错的话，运行 hexo s 命令，在浏览器中输入 http://localhost:4000 可以看到 Hello World，说明安装成功了。

1
$ hexo s

hexo 命令说明：

1
2
3
4
5
6
7
8
$ hexo generate            # 生成静态文件至public目录
$ hexo deploy              # 将.deploy目录部署到github
$ hexo new "postName"      # 新建文章
$ hexo new page "pageName" # 新建页面
$ hexo server              # 启动服务
$ hexo clean               # 清除部署緩存
$ hexo g -d                # 生成加部署
$ hexo g -s                # 生成加预览

设置主题 Next

站点配置文件：E:\Rao's Blog\hexo\_config.yml

主题配置文件：E:\Rao's Blog\hexo\themes\next\_config.yml

安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。

1
2
$ cd hexo
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

当下载完成后，打开站点配置文件， 找到 theme 字段，并将其值更改为 next。

1
theme: next

最好使用 hexo clean 来清除 Hexo 的缓存，然后即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

至此，你本地的博客就已经搭建成功，也可以对主题进行个性化设定，接下来就是部署到 Github Page 了。

设置 Github Page

首先如果你还没有 Github 账号的先注册 一个，点击 Start project 或者下面的 new repository 创建一个新的仓库 blog，GitHub Pages 选择 master 分支，出现地址 https://huiraoo.github.io/blog/ 就是你的个人博客。

部署到 Github

1
2
3
4
5
6
# 配置SSH key
cat ~/.ssh/id_rsa.pub
git config --global user.name "用户名"
git config --global user.email "邮箱地址"
ssh-keygen -t rsa -C '上面的邮箱'
ssh -T git@github.com

修改站点配置文件，把仓库的 git 地址添加进去就行了

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:huiraoo/blog.git
  branch: master

执行部署命令

1
2
$ hexo clean
$ hexo g -d

配置图床

阿里云OSS

配置搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 下载插件
cd /Users/raohui/Blog/hexo
npm install hexo-generator-searchdb --save

# 站点配置
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
# 主题配置
local_search:
  enable: true

FA&Q

问题描述：Hexo 主题无法加载到 Github Page，访问 https://huiraoo.github.io/blog 显示乱码

解决办法：修改站点配置文件，填写 url 和 root

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://huiraoo.github.io/blog
root: /blog/
permalink: :year/:month/:day/:title/
permalink_defaults: