如何搭建一个独立博客——简明 GitHub Pages与 jekyll 教程

发布

摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册、DNS 设置、GitHub 和 Jekyll 设置等过程,这是我写得最长的一篇教程。我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后来者一个明确的指引,同时用这篇教程开篇,正式开始我的第八大洲之旅


搭建博客容易,持续写博客困难,自 2014 搭建博客至今,我已持续写作超过 3 年,写出 60W+ 文字,开发出一套适合写作者的新手指南——笨方法学写作课程,52 个刻意练习,这一次彻底学成写作。

「笨方法学写作」不同于其他的写作课,不教你写小说,无论是科幻、武侠、穿越、不教你写文学,散文、不教你改标题追热点 10W+ 新媒体套路、更不教你下班后写作一年赚五十万的功利方法。「笨方法学写作」是一门探索创造型写作课程,它只教你展现生俱来的表达欲望,教你有效整理想法培养逻辑思维,教你将成长经验转化成作品,教你在系统训练中激发出惊人的创造力。

「笨方法学写作」的课程大纲如下

插入课程大纲

因为叫「笨方法学写作」,所以其课程期限与其他写作课的不一样,其他的课程价格 1000 多块,时间却多是 7天、14 天、21 天,往往是你学了但没有练,练了但没有反馈,有反馈了但没有改进,改进了但没有养成习惯,这样的结果往往是课程一结束,你又恢复了之前的样子,学了等于白学。而笨方法学写作的课程时间是足足一年,设定有 52 个节课和习题,保证你每周至少练习一次,持续练习,养成终身受益的写作习惯。

课程更分为三个模块,三个模块对应不同写作阶段的学员,可根据自身情况调整学习,「卡片写作课」适合新手、「写作精进课」适合进阶学员、「写作产品课」适合高阶学员,其他的写作课可能会将这三个模块分拆收三门课的钱,但在「笨方法学写作」课程体系下,这三个模块相辅相成,不可分割,只收一门课的钱。

课程模块图

报名请点:http://www.LearnWritingTheHardWay.cn


前言

作为一个技术小白,没有技术基础,看网上的教程也云里雾里,看程序员的教程相当不容易,稍微有些细节描述得不清楚自己就要绕弯路去找答案(善用搜索引擎),所以,在自己的博客搭建完成之后,我决定要将我搭建博客的过程全记录下来,以供后期和我一样的小白参考(是的,我坚信还有很多一样和我一样的人),我会尽可能详细的整理这个教程,其中的资料可能会摘录到其他人的教程,我会在后面列出了参考资料,感谢这些作者们。

为什么要开博客?可以看看我的这篇《为什么你要写博客?》

也可以看看这篇《我的博客时代》

以下以我的博客:www.cnfeat.com为例,教大家如何搭建一个独立博客。

注:若文章图片已丢失,请移步:如何搭建个人独立博客? - 知乎

为什么要搭建一个独立博客?

独立的才是自己的。

小白进入门槛

为什么选择 GitHub Pages

很多人用 Wordpress,你为什么要用 GitHub Pages 来搭建?

> 01 GitHub Pages 图片

GitHub Pages 是什么?

GitHub Pages 本用于介绍托管在 GitHub 的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。

GitHub Pages 可以被认为是用户编写的、托管在 GitHub 上的静态网页。

官方介绍可以看这个视频(需科学上网)

购买域名

只推荐上 GoDaddy 购买,安全,而且可以使用支付宝。

现在 GoDaddy 已经有中文版了,虽然国家显示是新加坡,但不影响使用。

> 02 GoDaddy 主页界面

教程(截止至 2017 年 06 月 21 日)如下

1、查你想要的域名

> 03 GoDaddy cnfeat 2017 搜索

2、查到适合的域名之后选择「添加到购物车」

> 04 添加到购物车

3、GoDaddy 其他域名收费服务,不要管,继续「进入购物车」

> 05 进入购物车

后面的服务全部点击「不,谢谢」,免费的服务也不要用

4、确认购买 修改购买年限,默认是两年,可以修改成 1/2/3/5/10 年,随自己喜欢。现在 GoDaddy 上 .com 每年的默认费用是 7元/年。

但实际上,你看到我现在购买的是 第 1 年:​¥5.86/年 第 2 年后:​¥101.00/年,GoDaddy 的域名价格时常有波动,以当时为准即可。

个人博客,建议购买 5 年限,等到你 5 年后觉得还有必要,再 10 年续下去。

> 06 购物车界面

如果你不是土豪,可以上网搜 GoDaddy 优惠码,一般优惠幅度是 20%~ 30% 不等

填完之后,五年的费用就从 415.56 会变成 333.95 元。

> 07 价格变动图

说明一下:网上的优惠码优惠不一,你可以逐个尝试拿个最低价,这里就不一一测试了。

如图,我买了五年的费用就是 333.95 元,随后点击「前去付款」

> 08 前去付款

5、结算。登录或注册界面,填完必要的信息之后,选择用支付宝结算。

> 09 结算前必须注册个账户

注册后页面跳转到结算页面

> 10 下订单

如果结算出现问题,可以查看这个页面

6、检查。结算后,重新登录,去「我的账户 > 我的产品」,域名已经显示在你的账户了。

7、补充一些注意事项:

安装准备软件

依次下载安装。

怎么打开 Git ?

Win 平台操作

> 12 鼠标右键打开 Git Bash

Mac 平台操作

安装 Git 之后可直接在 Terminal 操作

注册 GitHub

访问:http://www.GitHub.com/

注册你的 username 和邮箱,邮箱十分重要,GitHub 上很多通知都是通过邮箱发送。

注册过程比较简单,详细也可以看:

一步步在 GitHub上创建博客主页 全系列 by pchou(推荐)

配置和使用 GitHub

以下教程主要参考 beiyuu 的《使用GitHub Pages建独立博客》写成。

配置 SSH keys

我们如何让本地 git 项目与远程的 GitHub 建立联系呢?用 SSH keys。

检查 SSH keys的设置

首先我们需要检查你电脑上现有的 ssh key:

$ cd ~/.ssh 检查本机的ssh密钥

如果提示:No such file or directory 说明你是第一次使用 git。

生成新的 SSH Key:

$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

然后系统会要你输入密码:

Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意:输入密码的时候没有 * 字样的,你直接输入就可以了。

最后看到这样的界面,就成功设置ssh key了:

> 13 终端设置成功

添加 SSH Key 到 GitHub

在本机设置 SSH Key 之后,需要添加到 GitHub上,以完成 SSH 链接的设置。

> 14 添加 SSH Key 到 GitHub

测试

可以输入下面的命令,看看设置是否成功,git@GitHub.com 的部分不要修改:

$ ssh -T git@GitHub.com

如果是下面的反馈:

The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张,输入 yes 就好,然后会看到:

Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.

设置用户信息

现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。

Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

$ git config --global user.name "cnfeat"//用户名
$ git config --global user.email  "cnfeat@gmail.com"//填写自己的邮箱

SSH Key 配置成功

本机已成功连接到 GitHub。

若有问题,请重新设置。常见错误请参考:

将独立域名与 GitHub Pages 的空间绑定

DNS 设置

用 DNSpod,快,免费,稳定。

注册DNSpod,添加域名,如下图设置。

> 15 域名解析图

其中 A 的两条记录指向的ip地址是 GitHub Pages 的提供的 ip

如博客不能登录,有可能是 GitHub 更改了空间服务的 ip 地址,记得及时到在GitHub Pages查看最新的 ip 即可

www 指定的记录是你在 GitHub 注册的仓库。

去 GoDaddy 修改 DNS 地址

更改 GoDaddy 的 Nameservers 为 DNSpod 的 NameServers。

1、点击你的账户,管理我的域名。

> 16 管理我的域名

2、点击域名。

> 17 管理 DNS

3、将 GoDaddy 的 Nameservers 更改成 f1g1ns1.dnspod.net 和 f1g1ns2.dnspod.net

> 18 更改成 f1g1ns1.dnspod.net

如有不详可以看DNSpod提供的官方帮助

也可以看这里:一步步在GitHub上创建博客主页(3)

使用 GitHub Pages 建立博客

与 GitHub 建立好链接之后,就可以方便的使用它提供的 Pages 服务,GitHub Pages 分两种,一种是你的 GitHub 用户名建立的 username.GitHub.io 这样的用户&组织页(站),另一种是依附项目的 Pages。

想建立个人博客是用的第一种,形如 cnfeat.GitHub.io 这样的可访问的站,每个用户名下面只能建立一个。

Fork 已设置好的仓库

点击 cnfeat/blog.io

点击右上角的 Fork

> 19 Fork blog.io

这样,你就得到我的博客仓库了。

你可以到

https://GitHub.com/你的用户名/blog.io

确认一下

然后将 blog.io 改成 你的 GitHub 用户名.GitHub.io

例如我的就改成 cnfeat.GitHub.io

改好之后,可以发现,’你的 GitHub 用户名.GitHub.io’ 已经可以访问了。

P.S.更多博客模板请见 GoodThingList/GoodJekyllBlogList.md at master · cnfeat/GoodThingList

将独立域名与 GitHub Pages 的空间绑定

GitHub Pages 的设置

去到你的 blog.io 仓库,点击 CNAME ,再点击右下角的 铅笔 编辑,将 cnfeat.com 改成你的域名

> 20 修订 CNAME

这样,你再去你绑定的域名看看,估计已经导向到 ‘你的 GitHub 用户名.GitHub.io’ 了。

搭建完成

至此,独立博客就算搭建完成,如需进步一完善请在参看以下文章或博客下留言。

如何更新博文

安装 GitHub desktop

下载地址:GitHub Desktop

找你的仓库 Git 地址

去到你的博客仓库:https://GitHub.com/你的用户名/blog.io

复制 clone 地址

例如我的就是

https://github.com/cnfeat/blog.io.git

> 22 复制 clone 地址 图

clone 你仓库到本地

点击左上角的「+」号,选择 add,choose ‘你的 GitHub 用户名.GitHub.io’ 文件夹。

如此,你的本地博客仓库就已经和 GitHub 的仓库同步起来了。

> 21 clone 你仓库到本地

修订 _posts 文件夹中的 md 文件

blog.io 仓库已经自带两篇文章模板,按照模板修改即可。

> 23 按照模板修改

推送文章更新

修订或新增完文章,再回到 GitHub desktop,点击同步更新即可。

24 GitHub desktop 同步

更新个人博客信息配置

自己把 blog.io 中文件都点开看一遍,主要配置文件是 _config.yml ,推荐使用 sublime 打开。

修订清单如下,文档内有详细注释,可按注释逐个修订

404页面

GitHub Pages有提供制作404页面的指引:Custom 404 Pages

直接在根目录下创建自己的 404.html 或者 404.md 就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用。

推荐使用腾讯公益404

图床

推荐使用七牛(10G空间,免费)。

参考资料:

相关链接

关于我

这里有我的个人简介:关于我

如果你想看到我最新的文章,可以关注我的微信公众号「cnfeat」。

ChangeLog


笨方法实验室:世上无难事,只怕笨方法