GitHub Pages 准备

GitHub Pages Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
You get one site per GitHub account and organization, and unlimited project sites. Let‘s get started.

  • 注册 GitHub 账户
  • 登录 GitHub
  • 配置 SSH 方式登录信息
  • 创建一个名为 username.github.io 的仓库

Hexo 环境准备

安装 Node.js

安装过程略。

安装 Git

安装过程略。

安装 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

1
2
3
4
5
6
$ npm install hexo-cli -g
$ hexo init dirname
$ cd dirname
$ npm install
$ hexo generate # 或 hexo g
$ hexo server   # 或 hexo s

Mac 用户注意，npm 全局安装需要添加 sudo。
npm 安装失败时，可尝试 cnpm。

打开 http://localhost:4000/，可预览 blog 效果。

Hexo 更换主题

Hexo 目录下的 _config.yml 为项目配置文件，其中 theme 属性用于指定采用的主题。
Hexo 目录下 themes 文件夹中保存可替换的主题，默认提供了 landscape 主题。
在 Hexo 主题 页面可以预览并挑选喜欢的主题。点击后，找到对应主题所在的代码仓库。
以 NexT 为例，找到所在目录 https://github.com/theme-next/hexo-theme-next, clone 最新的代码至 themes 目录下，或者下载稳定版本的源码包，手动解压到 themes 目录下。将文件夹名称更名为 next，再将 _config.yml 中的 themes 属性修改为 next，重启 hexo，预览可以发现主题已经替换。

替换主题时，可采用 hexo clean 命令清除缓存。

Hexo 发布文章

Hexo 新建与编辑文章

1
$ hexo new [layout] <title>

可以在命令中指定文章的布局 layout，默认为 post，储存到 source/_posts 文件夹中。
直接编辑 source/_posts/title.md，按 markdown 语法编辑文章。也可采用 Hexo 标签来丰富文章内容。

Hexo 部署至 GitHub Pages

安装 hexo-deployer-git。

1
$ npm install hexo-deployer-git --save

修改 _config.yml 中的配置。

1
2
3
4
5
deploy:
  type: git
  repo: <repository url> #git@github.com:username/username.github.io.git
  branch: [branch]       #master
  message: [message]     #自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

配置完成后运行一下命令。

1
$ hexo deploy # 或 hexo d

将会自动编译并上传至 GitHub。
打开 https://{username}.github.io 预览 Blog 效果。