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