用Hexo+GitHub Page免费搭建博客

搭建博客的方法有很多,传统的WordPress等方法搭建博客需要购买域名和服务器,对于学生党来说还是不便宜的。GitHub Page可以免费托管网页等文件,而且不限容量,速度也还可以,也没有被墙,所以是一个不错的选择。有了托管平台,我们只需一个博客生成器即可完成博客的搭建,最受欢迎的有JekyllHexo两个。Jekyll的特点是简单方便,但是功能不够强大,自定义性不够好。而Hexo虽然使用上比Jekyll要复杂一些,但是其功能强大,速度快,自定义性极强,还能一键部署,而且在网络上有着众多主题,实在是搭建博客的不二选择。但是Hexo的官方文档实在太坑,很多东西都没有说明,所以我准备写一系列Hexo的文章来补充说明。

博客环境构建

首先确保你的电脑安装了GitNode.js

配置 GitHub Page

首先在GitHub上新建一个仓库,名称为blog,点击Settings,在GitHub Pages选项中的Source选择master branch,点击右边的Save,如下图。

upload successful

安装 Hexo 及初始化

  1. 在终端中输入npm install hexo-cli -g来安装Hexo
  2. 再把刚刚新建的仓库clone到本地。
  3. 打开仓库文件夹,在当前位置打开终端(Windows 在打开文件夹后空白位置按 Shift+鼠标右键 选择在此处打开 PowersShell (旧版本的Win10、Win8及以下为cmd) 窗口即可)。
  4. 输入hexo init来完成Hexo初始化。

此时的目录结构及各文件说明在官方文档中会说明:https://hexo.io/zh-cn/docs/setup.html

配置博客

博客的配置选项:https://hexo.io/zh-cn/docs/configuration.html

补充说明:

  1. language选项,中文填zh-Hans
  2. timezone选项,北京时间填Asia/Shanghai
  3. highlight选项具体内容为:

    1
    2
    3
    4
    5
    highlight:
    enable: true
    line_number: true
    auto_detect: true
    tab_replace:
  4. deploy选项具体内容为:

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

管理博客

Hexo使用命令行来管理博客,指令文档:https://hexo.io/zh-cn/docs/commands.html

常用命令都可以用首字母简写,比如:

  1. 新建文件:hexo n <filename> = hexo new <filename>
  2. 启动服务器进行本地预览:hexo s = hexo server
  3. 生成并部署到GitHub Pagehexo d -g = hexo deploy --generate

此外,推荐安装hexo-admin来进行可视化管理和写作,如下图所示。

upload successful

此时可以新建一篇文章,然后启动服务器进行本地预览,再生成并部署到GitHub Page查看效果。

主题

默认的主题非常简陋,好在Hexo有着众多的主题:https://hexo.io/themes/

其中最热门的主题就是NexT

此外,知乎上也有很多主题推荐:有哪些好看的 Hexo 主题? - 知乎

如果你跟我一样,不想使用网络上的各种烂大街的主题、想自己设计网站的样式和功能、亦或是对各种主题不太满意,你完全可以自己做一个主题,或者对别的主题进行修改。我博客的主题就是自己制作的,目前还在不断的完善中。

官方的主题制作文档实在是太简陋了,很多东西都没有提到,以后有时间我将会补充Hexo主题的制作教程。

写作

官方文档:写作 | Hexo

Hexo 使用Markdown格式来进行写作,并通过主题配置将文章生成网页来进行博客的更新。

Markdown语法:https://github.com/younghz/Markdown

我们可以使用hexo n <filename> 来新建文件,比如hexo n 用Canvas实现图层Hexo会把你在后面的参数输入的文件名作为标题,在source\_posts文件夹中生成用Canvas实现图层.md文件。

后面的文件名存在空格、换行符等与命令行保留字冲突的字符时,要用英文引号括起来。

Hexo新建文章时,后面的文件名参数中包含的#字符将被替换为-字符,原因不明,可手动修改回来,而且标题名称不会被替换,没什么影响。

打开生成的md文件,就可以编辑文章内容。

如果安装了hexo-admin,可以可视化写作和实时预览:

upload successful

或者使用一些Markdown编辑器:https://sspai.com/search/article?q=markdown

我用过不错的有:

标签插件(Tag Plugins)

除了Markdown语法外,Hexo还有一些标签插件,参见:标签插件(Tag Plugins) | Hexo

但是由于大部分功能可以被Markdown代替,而且书写比较麻烦,一般不会使用。

Front-matter

Hexo会在文件头部定义一些信息比如:

1
2
3
4
5
6
7
8
---
title: 用Canvas实现图层
date: 2018-02-10 16:32:56
categories: Web前端
tags:
- canvas
- 图层
---

这个区域称为Front-matter,它是文件最上方以 — 分隔的区域,用于指定个别文件的变量。

官方文档:Front-matter | Hexo

Front-matter的格式和Hexo的配置文件_config.yml一样,属于yaml文件格式,语法:YAML 语言教程 - 阮一峰的网络日志

比较常用的有:

  • 注释:#表示注释,从这个字符一直到行尾,都会被解析器忽略。
  • 对象:

    1
    2
    3
    4
    5
    websites:
    YAML: yaml.org
    Ruby: ruby-lang.org
    Python: python.org
    Perl: use.perl.org
  • 数组:

    1
    2
    3
    4
    languages:
    - Ruby
    - Perl
    - Python

所以文章的多个标签要写成数组形式:

1
2
3
4
5
6
# 单个标签直接写成字面量形式
tags: canvas
# 多个标签要写成数组形式
tags:
- canvas
- 图层

如果安装了hexo-admin插件,可以很方便地修改信息,如下图所示。

upload successful

打开编辑页面,点击右上角的齿轮。

upload successful

编辑相关信息

upload successful

其它基本内容

关于剩下的一些内容官方文档已经足以说明,本文不再赘述。

The End