这个博客是如何建立起来的

在博客问题上我可是折腾了很多回了,先是尝试了wordpress(来来回回很多次),不过wordpress使用起来,感觉还是太“重”,很多东西配置起来非常麻烦(包括主题设置,甚至是Markdown支持)。后来迁移到简书上面,被国家政策教做人(一篇关于Shadowsocks的文章被屏蔽了,有种吃苍蝇的感觉)。思前想后,还是自己host自己的博客好。最终我是选择了Hexo + Github的方案,好处如下:

  1. 对Markdown支持比较好
  2. 不需要自己折腾服务器
  3. 用Git管理非常方便

在这篇文章里,我整理一下整个博客的搭建过程。

1 1. Hexo Setup

Hexo是一款基于Node.js的静态博客框架,可以生成静态页面部署在Github和Heroku上面。Hexo的搭建过程如下:

  1. 申请域名
  2. 创建Github仓库
  3. 安装Hexo及其依赖
  4. 绑定域名

1.1 1.1 申请域名

虽然部署在Github上Github会提供一个免费的域名,但是如果有自己的独立域名的话,网站会更像"博客"一点。申请域名的地方有很多,我的域名是选用的阿里云的。传送门:阿里云-为了无法计算的价值

1.2 1.2 创建Github仓库

在Github中创建一个名字为username.github.io的仓库,注意这里的username需要替换为你自己的用户名。例如我的仓库名字为huangy10.github.io。 > 你可以尝试在这个仓库中添加一个名为index.html的文件,在其中接入hello world。然后访问http://username.github.io 就可以看到这个页面了。 > 不过注意尝试之后删除这个仓库重新创建。后面我们在部署Hexo的时候最好让这个仓库是空的。 >

1.3 1.3 安装Hexo及其依赖

1.3.1 1.3.1 安装Git,并配置好SSH秘钥

这里Github有全面的教程,传送门:https://try.github.io/

1.3.2 1.3.2 安装Node.js

Mac平台下面安装Node.js非常简单,可以通过Homebrew进行安装:

1
brew install node

如果没有安装Homebrew,可以在Terminal中输入下面这个命令快速安装: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成后可以通过node -v来验证安装是否成功,并查看安装版本。进一步通npm -v来检查npm也正确安装了。

1.3.3 1.3.3 安装Hexo

使用npm来安装Hexo:

1
npm install -g hexo-cli

完成安装以后,挑选一个合适的路径,然后运行

1
hexo init blog

这个命令会在当前文件夹中创建一个名为blog的文件夹。博客相关的文件都会存储在这个文件夹中。cd进入这个文件夹,然后运行

1
2
3
4
# 生成静态文件
hexo g
# 在本地运行一个测试服务器来伺服静态文件
hexo s

然后在浏览器中访问http://localhost:4000 就可以访问自己的网站了。

博客初始页面

我们来看一下Hexo博客项目下的目录结构:

Hexo目录结构

其中比较重要的是:

  • _config.yml是整个项目的配置文件,YAML格式
  • public是发布的静态文件内容。注意这个文件会在hexo g命令后重新生成,其中内容会被重置;
  • source是工程源文件,其中的_posts文件夹存储了博文的Markdown文件。其中的其他文件,则会在hexo g命令的作用下发布到public文件夹中;
  • themes存储了博客的主题。在各个主题自己内部也有自己的_config.yml文件,用来定制化模板的参数。

1.4 1.4 Hexo部署

我们选择将Hexo部署到Github上。打开博客项目根目录下的_config.yml文件,跳到最后,修改

1
2
3
4
deploy:
type: git
repo: git-repo-path(ssh方式,不要用https)
branch: master(不出意外就填写master)

保存退出。

然后我们需要安装一个git部署的工具:

1
npm install hexo-deployer-git --save

然后运行

1
2
3
hexo clean
hexo g
hexo d

三个命令,就可以逐步完成清理之前的生成,重新生成静态文件,将静态文件部署到Github上。全部完成后访问username.github.io 。就可以看到站点了。

2 2. Hexo Advanced

2.1 2.1 自定义域名

使用github提供的免费域名还是不够fancy,我还是希望使用自己的域名。首先进入域名管理后台,添加两条记录。分别是

  • yourdomain.com 添加一条A记录,指向username.github.io对应的ip地址。(这个ip地址可以通过ping命令看到)
  • www.yourdomain.com 添加一条CNAME记录,指向username.github.io

然后在本地博客工程中的public文件夹下,添加一个CNAME文件,文件中写入自定义的域名www.yourdomain.com。重新三连:

1
hexo clean; hexo g; hexo d

这是输入https://www.yourdomain.com就可以访问自己的网站了(可能需要等一段时间让dns刷新)

2.2 2.2 更换主题

自己搭建博客的乐趣之一就是各种更换主题。Hexo有自己的主题市场:Themes。我选择的主题是laughing。这个主题比较简洁,而且支持响应式布局。不过,这个主题支持的多说这个评论平台已经关闭了。其安装过程如下(其他的主题的安装方式大同小异):

首先安装主题依赖的pug模板引擎:

1
npm install hexo-renderer-pug --save

然后将主题文件夹下载到themes目录:

1
2
cd themes
git clone git@github.com:BoizZ/hexo-theme-laughing.git

最后修改博客项目根目录下的_config.yml文件:

1
theme: hexo-theme-laughing

主题的配置方式可以参考主题的Github文档。需要注意的是,文档中所说的_config.yml文件是指的主题文件夹中的配置文件,而非博客项目根目录下的配置文件。

2.3 2.3 插件

Hexo提供了很多插件来增强博客的功能。这个部分我也正在研究。这里我列出一下目前我安装了的插件:

  • hexo-addlink: 在文章末尾中添加本文的链接
  • hexo-generator-feed: 生成rss订阅
  • hexo-generator-sitemap: 生成站点地图