零. 前言

前段时间,我心血来潮开始研究了一下 Github Pages。然后我的个人博客 https://breathiness.github.io/ 就这样悄眯眯地上线了。让我多了一个可以记录自己、发布教程、分享交流的平台。

虽然我之前一直在酷安写这些东西,而且酷安的应用集确实非常方便。但是现在酷安的图文体验真的是太糟糕了,并且无法分享给未安装酷安的人。

所以我需要一个能够分享,编辑体验更好、支持评论,并且能在任何地方方便地修改,最好还要是免费的网站。

最后我最后选择的就是 Github Pages + Mirror。出来的效果让我非常满意。

Github Pages 比起自己从头开始搭建省下了租服务器、域名的钱,并且配置相对来说简化了非常多。

Mirror 则让更新博客的过程变得相当的轻松。无论在什么地方,只需要一个浏览器就能方便地更新。并且因为使用的是 Github issue,编辑体验非常不错。支持 Markdown、图片能直接上传。评论也比较方便,只要有 Github 帐号即可。

这次我就来介绍一下如何从零开始搭建一个基于 Github Page 的个人博客。我会从所有用到的软件的安装、配置开始比较详细地讲解,让无基础的萌新也能轻松上手。

虽然我前面说是“前段时间”,但那是对拖延症晚期患者来说的,其实时间还是有点久的……而且因为之前电脑崩了一次,原先的草稿和保存的截图全部随着硬盘逝去了。所以这篇文章可能会有些细节方面的遗漏和错误,希望大家见谅。

还有一件事,在这篇文章中我会使用自己的用户名作为演示。请自行把 breathiness 更换为自己的用户名。

一. 工具

1. 安装、配置工具

只需要一台能联网的电脑,甚至在一台 Android 5.0 以上的手机里都能完成全部的工作。

因为我现在还在学校,没办法用电脑,而且流量也不太多。这次的演示的地方才选择了我在腾讯云上的服务器。当然,这个对环境的要求其实并不高,基本上只要拥有一部能上网的设备就能完成所有的工作了。

使用 Linux 系统的酷友自然不必多说,手机或者 Windows 系统的酷友也不必担心。

手机上可以下载 termux https://www.coolapk.com/apk/com.termux 或者 NeoTerm https://www.coolapk.com/apk/io.neoterm 。接下来的步骤与服务器上就没有什么区别了。

Windows 系统区别仅仅是在软件的安装上,我会进行一些简单的说明。

2. 博客更新工具

一个能连接到互联网的浏览器

在安装配置好后更新博客非常方便,只需要登录 Github,在相应的项目写 issue 即可。

二.软件安装

首先介绍一下这次要用到软件的安装。

1. Git/Github Desktop

我们首先需要一个能将内容推送到 Github 上的工具,比较推荐使用命令行的 Git。

Ubuntu:在 Linux 上安装非常简单,只需要一条命令即可。比如说在 Ubuntu 系统上的sudo apt install git,手机上也是一样。

Windows:在 Windows 系统上也不难,只需要在 Git 官网下载。不过我还是更推荐下载 cmder 的 Full 版。这个版本的 cmder 自带了 Git 、SSH 等一些常用的命令,解压即可使用。使用体验比起系统自带的 cmd 和 powershell 高到不知道哪里去了。而且能使用 Linux 的一些命令。

如果实在是不喜欢命令行也可以使用 Github Desktop 不过我并没有太深入地用过,所以就不多做介绍了。

2. npm

npm 是 Node.js 默认的、以 JavaScript 编写的软件包管理系统。而要安装这篇文章的主角之一的「Mirror」需要用 npm 来安装。

所以我们首先需要安装 Node.js

Ubuntu:依然是在命令行输入sudo apt install npm

Windows:Windows 系统上的安装也很简单,只需要到 Node.js官网即可下载安装包。安装时无脑下一步,最后配置一下环境变量即可。

3. Mirror

在安装完 Node.js 后就能很简单的安装 Mirror 了。

sudo npm install Mirror -g

三.软件设置

1. Github 设置

首先需要在 Github 进行一些简单的设置。

创建仓库

首先我们需要创建一个仓库。

点击 Github 右上角的+,然后选择 New repository,进入创建页面。

然后填上仓库名还有介绍之类的,然后点击 create repository 按钮。

仓库名推荐使用你的 Github 的用户名加上.github.io,比如说我的仓库名就是 breathiness.github.io 。这个也是博客搭建完成后默认的域名。

当然仓库名其实是可以选择其他的,不过会稍微麻烦一点,在之后推送时需要推送到 gh-pages 分支上。

新建完之后进入仓库页面点击右边的 clone or download 按钮,然后点击右边的按钮将链接复制下来。在之后的步骤会用到。

链接有 SSH 和 HTTPS 两种。SSH 方式比较快,但是需要先进行比较麻烦的配置。而 HTTPS 方式不需要在 Github 里进行配置,但是相比起 SSH 每次 pull, push 都需要输入帐号和密码。

SSH key(可选)

这是一个可选的设置。如果你想使用 SSH 方式来 clone,方便以后维护,那么就要先配置一下 SSH key。

首先在命令行中先输入 ssh-keygen -t rsa 然后按三次回车,密码什么的不用管。

这样在 .ssh 文件夹应该就会出现几个新的文件,其中 id_rsa.pub 里的内容就是我们需要的公钥。

cat ~/.ssh/id_rsa.pub 指令把 id_rsa.pub 里的内容打印到终端。然后将内容复制下来。

在 Github 网页上先点击右上方的头像,然后进入 Settings。

点开 SSH and GPG Keys,点击 New SSH key 按钮。

然后将刚刚复制下来的东西粘贴进去,标题可填可不填。

设置 token

同样是在 settings 页面,点击 Developer settings 选项。然后选择 Personal Access Tokens 。接着点击 Generate new token 按钮,输入密码。

把 read:user 和 user:email 选项勾上,名字可填可不填。然后点击 Generate token 按钮。

接下来千万别忘了复制 token,这个只会显示一次,如果忘了复制就只能再重新新建一个了。

2. git 设置

虽然我也没测试过,不知道这个设置是不是必要的,但是还是加上吧。

git config --global user.name "breathiness" #用户名

git config --global user.email "920227237@qq.com" #唯一指定邮箱

3. Mirror 设置

乱七八糟的准备工作终于全部完成,是时候开始正篇了。

init

进入之前 clone 的文件夹,然后输入mirror init

cd breathiness.github.io

mirror init

完成后会出现一些新的文件。

修改配置文件

然后是修改 config.yml 文件。将一些基本信息添加进去。

在服务器上当然只能使用 Vim 之类的文本编辑器直接在命令行编辑。


# 是否为组织项目

organization: false

# 文章排序,依据更新时间还是创建时间

# 值为 'UPDATED_AT' 或者 'CREATED_AT'

order: 'UPDATED_AT'

# 网站标题

title:

# GitHub 用户名或者组织名

user:

# 项目名称,项目里面的 issues 是你的博客内容

# 如果你的项目是组织项目,请设置 'organization' 为 true

repository:

# 多用户设置,上面设置的 user 用户名默认已经包括

# 多用户名字必须用 ',' 分割

# 例子: author0,author1

authors:

# token 设置

# token 必须以 '#' 分割

# 如果你的 token 是 5c31bffc137f44faf7efc4a84da827g7ca2cfeaa

# 那么这里填入的值为 5#c31bffc137f44faf7efc4a84da827g7ca2cfeaa

token:

# 文章列表分页

perpage: 10

在其他设备可以选择用别的程序打开。比如说在手机上使用 termux,可以在文件管理器里直接进入 termux 的 home 目录 /data/data/com.termux/files/home 进行修改。

域名(可选)

添加域名到 CNAME

我还没打算买域名,所以这条暂时空缺。

四. 正式上线

1. build 与预览

在 breathiness.github.io 目录里输入命令 mirror build 然后就完成了。

2. push

在完成上面的步骤后,使用下面这个命令将内容推送到 Github 上。

git add --all && git commit -m 'update' && git push

这时候打开 https://breathiness.github.io 就能看到部署完毕的博客了。

五. 开始写文章

0. 新建

给使用 mirror 部署的博客新建一篇文章,不需要像其他的一样要用 git 推送。只需在相应的仓库添加 issuse 即可增加文章。

1. 编辑、发布

Github issuse的编辑体验还不错,

3. 修改、删除

只需要将相应的issuse修改,博客的页面也会自动同步。

要删除文章也很简单,只要将issuse关闭或删除即可

本作品在法律允许的范围内,使用CC0 1.0通用(CC0 1.0)公共领域贡献协议进行共享。