GitHub Pages 搭建博客

发表于

简介

如果只是搭建简单的个人博客，Github Pages 绝对是值得尝试的方案，它提供了静态网站代码的托管服务。

而 Hexo 或 Jekyll 这类静态博客生成工具，可以生成静态代码。

借助以上工具，作者只需要专注于写作，其他工作由它们完成。

笔者采用了 Hexo，结合 NexT 主题搭建了此博客。

GitHub 配置

新建 repository，名称为 username.github.io，这也是最终的博客网址，其中 username 必须为 GitHub 上的用户名。

如果已有静态网站代码，可以 clone repository 后，将代码复制到相应目录下，再 push 到 GitHub 上。

1
2
# 克隆 repository 来本地
git clone https://github.com/<username>/<username>.github.io

Hexo

安装 Hexo

安装前需要确保已安装 Git 和 Node.js
Mac 自带 Git，直接跳过，笔者使用 Homebrew 安装 Node:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 安装 Node
brew install node
# 安装 hexo
npm install -g hexo-cli
# 成功会有以下提示
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo

> fsevents@1.2.4 install /usr/local/lib/node_modules/hexo-cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ hexo-cli@1.1.0
added 171 packages from 369 contributors in 29.855s

新建项目

1
2
3
4
# folder 为项目目录名
hexo init <folder> 
cd <folder>
npm install

调用 hexo server 或 hexo s --debug(调试模式) 后，可以通过 http://localhost:4000/ 访问本地博客。

NexT 主题

安装前，需要创建 Hexo 项目，然后复制 NexT 到项目目录下：

1
2
cd <hexo site folder>
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改 _config.yml 中的 theme 字段，将其值改为 next。
这样，NexT 主题安装完成。接下来验证主题是否正确启用。
注意：切换主题后，最好使用 hexo clean 来清除缓存。

1
2
3
4
5
hexo clean
# 调试模式启动 Hexo 本地站点，会显示异常信息
hexo s --debug
# 显示以下信息，即为正常
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

NexT 相关配置在 themes/next/_config.yml 中。

有多种 Scheme，可根据个人喜欢修改：

1
2
3
4
5
# Schemes
# scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

其他详细设置请参考 开始使用 NexT。

写作

通过 hexo new 来新建一篇文章：

1
2
hexo new [layout] <title> # <title> 不需要后缀名
# 如  hexo new GitHub_Pages_搭建博客

可指定文章的布局（layout），默认为 post，通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

详细参考 Hexo 写作

写完后，生成静态文件

1
hexo generate

部署

生成的静态文件在 public 目录下，可以复制到任何地方。
也可以通过 配置，自动部署到常见平台。

自动部署到 GitHub Pages

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

修改配置

1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

一键部署

1
hexo deploy

参考资料

Github Pages
开始使用 NexT