> 正所謂前人栽樹，后人乘涼，
>
> 感謝[Huxpro](https://github.com/huxpro)提供的博客模板
>
> [我的的博客](https://flyingwzb.github.io)
# 前言
從 Jekyll 到 GitHub Pages 中間踩了許多坑，終于把我的個人博客[Will Wang Blog](https://flyingwzb.github.io)搭建出來了，，，
本教程針對的是不懂技術又想搭建個人博客的小白，操作簡單暴力且快速，當然懂技術那就更好了，
看看看博客的主頁樣式：
[](https://flyingwzb.github.io/)
在手機上的布局：
[](https://flyingwzb.github.io/)
廢話不多說了，開始進入正文，
# 快速開始
### 從注冊一個Github賬號開始
我采用的搭建博客的方式是使用 [GitHub Pages](https://pages.github.com/) + [jekyll](http://jekyll.com.cn/) 的方式，
要使用 GitHub Pages，首先你要注冊一個[GitHub](https://github.com/)賬號，GitHub 是全球最大的同性交友網站(吐槽下程式員~)，你值得擁有，
### 拉取我的博客模板
注冊完成后搜索 `flyingwzb.github.io` 進入[我的倉庫](https://github.com/flyingwzb/flyingwzb.github.io)
點擊右上角的 **Fork** 將我的倉庫拉倒你的賬號下
稍等一下，點擊重繪，你會看到**Fork**了成功的頁面
### 修改倉庫名
點擊**settings**進入設定
<p id = "Rename"></p>
修改倉庫名為 `你的Github賬號名.github.io`，然后 Rename
這時你在在瀏覽器中輸入 `你的Github賬號名.github.io` 例如:`flyingwzb.github.io`
你將會看到如下界面
說明已經成功一半了??，，，當然，還需要修改博客的配置才能變成你的博客，
若是出現
則需要 [檢查一下你的倉庫名是否正確](#Rename)
### 整個網站結構
修改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` 存放圖片的檔案夾
其他的想繼續深究可以[看這里](http://jekyll.com.cn/docs/structure/)
### 修改博客配置
來到你的倉庫，找到`_config.yml`檔案,這是網站的全域組態檔，
點擊修改
然后編輯`_config.yml`的內容
接下來我們來詳細說說以下組態檔的內容：
#### 基礎設定
```yaml
# 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: "" # 這個我們不用填寫
```
#### 側邊欄
```yaml
# Sidebar settings
sidebar: true # 是否開啟側邊欄.
sidebar-about-description: "側邊欄個人描述"
sidebar-avatar:/img/avatar-by.JPG # 你的個人頭像
```
#### 社交賬號
展示你的其他社交平臺
在下面你的社交賬號的用戶名就可以了，若沒有可不用填
```yaml
# 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](https://disqus.com/) 評論系統，在 [官網](https://disqus.com/) 注冊帳號后，按下面的步驟簡單的配置即可：
進入 [設定頁面](https://disqus.com/home/settings/profile/) 配置個人資訊
找到 **Username**
這個 **Username** 就是我們 `_config.yml` 中 `disqus_username`
```
# Disqus settings（https://disqus.com/）
disqus_username: flyingwzb
```
> 很對人反映 Disqus 評論插件加載不出來，因為 Disqus 在國內加載緩慢，所以我新集成了 Gitalk 評論插件（感謝[@FeDemo](https://github.com/FeDemo)的推薦），喜歡折騰的朋友可以看這篇：[《為博客添加 Gitalk 評論插件》](https://flyingwzb.github.io/2018/12/19/%E4%B8%BA%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0-Gitalk-%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/)， 我已經在`_config.yml` 配置就好了，只需要填寫引數可以了，
#### 網站統計
集成了 [Baidu Analytics](http://tongji.baidu.com/web/welcome/login) 和 [Google Analytics](http://www.google.cn/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
```
#### 好友
```yaml
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](https://git-scm.com/)，就可以輕松管理自己的博客
對于輕車熟路的程式猿來說，使用git管理會更加方便，，，
## 創建
文章統一放在網站根目錄下的 `_posts` 的檔案夾中，
創建一個檔案
在下面寫文章，和標題，還能實時預覽，最后提交保存就能看到自己的新文章了，
## 格式
每一篇文章檔案命名采用的是`2018-02-04-Hello-2018.md`時間+標題的形式，空格用`-`替換連接，
檔案的格式是 `.md` 的 [**MarkDown**](http://sspai.com/25137/) 檔案，
我們的博客文章格式采用是 **MarkDown**+ **YAML** 的方式，
[**YAML**](http://www.ruanyifeng.com/blog/2016/07/yaml.html?f=tt) 就是我們配置 `_config`檔案用的語言，
[**MarkDown**](http://sspai.com/25137/) 是一種輕量級的「標記語言」，很簡單，[花半個小時看一下](http://sspai.com/25137)就能熟練使用了
大概就是這么一個結構，
```
---
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](http://flyingwzb.github.io) 這么長的博客域名吧, 想換成想 [flyingd.cn](https://flyingwzb.github.io) 這樣簡短的域名，那我們開始吧！
#### 購買域名
首先，你必須購買一個自己的域名，
我是在[阿里云](https://wanwang.aliyun.com/domain/?spm=5176.8006371.1007.dnetcndomain.q1ys4x)購買的域名
用**阿里云** app也可以注冊域名，域名的價格根據后綴的不同和域名的長度而分，比如我這個 `flyingd.cn` 的域名第一年才只要4元~
域名盡量選擇短一點比較好記住，注意，不能選擇中文域名，比如 `張三.top` ,GitHub Pages **無法處理中文域名**，會導致你的域名在你的主頁上使用，
注冊的步驟就不在介紹了
#### 決議域名
注冊好域名后，需要將域名決議到你的博客上
管理控制臺 → 域名與網站（萬網） → 域名
選擇你注冊好的域名，點擊決議
添加決議
分別添加兩個`A` 記錄型別,
一個主機記錄為 `www`,代表可以決議 `www.flyingd.cn`的域名
另一個為 `@`, 代表 `flyingd.cn`
記錄值就是我們博客的IP地址，是 GitHub Pagas 在美國的服務器的地址 `185.199.111.153`
可以通過 [這個網站](http://ip.chinaz.com/) 或者直接在終端輸入`ping 你的地址`，查看博客的IP
ping flyingwzb.github.io
細心地你會發現所有人的博客都決議到 `185.199.111.153` 這個IP，
然后 GitHub Pages 再通過 CNAME記錄 跳轉到你的主頁上，
#### 修改CNAME
最后一步，只需要修改 我們github倉庫下的 **CNAME** 檔案，
選擇 **CNAME** 檔案
使用的注冊的域名進行替換,然后提交保存
這時，輸入你自己的域名，就可以決議到你的主頁了，
大功告成！
# 進階
若你對博客模板進行修改，你就要看看 Jekyll 的[開發檔案](http://jekyll.com.cn),是中文檔案哦，對英語一般的朋友簡直是福利啊（比如說我??），
還要學習 **Git** 和 **GitHub** 的作業機制了及使用，
你可以先看看這個[git教程](http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/)，對git有個初步的了解后，那么相信你就能將自己圖片傳到GitHub倉庫上，或者可以說掌握了 **使用git管理自己的GitHub倉庫** 的技能呢，
對于輕車熟路的程式猿來說，這篇教程就算就結束了，因為下面的內容對于你們來說 so eazy~
但相信很多小白都一臉懵逼，那我們繼續??，
# 利用GithHub Desktop管理GitHub倉庫
[GithHub Desktop](https://desktop.github.com/) 是 **GithHub** 推出的一款管理GitHub倉庫的桌面軟體，換句話說就是將你在**Github**上的檔案同步到本地電腦上，并將修改后的檔案同步到**Github**遠程倉庫，
#### 下載
點擊圖片進入下載頁面，選擇對應的平臺進行下載
[](https://desktop.github.com/)
下面以**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錯誤
1. 檢查你的倉庫名是否有按照要求填寫
2. 確定 **Fork** 的是不是我的倉庫~
#### 修改CNAME檔案，域名還是不變
清除瀏覽器快取就OK~
#### 其他問題
直接在評論中提出來或私信我，我會一一替大家解決的??
# 其他
最近有人往我的遠程倉庫不停的 **push**，一天連收幾十封郵件！例如像這樣的
原因大多是直接Clone了我的倉庫到本地，**沒有洗掉我的遠程倉庫地址**，添加完自己的倉庫地址后，一口氣推送到所有遠程倉庫（包括我的??）~
打擾了我的作業和生活~
所以，**請不要往我的倉庫上推送分支**！
我發現一個問題是，很多人每次修改博客的內容都commit一次到遠程倉庫，然后再查看修改結果，這樣效率非常低！
#### 來，上車！
## 在本地除錯博客
> 注：下面的操作是在 **Mac** 終端進行的，
> **Windows** 環境下的配置請參考 [@夢幻之云](http://www.jianshu.com/u/a13e7484dc21) 提供的 [這篇文章](https://agcaiyun.cn/2017/09/10/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/)，
有心的同學在 [jekyll官網](http://jekyllcn.com/) 就會發現 `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倉庫](https://github.com/flyingwzb/flyingwzb.github.io) 點個 **star** 吧！
因為最近發現 Fork 將近破百，加上直接 Clone 倉庫的，保守估計已經幫助上百人成功的搭建了自己的博客，~~可是 Star 卻僅僅只有 **12**！可能還是做的不夠好吧！~~現在已經破百了，感謝大家的Star！
### **別無他求，點個 [Star](https://github.com/flyingwzb/flyingwzb.github.io) 吧**！
**心滿意足！**
# 補充
#### 修改網站的 **icon**
要修改如圖所示的網站 **icon**：
在博客 `img` 目錄下找到并替換 `favicon.ico` 這個圖示即可，圖示尺寸為`32x32`，
#### 修改主頁的座右銘
最近有不少小伙伴私信我：**如何修改主頁的座右銘？**
就是這個：
很簡單，找到博客目錄下的 **index.html** 檔案，修改這句話就可以了，
#### 如何在博客文章中上插入圖片
博客的文章用的是 MarkDown 格式，如果沒用過 MarkDown 真的 強烈推薦 [花半個小時學習一下](http://sspai.com/25137)，
MarkDown 中添加圖片的形式是 :``
例如：
``就會顯示下面這張圖片
`https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg`就是這張圖片的URL，我們可以在瀏覽器輸入這個URL找到或下載這張圖片，
所以，要在 MacDown 中插入圖片，這張圖片就需要上傳到圖床（網上），然后在引
用這張圖片的URL，
##### 將圖片上傳到圖床
Mac 上的圖床神器：iPic
直接在App Store上下載，誰用誰知道！
使用方法很簡單，直接拖動圖片到 P 圖示上，或者選中圖片按快捷鍵 `?+U`，就能請示上傳，
上傳成功就能直接粘貼圖片的URL，
用 iPic 上傳圖片后，獲取URL插入文章中就可以了，
#### 推薦幾個好用軟體
##### MarkDown編輯器
[MacDown](https://macdown.uranusjr.com/)：可能是Mac上最好的MacDown編輯器了
##### 圖片壓縮工具
[ImageOptim](https://imageoptim.com/)
對于我們的博客來說，圖片越大，加載速度越慢，
不信你用手機打開你的博客試試~
所以有必要對我們上傳到博客網站中的圖片：指的是你的頭像，首頁背景圖片，文章背景圖片等，對于博客文章中插入的圖片，其實也可以壓縮了再上傳，
對博客中的所有圖片進行壓縮：
看看壓縮結果，最高的一張壓縮了78.7%，這簡直是太可怕了！
好了，現在個人博客的加載速度估計要起飛了~
# 最后要說個事情
我在博客中的文章，你們可以保留，讓更多需要幫助人的看到，當然也可以洗掉，
但是，我發現居然有人把文章的作者改成了自己，然后當成自己的文章放在自己的博客上，這就令人感到氣憤了，
比如說向我請教問題的這位：
我在博客中的每篇文章都是我一字一句敲出來的，轉載的文章我也注明了出處，表示對原作者的尊重，同時也希望大家都能尊重我的付出，
謝謝~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/67527.html
標籤：其他
上一篇：Cocos2dx生成arm64-v8a環境下的.so檔案問題？急急急
下一篇：cocos lua 圓環遮罩裁剪