如何在 Github 搭建静态博客

3 mins read Sep 25, 2014

如何在 Github 搭建静态博客

Table of Content

其实最初做这个博客,可能是因为我暗藏了一颗文青的心,后来老有人问我博客怎么做的,想来想去干脆写个教程好了。

引言

这样的博客系统适合哪些人群呢?

  • 不想、或者不愿意租用服务器
  • 不想、或者不熟悉后端代码
  • 更倾向于一个免费、永久、不限流量、速度靠谱的解决方案
  • 没有太多时间维护
  • 浏览量不大
  • 可能只是出于一时兴趣
  • 对代码感兴趣
  • 具备一些编程基础知识

但是,也有一些弊端:

  • 需要一些编程基础
  • 不适合大型网站,内容过多会导致生成速度较慢
  • 只能生成静态页面,动态功能仍旧需要使用外部服务,例如评论功能

此外,搭建博客系统又很多方式,例如使用 HexoJekyllPelican 等。本文主要介绍 Jekyll


Git 与 Github

这个博客网站是借助于 Github Pages 功能托管在 Github.com 服务器的,页面代码由我自己编写,这也就是说,要搭建一个这样的博客网站,你需要学会:

  • Git 的基本使用
  • Github 的基本使用

什么是 Git

简单来说 Git 是一种版本控制工具。版本控制工具是一类工具的通常,用于存储、追踪目录和文件的修改历史,方便用户进行管理控制。

Git 怎么玩

首先要玩 Git 先要安装,安装的方式有很多,通用的方法是在 Git 的官方网站下载源代码包或安装器。

如果你在使用 OS X 系统:

  • Homebrew: $ sudo brew install git
  • Macport: $ sudo port install git-core

如果你在使用 Debian, Ubuntu, 或 Linux Mint:

$ sudo apt-get install git

如果你在使用 Fedora, CentOS 或 RHEL:

$ sudo yum install git

如果你在使用 Arch Linux:

$ sudo pacman -S git

如果你在使用 OpenSUSE:

$ sudo zypper install git

如果你在使用 Gentoo:

$ emerge --ask --verbose dev-vcs/git

关于 Git 的使用,你可以参考我之前的博客: 《Git 基本指令》、《Git Primer》。

什么是 Github

GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub

Github 怎么玩

打开 https://www.github.com/,注册并登陆,即可。更多的内容后面必要时会有说明。


Jekyll

Jekyll

什么是 Jekyll

Jekyll 是一个简单的免费的博客生成工具,类似 WordPress,但它只是一个生成静态网页的工具,不需要数据库支持。

Jekyll 怎么玩

关于 Jekyll 的语法,参见我的另一篇博客《Liquid for Designers》。

关于 Jekyll 的安装请参考后面 GEM 部分。

关于 Jekyll 的使用,初期我们只需要记得 $ jekyll build 这个编译指令即可。


Ruby

什么是 Ruby

Ruby 一种简单快捷的面向对象脚本语言,在 20 世纪 90 年代由日本人松本行弘 (まつもとゆきひろ, Matsumoto Yukihiro) 开发。

Ruby 怎么玩

如果你在使用 OS X,你的系统应该已经预置了 Ruby,只是可能版本较低。

如果你在使用 Linux,你可以使用这样的指令进行搜索:

rpm -qa | grep ruby

yum list | grep ruby

如果你查询到了结果,说明你已经安装或系统预置了 Ruby; 如果没有查询到,你可以通过 yum install ruby 进行安装。


RVM

什么是 RVM

RVMRuby Version Manager 的缩写,即 Ruby 版本管理器,用于管理计算机中安装的 Ruby 版本,也就意味着,你可以同时安装多个版本的 Ruby

RVM 怎么玩

RVM 的安装和基本用法,可以参考我的其他博客:《Ruby on OS X》。


GEM

什么是 GEM

RubyGems 的简称,是一个用于对 Ruby 组件进行打包的 Ruby 打包系统。

它的安装或升级可以参考 官方说明

GEM 怎么玩

在本文中,我们主要用来安装 Jekyll,使用 $ gem install jekyll 指令即可安装。

在博客建设完成或新帖子完成需要提交时,可以通过 jekyll b 指令进行构建,并在出错时通过输出内容获取可能的错误信息。


Markdown

什么是 Markdown

Markdown 是一种轻量级文本标记语言,这个博客网站中的所有博客都是使用 Markdown 编写的。当然其支持的标记语言并非只有 Markdown, 但整体来说 Markdown 是学习成本比较低的, 大部分人可能都已经会了。

Markdown 怎么玩

关于 Markdown 的语法,你可以参考我之前的博客:《Markndow: Syntax》。

由于 Markdown 的衍生版本和标准有很多,可能你已知的部分语法特性在 Github 并不能得到充分或合适的支持。

关于编辑器,如果你在使用 OS X,推荐你使用 MWeb,你可以在 Mac App Store 搜索到它。

或者,不论你在使用什么操作系统,你都可以使用 Atom 编辑器进行编辑,只不过,你可能需要安装相关的语言和预览等插件才能更好的进行编辑,插件安装的入口就在 Atom 的设置中。


开始搭建

创建仓库

首先你需要在 Github 注册、登录并创建一个代码仓库 (Repository)。仓库的名称格式应为 xxxxx.github.io,其中 xxxxx 可自定义,一般为英文字母。

你的博客地址,默认将是 https://xxxxx.github.io/

创建好之后,你可以选择在桌面打开,这要求你安装 Github Desktop 客户端。

或者,你也可以复制页面上的 git 地址,从终端进行克隆。为了方便我建议你使用 Github Desktop

仓库设置

进入仓库设置 Settings 中,在 Options 模块下找到 Github Pages 部分,选择 Sourcemaster branch 并保存。

settings

source

基本配置

接下来,进入代码仓库的本地目录,新建一个名为 _config.yml 的文本文件。

关于此文件的详细配置,可以参考 官方文档

你可以以本站的配置作为参考:

name: Meniny's Blog
url: https://picsew.cn/
description: I’m a software engineer lived in China. This is my very own Blog which shares skills. All written content on this site is provided under a Creative Commons ShareAlike license and all code is provided under a MIT license unless otherwise stated. Please give sources if you'd like to quote.
author: "Ezra"
email: meniny#qq.com
domain: www.meniny.com
permalink: /post/:categories/:title/
paginate: 10
highlighter: rouge
#pygments

exclude: ['Gemfile.lock', 'Gemfile', 'Rakefile']

gems:
 - jekyll-paginate

简单说明:

name: 网站名称
url: 网站链接
description: 网站描述
author: 作者名称
email: 坐着邮箱
domain: 域名
permalink: 帖子URL的形式,本例中,帖子最终会被解析为 网站域名/post/帖子分类/帖子标题/ 的形式,如 /how_to_eat_my_mac/
paginate: 10 帖子列表分页时每页帖子数
highlighter: rouge 帖子中嵌入代码时,代码高亮所使用的工具

exclude: ['Gemfile.lock', 'Gemfile', 'Rakefile']

gems:
 - jekyll-paginate

页面模版

做了信息配置后,同一个路径下,新建名为 _layouts 的文件夹,用于存放页面的模板文件。

我们先创建一个最基本的的模板,例如 default.html:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

在创建一个用于帖子详情的模板,例如 post.html:

---
layout: default
---
<p>
  <span>Date: {{ page.date | date: "%b %d, %Y" }} | Category: {{ page.category }}</span>
</p>
<div>{{ content }}</div>

创建帖子

好了,折腾了这么多,终于该写第一篇帖子了。

首先,与 _layouts 同一路径下,新建 _posts 文件夹,用于存放帖子。

帖子一般为 Markdown 格式,后缀通常为 .md,文件名形如 2016-09-25-SamplePostTitle.md

其中,2016-09-25 部分表示帖子发布日期,必须保持这个格式;

后面 SamplePostTitle 部分表示帖子的标题,最好不要出现中文和空白符号,一般使用下划线 (_)、连字符 (-)、字母和数字组成。其实这里所谓的标题,只是用于帖子的链接,在博客中显示的标题是在帖子内部定义的,所以不必担心起名的问题。

现在我们来写第一篇帖子:

---
title: "这才是真正的标题,不信你试试,呵呵呵"
category: "Jekyll"
tags: [Jekyll, Liquid]
summary: "第一篇博客而已,这是一个描述"
---
# 一号标题

第一篇博客

## 二号标题

* 不知道写点什么好

* 那就随便写吧

* 好了就这样吧

### 三号标题

放一段代码试试 `Jekyll`


```html
<srcipt type="text/javascript">
  function test() {
    alert("This is a test code");
  }
</script>

四号标题

Click Me


这里我们指明了帖子所用的布局、帖子标题、帖子分类,甚至还指明了标签和描述。而后面是 `Markdown` 格式的帖子内容,其中包含了一段 `Jekyll` 代码,用于高亮一些内嵌与帖子中的代码,`Jekyll` 代码会被自动解析,然后帖子内容会被自动解析为 `HTML` 页面,当然,在书写正确的情况下,内嵌的代码部分不会被解析,将保持原样显示。

#### 主页

我们到目前为止,博客还没有一个主页,况且,有了帖子,必不可少需要一个帖子列表。

在 `_post` 所在的目录下,新建一个文本文件名为 `index.html`:

```html
---
layout: default
title: My Blog
---

{% for post in paginator.posts %}
<article>
	<h3>
		<a href="{{ post.url }}">{{ post.title }}</a>
  </h3>
  <div>{{ post.excerpt | strip_html }}</div>
</article>
{% endfor %}
<div>

  <center>
    {% for page in (1..paginator.total_pages) %} {% if page == paginator.page %}
    <span class="active">{{ page }}</span> {% elsif page == 1 %}
    <a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a> {% else %}
    <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a> {% endif %} {% endfor %}
  </center>
</div>

好了,我们创建了一个主页,布局采用 default,并设置了名称。主页的内容是分页的帖子列表(每页的数量在前面已经配置过),每页的列子列表后面是页码索引。

其他页面

现在,你也许还想要其它页面,那么依旧在仓库的根目录,新建一个目录,名称根据你的意愿选择,但一般也选择下划线、连字符、英文字母和数字的组合即可。

进入该目录,新建名为 index.html 的文本文件,这里我们示范制作一个帖子分类列表:

---
layout: default
title: Categories
---

{% for cat in site.categories %}
  <h3><span id="{{ cat[0] }}">{{ cat[0] }} [{{ cat[1].size }}]</span></h3>
  <ul>
    {% for post in cat[1] %}
      <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
{% endfor %}

至此,一个新的页面完成了。你只需访问 https://xxxxx.github.io/刚才的文件夹名 即可浏览这个页面。

本例中,新建了名为 categories 的目录,则页面地址为 https://xxxxx.github.io/categories/,你也可以通过 /categories/ 在其他页面中表示它的链接。

提交内容

现在,帖子也写好了,列表也有了,我们使用 Git 提交到服务器,稍等一会儿即可在网站中浏览了。

如果你使用 Github Desktop,选择要提交的文件和文件夹,输入提交信息,点击提交按钮即可。

等待一会儿让页面生成,然后就可以访问 https://xxxxx.github.io/ 来浏览你的博客了。

域名

如果你对这个默认的域名不感兴趣,你可以购买自己专属的域名,途径有很多,在大陆推荐你使用 阿里云,万网已被并入阿里云。

首先,你要在刚才的仓库根目录新建名为 CNAME 的文本文件,没有扩展名,其内容为你购买的域名,例如 somedomain.com

然后,在终端 ping 一下 xxxxx.github.io 并复制 IP 地址:

$ ping xxxxx.github.io
PING xxxxx.github.io (123.123.123.123): 56 data bytes
64 bytes from 123.123.123.123: icmp_seq=0 ttl=55 time=68.416 ms
64 bytes from 123.123.123.123: icmp_seq=1 ttl=55 time=71.404 ms
64 bytes from 123.123.123.123: icmp_seq=2 ttl=55 time=76.085 ms
...

现在添加解析记录:

记录类型 主机记录 记录值
A @ 123.123.123.123
A www xxxxx.github.io
CNAME * xxxxx.github.io

这些解析需要一定的时间,请耐心等待。

顺便一提,有了域名,还可以在 QQ 邮箱绑定域名邮箱哦。比如 [email protected],详细信息请参照 QQ 邮箱 [设置] - [账户] - [域名邮箱] 部分。

其它

事实上,本文所介绍的都是关于在 Github Pages 创建博客的一种简单的情况,更多高级和复杂的用法,例如集合、自定义分页路径等,不可能一一介绍,但你可以在实践中摸索,或者有兴趣的话也可以和我讨论。

Picsew | Ezra