使用 Hexo 在 Github 上搭建个人站点

Hexo 提供了一种将 Markdown 编译为 HTML 静态文件的服务,并支持自定义样式和多种插件。Github Pages 提供了静态文件 Web 服务能力。综合使用 Hexo 和 Github,可以搭建个人站点。

采用这种方式搭建个人站点,非常适合于 IT 技术人员。

  • 使用 Markdown 编写文章
  • 无需过多关注网站搭建和维护
  • 可以与 Github 项目紧密配合

安装部署

安装 Git

访问 Git 官网,下载安装包,并进行安装。安装完成后,执行如下命令进行验证。

1
$ git -v

注意:在 Windows 环境下,需要将 [INSTALLED_DIR][INSTALLED_DIR]/bin[INSTALLED_DIR]/mingw64/libexec/git-core 等目录配置到 PATH 系统环境变量中。

安装 NodeJS

访问 NodeJS 官网,下载 LTS 版本的安装包,并进行安装。安装完成后,执行如下命令进行验证。

1
2
$ node -v
$ npm -v

安装 Hexo

执行如下命令,执行 Hexo 工具。

1
$ npm install -g hexo-cli

安装 Hexo 工具后,执行如下命令,创建 Hexo 工程目录(本文的工程目录命名为“GitBlog”),并初始化文件目录和安装依赖包。

1
2
3
$ hexo init GitBlog
$ cd GitBlog
$ npm install

编辑 GitBlog 目录中的 _config.yml 配置文件,修改 Hexo 工程的各项参数。更多配置内容,请参考 Hexo

配置 Hexo 主题

在 GitBlog 目录中,执行如下命令,安装 NexT 主题。

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

编辑 GitBlog 目录中的 _config.yml 配置文件,使 Hexo 工程使用 NexT 主题。

1
theme: next

更多配置内容,请参考 NexT Theme

本地测试

Hexo 提供了本地测试工具,执行如下命令启动本地预览服务器,默认端口为 4000。

1
$ hexo server

更多信息: Server

生成静态文件

Hexo 发布前,需要将 Markdown 文件生成为 HTML/CSS/JS 静态文件。

1
$ hexo generate

更多信息: Generating

创建 Github Pages 仓库

登录 Github 网站,创建名称为 {username}.github.io 的仓库。其中,{username} 替换为用户名(非 Email 地址)。

部署到 Github Pages 站点

执行如下命令,安装 Hexo 部署插件。

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

编辑 GitBlog 目录中的 _config.yml 配置文件,使 Hexo 工程使用 NexT 主题。其中,{username} 替换为用户名(非 Email 地址),{password} 替换为密码。

1
2
3
deploy:
type: git
repo: https://{username}:{passwor}@github.com/{username}/{username}.github.io.git

修改完配置文件后,执行如下命令,将 Hexo 工程部署到 Github Pages 仓库。

1
$ hexo deploy

更多信息: Deployment

绑定域名

  • 执行 nslookup github.io 命令,获得 Github Pages 网站的 IP 地址。
  • 在域名服务商(如:阿里云万网)编辑域名解析记录。添加 A 记录,指向这个 IP 地址。
  • 登录 Github 网站,进入“{username}.github.io”项目的“Settings(设置)”页面,在“Custom domain”部分填写个人域名,并保存。
  • 约10分钟后,访问个人域名,测试是否生效。

编辑发布

创建新文章

执行如下命令,创建新的文章文件,保存在 source/_posts 目录中。

1
$ hexo new "Hello World"

编辑 Markdown 文件

使用任意文本文件,编辑相应的 Markdown 文件,完成文章的编写。推荐使用 HexoEditor

发布文章

执行如下命令,生成静态文件,并部署到 Github 仓库。

1
2
$ hexo g
$ hexo d