使用 Hexo 生成静态博客过程记录

最近刚用 Hexo 和 GitHub 搭好了一个个人博客,现在准备记录下这个过程。这个搭建的过程应该分为两部分,一是学会使用 Hexo 生成静态博客页面,二是申请 GitHub Pages 托管网站,本篇文章是讲的第一步。(下一篇请戳 使用 Travis 自动构建 Hexo 到 GitHub

此类教程网上有不少,这里也列几个:

用 GitHub + Hexo 建立你的第一个博客 - Crossin

HEXO搭建个人博客 - 潘柏信

hexo你的博客 - 不如

先说说我的理解

Hexo (类似) 是一种博客框架,像 WordPress 一样,这个框架里通常包含了 主页博主信息博文分类标签主题样式,每个都有固定格式。

Hexo 是帮助我们 通过原始素材渲染出带有主题样式的静态页面。(我把根据博文 Markdown 生成出带 CSS HTML 代码 的过程称为渲染)

渲染时最重要的部分是:主题配置素材(文章、图片、音视频等),三者确定一个渲染的结果。

由于这类框架的控制,规定素材(主要是文章)具有的格式(比如开头 YAML、正文 Markdown,比如都是博主博文标签这一套),因此当渲染主题都按规则设计解析的时候,各种主题之间就可以 随意更换,因为都符合规则,都能被渲染,不同的地方只需要修改 主题配置 就好。

由上再简单总结下:

  • Hexo 框架制定了一套博文渲染规则
  • 用户根据简单的写博文规则来写自己的文章
  • 主题开发者更具负责的框架渲染规则开发主题样式文件
  • Hexo 解析文章、配置、主题,渲染出静态页面
  • 把渲染的结果发布到服务器【注意:发布的只有生成的页面,Hexo 工程和配置及原文 MD 都不会上传】

所以,使用 Hexo 的步骤也明确了。

  1. 在本地安装 Hexo 框架
  2. 本地找一个目录来放博客工程,用 Hexo 初始化项目文件夹
  3. 下载喜欢的主题来更换
  4. 设置站点配置、主题配置
  5. 新建 Hexo 博文
  6. 用 Markdown 写博文内容
  7. 执行 Hexo 渲染生成静态页面文件
  8. 本地开启服务器预览 | 部署到远程服务器

具体操作过程

Hexo 安装

这里有几篇详细的教程,我搭建这个博客时就是按他们讲的一步步来的,现在把他们列出来,再写自己的总结:

Hexo 是用 Nodejs 写的,所以你首先要安装 Nodejs 和 npm,本文使用 Ubuntu 14.04 的环境

1
2
sudo apt-get install nodejs
sudo apt-get install npm

接着使用 npm 安装 hexo,再次之前,确保电脑上有 git,因为安装过程中会调用 git。

1
2
sudo npm install -g hexo
sudo npm install -g hexo-cli

npm 的 -g 参数表示全局安装。

这里安了两个,有一个带 cli 的后缀,我也没明白是为什么,反正我是两个都装了才用的。

Hexo 的命令可以先看这里

建立准备放 hexo 博客目录,并进入到该目录下。

执行 hexo init 初始化当前目录,也可以为 init 指定一个目录,没有指定就是默认当前目录:

1
2
cd blog_dir
hexo init

hexo 会在当前目录下载一系列资源文件并且安装依赖包,最后形成的目录已经是一个完整的博客工程了,带了默认主题,只是没有博文,可以直接被完整渲染。

现在初始化玩了我们可以执行渲染生成:

1
2
hexo generate  # 执行生成
hexo g # 生成的缩写

generate 可以缩写成 g,hexo 很有意思,大部分命令都可以缩写为命令首字母。

生成之后可以通过 hexo 自带的服务器本地 localhost:4000 预览查看:

1
2
hexo server  # 启动本地服务器
hexo s # 缩写

这时候可以访问本地的 4000 端口访问生成的界面。

整个操作看起来就几行代码,确实相当简单,后面的就是配置参数和部署了。

配置

Hexo 的配置文件分两部分,站点配置主题配置。站点配置文件在 hexo 博客根目录下的 _config.yml 文件中,主题配置文件在根目录下的 themes/<主题名> 文件夹下的 _config.yml 中。以下就用站点配置和主题配置做说明。

部署 (配置部分)

部署的过程涉及到 GitHub Pages 的申请等过程,因此会另起一张,这里只先讲部署中需要涉及到的 Hexo 站点配置文件部分。

在站点配置文件中 deploy 标签下,添加对 git 的支持,选择仓库和分支,这里注意的是,hexo 3.0 之后的 deploy: type: 应该是 git 而不是 github,并且需安装 hexo-deployer-git 插件。

1
2
3
4
5
# hexo _config.yml
deploy:
type: git
repository: [email protected]:<user_name>/<user_name>.github.io.git
branch: master

之后配置好 GitHub Pages 的话,就使用 hexo 部署上去。

1
2
hexo deploy
hexo d

主站配置

主站配置文件在 hexo 官网文档 上写的很详细,这篇博文 hexo博客的配置、使用 - Zippera 讲配置都有中文注释,参照着配很方便。

主站配置文件主要要配置的是 标题描述作者语言站点主题写作部署 等,每人各有不同,根据文档配置就行了。主题配置的名字和放在 themes 文件夹中的主题名字要一样。

主题配置

主题配置文件 一般在各主题开发者的官网或者博客上都有介绍,并且大部分不同的主题需要的配置都相似,我使用的是 icarus 的主题,跟着开发者的说明就好了。主要是 菜单logofavicon链接插件 等等,主要是要看主题支持什么什么插件,没有的就要自己写了。

Share Comments

跨过长城,阅读评论。「请确保 disqus 能正常加载」