本文主要介绍如何使用Github的服务搭建一个博客，这个方案对优缺点是什么，以及对博客这一类媒介的再度思考。

Github Pages是Github公司提供的一种网页托管服务，用户可以上传符合约定格式的文档到指定的代码库中，Github会自动编译成静态页面，并发布到互联网上。这个服务已经发布了很久，很多人用他来发布博客，或者产品介绍页面等。

安装本地环境

为了能够充分的使用Github Pages提供的强大功能，建议还是在本地先搭建一个开发环境。接下来会以Ubuntu 2020LTS操作系统作为样例进行说明。

在系统层面，主要安装ruby这个语言和相关依赖，因为我们使用的Jekyll方案是基于ruby开发的。另外还需要安装一些系统编译工具如build- essentials等。这里面的坑不少，建议大家参考这位微软MVP的博文，把所有的依赖都安装上。

sudo apt-get install ruby-full # 安装ruby
sudo apt-get install make gcc gpp build-essential zlib1g zlib1g-dev # 安装各类编译依赖
gem install bundler # 安装ruby的包管理软件bundler
gem install jekyll # 安装静态站点生成工具Jekyll

在软件层面，我们需要安装ruby的静态网站生成软件Jekyll。安装完成后，即可使用jekyll new site-name命令生成一个新的站点。Jekyll会自动创建符合规范的文件夹结构和一些配置文件。其中比较重要的是Gemfile，这个文件约定了ruby会安装哪些依赖的包，有点像使用python pip加载requirements.txt来安装python包。根据Github的要求，需要注释掉Gemfile中的jekyll包，并加上github-pages包。

在构建站点的层面，我们可以修改同一目录下的_config.yml文件，对站点进行全局配置，比如站点的名称，说明，联系方式等，也可以根据安装的不同主题，进行主题相关的配置。

最后，新增博客文章需要在_posts文件夹中增加一个符合Jekyll规范的md文件。后面Jekyll会根据约定将这些文件编译为html文件。

md文件名需要是：YEAR-MONTH-DAY-title.md

内容需要以以下格式开头

---
layout: post
title: Awesome first post
---

以上所有准备步骤完成后，可以使用jekyll serve命令进行初次编译以及在本地查看。如果显示需要root权限的话，使用bundle exec jekyll serve即可。

预览没有问题后，我们就可以通过git将当前的代码推送到Github的远程仓库上，如果对git操作不是很熟练，可以使用客户端工具，比如VSCode。GitHub会自动编译并将结果发布到互联网上，当中的延迟可能有一分钟左右。

定制化

如果有兴趣，可以对站点的一些定制化工作。我对自己的站点主要做了3个优化：

在关于我页面使用Jekyll的模板语法增加按分类展示文章的列表
修改博客文章中的图片存放位置
美化代码显示效果

1的样例代码如下

{% for category in site.categories %}
<h4>
  <div id="{{ category | first}}"> {{category | first}}</div>
</h4>
  <ul>
  {% for posts in category %}
    {% for post in posts %}
      {% if post.url %}
      <li>
        <span class="post-meta">{{ post.date | date: "%Y-%m-%d" }}</span>
        <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      </li>
      {% endif %}
    {% endfor %}
  {% endfor %}
  </ul>
{% endfor %}

在Jekyll中增加图片，需要做两件事

将图片放置于/images/
在博客文章中应用自己站点的图片时需要使用![]({{ site.github.url }}/images/.../some.jpg)语法
如果使用自己的域名，在_config.yml中配置自己的站点的域名即可

最后是样式修改。我使用的是默认的minima主题，觉得已经满足我的审美要求，但是文章中的代码块没有使用好看的等宽字体，看了一下minima的样例站点，它使用的css是styles.css，而默认生成的站点是main.css。

参考这篇给Jekyll增加自定义样式的文章及Jekyll官方文档，我发现需要在Jekyll的基础上，增加定制化的css。我的做法比较简单暴力，把minima样例站点的各种_include文件复制到本地开发环境。重新构建后，站点使用了定制化的css，并且给pre code标签加上了期望的等宽字体样式。