Github Pages 搭建筆記
記錄GitHub Page搭建過(guò)程
Github Pages
前往GitHub并且創(chuàng)建一個(gè)新的repository，命名規(guī)則是：username.github.io（username是Github用戶名，藍(lán)色線部分相同）
clone項(xiàng)目到本地
git clone https://github.com/username/username.github.io
制作Hello World 頁(yè)面
cd username.github.io
echo "Hello World" > index.html
提交到GitHub，需要配置SSH免密碼登錄
git add --all
git commit -m "Initial commit"
git push -u origin master
訪問(wèn)：https://username（GitHub用戶名）.github.io ，可以看見(jiàn)個(gè)人主頁(yè)。
Jekyll
Jekyll是一個(gè)簡(jiǎn)單的免費(fèi)的Blog生成工具，類似WordPress。但是和WordPress又有很大的不同，原因是jekyll只是一個(gè)生成靜態(tài)網(wǎng)頁(yè)的工具，不需要數(shù)據(jù)庫(kù)支持。但是可以配合第三方服務(wù),例如Disqus。最關(guān)鍵的是jekyll可以免費(fèi)部署在Github上，而且可以綁定自己的域名。
安裝過(guò)程
1.安裝Ruby
Mac有默認(rèn)的Ruby環(huán)境，根據(jù)如下命令確認(rèn)是否正常工作及版本
ruby -v
2.安裝Jekyll
sudo gem install jekyll bundler
3.使用模板安裝直接進(jìn)入下一節(jié)，如果不使用模板，可以進(jìn)行如下方法安裝
jekyll new my-awesome-site
cd my-awesome-site
cp -R * path/username.github.io/
注：path/username.github.io 為GitHub本地目錄
4.開(kāi)啟Jekyll環(huán)境
在path/username.github.io目錄下，執(zhí)行
bundle exec jekyll serve
5.本地調(diào)試
通過(guò)http://localhost:4000 ，訪問(wèn)頁(yè)面。
Jekyll 模板
替換Jekyll模板，根據(jù)知乎黃玄回答找到startbootstrap-clean-blog-jekyll模板BlackrockDigital，其他模板根據(jù)說(shuō)明進(jìn)行安裝。
效果頁(yè)面可以訪問(wèn)： Clean Blog
安裝過(guò)程
安裝過(guò)程可以使用兩種方式。
- 命令方式：詳見(jiàn)startbootstrap-clean-blog-jekyll的GitHub頁(yè)面
- 覆蓋方式：本文采用方式，詳細(xì)說(shuō)明如下
下載或者Clone項(xiàng)目startbootstrap-clean-blog-jekyll到本地，覆蓋到GitHub.io的本地工程。
修改 _config.yml 文件，下述為需要修改部分，其他保持不變即可。
| 參數(shù) | 說(shuō)明 |
|---|---|
| title | 名稱 |
| 通訊方式 | |
| description | 描述 |
| github_username | GitHub用戶名 |
| baserul | 二級(jí)路徑，可以為'' |
| url | GitHub.io的URL路徑 |
用過(guò)命令
bundle exec jekyll serve
啟動(dòng)本地環(huán)境，通過(guò) http://localhost:4000 訪問(wèn)頁(yè)面。變動(dòng)提交到GitHub后，可以在 https://username（GitHub用戶名）.github.io 看到修改變化。
創(chuàng)建文檔
在_post文件下，新建md文件，文件書寫格式如下
---
layout: post
title: "標(biāo)題"
subtitle: "副標(biāo)題"
date: 2018-01-08 00:00:01
background: '/img/posts/01.jpg'
---
jekyll可以自動(dòng)檢測(cè)并識(shí)別文檔，并添加到博客首頁(yè)中。
域名
GitHub部分配置
在GitHub工程根目錄添加CNAME文件，如下圖所示。域名部分僅為域名名稱，不添加http等關(guān)鍵字。
域名提供商部分
本文使用的是阿里云提供的云解析DNS，添加記錄如下圖所示。
記錄A部分，添加IP地址：192.30.252.153和192.30.252.154。（IP地址為GitHub提供，詳見(jiàn)setting-up-an-apex-domain）
記錄CNAME部分，添加username（GitHub用戶名）.github.io，主機(jī)記錄為www。
10分鐘后訪問(wèn)域名，查看是否生效。
七牛云
Jekyll的圖片可以使用相對(duì)路徑，圖片放在img文件夾下，在markdown文本中，通過(guò)如下方式顯示圖片。
同樣可以使用七牛云存儲(chǔ)，存放圖片，個(gè)人博客的訪問(wèn)量一般在免費(fèi)額度范圍內(nèi)。結(jié)合圖床工具，可以方便的把本地圖片上傳到七牛云中。
申請(qǐng)賬號(hào)后，在個(gè)人中心-密鑰管理中，查看Access Key和Secret Key
申請(qǐng)存儲(chǔ)空間，本文存儲(chǔ)空間為mweb（即為BucketName），申請(qǐng)成功后管理界面如下：
區(qū)域分華東、華北、華南和北美，需要記錄，后續(xù)使用。
測(cè)試域名需要記錄，如果配置了CDN加速可以使用正式域名。
MWeb
MWeb是一款Markdown筆記工具，主頁(yè)：http://zh.mweb.im 。如果使用其他Markdown工具，可以使用極簡(jiǎn)圖床或者類似工具上傳圖片。
在MWeb-Preferences-Publishing中配置七牛插件，把本地文件上傳到七牛中。
填寫說(shuō)明如下：
| 填寫項(xiàng) | 填寫內(nèi)容 |
|---|---|
| Name | 個(gè)人喜好填寫 |
| API URL | 本文以華北為例，其他參看備注 |
| Bucket Name | 存儲(chǔ)空間名稱 |
| Access Key | 上一小節(jié)提到 |
| Secret Key | 上一小節(jié)提到 |
| Image URL Prefix | 測(cè)試域名或者正式域名地址 |
| Image URL Suffix | 可以不填寫 |
配置成功后，通過(guò)工具欄按鈕選取本地文件，生成Markdown圖片標(biāo)簽的同時(shí)上傳到七牛云。
