so easy！一鍵快速生成，搭建一個屬於本身的博客網站。

做爲一個技術人員，你應該有一個屬於本身的博客網站，這個是你的職場名片！

開箱即用，直接fork這個倉庫，將裏面的MD文件改爲你本身的文章，這樣你也有本身的博客網站了~

查看博客戳這裏 👆

使用

• 開始
  • 環境
  • 開始
  • 撰寫博文
• 組件
  • 側邊欄
  • 迷你關於我
  • 推薦標籤
  • 好友連接
  • HTML5 演示文檔佈局
• 評論與 Google/Baidu Analytics
  • 評論
  • 網站分析
• 高級部分
  • 自定義
  • 標題底圖
  • 搜索展現標題-頭文件

環境

若是你安裝了 jekyll，那你只須要在命令行輸入jekyll serve 或 jekyll s就能在本地瀏覽器中輸入http://127.0.0.1:4000/預覽主題，對主題的修改也能實時展現（須要強刷瀏覽器）。

開始

你能夠通用修改 _config.yml文件來輕鬆的開始搭建本身的博客:

# Site settings
title: BY Blog                    # 你的博客網站標題
SEOTitle: 甘凱的博客 | GK Blog		# SEO 標題
description: "Hey"	   	   # 隨便說點，描述一下

# SNS settings 
github_username: GitHubGanKai     # 你的github帳號
jianshu_username: 4365773d2dd5  # 你的簡書ID。

# Build settings
# paginate: 10 # 一頁你準備放幾篇文章
複製代碼

Jekyll官方網站還有不少的參數能夠調，好比設置文章的連接形式...網址在這裏：Jekyll - Official Site 中文版的在這裏：Jekyll中文.

撰寫博文

要發表的文章通常以 Markdown 的格式放在這裏_posts/，你只要看看這篇模板裏的文章你就馬上明白該如何設置。

yaml 頭文件長這樣:

layout:     post
title:      最全的Git入門操做使用詳解
subtitle:   最全的Git入門操做使用詳解 進階
date:       2019-1-27 12:03:16
author:     gankai
header-img: img/post-bg-ios9-web.jpg
catalog: true
tags:
    - git
    - 函數式編程
    - 開源框架
---

複製代碼

側邊欄

看右邊:

設置是在 _config.yml文件裏面的Sidebar settings那塊。

# Sidebar settings
sidebar: true  #添加側邊欄
sidebar-about-description: "簡單的描述一下你本身"
sidebar-avatar: /img/avatar-by.jpg     #你的大頭貼，請使用絕對地址.注意：名字區分大小寫！後綴名也是
複製代碼

側邊欄是響應式佈局的，當屏幕尺寸小於992px的時候，側邊欄就會移動到底部。具體請見bootstrap柵格系統 v3.bootcss.com/css/

Mini About Me

Mini-About-Me 這個模塊將在你的頭像下面，展現你全部的社交帳號。這個也是響應式佈局，當屏幕變小時候，會將其移動到頁面底部，只不過會稍微有點小變化，具體請看代碼。

Featured Tags

看到這個網站 Medium 的推薦標籤很是的炫酷，因此我將他加了進來。 這個模塊如今是獨立的，能夠呈如今全部頁面，包括主頁和發表的每一篇文章標題的頭上。

# Featured Tags
featured-tags: true  
featured-condition-size: 1     # A tag will be featured if the size of it is more than this condition value
複製代碼

惟一須要注意的是featured-condition-size: 若是一個標籤的 SIZE，也就是使用該標籤的文章數大於上面設定的條件值，這個標籤就會在首頁上被推薦。

內部有一個條件模板 {% if tag[1].size > {{site.featured-condition-size}} %} 是用來作篩選過濾的.

Social-media Account

在下面輸入的社交帳號，沒有的添加的不會顯示在側邊框中。新加入了簡書連接, www.jianshu.com/u/4365773d2…

# SNS settings
RSS: false
jianshu_username: 	jianshu_id
zhihu_username:     username
facebook_username:  username
github_username:    username
# weibo_username:   username
複製代碼

Friends

好友連接部分。這會在所有頁面顯示。

設置是在 _config.yml文件裏面的Friends那塊，本身加吧。

# Friends
friends: [
    {
        title: "GK Blog",
        href: "https://github.com/GitHubGanKai/blog"
    },
    {
        title: "Apple",
        href: "https://apple.com/"
    }
]
複製代碼

Keynote Layout

HTML5幻燈片的排版：

這部分是用於佔用html格式的幻燈片的，通常用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我認爲一個現代化的博客怎麼能少了放html幻燈的功能呢~

其主要原理是添加一個 iframe，在裏面加入外部連接。你能夠直接寫到頭文件裏面去，詳情請見下面的yaml頭文件的寫法。

---
layout:     keynote
iframe:     "http://huangxuan.me/js-module-7day/"
---
複製代碼

iframe在不一樣的設備中，將會自動的調整大小。保留內邊距是爲了讓手機用戶能夠向下滑動，以及添加更多的內容。

Comment

博客不只支持 Disqus 評論系統,還加入了 Gitalk 評論系統，支持 Markdwon 語法，cool~

Disqus

優勢：國際比較流行，界面也很大氣、簡潔，若是有人評論，還能實時通知，直接回復通知的郵件就好了；

缺點：評論必需要去註冊一個disqus帳號，分享通常只有Facebook和Twitter，另外在牆內加載速度略慢了一點。想要知道長啥樣，能夠看之前的版本點這裏 最下面就能夠看到。

Node：有不少人反映 Disqus 插件加載不出來，可能牆又架高了，有條件的話翻個牆就行了~

使用：

首先，你須要去註冊一個Disqus賬號。不要直接使用個人啊！

其次，你只須要在下面的 yaml 頭文件中設置一下就能夠了。

# 評論系統
# Disqus（https://disqus.com/）
disqus_username: qiubaiying
複製代碼

Gitalk

優勢：界面乾淨簡潔，利用 Github issue API 作的評論插件，使用 Github 賬號進行登陸和評論，最喜歡的支持 Markdown 語法，對於程序員來講真是太 cool 了。

缺點：配置比較繁瑣，每篇文章的評論都須要初始化。

使用：

參考qiubaiying的這篇文章：《爲博客添加 Gitalk 評論插件》

Analytics

網站分析，如今支持百度統計和Google Analytics。須要去官方網站註冊一下，而後將返回的code貼在下面：

# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900

# Google Analytics
ga_track_id: 'UA-49627206-1'            # 你用Google帳號去註冊一個就會給你一個這樣的id
ga_domain: huangxuan.me			# 默認的是 auto, 這裏我是自定義了的域名，你若是沒有本身的域名，須要改爲auto。
複製代碼

Customization

若是你喜歡折騰，你能夠去自定義這個模板的 Code。

若是你能夠理解 _include/ 和 _layouts/文件夾下的代碼（這裏是整個界面佈局的地方），你就可使用 Jekyll 使用的模版引擎 Liquid的語法直接修改/添加代碼，來進行更有創意的自定義界面啦！

Header Image

博客每頁的標題底圖是能夠本身選的，看看幾篇示例post你就知道如何設置了。

標題底圖的選取徹底是看我的的審美了。每一篇文章能夠有不一樣的底圖，你想放什麼就放什麼，最後寬度要夠，大小不要太大，不然加載慢啊。

上傳的圖片最好先壓縮，這裏推薦 imageOptim 圖片壓縮軟件，讓你的博客起飛。

可是須要注意的是本模板的標題是白色的，因此背景色要設置爲灰色或者黑色，總之深色系就對了。固然你還能夠自定義修改字體顏色，總之，用github pages就是能夠徹底的個性定製本身的博客。

SEO Title

個人博客標題是 「GK Blog」 可是我想要在搜索的時候顯示 「gankai的博客 | GK Blog」 ，這個就須要 SEO Title 來定義了。

其實這個 SEO Title 就是定義了這個裏面的東西和多說分享的標題，你能夠自行修改的。

關於收到"Page Build Warning"的 Email

因爲jekyll升級到3.0.x,對原來的 pygments 代碼高亮再也不支持，現只支持一種-rouge，因此你須要在 _config.yml文件中修改highlighter: rouge.另外還須要在_config.yml文件中加上gems: [jekyll-paginate].

同時,你須要更新你的本地 jekyll 環境.

使用jekyll server的同窗須要這樣：

1. gem update jekyll # 更新jekyll
2. gem update github-pages #更新依賴的包

使用bundle exec jekyll server的同窗在更新 jekyll 後，須要輸入bundle update來更新依賴的包.

Note： 可使用 jekyll -s 命令在本地實時配置博客，提升效率。詳見 Jekyll.com

參考文檔：using jekyll with pages & Upgrading from 2.x to 3.x

致謝

1. 這個模板是從這裏 qiubaiying fork 的, 感謝這個做者。
2. 感謝 Jekyll、Github Pages 和 Bootstrap!
3. 博客的搭建教程修改自 qiubaiying 更爲詳細的教程戳這 《利用 GitHub Pages 快速搭建我的博客》 或 wiki

License

遵循 MIT 許可證。有關詳細,請參閱 LICENSE。