前言

记录基于GitHub Pages+Jekyll搭建个人博客的过程。

GitHub Pages是一个搭建静态网站的工具，通过Jekyll网站生成器搭建静态博客。

Jekyll是一个静态博客网站生成器，可以把markdown/html文件转化成网页。

过程分为配置环境、新建博客、选择主题、修改主题、绑定域名五个步骤。

所需基础：会用Git和markdown；简单了解html+css+js（如果不修改主题也可以不需要）；浏览Jekyll文档。

本网站的仓库：timp2100/timp2100.github.io: My Blog。

配置环境

安装Ruby

Jekyll是Ruby语言的一个包，可类比于Python中numpy、pygame、PyQt这类的东西，所以要运行Jekyll就要先下载Ruby，Ruby下载地址，选择官网推荐的最新版ruby+devkit，一路默认安装。

安装后检查：ruby -v；gem -v。

网上部分过去的文章中说需要单独下载RubyGems，但Ruby从1.9版本开始集成了RubyGems，所以下载新版Ruby已不再需要这一步（写这篇文章时最新版本是3.1）；gem是Ruby的包管理器，可类比于Python中的pip。

安装Jekyll

执行gem install jekyll。

安装后检查：jekyll -v。

新建博客

默认页面

jekyll new testblog
cd testblog
jekyll serve

如果报webrick相关错误，则运行bundle add webrick，因为Ruby从3.0开始不再绑定webrick。

在浏览器访问：http://localhost:4000/，即可看到Jekyll的默认页面。

编辑内容

编辑_posts文件夹里的md/html文件，命名格式：yyyy-mm-dd-name.md/html。

上传仓库

在github上新建一个名为your-username.github.io的仓库，将整个testblog文件夹的内容上传。然后在仓库的setting-pages里可以看到生成网页的网址(https:// + your-username.github.io)，点击这个网址即可看到博客的页面。

其他

gem的一些指令：版本更新：gem update；清除旧版：gem cleanup。

选择主题

在Jekyll主题官网选一个喜欢的主题下载，jekyll serve，如果提示缺少部分包则运行bundle install安装，这个命令会根据Gemfile.lock和Gemfile安装对应版本的Gem。如果报bundle exec相关错误则用bundle exec jekyll serve。

我这里选择了极简风格的Monos主题。

修改主题

记录修改Monos主题的过程。

修改个人信息和描述

在_config.yml中替换自己的个人信息，添加网站描述，同时我注释了github_username这一行。网站描述的内容如下（意为在新标签页打开的一个指向Monos主题仓库地址的超链接）：

Theme: <a href="https://github.com/ejjoo/jekyll-theme-monos" target="_blank">Monos</a>

主题会把网站描述复制到_include/sidebar.html中的这个位置：

<p class="lead">Theme: Monos</p>

添加favicon.ico

就是浏览器标签页左上角显示的那个图标，在_include/head.html中添加（替换图片地址）：

<link rel="shortcut icon" type="image/x-icon" href="https://timp2100.cn/images/favicon.ico">

图标显示的尺寸是16*16，虽然浏览器会自己缩放，但一般不建议图片太大，我这里是32*32。

添加logo

把网页左上角的内容换成了logo（免费logo设计网站：Canva），在_include/sidebar.html：

<a href="/about/"><img src="https://timp2100.cn/images/logo.png"/></a>

Jekyll在新标签页打开

把侧边栏页脚的Jekyll链接设为了在新标签页打开，在_include/sidebar.html：

<p>Powered by <a href="https://github.com/jekyll/jekyll" target="_blank">Jekyll</a></p>

修改侧边栏头部的字体和链接颜色

通过css的类选择器设置，在public/css/style.css：

.sidebar-header {
	font-size: 0.75em;
	font-weight: lighter;
	font-family: "Roboto";
	line-height: 1.5;
}

.sidebar-header a {
	color: #ccc;
}

设置中文页面

在浏览器打开网页时提示是否翻译，因为主题设置的默认网页语言是英语（在_include/default.html中）。

在_config.yml中加一行lang: zh即可。

访问加速

在浏览器打开网页时发现有时候加载比较慢，浏览器左下角提示在等待fonts.gstatic.com，发现是用了谷歌字体的原因，把public/css/style.css中前两行的链接改成Google字体中国站https://fonts.font.im。

删除未用到的文件

发现public/syntax文件夹下的内容只有monokai.css被用到，提出monokai.css，删除syntax文件夹，在public/css/style.css和_include/default.html中做出相应的修改；当然，也可以用其他的样式，在style.css、default.html和_config.yml给出路径名称即可。

删去了我没有用到的_include文件夹下social.html、google-analytics.html、header.html，footer.html。

为发布的文件添加头信息

编辑_posts文件夹里的md/html文件，在文件最开始加上：

---
layout: post
title:  your-title
date:   yyyy-mm-dd hh:mm:ss +0800
permalink: your-permalink
categories: your-categories
---

头信息中包含布局、标题、日期、固定链接、分类等内容。

绑定域名

GitHub Pages支持绑定自定义的域名，在仓库中新建一个名为CNAME的文件，内容为自定义的域名，我这里是timp2100.cn，在setting-pages里勾选Enforce HTTPS。

关于域名：域名需要购买、实名认证、ICP备案、和公安备案，这些操作可在华为/阿里/腾讯等处一条龙完成（公安备案需要去公安备案的网站上），这些大的商家一般会对整个过程给出详细的指导。整个过程因一般可以在20~30天内完成。

在购买域名的地方添加域名解析如下：

主机	类型	记录值
@	A	185.199.108.153
@	A	185.199.109.153
www	CNAME	your-username.github.io

备案后需要根据ICP备案和公安备案的要求在网站底部添加备案信息。

在_include文件夹下新建一个footer.html存放页脚的备案信息和一些其他内容，footer.html内容如下（替换自己的信息）：

<div class="site-footer">
  <div class="site-footer-connect"><a class="u-email" href="mailto:timp2100@163.com"><img src="https://timp2100.cn/images/mail.png"/></a></div>
  <div class="site-footer-record-ICP">
    <a target="_blank" href="http://beian.miit.gov.cn/">ICP备案号</a>
  </div>
  <div class="site-footer-record-PS">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=公安备案号">
      <img src="https://timp2100.cn/images/公安备案图标.png"/>公安备案号</a>
  </div>
</div>

在上述footer.html中除了备案信息还添加了一个邮箱的链接，邮箱的图标可以自己下载一个免费图片然后抠图、调整大小。

在_include/default.html中</body>之后添加<footer></footer>标签对并include footer.html以显示页脚。

修改public/css/style.css，删去这部分以解除它对所有footer的边距和字体控制：

footer {
  padding-top: 15px;
  font-family: 'Ubuntu';
}

加入以下内容以设置页脚的样式：

.site-footer {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	padding-top: 5px;
	background-color: #222;
	color: #fff;

	font-size: 10px;
	font-weight: lighter;
	font-family: "Roboto";
	line-height: 1.5;
}

.site-footer a {
	color: #ccc;
}

.site-footer-connect {
	margin: 0 auto;
}

.site-footer-record-ICP {
	margin: 0 auto;
}

.site-footer-record-PS {
	margin: 0 auto;
}

.site-footer-connect img {
	width: 20px;
	height: 20px;
}

.site-footer-record-PS img {
	width: 12px;
	height: 12px;
}

至此，个人博客基本就搭建完成了。