當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

最全面的github pages搭建个人博客教程

發布時間：2023/12/8 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了最全面的github pages搭建个人博客教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作為一個程序員怎么能沒有自己的個人博客呢，這里詳細記錄和分享我的博客搭建經驗，讓你輕輕松松擁有自己的博客網站。傻瓜式一站式教你用 github pages 來搭建博客，詳細記錄全過程，保證你能學會。

如果你是非程序員或者不關系技術細節，只需花 3 分鐘閱讀前面 5 個章節內容，就能輕松擁有自己的博客。

開始

話不多說，直接上圖先來看下我的博客整體效果，個人比較喜歡這種簡約的博客風格，不要花里胡哨但該有的功也都有。

下面列舉這個博客具有的功能特性，其中我比較看重歸檔和搜索能力。

支持特性

簡約風格博客
Powered By Jekyll
博客文章搜索
自定義社交鏈接
網站訪客統計
Google Analytics 網站分析
Gitalk評論功能
自定義關于about頁面
支持中文布局
支持歸檔與標簽
支持改變主題顏色
支持添加文章目錄

建立博客Git倉庫

首先你要在github上有自己博客倉庫，用來生成和存放博客文章。你可以直接fork我的博客倉庫。這樣你馬上有了自己的博客倉庫。

進去點擊 fork，之后在你自己的倉庫下會看到剛復制的倉庫，以后的操作都在你自己的倉庫進行，當然想感謝我寫這個教程就幫我點個 start 吧！

修改博客倉庫名稱

進到你自己的博客倉庫，修改博客倉庫名稱成你自己的用戶名。因為 github page 解析的時候找的是這個 username.github.io的倉庫名，這一步非常重要。

此時，不出意外的話，打開域名 https://username.github.io 就能看到你剛搭建的博客了。注意替換 username成你自己的github 用戶名。

博客配置

上面點開域名看到的還是我的博客配置，顯示的博客名字也是我的。還需要更改配置才是你的博客。

博客的配置文件是倉庫根目錄下的_config.yml文件，直接點開它編輯。

你還需要更改以下配置：

博客名稱和描述

分別是博客名稱和描述，自己任意寫點啥。

博客社交鏈接

這里配置社交鏈接按鈕，沒配的不顯示，我現在配了知乎、郵箱、github賬號三個。其他你想加自己加上就可以。

配置gitalk

這個是評論功能的配置。評論功能基于gitalk，在配置文件中找到gitalk配置項目：

修改規則如下：

gitalk:clientID: <你的clientID>clientSecret: <你的clientSecret>repo: <你的repository名稱>owner: <你的GitHub用戶名>

原理是利用github的issues評論文章。其中clientID和clientSecret需要點擊這里創建

點綠色按鈕創建，成功之后會得到以上兩個id，修改配置即可。

Google站長統計

首先你要去注冊一個Google Analytics賬號，它可以統計你博客網站的訪問人數，訪問來源等非常豐富的網站數據。如果你不在乎可以不用跳過這節。不過要把配置中我的google_analytics: UA-XXXXXXX-X刪除，否則統計到我的去了。

# Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking google_analytics: UA-XXXXXXX-X

下面是我的網站實時分析頁面展示：

由于不可描述的原因，國內注冊賬號可能會遇到問題，所有不配置也沒關系。

博客網址配置

# 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的修改需要提交才能生效，點下圖中綠色按鈕提交。

done! 現在輸入上面提到的博客地址，回車，你擁有了自己的博客。

如何寫博客

好了，博客有了。如何更新文章呢？

文章用markdown語法，寫好統一放在_post文件夾下上傳，git page會自動從你的git倉庫拉去解析成網頁，立刻就能在你的博客網頁瀏覽。

關于文章的命名格式：博客文章必須按照統一的命名格式?yyyy-mm-dd-blogName.md?比如我這篇博客的名字是2019-11-22-create_blog_with_github_pages.md

看到這里，如果只是簡單的想寫博客，后面的不看也可以了，你已經擁有了自己的博客！后面章節是記錄一些DIY的過程。

另外，發現最近用我這個模板的同學越來越多，如果搭建過程中有什么問題，可以在我討論交流。

本地博客預覽

到目前為止，我們提交的文章都是必須上傳到github倉庫才能預覽。如果你想寫完在本地瀏覽器看一下效果在上傳也是可以的，因為不是所有人都有這樣的需求。

安裝 Ruby 和 DevKit

在官網下載，點這里下載適合系統版本的?Ruby+Devkit?包。安裝，彈出的窗口選3

gem -v?ruby -v?查看得到版本號就說明成功了。

如果是在墻內，需要切換安裝源到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`

預覽博客

` jekyll server` 輸入之后打開瀏覽器，不出意外輸入localhost:4000即可看到博客內容。

如果你沒這么順利，那以下的錯誤解決供參考

常見錯誤

缺少某個包

如圖，缺少jekyll-paginate，安裝即可gem install jekyll-paginate若還提示缺少就裝啥。

權限拒絕

socket.rb:201:in?bind?:Permission denied - bind(2) for 127.0.0.1:4000 (Error:EACCES)

出現這個錯誤一般是4000端口被占用了，解決方法：

netstat -ano

findstr “4000” 找到占用4000端口的進程ID

查看最后一列數字就是PID=312964

打開windows資源管理器，結束該進程.

$ tasklist|findstr 312964也能查看進程名，查到結束掉他同步驟3.

搜索功能集成

博客模板本來是沒有搜索功能的，搜索功能依賴Simple-Jekyll-Search提供支持。

配置search.json

復制這份代碼到你博客的根目錄

這個配置文件代表可以按博客的標題、標簽、時間、分類搜索。

下載simple-jekyll-searchj文件

下載這整個文件夾，里面包含simple-jekyll-search.min.js和simple-jekyll-search.js兩個文件，連同js文件夾放在你的根目錄下面。

配置搜索框標簽

在你想展示搜索框的頁面我的是index.html，這個頁面和每個人的博客模板有關，可能需要一點前端知識，添加如下的html標簽。

<div class="search-container"><input type="text" id="search-input" placeholder="search blog posts..."><ul id="results-container"></ul> </div> <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如果本地有的話。

配置完成，打開博客，你得到這樣一個搜索框。

搜索框樣式

搜索框的樣式是可以改變的，這里有修改HTML中CSS樣式的方法，我搞后端的，前端現學現賣。

html插入標簽樣式方法

社交鏈接

模板提供的鏈接沒有知乎鏈接，或者你想增加自定義的鏈接，都可以通過以下方法添加。以增加zhihu鏈接為例

鏈接的圖片是svg格式的(我也剛知道)，大概了解一下什么是svg和viewBox

viewBox

viewBox屬性的值是一個包含4個參數的列表?min-x,?min-y,?width?and?height，以空格或者逗號分隔開，在用戶空間中指定一個矩形區域映射到給定的元素,查看屬性

深入簡出 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中調用了svg-icons.html來生成社交鏈接。

可見是先調用了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></a></li>

上面配置內容應該都能理解，viewBox?指定圖片大小。

主要是path d=?內容的獲取，這里其實是指定svg圖片的內容，我們可以從?這里獲取到大部分svg素材，比如知乎的svg在這，點raw?按鈕查看源文件，復制path d=后面的內容到上面的配置即可。

添加網站計數

網站統計由不蒜子提供支持，就是可以統計網站當前訪問次數和人數。配置也非常簡單，官方指引在這里。

修改頁面html

想讓統計顯示在哪個頁面，需要修改那個頁面的html，增加如下內容：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"> </script>  <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><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標簽說明

可以通過style標簽改變字體顏色與大小。具體參考: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，將文件中當前顏色，比如當前是?grape?全部替換成你想要的顏色即可。

顯示文章目錄

在文章開頭信息中心增加?toc: true?描述即可打開文章目錄顯示。效果如下：

如何傳圖片

寫markdown最頭疼的就是圖片的插入了，推薦用PicGo一鍵上傳得到鏈接，直接可以插入markdown。

PicGo支持圖片上傳github、SM.MS圖床、阿里云、騰訊云等主流圖床或云端。直接拖圖片，上傳云端、得到鏈接一步搞定，方便快捷。

其他功能

小功能

好用的github插件

網站結構

根目錄的index.html生成blog首頁

_include/footer.html生成側邊欄

_include/svg-icons.html生成社交頭像的鏈接

致謝

感謝?okkk提供的技術支持才能有這個博客。

感謝?hhki提供的原始模板，我在其上進行的二次開發。

總結

以上是生活随笔為你收集整理的最全面的github pages搭建个人博客教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iOS StoryBoard自适应布局
下一篇： MacOS-MacAPP使用Main.s