您现在所看到的这个博客即是使用 GitHub + Hexo 搭建的, 本文介绍如何使用 GitHub + Hexo 搭建个人博客.

先做几个名词解释:

  • Git : 目前流行的的分布式版本控制系统, 由 Linux 之父 Linus 开发.

  • GitHub : 知名的 Git 仓库, 世界各地的程序猿(媛)可以将自己编写的代码分享到 GitHub 以供别人下载使用, 当然 GitHub 上也有很多优秀的项目可供我们下载研究或使用, 总之, GitHub 对于程序猿(媛)而言是一个非常不错的资源. 国内用户访问 GitHub 往往较慢, 有时甚至无法连接, 可以使用国内的 Git 托管服务: 码云.

  • Hexo : 一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。关于 Hexo的详细介绍及使用方法参见Hexo 官方网站

  • Markdown : 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML/HTML文档. (摘自维基百科)

搭建流程

  • 安装 Git
  • 安装 Nodejs
  • 安装 Hexo
  • 创建 GitHub 个人仓库
  • 生成 SSH密钥并添加到 GitHub
  • 使用 Hexo 创建网站
  • 使用 Markdown 语法编写文章
  • 使用 Hexo 将 Markdown 语法编写的文章转换成静态网站
  • 使用 Hexo 将网站发布到 GitHub

安装 Git

Git 工具用于本地电脑与 GitHub 进行文件同步, 安装方法如下:

Mac 环境下顺道安装一下 xcode-select , xcode 安装好后终端下执行如下代码即可

xcode-select –install

安装 Node.js

Hexo 是基于 Node.js 编写的, 所以需要安装一下 Node.js 及其 npm工具.

Node.js 可使用直接下载 安装程序 来安装. 选择一个 LTS 版本安装, Hexo 需要 Node.js 为 6.9 或更高版本.

当然, Node.js 绝非只是为 Hexo 而生, 它还有很多大用途. 建议自学一下 Node.js

创建 GitHub 个人仓库

登录到 GitHub , 若没有 GitHub 账号自行注册一个即可. 登录GitHub 后创建一个新仓库, 仓库名应为: 用户名.github.io , 例如本网站创建的仓库名为: baileykm.github.io

仓库名必须按上述要求命名. 用户名即为 GitHub 账号名, 因此您只能在 Github 上创建一个个人网站

生成 SSH密钥并添加到 GitHub

这里我们需要生成 SSH 密钥并添加到 GitHub 它才能允许你从远程通过工具访问 GitHub 中的仓库.

Windows 环境打开git bash, Mac 打开终端, 执行如下命令:

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱.

可以用以下两条，检查一下你有没有输对

1
2
git config user.name
git config user.email

然后创建SSH

1
ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh 的文件夹, 在你的电脑中找到这个文件夹. 而后在 GitHub 的 Setting 中，找到SSH keys 的设置选项，点击 New SSH key, 把你的id_rsa.pub里面的信息复制进去。

SSH，简单来讲，就是一个密钥，其中，id_rsa 是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub 是公共秘钥，可以随便给别人看。把公钥放在 GitHub 上，这样当你链接 GitHub 自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到 GitHub 上。

安装 Hexo

安装 Hexo 前，您必须检查电脑中是否已安装下列应用程序：

完成上述两个必要程序的安装后, 执行如下命令即可完成 Hexo 的安装:

1
$ npm install -g hexo-cli

Mac 下可能由于权限问题提示安装失败, 可执行

sudo npm install -g hexo-cli –unsafe-perm

使用 Hexo 创建个人网站并发布到 GitHub

初始化

完成 Hexo 安装后, 在任意位置创建一个文件夹(名称随意), 在命令行下进入所创建的文件夹, 执行如下命令, Hexo 将创建网站所需的文件及子文件夹:

1
2
$ hexo init
$ npm install

配置参数

修改根目录中的 _config.yml 文件, 可更改大部分的网站配置.

注意对_config.yml 文件中的如下部分进行配置:

其他配置可参见 https://hexo.io/zh-cn/docs/configuration

撰写博文

执行如下命令将会在 source/_posts 文件夹下创建 一个新的 Markdown 文件 (.md), 文件名默认为命令中指定的 "文章标题". 编辑此新生成的 Markdown 文件以撰写你的博文.

1
$ hexo new "文章标题"

  • 本文不涉及 Markdown 语法的介绍, 如有必须请查阅其他资料. 网上有大量介绍 Markdown 的文章, Markdown 语法本身并不复杂, 找个教程看看, 跟着实践一下很快就可上手.

  • 很多 IDE 自带 Markdown 编辑功能, 如: IntelliJ IDEA, VSCode 等, 也有很多专门的 Markdown 编辑工具. 有工具的助力, 撰写博文可能更方便和直观.

预览

执行 hexo server 将在本地启动个人网站 (默认使用 4000 端口), 你可以打开浏览器访问 http://localhost:4000 以预览网站效果. 如果不满意, 修改 Markdown 文件后重新预览即可.

生成静态网站

执行 hexo generate 或 hexo g 将在 public 文件夹中生成静态的个人网站

将静态网站发布到 GitHub

执行hexo deploy 或 hexo d 即可将生成的静态网站发布到 GitHub. 发布过程中会要求输入 GitHub 用户名和密码.

后记

Hexo 支持丰富的配置、 插件与主题, 本文由于篇幅所限未作详细介绍. 如果希望把你的个人博客建得更漂亮而富有个性, 建议浏览Hexo 官方网站 中文/英文.

网上不乏关于如何使用 GitHub + Hexo 搭建个人博客的优秀教程, 本人之所以重复”造轮子”, 写这篇博文主要是为了将自己的搭建过程记录下来, 算是做个笔记. 人老了就是这样, 过几天自己做过的事情都忘记了~

本博客中对 Hexo 的源码做了少量修改, 添加了一些小功能, 诸如: 全文搜索, 文章侧边的自动伸缩目录, Google Analytics …

本想记在这里, 无奈人真的老了, 竟然忘记当初是怎么搞的了, 算了, 反正也没人看, 就此作罢吧 !