最全面的github pages搭建个人博客教程
作為一個程序員怎么能沒有自己的個人博客呢，這里詳細(xì)記錄和分享我的博客搭建經(jīng)驗，讓你輕輕松松擁有自己的博客網(wǎng)站。傻瓜式一站式教你用 github pages 來搭建博客，詳細(xì)記錄全過程，保證你能學(xué)會。
如果你是非程序員或者不關(guān)系技術(shù)細(xì)節(jié)，只需花 3 分鐘閱讀前面 5 個章節(jié)內(nèi)容，就能輕松擁有自己的博客。
開始
話不多說，直接上圖先來看下我的博客整體效果，個人比較喜歡這種簡約的博客風(fēng)格，不要花里胡哨但該有的功也都有。
下面列舉這個博客具有的功能特性，其中我比較看重歸檔和搜索能力。
支持特性
-
簡約風(fēng)格博客
-
Powered By Jekyll
-
博客文章搜索
-
自定義社交鏈接
-
網(wǎng)站訪客統(tǒng)計
-
Google Analytics 網(wǎng)站分析
-
Gitalk評論功能
-
自定義關(guān)于about頁面
-
支持中文布局
-
支持歸檔與標(biāo)簽
-
支持改變主題顏色
-
支持添加文章目錄
建立博客Git倉庫
首先你要在github上有自己博客倉庫，用來生成和存放博客文章。你可以直接fork我的博客倉庫。這樣你馬上有了自己的博客倉庫。
進(jìn)去點(diǎn)擊 fork，之后在你自己的倉庫下會看到剛復(fù)制的倉庫，以后的操作都在你自己的倉庫進(jìn)行，當(dāng)然想感謝我寫這個教程就幫我點(diǎn)個 start 吧！
**版權(quán)聲明： fork之后_posts文件夾內(nèi)容是我的博客文章，版權(quán)歸我所有。你可以選擇刪除里面的文章替換上自己的博客文章，如需轉(zhuǎn)載需要與我聯(lián)系授權(quán) **。
修改博客倉庫名稱
進(jìn)到你自己的博客倉庫，修改博客倉庫名稱成你自己的用戶名。因為 github page 解析的時候找的是這個 username.github.io的倉庫名，這一步非常重要。
此時，不出意外的話，打開域名 https://username.github.io 就能看到你剛搭建的博客了。注意替換 username成你自己的github 用戶名。
博客配置
上面點(diǎn)開域名看到的還是我的博客配置，顯示的博客名字也是我的。還需要更改配置才是你的博客。
博客的配置文件是倉庫根目錄下的_config.yml文件，直接點(diǎn)開它編輯。
你還需要更改以下配置：
博客名稱和描述
分別是博客名稱和描述，自己任意寫點(diǎn)啥。
博客社交鏈接
這里配置社交鏈接按鈕，沒配的不顯示，我現(xiàn)在配了知乎、郵箱、github賬號三個。其他你想加自己加上就可以。
配置gitalk
這個是評論功能的配置。評論功能基于gitalk，在配置文件中找到gitalk配置項目：
修改規(guī)則如下：
gitalk:clientID: <你的clientID>clientSecret: <你的clientSecret>repo: <你的repository名稱>owner: <你的GitHub用戶名>原理是利用github的issues評論文章。其中clientID和clientSecret需要點(diǎn)擊這里創(chuàng)建
點(diǎn)綠色按鈕創(chuàng)建，成功之后會得到以上兩個id，修改配置即可。
Google站長統(tǒng)計
首先你要去注冊一個Google Analytics賬號，它可以統(tǒng)計你博客網(wǎng)站的訪問人數(shù)，訪問來源等非常豐富的網(wǎng)站數(shù)據(jù)。如果你不在乎可以不用跳過這節(jié)。不過要把配置中我的google_analytics: UA-XXXXXXX-X刪除，否則統(tǒng)計到我的去了。
# Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking google_analytics: UA-XXXXXXX-X下面是我的網(wǎng)站實(shí)時分析頁面展示：
由于不可描述的原因，國內(nèi)注冊賬號可能會遇到問題，所有不配置也沒關(guān)系。
博客網(wǎng)址配置
# Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co) # Used for Sitemap.xml and your RSS feed url: https://yourname.github.io這里配置你自己的博客地址。
配置提交
對_config.ymld的修改需要提交才能生效，點(diǎn)下圖中綠色按鈕提交。
done! 現(xiàn)在輸入上面提到的博客地址，回車，你擁有了自己的博客。
如何寫博客
好了，博客有了。如何更新文章呢？
文章用markdown語法，寫好統(tǒng)一放在_post文件夾下上傳，git page會自動從你的git倉庫拉去解析成網(wǎng)頁，立刻就能在你的博客網(wǎng)頁瀏覽。
關(guān)于文章的命名格式：博客文章必須按照統(tǒng)一的命名格式?yyyy-mm-dd-blogName.md?比如我這篇博客的名字是2019-11-22-create_blog_with_github_pages.md
看到這里，如果只是簡單的想寫博客，后面的不看也可以了，你已經(jīng)擁有了自己的博客！后面章節(jié)是記錄一些DIY的過程。
另外，發(fā)現(xiàn)最近用我這個模板的同學(xué)越來越多，如果搭建過程中有什么問題，可以在我討論交流。
本地博客預(yù)覽
到目前為止，我們提交的文章都是必須上傳到github倉庫才能預(yù)覽。如果你想寫完在本地瀏覽器看一下效果在上傳也是可以的，因為不是所有人都有這樣的需求。
安裝 Ruby 和 DevKit
在官網(wǎng)下載，點(diǎn)這里下載適合系統(tǒng)版本的?Ruby+Devkit?包。安裝，彈出的窗口選3
gem -v?ruby -v?查看得到版本號就說明成功了。
如果是在墻內(nèi)，需要切換安裝源到https://gems.ruby-china.com/。墻外請忽略。
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/?切換安裝源
gem sources -l?查看版本
bundler安裝
gem install bundler?安裝bundler
bundle -v 查看版本 bundle config mirror.https://rubygems.org https://gems.ruby-china.com?切換安裝源
安裝jekyll
` gem install jekyll`
預(yù)覽博客
` jekyll server` 輸入之后打開瀏覽器，不出意外輸入localhost:4000即可看到博客內(nèi)容。
如果你沒這么順利，那以下的錯誤解決供參考
常見錯誤
- 缺少某個包
如圖，缺少jekyll-paginate，安裝即可gem install jekyll-paginate若還提示缺少就裝啥。
-
權(quán)限拒絕
socket.rb:201:in?bind?:Permission denied - bind(2) for 127.0.0.1:4000 (Error:EACCES)
出現(xiàn)這個錯誤一般是4000端口被占用了，解決方法：
| netstat -ano | findstr “4000” 找到占用4000端口的進(jìn)程ID |
查看最后一列數(shù)字就是PID=312964
打開windows資源管理器，結(jié)束該進(jìn)程.
搜索功能集成
博客模板本來是沒有搜索功能的，搜索功能依賴Simple-Jekyll-Search提供支持。
配置search.json
復(fù)制這份代碼到你博客的根目錄
這個配置文件代表可以按博客的標(biāo)題、標(biāo)簽、時間、分類搜索。
下載simple-jekyll-searchj文件
下載這整個文件夾，里面包含simple-jekyll-search.min.js和simple-jekyll-search.js兩個文件，連同js文件夾放在你的根目錄下面。
配置搜索框標(biāo)簽
在你想展示搜索框的頁面我的是index.html，這個頁面和每個人的博客模板有關(guān)，可能需要一點(diǎn)前端知識，添加如下的html標(biāo)簽。
<div class="search-container"><input type="text" id="search-input" placeholder="search blog posts..."><ul id="results-container"></ul> </div><!--script src="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"></script--> <script src="/js/simple-jekyll-search.min.js"></script><script>window.simpleJekyllSearch = new SimpleJekyllSearch({searchInput: document.getElementById('search-input'),resultsContainer: document.getElementById('results-container'),json: '/search.json',searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',noResultsText: 'No results found',limit: 10,fuzzy: false,exclude: ['Welcome']}) </script>其中，以下兩個是二選一的，一個是用云端的js一個是用本地的js如果本地有的話。
<script src="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"></script-->
<script src="/js/simple-jekyll-search.min.js"></script>
配置完成，打開博客，你得到這樣一個搜索框。
搜索框樣式
搜索框的樣式是可以改變的，這里有修改HTML中CSS樣式的方法，我搞后端的，前端現(xiàn)學(xué)現(xiàn)賣。
html插入標(biāo)簽樣式方法
社交鏈接
模板提供的鏈接沒有知乎鏈接，或者你想增加自定義的鏈接，都可以通過以下方法添加。以增加zhihu鏈接為例
鏈接的圖片是svg格式的(我也剛知道)，大概了解一下什么是svg和viewBox
viewBox
viewBox屬性的值是一個包含4個參數(shù)的列表?min-x,?min-y,?width?and?height， 以空格或者逗號分隔開， 在用戶空間中指定一個矩形區(qū)域映射到給定的元素,查看屬性
深入簡出 SVG 教程
配置_config.yml
footer-links:weibo: yourname #請輸入你的微博個性域名 https://www.weibo.com/<yourname>zhihu: yourname #輸入你知乎主頁鏈接上的名字 https://https://www.zhihu.com/people/<yourname>修改svg-icons.html
因為footer.html中調(diào)用了svg-icons.html來生成社交鏈接。
可見是先調(diào)用了svg-icon.html顯示社交鏈接，所以修改_include/svg-icons.html增加zhihu鏈接
<li><a href="https://zhihu.com/people/gegodcom" class="icon-2 zhihu" title="ZhiHu"><svg viewBox="0 0 600 600"><path d="M170.54 148.13v217.54l23.43.01 7.71 26.37 42.01-26.37h49.53V148.13H170.54zm97.75 193.93h-27.94l-27.9 17.51-5.08-17.47-11.9-.04V171.75h72.82v170.31zm-118.46-94.39H97.5c1.74-27.1 2.2-51.59 2.2-73.46h51.16s1.97-22.56-8.58-22.31h-88.5c3.49-13.12 7.87-26.66 13.12-40.67 0 0-24.07 0-32.27 21.57-3.39 8.9-13.21 43.14-30.7 78.12 5.89-.64 25.37-1.18 36.84-22.21 2.11-5.89 2.51-6.66 5.14-14.53h28.87c0 10.5-1.2 66.88-1.68 73.44H20.83c-11.74 0-15.56 23.62-15.56 23.62h65.58C66.45 321.1 42.83 363.12 0 396.34c20.49 5.85 40.91-.93 51-9.9 0 0 22.98-20.9 35.59-69.25l53.96 64.94s7.91-26.89-1.24-39.99c-7.58-8.92-28.06-33.06-36.79-41.81L87.9 311.95c4.36-13.98 6.99-27.55 7.87-40.67h61.65s-.09-23.62-7.59-23.62v.01zm412.02-1.6c20.83-25.64 44.98-58.57 44.98-58.57s-18.65-14.8-27.38-4.06c-6 8.15-36.83 48.2-36.83 48.2l19.23 14.43zm-150.09-59.09c-9.01-8.25-25.91 2.13-25.91 2.13s39.52 55.04 41.12 57.45l19.46-13.73s-25.67-37.61-34.66-45.86h-.01zM640 258.35c-19.78 0-130.91.93-131.06.93v-101c4.81 0 12.42-.4 22.85-1.2 40.88-2.41 70.13-4 87.77-4.81 0 0 12.22-27.19-.59-33.44-3.07-1.18-23.17 4.58-23.17 4.58s-165.22 16.49-232.36 18.05c1.6 8.82 7.62 17.08 15.78 19.55 13.31 3.48 22.69 1.7 49.15.89 24.83-1.6 43.68-2.43 56.51-2.43v99.81H351.41s2.82 22.31 25.51 22.85h107.94v70.92c0 13.97-11.19 21.99-24.48 21.12-14.08.11-26.08-1.15-41.69-1.81 1.99 3.97 6.33 14.39 19.31 21.84 9.88 4.81 16.17 6.57 26.02 6.57 29.56 0 45.67-17.28 44.89-45.31v-73.32h122.36c9.68 0 8.7-23.78 8.7-23.78l.03-.01z"/></svg><!--[if lt IE 9]><em>YouTube</em><![endif]--></a></li>上面配置內(nèi)容應(yīng)該都能理解，viewBox?指定圖片大小。
主要是path d=?內(nèi)容的獲取，這里其實(shí)是指定svg圖片的內(nèi)容，我們可以從?這里獲取到大部分svg素材，比如知乎的svg在這，點(diǎn)raw?按鈕查看源文件，復(fù)制path d=后面的內(nèi)容到上面的配置即可。
添加網(wǎng)站計數(shù)
網(wǎng)站統(tǒng)計由不蒜子提供支持，就是可以統(tǒng)計網(wǎng)站當(dāng)前訪問次數(shù)和人數(shù)。配置也非常簡單，官方指引在這里。
修改頁面html
想讓統(tǒng)計顯示在哪個頁面，需要修改那個頁面的html，增加如下內(nèi)容：
<!--不算子網(wǎng)站訪客統(tǒng)計--> <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"> </script> <!-- pv的方式，單個用戶連續(xù)點(diǎn)擊n篇文章，記錄n次訪問量 --> <div align="center"><span id="busuanzi_container_site_pv" style="font-family:Consolas;color:Silver;font-size:12px;">View:<span id="busuanzi_value_site_pv" style="font-family:Consolas;color:Silver;font-size:12px;"></span></span><!-- uv的方式，單個用戶連續(xù)點(diǎn)擊n篇文章，只記錄1次訪客數(shù) --><span id="busuanzi_container_site_uv" style="font-family:Consolas;color:Silver;font-size:12px;">User:<span id="busuanzi_value_site_uv" style="font-family:Consolas;color:Silver;font-size:12px;"></span></span> </div>style標(biāo)簽說明
可以通過style標(biāo)簽改變字體顏色與大小。具體參考:html顏色表和html style屬性
eg.?style="font-family:arial;color:Gainsboro;font-size:10px; text-align:right;width:200px;background-color:gray;
修改博客主題顏色
博客使用開源的顏色表Open Color，博客主題的可選顏色有：
red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow
修改文件_sass/_variables.scss，將文件中當(dāng)前顏色，比如當(dāng)前是?grape?全部替換成你想要的顏色即可。
顯示文章目錄
在文章開頭信息中心增加?toc: true?描述即可打開文章目錄顯示。效果如下：
如何傳圖片
寫markdown最頭疼的就是圖片的插入了，推薦用PicGo一鍵上傳得到鏈接，直接可以插入markdown。
PicGo支持圖片上傳github、SM.MS圖床、阿里云、騰訊云等主流圖床或云端。直接拖圖片，上傳云端、得到鏈接一步搞定，方便快捷。
其他功能
小功能
好用的github插件
網(wǎng)站結(jié)構(gòu)
根目錄的index.html生成blog首頁
_include/footer.html生成側(cè)邊欄
_include/svg-icons.html生成社交頭像的鏈接
致謝
感謝?okkk提供的技術(shù)支持才能有這個博客。
感謝?hhki提供的原始模板，我在其上進(jìn)行的二次開發(fā)。
總結(jié)
以上是生活随笔為你收集整理的最全面的github pages搭建个人博客教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS StoryBoard自适应布局
- 下一篇： MacOS-MacAPP使用Main.s