正所謂前人栽樹，後人乘涼。
感謝Huxpro提供的博客模板
前言
從 Jekyll 到 GitHub Pages 中間踩了許多坑，終於把我的個人博客Will Wang Blog搭建出來了。。。
本教程針對的是不懂技術又想搭建個人博客的小白，操作簡單暴力且快速。當然懂技術那就更好了。
看看看博客的主頁樣式：
在手機上的佈局：
廢話不多說了，開始進入正文。
快速開始
從註冊一個Github賬號開始
我採用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。
要使用 GitHub Pages，首先你要註冊一個GitHub賬號，GitHub 是全球最大的同性交友網站(吐槽下程序員~)，你值得擁有。
拉取我的博客模板
註冊完成後搜索 flyingwzb.github.io 進入我的倉庫
點擊右上角的 Fork 將我的倉庫拉倒你的賬號下
稍等一下，點擊刷新，你會看到Fork了成功的頁面
修改倉庫名
點擊settings進入設置
你將會看到如下界面
說明已經成功一半了?。。。當然，還需要修改博客的配置才能變成你的博客。
若是出現
則需要 檢查一下你的倉庫名是否正確
整個網站結構
修改Blog前我們來看看Jekyll 網站的基礎結構，當然我們的網站比這個複雜。
├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 1994-10-03-Hello-World.md
| └── 2018-01-01-My-First-Blog.md
├── _data
| └── members.yml
├── _site
├── img
└── index.html
很複雜看不懂是不是，不要緊，你只要記住其中幾個OK了
_config.yml全局配置文件_posts放置博客文章的文件夾img存放圖片的文件夾
其他的想繼續深究可以看這裏
修改博客配置
來到你的倉庫，找到_config.yml文件,這是網站的全局配置文件。
點擊修改
然後編輯_config.yml的內容
接下來我們來詳細說說以下配置文件的內容：
基礎設置
# Site settings
title: My Blog # 你博客的標題
SEOTitle: 我的博客 | My Blog # 顯示在瀏覽器上搜索的時候顯示的標題
header-img: img/post-bg-rwd.jpg # 顯示在首頁的背景圖片
email: [email protected] # 個人郵箱
description: "You Blog" # 網站介紹
keyword: "Will Wang, Will Wang Blog, 王志彪的博客, flyingwzb, 王志彪, Java, golang" #關鍵詞
url: "https://flyingwzb.github.io" # 這個就是填寫你的博客地址
baseurl: "" # 這個我們不用填寫
側邊欄
# Sidebar settings
sidebar: true # 是否開啓側邊欄.
sidebar-about-description: "側邊欄個人描述"
sidebar-avatar:/img/avatar-by.JPG # 你的個人頭像
社交賬號
展示你的其他社交平臺
在下面你的社交賬號的用戶名就可以了，若沒有可不用填
# SNS settings
RSS: false
weibo_username: username
zhihu_username: username
github_username: username
facebook_username: username
jianshu_username: jianshu_id
新加入了簡書，jianshu_id 在你打開你的簡書主頁後的地址如：http://www.jianshu.com/u/qwertyuiop中，後面這一串數字：qwertyuiop
評論系統
博客中使用的是 Disqus 評論系統，在 官網 註冊帳號後，按下面的步驟簡單的配置即可：
進入 設置頁面 配置個人信息
找到 Username
這個 Username 就是我們 _config.yml 中 disqus_username
# Disqus settings（https://disqus.com/）
disqus_username: flyingwzb
很對人反映 Disqus 評論插件加載不出來，因爲 Disqus 在國內加載緩慢，所以我新集成了 Gitalk 評論插件（感謝@FeDemo的推薦），喜歡折騰的朋友可以看這篇：《爲博客添加 Gitalk 評論插件》。 我已經在
_config.yml配置就好了，只需要填寫參數可以了。
網站統計
集成了 Baidu Analytics 和 Google Analytics，到各個網站註冊拿到track_id替換下面的就可以了
這是我的 Google Analytics
不要使用我的track_id?。。。
若不想啓用統計，直接刪除或註釋掉就可以了
# Analytics settings
# Baidu Analytics
ba_track_id: 83e259f69b37d02a4633a2b7d960139c
# Google Analytics
ga_track_id: 'UA-90855596-1' # Format: UA-xxxxxx-xx
ga_domain: auto
好友
friends: [
{title: "書舟網",href: "http://kindle.archiew.top/"},
{title: "阮一峯",href: "http://www.ruanyifeng.com/home.html"},
{title: "阿里巴巴",href: "https://www.alibabagroup.com/cn/global/home"},
{title: "騰訊",href: "https://www.tencent.com/zh-cn/index.html"},
{title: "字節跳動",href: "https://www.bytedance.com/zh"}
]
保存
講網頁拉倒底部，點擊 Commit changes 提交保存
再次進入你的主頁，
恭喜你，你的個人博客搭建完成了?。
寫文章
利用 Github網站 ，我們可以不用學習git，就可以輕鬆管理自己的博客
對於輕車熟路的程序猿來說，使用git管理會更加方便。。。
創建
文章統一放在網站根目錄下的 _posts 的文件夾中。
創建一個文件
在下面寫文章，和標題，還能實時預覽，最後提交保存就能看到自己的新文章了。
格式
每一篇文章文件命名採用的是2018-02-04-Hello-2018.md時間+標題的形式，空格用-替換連接。
文件的格式是 .md 的 MarkDown 文件。
我們的博客文章格式採用是 MarkDown+ YAML 的方式。
YAML 就是我們配置 _config文件用的語言。
MarkDown 是一種輕量級的「標記語言」，很簡單。花半個小時看一下就能熟練使用了
大概就是這麼一個結構。
---
layout: post # 使用的佈局（不需要改）
title: My First Post # 標題
subtitle: Hello World, Hello Blog # 副標題
date: 2018-02-06 # 時間
author: Will Wang # 作者
header-img: img/post-bg-2015.jpg # 這篇文章標題背景圖片
catalog: true # 是否歸檔
tags: # 標籤
- 生活
---
## Hey
>這是我的第一篇博客。
進入你的博客主頁，新的文章將會出現在你的主頁上.
按格式創建文章後，提交保存。進入你的博客主頁，新的文章將會出現在你的主頁上.
到這裏，恭喜你！
你已經成功搭建了自己的個人博客以及學會在博客上撰寫文字的技能了（是不是有點小興奮?）。
首頁標籤
在首頁可以看到這些特色標籤，當你的文章出現相同標籤（默認相同的標籤數量大於1），纔會自動生成。
所以當你只放一篇文章的時候是不會出現標籤的。
建站的初期，博客比較少，若你想直接在首頁生成比較多的標籤。你可以在 _congfig.yml中找到這段：
# Featured Tags
featured-tags: true # 是否使用首頁標籤
featured-condition-size: 1 # 相同標籤數量大於這個數，纔會出現在首頁
將其修改爲featured-condition-size: 0, 這樣只有一個標籤時也會出現在首頁了。
相反，當你博客比較多，標籤也很多時，這時你就需要改回 1 甚至是 2 了。
自定義域名
搭建好博客之後 你可能不想直接使用 flyingwzb.github.io 這麼長的博客域名吧, 想換成想 flyingd.cn 這樣簡短的域名。那我們開始吧！
購買域名
首先，你必須購買一個自己的域名。
我是在阿里雲購買的域名
用阿里雲 app也可以註冊域名，域名的價格根據後綴的不同和域名的長度而分，比如我這個 flyingd.cn 的域名第一年才只要4元~
域名儘量選擇短一點比較好記住，注意，不能選擇中文域名，比如 張三.top ,GitHub Pages 無法處理中文域名，會導致你的域名在你的主頁上使用。
註冊的步驟就不在介紹了
解析域名
註冊好域名後，需要將域名解析到你的博客上
管理控制檯 → 域名與網站（萬網） → 域名
選擇你註冊好的域名，點擊解析
添加解析
分別添加兩個A 記錄類型,
一個主機記錄爲 www,代表可以解析 www.flyingd.cn的域名
另一個爲 @, 代表 flyingd.cn
記錄值就是我們博客的IP地址，是 GitHub Pagas 在美國的服務器的地址 185.199.111.153
可以通過 這個網站 或者直接在終端輸入ping 你的地址，查看博客的IP
ping flyingwzb.github.io
細心地你會發現所有人的博客都解析到 185.199.111.153 這個IP。
然後 GitHub Pages 再通過 CNAME記錄 跳轉到你的主頁上。
修改CNAME
最後一步，只需要修改 我們github倉庫下的 CNAME 文件。
選擇 CNAME 文件
使用的註冊的域名進行替換,然後提交保存
這時，輸入你自己的域名，就可以解析到你的主頁了。
大功告成！
進階
若你對博客模板進行修改，你就要看看 Jekyll 的開發文檔,是中文文檔哦，對英語一般的朋友簡直是福利啊（比如說我?）。
還要學習 Git 和 GitHub 的工作機制了及使用。
你可以先看看這個git教程，對git有個初步的瞭解後，那麼相信你就能將自己圖片傳到GitHub倉庫上，或者可以說掌握了 使用git管理自己的GitHub倉庫 的技能呢。
對於輕車熟路的程序猿來說，這篇教程就算就結束了，因爲下面的內容對於你們來說 so eazy~
但相信很多小白都一臉懵逼，那我們繼續?。
利用GithHub Desktop管理GitHub倉庫
GithHub Desktop 是 GithHub 推出的一款管理GitHub倉庫的桌面軟件，換句話說就是將你在Github上的文件同步到本地電腦上，並將修改後的文件同步到Github遠程倉庫。
下載
點擊圖片進入下載頁面，選擇對應的平臺進行下載
下面以Mac平臺爲例：
安裝
將下載好的文件解壓，將這隻小貓拖到應用程序文件夾中
就可以在Launchpad找到這隻小貓咪~
登錄
點開應用,會彈出登錄框，
輸入你的GitHub賬號和密碼進行登錄
登錄後關閉窗口
然後返回引導窗，一直按 Continue 繼續
Continue
還是Continue~
進入主界面，先 右鍵Remve 刪除這個用戶指導，賊煩~
克隆倉庫
選擇你的倉庫克隆到本地
管理倉庫
現在文件夾中打開
打開後你會的發現文件結構和你在Github上的一模一樣~
你最先關心的可能是你的頭像~在img文件夾中把替換我的頭像就好了。
不僅是圖片，所有在Github上的的操作都可以進行。
保存修改
當你對倉庫文件夾的文件下進行修改、添加或刪除時，都可以在 GitHub Desktop 中看到
例如我在 img 中添加了一張圖片 avatar-demo.png 添加了一張圖片
就可以在看到GitHub Desktop顯示了我的修改
保存修改只要按 Commit to master，然後可以寫上你的修改說明
同步
將修改同步到 GitHub 遠程倉庫上只需要一步：點擊右上角的同步按鈕
完成
打開你的GitHub上的倉庫，你就可以看到已經和本地同步了
可以看到你提交的詳情： add img
這樣，你已經能輕鬆管理自己的博客了。
想上傳頭像，背景，或者是刪掉你不要的圖片（我的頭像?）已經是 so eazy了吧~
注意
你在 GitHub 網站上進行 Commit 操作後，需要在GitHub Desktop上按一下 同步按鍵 才能同步網站上的修改到你的本地。
修改個人介紹
修改個人介紹需要修改根目錄下的 about.html 文件
看不懂 HTML 標籤？沒關係，對照着修改就好了~ 還有注意這個有中英介紹
常見問題
最近有很多人給我提問題，我這邊總結一下
配置文件修改後沒有效果
刷新幾遍瀏覽器就好了~
不行的話，先清除瀏覽器緩存再試試。
404錯誤
- 檢查你的倉庫名是否有按照要求填寫
- 確定 Fork 的是不是我的倉庫~
修改CNAME文件，域名還是不變
清除瀏覽器緩存就OK~
其他問題
直接在評論中提出來或私信我，我會一一替大家解決的?
其他
最近有人往我的遠程倉庫不停的 push，一天連收幾十封郵件！例如像這樣的
原因大多是直接Clone了我的倉庫到本地，沒有刪除我的遠程倉庫地址，添加完自己的倉庫地址後，一口氣推送到所有遠程倉庫（包括我的?）~
打擾了我的工作和生活~
所以，請不要往我的倉庫上推送分支！
我發現一個問題是，很多人每次修改博客的內容都commit一次到遠程倉庫，然後再查看修改結果，這樣效率非常低！
來，上車！
在本地調試博客
有心的同學在 jekyll官網 就會發現 jekyll 的 提供的實例代碼。
~ $ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle install
~/my-awesome-site $ bundle exec jekyll serve
# => 打開瀏覽器 http://localhost:4000
這段命令創建了一個默認的 jekll 網站，然後在本機的 4000 窗口展示。聰明的你應該發現怎麼做了吧~
安裝 jekyll和 jekyll bundler
$ gem install jekyll
$ gem install jekyll bundler
進入你的 Blog 所在目錄，然後創建本地服務器
$ jekyll s
然後會顯示
Auto-regeneration: enabled for '/Users/baiying/Blog'
Configuration file: /Users/baiying/Blog/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
你就可以在 http://127.0.0.1:4000/ 看到你的博客，你對本地博客的修改都會在這個地址進行顯示，這大大提高了對博客的配置效率。
使用ctrl+c就可以停止 serve
Star
若本教程順利幫你搭建了自己的個人博客，請不要 害羞，給我的 github倉庫 點個 star 吧！
因爲最近發現 Fork 將近破百，加上直接 Clone 倉庫的，保守估計已經幫助上百人成功的搭建了自己的博客，~~可是 Star 卻僅僅只有 12！可能還是做的不夠好吧！~~現在已經破百了，感謝大家的Star！
別無他求，點個 Star 吧！
心滿意足！
補充
修改網站的 icon
要修改如圖所示的網站 icon：
在博客 img 目錄下找到並替換 favicon.ico 這個圖標即可，圖標尺寸爲32x32。
修改主頁的座右銘
最近有不少小夥伴私信我：如何修改主頁的座右銘？
就是這個：
很簡單，找到博客目錄下的 index.html 文件，修改這句話就可以了。
如何在博客文章中上插入圖片
博客的文章用的是 MarkDown 格式，如果沒用過 MarkDown 真的 強烈推薦 花半個小時學習一下。
MarkDown 中添加圖片的形式是 :
例如：
就會顯示下面這張圖片
https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg就是這張圖片的URL，我們可以在瀏覽器輸入這個URL找到或下載這張圖片。
所以，要在 MacDown 中插入圖片，這張圖片就需要上傳到圖牀（網上），然後在引
用這張圖片的URL。
將圖片上傳到圖牀
Mac 上的圖牀神器：iPic
直接在App Store上下載，誰用誰知道！
使用方法很簡單，直接拖動圖片到 P 圖標上，或者選中圖片按快捷鍵 ⌘+U，就能請示上傳。
上傳成功就能直接粘貼圖片的URL。
用 iPic 上傳圖片後，獲取URL插入文章中就可以了。
推薦幾個好用軟件
MarkDown編輯器
MacDown：可能是Mac上最好的MacDown編輯器了
圖片壓縮工具
對於我們的博客來說，圖片越大，加載速度越慢。
不信你用手機打開你的博客試試~
所以有必要對我們上傳到博客網站中的圖片：指的是你的頭像，首頁背景圖片，文章背景圖片等。對於博客文章中插入的圖片，其實也可以壓縮了再上傳。
對博客中的所有圖片進行壓縮：
看看壓縮結果，最高的一張壓縮了78.7%，這簡直是太可怕了！
好了，現在個人博客的加載速度估計要起飛了~
最後要說個事情
我在博客中的文章，你們可以保留，讓更多需要幫助人的看到，當然也可以刪除。
但是，我發現居然有人把文章的作者改成了自己，然後當成自己的文章放在自己的博客上，這就令人感到氣憤了。
比如說向我請教問題的這位：
我在博客中的每篇文章都是我一字一句敲出來的，轉載的文章我也註明了出處，表示對原作者的尊重。同時也希望大家都能尊重我的付出。
謝謝~