搭建 Github 个人博客(二)：配合使用 hexo 开发博客

发表于 | 分类于

在《搭建 Github 个人博客(一)：搭建博客基础页面》中我们讲了怎么去搭建一个 GitHub 博客的基础页面。实际上，基础页面搭建完成之后，我们就已经可以通过 Github Pages 直接写 HTML 静态博客了。

但是尝试之后我们会发现，这种博客使用起来相当麻烦。页面不够好看，操作又不方便，后期维护起来又很繁杂。所以，我们需要借用一些静态博客框架来辅助我们开发 github 博客。

现在比较流行的静态博客框架也比较多，不同的静态程序可以说都有各自的好处。这篇文章我们主要讲的是使用HEXO这个框架来搭建 GitHub 个人博客。

运行环境准备

hexo 是一款基于 Node.js 的静态博客框架，所以我们需要安装 Node.js。

  • Node.js（下载最新版的Node.js）
  • Git
  • 文本编辑器（用于修改配置文件以及写文章）

安装hexo

当 Node.js 和 Git 都安装好了之后，就可以正式安装 hexo 了。

（1）打开命令行工具（Mac：终端 Terminal / windows：CMD） ，执行以下命令：

1
sudo npm install -g hexo

注意：Hexo 官网上的安装命令是 npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。

  • 选装 cnpm

因为 npm 安装插件是从国外服务器下载，受网络影响大，可能出现异常。所以我们可以利用淘宝提供的国内镜像。

命令行执行以下代码：

1
npm --registry=https://registry.npm.taobao.org install -g cnpm

安装完后最好通过 cnpm -v 命令查看其版本号，或关闭终端重新打开。安装完直接使用有可能会出现错误。

cnpm 跟 npm 用法完全一致，只是在执行命令时将 npm 改为 cnpm（如果使用了淘宝镜像，后面操作将以 cnpm 代替 npm）

（2）输入管理员密码即开始安装

（3）新建一个文件夹，例如 blog。用来存放自己博客相关的文件。

（4）在终端里通过 cd 命令进入到 blog 文件夹。

（5）确定进入到 blog 文件夹之后，执行以下命令，对 blog 文件夹进行初始化。

1
hexo init

（6）初始化完成之后，执行以下命令，安装所有的依赖和插件。

1
npm install

（7）安装完成后，执行以下命令，开启 hexo 本地服务器。

1
hexo sever		或简写 hexo s

当看到以下命令出现，就表示服务器启动成功。

然后就可以在浏览器中打开http://localhost:4000来查看博客了。

至此，我们的 hexo 静态博客框架安装就完成了。

关联 github

现阶段，我们只是在本地搭建好了博客页面，其他人是无法访问的。所以，本地安装完成之后，接下来我们需要关联 github。

（1）用编辑器打开 blog 文件夹里面的一个 _config.yml 的文件。将文件末尾修改为以下内容：

注：runjaelyn 改为你自己 github 的用户名

1
2
3
4
deploy: 
  type: git
  repo: https://github.com/runjaelyn/runjaelyn.github.io.git
  branch: master

注意：在配置所有的 _config.yml 文件时（包括后面会用到的主题 theme 文件夹中的），所有的冒号 : 后边都要加一个空格，否则执行 hexo 命令会报错。

（2）修改完成并保存。然后通过 cd 命令进入到 blog 文件夹目录，在命令行执行生成静态页面的命令：

1
hexo generate		或简写 hexo g

  • 此时若出现如下报错：

    1
    2
    ERROR Local hexo not found in ~/blog
    ERROR Try runing: 'npm install hexo --save'

  • 则执行命令：

    1
    npm install hexo --save
  • 若无报错，自行忽略此步骤。

（3）静态页面生成成功之后，执行配置命令 deploy，部署网站。（以后每次部署网站前，都需要预先生成静态文件）

1
hexo deploy		或简写 hexo d

（4）部署网站执行成功后，会显示类似于下列的命令。

但是，也有可能会出现几种报错的情况：

1. 无法连接 Git 或找不到 Git。

则执行如下命令来安装 hexo-deployer-git。

1
npm install hexo-deployer-git --save

2. 没有配置用户名和密码。

若在本机上是第一次使用 Git，那么 Git 会要求配置的是你个人的用户名称和电子邮件地址。

这两条配置很重要，每次 Git 提交时都会引用这两条信息，用来说明是谁提交了更新。所以，需要则执行以下命令：

1
2
git config --global user.name "name"
git config --global user.email "name@example.com"

上面""里的内容填写自己的名字和邮箱就可以了。

3. 未关联 GitHub。

若你未关联 Github，那么在执行 hexo deploy 命令时终端会提示你输入Github 的用户名和密码，即

依次输入你自己的 github 账号和密码就可以了。

（5）以上报错问题解决好了之后，重新执行配置命令 deploy，部署网站。

1
hexo deploy		或简写 hexo d

（6）显示成功之后，打开浏览器，输入你自己的 GitHub 地址。

runjaelyn 改为你自己的用户名。

至此，我们刚刚在本地搭建的博客页面，现在就已经关联到了 github 上，其他人可以通过你的 Github 博客地址访问你的博客了。

发表新文章

博客搭建好了之后，我们就可以开始往博客里添加我们的博客内容了。

（1）通过 cd 进入到 blog 文件夹，执行以下命令：

1
hexo new "文章标题"

创建成功后会有如下提示：

创建成功后，打开 blog 文件夹里的 source／_posts ，就可以看到我们刚刚通过 hexo new 出来的文章 .md 文件。

然后我们就可以添加我们的文章内容了（内容遵循 Markdown 的语法规则）。

（2）文章编辑好保存后，执行如下命令，重新生成并部署：

1
2
3
hexo clean 
hexo g 
hexo d

（3）成功后刷新博客就可以看到新文章已经显示在页面了。

到此为止，我们的博客就搭建完成了。

如果觉得 hexo 默认主题样式不好看的话，还可以自己去网上找其他主题，更换主题模式。

以后，我们就都可以通过 hexo 来管理操作我们的博客了。

我 秦始皇 打钱