最詳細的我的博客教程搭建教程，最快5分鐘快速搭建簡約風格博客

時間 2020-12-07

標籤 html 前端 git github web 編程 json windows 後端瀏覽器欄目 HTML 简体版

原文原文鏈接

傻瓜式一站式教你用github pages 來搭建博客，詳細記錄全過程，人人都能搭博客。html

文章每週持續更新，各位的「三連」是對我最大的確定。能夠微信搜索公衆號「後端技術學堂」第一時間閱讀（通常比博客早更新一到兩篇）

開始

先看下博客總體效果。點擊在線預覽個人博客前端

支持特性

簡約風格博客
Powered By Jekyll
博客文章搜索
自定義社交連接
網站訪客統計
Google Analytics 網站分析
Gitalk評論功能
自定義關於about頁面
支持中文佈局
支持歸檔與標籤

創建博客Git倉庫

首先你要在github上有本身博客倉庫，用來生成和存放博客文章。你能夠直接fork個人博客倉庫。這樣你立刻有了本身的博客倉庫。git

點這裏個人博客地址進去fork，以後在你本身的倉庫下會看到剛複製的倉庫。之後的操做都在你本身的倉庫進行。github

修改博客倉庫名稱

進到你本身的博客倉庫，修改博客倉庫名稱成你本身的用戶名。github page解析的時候找的是這個 username.github.io的倉庫名。編程

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

博客配置

上面點開域名看到的仍是個人博客配置，顯示的博客名字也是個人。還須要更改配置纔是你的博客。windows

博客的配置文件是倉庫根目錄下的_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="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"></script-->
<script src="{{ site.baseurl }}/js/simple-jekyll-search.min.js"></script>

<script>
    window.simpleJekyllSearch = new SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '{{ site.baseurl }}/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="{{ site.baseurl }}/js/simple-jekyll-search.min.js"></script>

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

搜索框樣式

搜索框的樣式是能夠改變的，這裏有修改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連接

{% if site.footer-links.zhihu %}
  <li><a href="https://zhihu.com/people/{{ site.footer-links.zhihu }}" 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>
  {% endif %}

上面配置內容應該都能理解，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>
<!-- pv的方式，單個用戶連續點擊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的方式，單個用戶連續點擊n篇文章，只記錄1次訪客數 -->
    <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>