零. 前言
前段时间,我心血来潮开始研究了一下 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关闭或删除即可