最終效果：https://haoqchen.site
如果喜歡可以直接使用我修改後的主題。

但是請一定要將我的信息替換成你自己的，另外請不要保留我的博客。

主體來源於：Hux Blog
跟着這個博客教程走：如何快速搭建自己的github.io博客
同時受到了這個博客的很大幫助：利用 GitHub Pages 快速搭建個人博客

以下部分借鑑GJXS1980

動態鼠標曲線

添加模塊canvas-nest.min.js到js目錄下修改layouts/post.html文件在開始添加下面代碼

 <!-- canvas-nest.min.js -->
<script type="text/javascript" src="../../../../js/canvas-nest.min.js"></script>

更喜歡簡介一點，尤其手機看起來很亂，所以註釋掉了這個。

返回頂部

把在rocket.css、signature.css和toc.css下載到css的目錄下，然後在 include目錄下的head.html文件的頭部添加下面代碼：

<link rel="stylesheet" href="/css/rocket.css">
<link rel="stylesheet" href="/css/signature.css">
<link rel="stylesheet" href="/css/toc.css">

把在totop.js和toc.js下載到js的目錄下，然後在include目錄下的footer.html的最後添加下面代碼：

<a id="rocket" href="#top" class=""></a>
<script type="text/javascript" src="/js/totop.js?v=1.0.0" async=""></script>
<script type="text/javascript" src="/js/toc.js?v=1.0.0" async=""></script>

顯示站點訪問總量

具體教程參考:不蒜子

添加CSDN博客

在_config.yml用戶名那裏添加一欄:CSDN_username: u013834525
在_includes/sns-links.html中對應位置（其他網站賬戶附近）添加

{% if site.CSDN_username %}
    <li>
      <a target="_blank" href="http://blog.csdn.net/{{ site.CSDN_username }}">
        <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-CSDN fa-stack-1x fa-inverse">C</i>
        </span>
      </a>
    </li>
{% endif %}

以下部分借鑑利用 GitHub Pages 快速搭建個人博客

百度統計

直接申請，然後在_config.yml中填寫碼就行。

刪除friend

直接將_config.yml中的friend註釋了就好。

修改網站圖標

在博客img目錄下找到並替換favicon.ico這個圖標即可，圖標尺寸爲32x32。

增加Gitalk評論功能

參考爲博客添加 Gitalk 評論插件
以及官網Gitalk

以下是我自己的一些更改

刪除portolio

根據Jekyll官網的說法，只要直接刪除文件夾即可

增加搜索欄

https://github.com/HaoQChen/jekyll-search
另外我修改了搜索欄的位置，放到了右上方。只需要修改增加到_includes/footer.html中設置位置的px值即可。

<div style="position: fixed; right: 16px; top: 62px;">
    <img src="/search/img/cb-search.png"  id="cb-search-btn"  title="雙擊ctrl試一下"/>
</div>

刪除標題前的#

只需要刪除_layouts/post.html中189行的icon中的#即可，應該可以修改成任意值。

修改文章列表中的排序

原來只是按照年份排序的，我增加了月份。修改archive.html中59行爲

{%- assign _currentdate = _article.date | date: '%Y-%m' -%}

並且每篇文章我也增加了日期，在副標題下添加這一句

<h4 class="post-date">
    {{ _article.date | date: '%Y-%m-%d' }}
</h4>

導航欄分級標題

根據#116來修改的。找到css目錄下的hux-blog.min.css，不知道爲什麼我的sublime顯示這個文件只有一行，很長的一行。我嘗試過在一些網站恢復格式，但是保存後導致網頁顯示有問題。最後就只能在這個只有很長一行的文件中搜索到相應位置修改。
這裏需要注意的是，如果想h1、h2等都不同，需要刪除逗號，要注意格式～～～

更改最底下的作者鏈接

貌似鏈接到作者的github獲取star數，加載網頁會比較花時間，我就直接刪除了，並修改了一下下。主要修改都在_includes/footer.html中

修改About中只留下中文自我介紹

主要修改about.html。刪除了、。最主要要將multilingual: false

在谷歌、百度搜索引擎中登記自己的網站

自己剛建的網站別人是搜索不到的，搜索引擎的爬蟲不會這麼快爬到你的網站，但是你可以在谷歌和百度中進行登記，這樣可以加快進程(也要等幾天)。
要查看自己的網站是否已經被某個搜索引擎收錄，可以在搜索框中輸入：site:https://haoqchen.github.io/
登記方法：導航欄分級標題

Google網站站長Google Search Console。在這裏添加資源，並按要求驗證即可。我是選擇了第一個，下載html文件，然後放在主目錄下（跟archive同一目錄）。我不會用什麼sitemap，就很蠢地一篇篇博客提交給Google去抓取，地址在舊版Search Console->抓取>Google抓取工具。添加每一篇的地址，然後點抓取，然後點請求編入索引（最好抓取一篇請求一篇，而且一次不要提交太多，隔天吧，我的請求到後面出現錯誤，不知道爲什麼）。這樣你的博客就能出現在site:https://haoqchen.github.io/中了，也可以直接在Google中搜索到了。
百度鏈接提交。百度也有要驗證網站的～～～我忘了當時是怎麼進去的了。（github禁止了百度的爬蟲，所以怎麼設置，百度都不可能搜索到博客的。需要另外搞。）

注：新版Google站長網站不支持一篇一篇添加，我參考jekyll-sitemap插件自動生成了sitemap，也就是在_config.yml中添加了plugins: [jekyll-paginate, jekyll-sitemap]，然後在站長網站->站點地圖->添加新的站點地圖中填上sitemap.xml

安裝本地調試

這個真的很多坑。。。。
參考:
安裝Jekyll本地調試環境

ubuntu16.04安裝jekyll 3.3.1

Ubuntu 升級 Ruby

run jekyll serve failed ''cannot load such file – jekyll-paginate

安裝編譯相關：
```
sudo apt-get install build-essential
```

安裝ruby：
由於默認的安裝版本太低，直接安裝會出問題，要按照下面的安裝：

sudo add-apt-repository ppa:brightbox/ruby-ng
sudo apt-get update
sudo apt-get install ruby2.6 ruby2.6-dev

安裝並更新RubyGems：

sudo apt-get install rubygems
sudo gem update --system

安裝NodeJS：

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

安裝gem install jekyll：

sudo gem install jekyll
sudo gem install github-pages

隨後在自己的文件夾目錄下創建一個Gemfile文件，將下面的內容填到該文件中

source 'https://rubygems.org'      
gem 'github-pages'

隨後執行以下命令即可在http://127.0.0.1:4000/中看到自己的博客

bundle install
bundle exec jekyll serve

域名

嘗試買了一個域名，想讓百度搜索引擎能爬到，然後在coding.me上也弄一個類似github pages的，將百度或者國內的重定向到coding.me，最後放棄。目前域名全部重定向到給github pages，但github.io的域名就不能用了～～～～而且登記搜索引擎等等這些又要重新弄，很煩。

2018-11-29決定放棄coding.me。百度搜索引擎太垃圾，coding.me連本ReadMe顯示都有問題，不想浪費時間了，讓它去抓取CSDN吧，在CSDN上發佈一篇好了。

谷歌分析

在官網創建賬號和地址什麼的，然後將ID填到_config.yml的ga_track_id:就好。

自動化腳本

增加了一個add_new_article.sh腳本，只要add_new_article.sh article_title就可以自動完成img中模板文件夾的複製，模板md文件的複製、重命名以及模板文件中一些基本信息的替換

修改字體

需要在本地調試，然後改一堆東西。不是很懂，希望有前端的大佬給科普一下
首先裝用於實時更新css的grunt，除了第一個命令，其餘需要在倉庫目錄下運行：

sudo npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-banner --save-dev
npm install grunt-contrib-watch --save-dev

假設你已經在本地啓動了server，那麼再運行grunt watch，就可以將你在./less/文件加下的修改實時更新到博客（通過實時編譯成./css/文件夾下的文件實現）。

隨後在./less/hux-blog.less中修改第一個p如下，然後再刷新下你的博客，是不是就可以修改了

p {
  margin: 30px 0; //縮進
  font-size: 16px;//字體大小
  line-height: 1.5;//行距
  letter-spacing: 1px//每個字的間距
}

上面的導航欄分級標題修改方法只是臨時修改生成的css的，要想修改源碼，可以在less/side-catalog.less中找到h1_nav這一項，然後按照你的需求改就好，比如我的：

.h1_nav{
            margin-left: 0;
            font-size: 15px;
            font-weight: bold;
        }
.h2_nav{
    margin-left: 10px;
    font-size: 13px;
    font-weight: bold;
}
.h3_nav{
    margin-left: 20px;
    font-size: 11px;
    font-weight: bold;
}
.h4_nav,.h5_nav,.h6_nav{
    margin-left: 30px;
    font-size: 10px;
    a{
        max-width: 170px;
    }
}

404改成寶貝回家

在wordzzzz的博客中看到404變成了寶貝回家的頁面，深受感動，所以將自己的404也變成了寶貝回家。

具體做法是將404.html的內容換成下面這樣的：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主頁">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

不顯示某篇文章

比如正在創作中，不想別人看到，可以在文章頭部增加一個published: false就可以了。

增加讚賞功能

參考一之筆的博客，首先將reward.css放到css文件夾下，然後修改_layouts->post.html，在{{content}}後面增加以下內容：

<!-- 打賞功能 -->
<link href="/css/reward.css?v=6.2.0" rel="stylesheet" type="text/css" />

<div>
    <hr>
    <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
        <div id="wechat"><p>如果你覺得這篇文章幫你節省了時間，增長了知識，請支持我寫出更多這樣的文章</p></div>
        <br>
        <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
            <span>打賞</span>
        </button>
        <div id="QR" style="display: none;">              
            <div id="wechat" style="display: inline-block">
                <img id="wechat_qr" src="/img/reward/wechat.png" alt="白夜行的狼 微信支付"/>
                <p>微信支付</p>
            </div>
                                
            <div id="alipay" style="display: inline-block">
                <img id="alipay_qr" src="/img/reward/alipay.png" alt="白夜行的狼 支付寶"/>
                <p>支付寶</p>
            </div>
        </div>
    </div>
    <hr>     
</div>

修改文章佔總頁面的寬度

需要修改page.html中的col-lg-、col-lg-offset-、col-md-、col-md-offset-參數，這幾個參數的意思可以百度，大致是在不同屏幕分辨率時顯示的比例，總數都是12。

@TODO

最下面增加“你可能感興趣的文章，導向同一個分類的”
能不能將給博客的點贊重定向到給github點贊
代碼高亮GJXS1980的博客

建議

多看github中的issue，很多問題其實別人都遇到過了，有些甚至給出瞭解決方法。
域名建議去阿里雲的萬網買。。。。百度的解析只有自己的百度搜索引擎，真的坑。
如果更新了域名，記得重新申請一下Gitalk的ClientID，不然無法評論

如何在github pages中創建自己的Jekyll博客並綁定域名（2020-01-15）