使用GitHub Pages搭建个人博客

发表于 | 分类于
| 本文字数： 1.8k

本教程基于 Mac 系统，所用指令可能不适用其他平台！

使用 GitHub Pages + Hexo + NexT 快速搭建一个功能完善的个人博客。

准备工作

  • Git : 本地需要安装 git。
  • Github : 拥有账号，配置好 SSH keys，并了解基本操作，如：创建远程仓库等。
  • Node.js : Hero 和 NexT 是基于 Node.js 的，可以到Node.js官网下载，一路下一步即可。

初见成效：GitHub Pages + Hexo

安装 Hexo

Hexo官网教程

当 Node.js 和 Git 都安装好后 ，终端执行如下命令：

1
$ sudo npm install -g hexo

是不是卡住了，没反应？😁 这就对了，好好感受天朝爸爸对你的爱 🤣 。。。

可能 npm 没法使用，需要安装 cnpm ，这是淘宝的做的镜像。

1
2
3
4
5
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ sudo cnpm install -g hexo
# 查看版本
$ hexo -v

初始化 Hexo

创建一个文件夹（如 hexo），作为站点根目录，用于存放 Hexo 等配置文件。

1
2
3
4
$ cd hexo

$ hexo init
$ hexo install

以下为 Hexo 默认目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── README.md
├── _config.yml     # 站点配置文件
├── db.json			
├── .deploy         # hexo d 生成，部署到GitHub上的内容目录
├── node_modules	
├── package.json    # hexo参数和所依赖插件
├── public          # hexo g 生成，输出的静态网页内容目录
├── scaffolds       # layout模板文件目录，其中的md文件可以编辑
├── source          # 文章源码目录，该目录下的markdown可以被hexo解析
│   ├── _drafts     # 草稿文章，不会发布，可使用以下命令生成：hexo new draft "草稿名"
│   ├── _posts      # 发布文章
└── themes          # 主题文件目录

启动 Hero 服务器

可以缩写成 $ hexo s

1
$ hexo server

如果一起顺利，可以在 http://localhost:4000 看到启动页面。

这就是当前博客的面貌，使用的是 Hexo 的默认主题，只是还在本地。

将 Hexo 部署到 GitHub Pages

创建 GitHub Pages 仓库，即在 GitHub 上创建一个普通仓库，但是要符合以下命名规则： 用户名.github.io 。

该仓库地址为：https://github.com/用户名/用户名.github.io.git

修改 站点配置文件

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件 ， 后者称为 主题配置文件 。

1
2
3
$ cd hexo

$ vim _config.yml

修改 repository 仓库位置：

注意 : 号后面要加空格 。

1
2
3
4
deploy:
    type: git
    repository: https://github.com/用户名/用户名.github.io.git
    branch: master

生成网站静态页面

可以缩写成 $ hexo g

1
$ hexo generate
1
2
3
4
5
6
若出现如下报错：
ERROR Local hexo not found in ~/hexo
ERROR Try runing: 'npm install hexo --save'
则执行命令：
$ cnpm install hexo --save
若无报错，自行忽略此步骤。

把网站部署到 GitHub

可以缩写成 $ hexo d

1
$ hexo deploy
1
2
3
4
若报错：无法连接git或找不到git
则执行命令：
$ cnpm install hexo-deployer-git --save
若无报错，自行忽略此步骤。

如果一切顺利，一般需要等待3分钟，就可以在 https://用户名.github.io 看到和之前所见的博客页面了。

这表明你的博客网站已经发布成功，之前的仓库 用户名.github.io 也更新了，就是之前生成的静态网页， 不包含你的MarkDown源文件 。

安装主题 NexT

安装 NexT 能美化 Hexo ，而且其还提供了很多插件，完善博客功能。

细节请参考： NexT官网

下载主题

1
2
3
$ cd hexo
# 将 next 克隆到 hexo/themes/next 目录
git clone https://github.com/iissnan/hexo-theme-next themes/next

以下为 NexT 默认目录结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
├── .github            #git信息
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-Hans.yml      #简体中文
|   └── zh-tw.yml      #繁体中文
├── layout             #布局，根目录下的*.ejs文件是对主页，分页，存档等的控制
|   ├── _custom        #可以自己修改的模板，覆盖原有模板
|   |   ├── _header.swig    #头部样式
|   |   ├── _sidebar.swig   #侧边栏样式
|   ├── _macro        #可以自己修改的模板，覆盖原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial       #局部的布局
|   |   ├── head       #头部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主页面模板
|   ├── index.swig     #主页面模板
|   ├── page           #页面模板
|   └── tag.swig       #tag模板
├── scripts            #script源码
|   ├── tags           #tags的script源码
|   ├── marge.js       #页面模板
├── source             #源码
|   ├── css            #css源码
|   |   ├── _common    #*.styl基础css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字体
|   ├── images         #图片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

启动主题

修改 站点配置文件 ，修改 theme 字段。

1
theme: next

验证主题

启动 Hexo 本地站点，并开启调试模式，可以看到异常信息。

1
$ hexo s --debug

Blog 流程

Hexo 安装成功后，就可以发布博客了。发布流程如下：

可以不使用指令，直接 删除 和 新建 文件。

1
2
3
4
5
6
7
8
9
10
11
12
# 创建文章，会在 hexo/source/_posts 新建 md 文件
$ hexo new "文章名字"

# 清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo clean
# 生成缓存和静态文件
$ hexo g
# 启动 Hexo 本地站点，预览效果。
$ hexo s

# 重新部署到服务器，将文章发布到 GitHub
$ hexo d

站点文件管理

完成以上步骤后，还会存在以下问题：

  • 站点开发环境只存在本地，不利于随时管理站点。
  • 实际发布的是 md 被转变后的 html 文件，md 源文件没有被有效保管。

🤣喜大普奔， 2019.01.07 ，GitHub 已提供免费私有仓库，站点文件放到私有仓库就好！！！

创建分支管理

对于以上问题，可以在 GitHub Pages 仓库创建了一个分支，来保管站点环境，其也就包含了 md 源文件。具体操作 ，如下：

1
2
3
4
5
6
7
# 克隆 GitHub Pages 仓库
$ git clone  git@github.com:用户名/用户名.github.io.git
# 查看当前分支
$ git branch

# 创建 并 切换 到分支 config
$ git checkout -b config

清空文件夹(仅保留.git)，将 hexo 文件内所有文件 拷贝到 其中 。

因为 next 也是个 git 仓库，需要手动删除其 .git 目录，或者根据提示操作。

1
2
3
4
# 将 git 仓库变动保存，并 push 到 远程仓库分支 config
$ git add .
$ git commit -m "GitHub Pages 站点环境"
$ git push origin config

可以登录 GitHub，将 远程默认分支 切换为 config 。

实际上， master分支 存放的是站点的静态文件，其都是由 Hexo 自动生成的，所以 master分支 对我们而言没有太大意义，以后再也不用切换到 master分支 了。