如何搭建github博客

Posted by int32bit on December 23, 2017
本文阅读量:

1. 关于jekyll

Jekyll 是一个简单的静态博客站点生成工具,它由模版文件通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll也可以运行在 GitHub Page 上,也就是说,你可以使用GitHub的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。关于jekyll的更多介绍可参考官方文档

你可以从零开始设计自己的freestyle网站,jekyll官方也提供了非常多的模板可供参考:

你可以寻找自己喜欢的模板下载,如图:

download jekyll theme

这里假设下载的主题为hydeout,下载后文件路径为~/hydeout-master.zip,解压缩:

unzip hydeout-master.zip
cd hydeout-master

2. github pages配置

2.1 关于github pages

github pages设计目的是为托管在github的项目(project)提供wiki主页,它原生支持jekyll,换句话说,只要把jekyll源码push到github,github就会自动把jekyll编译为静态网站。

2.2 初始化博客

如果要为整个github账户配置一个global主页,则只需要在github中创建一个名为${username}.github.io的仓库,其中${username}为你的登录名,比如你的github账户为qiqi,则创建的github仓库为qiqi.github.io,如图:

命令行下cd到hydeout-master路径,并初始化git仓库:

cd hydeout-master
mv hydeout-master qiqi.github.io
git init
git add .
git commit -m "Init my blog"

上传到github仓库中:

git remote add origin https://github.com/qiqi/qiqi.github.io.git
git push -u origin master

2.3 配置博客

jekyll的配置文件为_config.yml,根据自己的信息修改即可,比如博客标题title、个人主页、author信息等。

修改完成后更新到github中:

vim _config.yml
git add _config.yml
git commit -m "Update my info"
git push -u origin master

2.4 撰写第一篇博客

配置完成后就可以写第一篇博客了,博客放在_posts目录,博客支持markdown,也支持html。 建议使用markdown,markdown非常简单,语法可参考basic writing and formatting syntax,编辑器可使用haroopad。博客的文件名格式为日期+博客标题,比如2018-04-12-Hello-World.md

这里只演示如何写第一篇博客,因此不使用haroopad编辑器,直接使用vim:

cd _posts
vim 2018-04-12-Hello-World.md

文件内容如下:

---
layout: post
title: Hello World
excerpt_separator:  <!--more-->
---

This is my first blog.

## 1 第一章 我的HelloWorld

### 1.1 我的第一个Hello World

### 1.2 我的第二个Hello World

### 1.3 ...

## 第二章 ...

其中---中的内容为元数据,layout为post,title为文章标题。

写完后发布博客:

git add .
git commit -m "My first blog"
git push -u origin master

文章发布后,等待几分钟,浏览器打开http://qiqi.github.io即可访问博客。

3 绑定域名

3.1 配置域名

这里假定在国内万网购买的域名,域名为qiqi.com

支持配置使用顶级域名或者二级域名:

  • 顶级域名:比如qiqi.com
  • www二级域名:比如www.qiqi.com
  • 自定义二级域名:比如abc.qiqi.com

以上三种类型的具体设置方法,可参考官方文档。本文只详细介绍第一种,即配置顶级域名qiqi.com。

进入万网域名解析,界面如图:

万网域名解析

点击添加解析按钮:

注意:如果配置顶级域名,比如int32bit.me,记录类型必须选择ALIASANAMEA记录三者其中一个,官方推荐选择ALIAS或者ANAME,因为这容易配置且更新快,而A记录指向的IP变化时,需要较长的时间更新。由于万网不支持前二者,因此我们使用A记录类型,创建两条解析,分别指向以下两个IP,主机记录选择@,表示顶级域名:

192.30.252.153
192.30.252.154

添加完成后,可能需要等一段时间更新(可能需要半个小时),可以使用dig命令验证:

~$ dig int32bit.me +nostats +nocomments +nocmd

; <<>> DiG 9.9.5-3ubuntu0.8-Ubuntu <<>> int32bit.me +nostats +nocomments +nocmd
;; global options: +cmd
;int32bit.me.                   IN      A
int32bit.me.            1       IN      A       192.30.252.154
int32bit.me.            1       IN      A       192.30.252.153

如果能够通过dig解析,则表示DNS解析成功!

3.2 配置博客CNAME

在博客的首页创建一个CNAME文件,文件内容为qiqi.com

cd qiqi.github.io
echo -n "qiqi.com" >CNAME
git add CNAME
git commit -m "Bind my domain"
git push -u origin master

等待几分钟后,就可以通过浏览器打开qiqi.com进入博客首页了。

参考

  • Github官方文档:https://help.github.com/articles/setting-up-an-apex-domain/
  • https://en.wikipedia.org/wiki/CNAME_record
  • https://en.wikipedia.org/wiki/List_of_DNS_record_types