前言

想搭建自己部落格很久了（雖然搭了也不見得能產出多頻繁）。

最初萌生想寫自己部落格的想法，想象中，是自己一行一行碼出來的成品，對眾多快速構建+模板式搭建不屑一顧，也是那段時間給閒的，從前後端選型、資料庫敲定，到實際程式碼編寫，越寫越發現自己要弄的東西太多太多，而且，沒有模板，沒有原型，當初我的審美還是很欠缺的，每寫一行css都是懷疑的，痛苦的，直到一年以後，我的部落格還處於程式碼階段，且中間好幾次因為工作太忙，長時間沒碰它，想法越來越弱，直至擱淺。

這段時間換了工作，昨天發版，今天閒的不行，於是這想法突然又冒出來了，網上閒逛逛，發現了這篇小白式教程，曾經對快速構建+模板式搭建不屑一顧的我，經過歲月的沉澱，現在的想法：嗯，真香！

於是，我的處女博，就貢獻給這篇教程吧，也算是感謝一下老闆這篇傻瓜式教程了。

部落格搭建

部落格搭建主要依賴於教程《利用 GitHub Pages 快速搭建個人部落格》，她的步驟都寫得很詳細，按著步驟來基本上問題不大，這裡做個步驟總結：

1、最基本的，你得先有個GitHub賬號

已經有賬號的往下看，沒有的同學點選這裡去申請

2、fork我的倉庫到你的git裡面

進入我的倉庫將倉庫fork到你的git上：點選右上角的fork按鈕，等一會兒頁面自動重新整理。

3、修改setting

進入你自己的倉庫-setting：修改你的倉庫名為 你的倉庫名.github.io（這裡有個問題，稍後解釋），改這裡：

注意：一定是你的倉庫名.github.io，不然的話，你會發現git不會正確釋出，比如我把倉庫名改成了aaa.github.com，這個時候，下面GitHub Pages那塊兒顯示的釋出地址就是 https://awang0608.github.io/aaa.github.com/ ，而不是我們預期的 https://awang0608.github.io/ 了。

走到這一步之後，就可以用自己的倉庫地址訪問了，接下來就是粗暴的刪我的文章！刪我的圖片！刪我的配置！將這一切，改成自己的，就可以啦。

遇到的問題

整個想法從萌生到開始搭建到搭建完成，差不多是一下午的時間，在按照教程走的這個過程中，發現了幾個小問題，幸而都一一解決，在這裡將解決辦法奉上，希望對看到這篇教程的小夥伴們能有一些幫助。

最後一步，到改了倉庫名為自己的倉庫名後，使用github.io地址訪問一直報404

教程給出的解決方案並沒有解決我的問題，百思不得其解，還是百度大法好呀，要解決404的問題，需要將原倉庫名awang0608.github.io修改成awang0608.github.com，等個幾秒鐘強刷https://awang0608.github.io/地址，就能看到網站正常顯示。

使用百度分析工具Baidu Analytics的時候，因為對分析網站不熟悉，找了很久找不到自己的ba_track_id

在這裡：

我也不知道這個馬賽克打了有什麼意義，但就是，想打。

Gitalk整合後報錯：Error: Issues are disabled for this repo.

差不多就是下面這個鬼樣子：

據說導致的原因是fork了別人的倉庫，是不會有自己issues的，所以

解決辦法：重新建一個空白專案，把程式碼移過去，這裡需要注意的是，新建空白專案後，注意修改setting，主要有三個地方：一是setting裡面的倉庫名（關鍵點見步驟3），這個時候可以毫不猶豫地把.com字尾捨棄，直接使用.io字尾了，二是Features裡面的Issues記得勾選（一般是預設勾選），三是需要自己設定GitHub Pages，GitHub Pages->Source:選擇master，這時候不要動頁面，它會自己重新整理。

重新整理過後

注意哦，頁面若是顯示類似 Your site is ready to be published at https://awang0608.github.io/qiubaiying.github.io/. 就是錯的哦（這一點前面提到過，我這兒是因為沒有改倉庫名），要顯示 Your site is published at https://awang0608.github.io/ ，並且前面有個綠色的勾，才能正確的用這個地址顯示。

Gitalk整合後報錯：Error: Not Found.

這個問題主要是前幾個問題導致的，在解決404問題的時候，將字尾io改成了com，然後自然而然地，_config.yml檔案中關於Gitalk的配置也改成了.com結尾，而且，git上Settings-> Developer settings->OAuth Apps裡註冊的Homepage URL也填成了.com結尾，但是，在解決Issues are disabled for this repo問題的時候，我們是直接拋棄了.com，使用.io的，所以會出現Not Found的情況，這個時候，將，_config.yml檔案中關於Gitalk的配置和Homepage URL改回.io結尾。

專案跑起來後發現右側多了一個滾動條，體驗極其不友好.

這個就很easy啦，偵錯程式開啟搜查元素髮現是article元素設定了overflow-x:hidden導致的，雖然我沒明白為什麼教程中的網站沒有出現這個問題，但是我大手一揮，刪掉了這個樣式。

個性設定

在網站順利跑起來的後幾天裡，我分別給網站新增了小桃心、打賞和瀏覽量展示的功能，後續看情況，如果有更多的小設定能俘虜我的話，我會陸續將它們加進來，變成一個花裡胡哨的網站，可別嫌棄呀[手動捂臉哭]。

小桃心

小桃心的原始碼是在網上找的，原功能是滑鼠點選冒心心，我給新增了一個隨機冒心心的功能（新增了一個定時器，慢慢跑），還讓它變大了點，直接設定定時器的話，會發現如果停留在當前頁之後切換到其他頁面稍微長一點的時間，就有滿屏的小桃心，晃瞎了我，於是加了一個判斷，最多冒10個出來，嗯，心情愉悅，有興趣的朋友可以檢視原始碼：sweetHeart.js，或者直接引用，就可以在你的網站也加上這些小心心咯~

打賞

打賞功能隨便一百度就有無數的教程，這裡我就不再贅述，只是提醒一下，在引用的時候最好不要加前面的協議字元，否則容易404，還納悶半天為什麼不得行，還有就是，同一個網站上的微信和支付寶的付款圖，微信隨時能訪問，支付寶的偶爾會報403，這個暫時還沒找到解決的辦法。

瀏覽量

瀏覽量展示使用的是不蒜子的指令碼，方便，簡單。不蒜子自己的定位是：極簡網頁計數器，兩行程式碼，搞定計數。（悄咪咪地說，不止計數極簡，連它的官網也真真兒是極簡）

要使用不蒜子必須在頁面中引入busuanzi.js，不蒜子可以給任何型別的個人站點使用。鑑於前端的引用慣性，我將這個指令碼引用在了footer.html的最後，然後，在page.html中找個地方添加了程式碼來顯示站點總訪問量：

    // footer.html
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    //page.html
    <div>本站總訪問量<span id="busuanzi_value_site_pv">0</span>次</div>

站點總訪問量有兩種計算方式：

pv的方式，單個使用者連續點選n篇文章，記錄n次訪問量

uv的方式，單個使用者連續點選n篇文章，只記錄1次訪客數

這兩種使用方式分別對應id：busuanzi_value_site_pv和id：busuanzi_value_site_uv；

在post.html中也添加了程式碼來顯示單頁面訪問量：

    <span style="font-size: 14px;">
        <span id="busuanzi_container_page_pv">
            共<span id="busuanzi_value_page_pv">0</span>次閱讀
        </span>
    </span>

不蒜子自身只提供標籤+數字，至於顯示的style和css動畫效果，可隨意發揮，只需要保證id正確即可。

友情提示

在根據教程配置Homepage URL的時候是直接填寫的https://awang0608.github.io/，但實際上需要填寫的整個倉庫的git地址：https://github.com/awang0608/awang0608.github.io。

結語

歷經一下午將部落格搭建好，歷時3小時做了這篇總結，雖然是小白教程，但自己解決了教程中遇到的問題，還是比較開心的，接下來準備做的是優化，因為我個人作為一個前端來講，確實覺得這個部落格的主題吧，其實總體來講還是很不錯的，只是我實在無法接受頁面佈局上一張圖佔了整個瀏覽器的70%，其實大家能發現，點進一張博文詳情，首先是看不到多少有效內容的，都被一張大圖佔據了空間，有效資訊非常少。

仔細看了看專案程式碼，理清了它的實現，發現要改起來還是比較簡單的，而且，我還可以做一些我自己比較喜歡的優化，所以，我準備動起來了。

可能有人會有疑問，不喜歡這個主題那為什麼不更換一個主題呢？好吧，其實是因為我看了jekyll提供的主題，發現，這個已經很不錯了，沒有找到更喜歡的[手動捂臉哭]，當然，如果自己審美線上的話，我還是可以為jekyll貢獻我自己的主題的。

如果有想去研究一下主題的，去這裡：jekyll主題官網。