利用GitHub Pages + jekyll快速搭建我的博客

前言

想搭建本身博客好久了（雖然搭了也不見得能產出多頻繁）。

最初萌生想寫本身博客的想法，想象中，是本身一行一行碼出來的成品，對衆多快速構建+模板式搭建不屑一顧，也是那段時間給閒的，從先後端選型、數據庫敲定，到實際代碼編寫，越寫愈加現本身要弄的東西太多太多，並且，沒有模板，沒有原型，當初個人審美仍是很欠缺的，每寫一行css都是懷疑的，痛苦的，直到一年之後，個人博客還處於代碼階段，且中間好幾回由於工做太忙，長時間沒碰它，想法愈來愈弱，直至擱淺。

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

因而，個人處女博，就貢獻給這篇教程吧，也算是感謝一下老闆這篇傻瓜式教程了。

博客搭建

博客搭建主要依賴於教程《利用 GitHub Pages 快速搭建我的博客》，她的步驟都寫得很詳細，按着步驟來基本上問題不大，這裏作個步驟總結：

一、最基本的，你得先有個GitHub帳號

已經有帳號的往下看，沒有的同窗點擊這裏去申請

二、fork個人倉庫到你的git裏面

進入個人倉庫將倉庫fork到你的git上：點擊右上角的fork按鈕，等一下子頁面自動刷新。

三、修改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的時候，由於對分析網站不熟悉，找了好久找不到本身的batrackid

在這裏：

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

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：busuanzivaluesitepv和id：busuanzivaluesiteuv；

在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主題官網。

予人玫瑰，手有餘香！若是這篇文章幫助了你，而且讓你以爲想要放到本身的博客上，歡迎轉載，轉載請註明出處。

【點贊、分享】都是我持續總結，持續分享的最大動力！

另：閒暇之餘用本身的GitHub Pages搭起了網站，裏面會不按期更新一些文章，有興趣的朋友能夠去看看：個人Github Pages

有興趣的朋友能夠關注個人公衆號：非梧不棲oy，微信可直接搜索關注或是下方掃碼關注，公衆號會同步GitHub Pages的部分博客，您能夠直接在手機上隨時閱讀到本身感興趣的文章