自学 Hexo 搭建 GitHub 免费 Blog

Posted on   |   In   |  

尝试使用 Hexo，边摸索边记录。在 Ubuntu 16.04 里面，需要先安装 Git 和 Node.js 环境。 安装完 Hexo 后，开始进行摸索，比如增加数学公式的支持，还有定制等方面的工作，这些工作将留给下一篇博文，Hexo Blog 网站初步定制。

准备工作

本文假设本地操作系统为 Ubuntu 16.04 版本，工作目录为 /2T/smb/git 。此外，已经注册了 GitHub 户头，这里假设用户名为 maxchendt . 开通博客需要先开启 maxchendt.github.io 站点，安装 Hexo 需要本地系统有 Git 和 Node.js, Git 的安装比较简单，Node.js 需要参考其网站的说明。

开通博客站点

登录 GitHub，在主页右下角点击 New repository , 新建的 repository 名字必须是 用户名.github.io，例如本文的 maxchendt.github.io 。创建时选择 ‘Initialize this repository with a README’，以便浏览 github maxchendt.github.io 时能看到说明 (即 README.md 文件的内容，以后进一步修改充实)。此时浏览 https://maxchendt.github.io 将出现 404，因为还没有内容。

安装 Git

使用 Ubuntu 的安装软件包命令

sudo apt install git

ooNoIndent00跟随 https://pages.github.com 的提示，我先让 https://maxchendt.github.io 活起来 

1
2
3
4
5
#cd /2T/smb/git	#请确认工作目录
git clone https://github.com/maxchendt/maxchendt.github.io
cd maxchendt.github.io/
echo "建设中..." > index.html
git add --all

ooNoIndent00此时需要用如下命令设置 GitHub 户头用户名以及使用的 email 

1
2
git config --global user.name "maxchendt"
git config --global user.email "maxchendt@ho.me"

然后推送 

1
2
git commit -m "Initial commit"
git push -u origin master

ooNoIndent00浏览器就可以浏览 https://maxchendt.github.io/ 网站了。页面显示结果为 “建设中…”(无双引号)。此时浏览 github maxchendt.github.io， 便能看到刚上传的 index.html 文件。

安装 Node.js

参见 https://github.com/nodesource/distributions#deb ，安装命令为 

1
2
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

ooNoIndent00将安装 Node.js 的 4.x 序列， 也就是 https://nodejs.org/en/ 推荐给大多数用户的 v4.5.0 LTS (Recommended For Most Users).

Hexo 安装与使用

我是从 https://hexo.io/zh-cn/docs/ 开始的：“Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。” 想要快速地学会 Hexo 让她动起来，建议直接上 https://github.com/hexojs/hexo 速成。

安装 Hexo

有了Git 和 Node.js，现在可以安装 Hexo 了。

sudo npm install -g hexo-cli

ooNoIndent00就这么简单，没有什么高难度的东西。

启用 Hexo

使用 Hexo 来创建博客，先初始化网站架构 (本地) 

1
2
3
#cd /2T/smb/git	#请确认工作目录
hexo init ./hexo
cd hexo/

ooNoIndent00Hexo 在当前目录创建子目录 hexo (往下称为 /hexo-dir, 指代 /2T/smb/git/hexo 目录)，里面是基本的网站架构，包含了大量的文件和子目录（主题，配置文件和模块等，参见 https://hexo.io/zh-cn/docs/setup.html ）。实际上，一个网站已经成型了：要浏览的话，使用如下命令

hexo server -p 4400

ooNoIndent00浏览 http://localhost:4400/ 就看到了！这里我使用端口 4400 (-p 4400)，因为端口 4000 被其他程序占用。

准备开博啦

参考 https://hexo.io/zh-cn/docs/configuration.html 进行配置。我只修改了 /hexo-dir/_config.yml 里面很少的配置 (title author url permalink 等, 其中的 language: default 临时解决不设置language导致缺省语言错误)

# Site
title: 灯塔 · 随记随想
author: CHEN Deng-Ta
language: default
# URL
url: https://maxchendt.github.io/
permalink: Blog/:year:month:day:title.html

好了，我们开始创建第一份博文：

hexo new  instHexo

ooNoIndent00Hexo 将在 /hexo-dir/source/_posts 目录下创建 instHexo.md 文件 (Markdown 轻量级标记语言)，然后可以使用 Remarkable 进行编辑，有关该软件，稍后再进行介绍。当然，如果您迫不及待，可以先看下这个不到三分钟的视频：https://youtu.be/UpjAIcXti9s 。本地查看博客的效果

hexo g; hexo s -p 4400

ooNoIndent00浏览 http://localhost:4400/ ， 是的，不小的成就！修改满意就可以发布了。发布博客，不建议使用 hexo deploy -g 方式，该方式有如下麻烦

  1. 需要先安装模块， npm install hexo-deployer-git --save
  2. 需要在 GitHub 先导入 ssh key, 参考 Add SSH key
  3. 让我不能忍受的，会把我的 maxchendt.github.io 清空，包括原始创立的 README.md 文件。而且，每次更新时，不是差分更新，而是先清空，再上传全部(也许是我不懂得设置)。

因此，我决定采用 git 方式，采用如下 deploy.sh 脚本 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#!/bin/bash
hexo_dir="/2T/smb/git/hexo"
ghID=maxchendt
cd $hexo_dir
rm -rf public db.json
hexo generate
cd ..
rm -rf $ghID.github.io
git clone https://github.com/$ghID/$ghID.github.io
cp -R $hexo_dir/public/* $ghID.github.io/
cd $ghID.github.io
git add --all
git commit -m "$1"
git push -u origin master

ooNoIndent00该脚本使用方法如下

./deploy.sh "change only one md"

ooNoIndent00其中参数 “change only one md” 将显示在 GitHub 的 commits 中。该参数给出每次 commit 的简要描述，内容根据当时的情况修改。浏览 https://maxchendt.github.io , 第一份博文成功！

提醒：如果您想使用该脚本，下载 deploy.sh 后 (chmod +x deploy.sh)，只需要修改其中的 hexo_dir 为您本地的 /hexo-dir, 以及 ghID 为您的 GitHub 的用户名即可。

初识 Markdown

写博客使用的是 Markdown 这种轻量级的标记语言， 相对与 html 来说，轻量级标记语言如 Markdown 是对人友好的标记语言，即使第一次接触，也可以毫无障碍地理解其中的内容。

  1. Markdown Example 给出了简单的对比例子
  2. 这个 Remarkable demo live 也建议参考一下
  3. 我在这个网站练习了一下，十分钟学习Markdown

编辑器

我推荐使用的 Markdown 文件编辑器是 Remarkable ， 尽管当前还没有 Search & Replace 功能，参见 Remarkable issues/46 , 开发者已经优先考虑了，应该很快就会有。感兴趣的话，您可以参与开发，项目在 github Remarkable。

有必要提醒的是， github remarkable 项目中的是 parser，不是编辑器。

提醒

这里报告几点编写本文的心得

  1. 距离就是美，记得 标记 # > 等之后，要有空格
  2. 代码块的结尾标记 ``` 之后不能有空格，否则 Hexo 生成后，该位置之后的显示会出现异常 (marked 渲染)，比如代码块没有编号等。如果采用 pandoc 渲染器，则该行被解释成普通文本，而不是代码块的结束

更新历史
2016-10-08 19:01 NexT 主题下部分段落不缩进
2016-09-06 22:14 完稿、重新发布
2016-09-02 20:56 初稿