Hexo+Github搭建部落格總結

ztq發表於2018-08-11

本文永久連結：zhengtuqiang.pw/2018/07/31/…

1. 前言

本來今年年初的時候就已經搭建了部落格，當時看的是掘金裡面的一篇教程。但是其實那篇教程說的不是很好，遇到很多問題。直至最近又有了建設個人品牌的想法，遂繼續折騰個人部落格。在網上找了各種資料，後來發現Grok抱殘守缺的這篇教程。Grok抱殘守缺的部落格不但令人知其然，也令人知其所然。跟著教程一次就成功了。我的這個總結總體是站在Grok抱殘守缺基礎上去寫的，作為補充。

2. 過程概覽

這個步驟就不重複造輪子了，跟著Grok抱殘守缺的這篇教程來即可。

安裝 Node js，Git。這兩個都是下載完之後直接安裝就可以了。
Git 配置以及 Github 配置 SSH。
安裝 Hexo。
Hexo 本地建站。
主題配置。本文以 Material-Flow 為例說明。
繫結獨立域名。

3. Material-Flow 主題配置

這是一個遵循安卓 Material Design 風格的主題，支援響應式，也就是說會根據當前是瀏覽器螢幕去自適應顯示，在手機端的顯示效果也不錯。我主要做了以下的修改：漢化，關於頁面，百度統計，不蒜子閱讀量統計和一個彩蛋功能。這是我的定製版本。

3.1 Material-Flow 主題概述

主題的檔案結構如下：

├─material-flow
│  ├─layout #ejs模板
│  │  ├─_partial 
│  │  └─_widget #側欄相關
│  ├─snapshots
│  └─source #字型、圖片、js資源
│      ├─fonts
│      ├─images
│      ├─js
│      └─less
複製程式碼

我們先來看一下 layout/layout.ejs，預設通過 hexo new <title> 會把 layout.ejs 作為模板生成 html 網頁。

<%- partial('_partial/head') %> <!-- header -->
<body>
  <%- partial('_partial/loading') %>
  <script>setLoadingBarProgress(20)</script> 
  <%- partial('_partial/header', null, {cache: !config.relative_link}) %>
    <script>setLoadingBarProgress(40);</script>
  <div class="l_body">
    <div class='container clearfix'>
      <div class='l_main'>
        <%- body %> <!-- 主體 -->
      </div>
      <aside class='l_side'>
        <%- partial('_partial/side') %> <!-- 側欄 -->
      </aside>
      <script>setLoadingBarProgress(60);</script>
    </div>
  </div>
  <%- partial('_partial/footer', null, {cache: !config.relative_link}) %> <!-- footer -->
  <script>setLoadingBarProgress(80);</script>
  <%- partial('_partial/scripts') %>
  <script>setLoadingBarProgress(100);</script>
</body>
</html>
複製程式碼

第10行 <%- body %>，這是 html 頁面的主體部分。一共有三個 menu 首頁，文章，關於，主體部分分別對應的是 layout/_partial/post.ejs，layout/_partial/categories.ejs，layout/_partial/article.ejs。注意具體的博文頁面中，主體部分也是 layout/_partial/article.ejs。

3.2 漢化&時間修改

漢化的思路其實很簡單，hexo s 後檢視網頁，通過 FileLocationPro 工具搜尋一下主題資料夾中想漢化的內容，然後將其改為中文即可。例如我漢化了上一篇，下一篇，檢視更多以及瀏覽器頁籤的一些內容。 Material-Flow 的時間格式預設為 月日，年 （MMM D, YYYY），我統一把時間格式改為 年/月/日 （YYYY/M/D）。

3.3 關於頁面

Material-Flow 主題預設只有兩個兩個 menu 首頁 ，文章，我們可以在部落格新增一個 關於 menu。首先在主題的配置檔案中新增 關於 menu。

# navigation menu
menu:
  - name: 首頁
    slug: home
    url: /
  - name: 文章
    slug: archives
    url: /archives
  #新增關於
  - name: 關於 #menu名字
    slug: about #這是用於自動生成選中menu時，menu項高亮的css
    url: /about #url路徑
複製程式碼

然後在 cmd 命令中 hexo new page "about"，此命令會在 source 資料夾下生成一個 about 資料夾，裡面的 index.md 就是 關於 menu 的主體內容，可以像寫一篇博文一樣寫自己的簡介。像我就在裡面加入了一個彩蛋。

3.4 百度統計

註冊一個百度統計賬號，然後新增自己博文的地址，拿到統計程式碼。統計程式碼：

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?你的百度統計id";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
複製程式碼

首先在 layout/_partial/head.ejs 中新增以下程式碼：

<script>
    function setLoadingBarProgress(num) {
      document.getElementById('loading-bar').style.width=num+"%";
    }
    <!-- 百度統計begin -->
  <% if(theme.tongji.baidu_id){ %>
  	var _hmt = _hmt || [];
    (function() {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?<%- theme.tongji.baidu_id %>";
       var s = document.getElementsByTagName("script")[0]; 
       s.parentNode.insertBefore(hm, s);
    })();
  <% } %>
  <!-- 百度統計end -->
  </script>
</head>
複製程式碼

然後在主題配置檔案 _config.yml 中新增以下程式碼：

tongji:
  baidu_id: #你的百度統計id
複製程式碼

以後百度統計 id 變更的話，直接替換掉 baidu_id 即可。

3.5 不蒜子閱讀量統計

百度統計有多項強大的分析功能，如流量分析，來源分析，訪問分析，轉化分析，訪客分析以及優化分析等。但是百度統計主要是給博主自己用的。對於訪客來說，我想讓他們也能看到此文章的受歡迎程度，需要在博文的底部展示閱讀量。我選擇的是不蒜子，號稱是兩行程式碼搞定計數。因為我想要在頁面底部顯示閱讀量資訊，所以首先在 layout/_partial/footer.ejs 中新增以下程式碼：

<% if(theme.tongji.busuanzi){ %>
	<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
	<% if(is_home()){ %>
	<span id="busuanzi_container_site_pv">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
	</span>
	<span id="busuanzi_container_site_uv">
	本站訪客數<span id="busuanzi_value_site_uv"></span>人次
	</span>
	<% }else { %>
	<span id="busuanzi_container_page_pv">
	本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
	</span>
	<% } %>
  <% } %>
複製程式碼

然後在主題配置檔案 _config.yml 中新增以下程式碼：

tongji:
  busuanzi: true #不蒜子開關
複製程式碼

因為不蒜子沒有id，所以只有一個表示開關的屬性。layout/_partial/footer.ejs 第1行 <% if(theme.tongji.busuanzi){ %> 會進行判斷。

3.6

這個標記要單獨拿出來說一下。在寫博文的時候， 標記會把前面的內容生成摘要，也就是 post.excerpt 取到的內容。當初不知道如何實現「檢視更多」的功能，在這上裡浪費了不少時間。後來才知道用這個標記就可以實現了( ๑ŏ ﹏ ŏ๑ )。

4. ejs 的一些用法

在對 Material-Flow 做修改的時候是直接參照上下文的一些程式碼的，自己沒有系統瞭解過 ejs，所以記錄一些零散的用法。

4.1 javascript 混合 html

<% if (post.excerpt) { %>
	  <div class="readmore">
      <a href="<%- url_for(post.path) %>">點選檢視</a>
      </div>
    <% } %>
複製程式碼

javascript 語句用 <% %> 包起來，其中的 html 標籤不需要。輸出執行結果用<%- %>。

4.2 javascript 讀取主題配置檔案 `_config.yml` 的形式

單值

tongji:
  busuanzi: true
複製程式碼

單值讀取

<% if(theme.tongji.busuanzi){ %>
	<!-- 省略 -->
  <% } %>
複製程式碼

集合

# navigation menu
menu:
  - name: 首頁
    slug: home
    url: /
  - name: 文章
    slug: archives
    url: /archives
  - name: 關於
    slug: about
    url: /about
複製程式碼

集合遍歷讀取

<% (theme.menu||[]).forEach(function(value){ %>
						<li>
							<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'>
								<%=value.name%>
							</a>
						</li>
					<%})%>
複製程式碼

foreach() 之後，value 即為每組資料的一個物件，直接按屬性名讀取。

4.3 注意事項

在配置檔案中注意 -，: 的後面是有一個空格的。

5. 多機更新部落格--我的最佳實踐

實際上，配置完部落格之後會有這麼一種場景：假如我的資料損壞了，或者我想在另一臺電腦發博文，怎麼辦？其實，從上面這麼一個流程下來，你會發現：部落格的最主要原料其實就是博文的 md 檔案，有了博文的 md 檔案那麼別的都好說。所以我的做法就是把博文，hexo 配置檔案之類必不可少的東西放在雲盤，這裡我選擇的是開源中國的碼雲（不是馬雲哦，碼雲像 Github 一樣都是一個基於Git的遠端程式碼倉庫，好處在於可以免費建立私有倉庫以及在國內可以有更快的訪問速度）。

5.1 資料夾概覽

MyBlog
	├─主題
	├─其他
	├─部落格文章
	│  ├─圖片
	│  ├─引用資料
	│  └─文章
	│      ├─about
	│      └─_posts
	└─部落格配置檔案
複製程式碼

部落格配置檔案：主要是 Hexo 的配置檔案 _config.yml
部落格文章：這是部落格的主要「原料」，Hexo 生成 html 的內容來源
其他：放置其他的一些擴充的功能
主題：Hexo 用的主題

5.2 部落格管理說明

部落格文章->文章，會通過 Always Sync 同步到 Hexo(D:\MyBlog\Blog) 的資料夾，最後 deploy 到 Github 是在 Hexo 資料夾中進行的。
主題資料夾會同步到 Hexo 資料夾的主題中去。
部落格配置檔案會同步到 Hexo 資料夾的根目錄中去。

5.3 博文編寫工作流

部落格文章->文章->_posts中進行博文編寫。
在 Hexo 資料夾中進行 hexo g，hexo s，本地檢查無誤後 hexo d 進行部署。

5.4 多機更新工作流

安裝 Node js，Git。
安裝 Hexo。

     npm config set registry "https://registry.npm.taobao.org"
     npm install -g hexo-cli  #hexo安裝
     npm install hexo-renderer-pandoc --save
     npm install hexo-katex --save 
     npm install hexo-renderer-jade --save #Noise主題相關
     npm install hexo-renderer-less --save  #Noise主題相關
     npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content #Material主題相關
     npm install hexo-deployer-git --save  #部署相關
複製程式碼

Git 配置以及 Github 配置SSH。
clone 此 repo。
在 repo 資料夾下 hexo init 新建一個 Hexo(命名為 Blog ) 資料夾，此資料夾不用加入 repo 的版本管理。
配置部落格檔案以及主題。
在部落格文章->文章->_posts 中編寫博文。
把博文複製到 Hexo 資料夾中進行 hexo g，hexo s，本地檢查無誤後 hexo d 部署。

6. 參考資料

知行合一 | 用 Hexo 搭建部落格

hexo+github搭建個人部落格
2018-11-05
HexoGithub
Hexo+Github部落格搭建完全教程
2024-11-18
HexoGithub
Hexo+Github輕鬆搭建個人部落格
2020-12-23
HexoGithub
hexo+github搭建靜態部落格之初體驗
2018-07-23
HexoGithub
【教程向】——基於hexo+github搭建私人部落格
2019-03-27
HexoGithub
hexo+github從0到1搭建免費個人部落格
2018-09-21
HexoGithub
只需9步教你搭建自己的個人部落格 (Hexo+Github)
2018-04-16
HexoGithub
超詳細Hexo+Github Page搭建技術部落格教程【持續更新】
2019-01-22
HexoGithub
windos系統下hexo+github搭建簡單靜態個人部落格
2020-12-28
HexoGithub
掘金寫部落格總結：
2019-04-27
【轉載】Hexo+GitHub構建個人部落格
2020-10-23
HexoGithub
1月6日部落格總結
2019-01-06
hexo結合github搭建個人部落格
2018-05-21
HexoGithub
HEXO-個人部落格搭建教程彙總
2018-08-11
Hexo
第三次部落格總結
2024-06-29
VuePress 部落格搭建系列 33 篇正式完結！
2022-03-30
Vue
Hexo 搭建部落格
2018-12-05
Hexo
搭建Hexo部落格相簿
2018-09-02
Hexo
搭建個人部落格
2024-04-06
部落格搭建過程
2024-07-23
如何搭建部落格
2020-12-02
2016 部落格導讀總結&個人感悟
2019-03-01
20240619打卡-個人總結部落格
2024-06-19
部落格園主題樣式更改總結
2022-03-24
Django搭建個人部落格：結束和開始
2019-01-04
Django
Eastmount部落格導讀：專欄系統分類和部落格歸納總結
2019-09-28
AST
【部落格導航】Nico部落格導航彙總
2018-12-01
前三次大作業部落格總結
2024-04-21
2021年部落格總結—— 揚帆起步
2021-12-22
部落格文章彙總
2018-04-11
GitHub Pages 搭建部落格
2018-07-01
Github
hexo 部落格搭建筆記
2020-06-11
Hexo筆記
個人部落格搭建( wordpress )
2019-01-31
使用Docker搭建Chirpy部落格
2024-10-25
Docker
部落格搭建-圖床篇
2024-07-07
圖床
Hexo部落格搭建記錄
2023-01-12
Hexo
2021年Wordpress部落格搭建
2021-06-17
【部落格搭建】Typecho個人部落格搭建，快速安裝，超小白（很簡單的）
2020-07-07