前言
博客地址 - https://billie52707.cn
1. 建博客的初衷？
2020那一年，八月的第一天，我還是像往常一樣打開我的域名網站，本以為還是會像以前一樣顯示每日一圖的界面，結果出現的卻是破圖，當即開始打開服務器進行一番檢查，發現是一直在使用的詞霸API接口掛掉了（結果兩天后又恢復正常了），這樣一來就意味着我的域名現在閑下來了😢 這時候，一個想法閃過我的腦海 ————
是時候開始做自己的博客網站了！
在這之前，由於平時比較忙，並且搭建博客需要投入一定的精力，加上已經有現成的博客園平台可以供自己記錄博客，因此，考慮到時間成本以及學習成本，就一直擱置了博客網站這件事.
why hugo?
通過 Hugo 你可以快速搭建你的靜態網站，比如博客系統、文檔介紹、公司主頁、產品介紹等等。相對於其他靜態網站生成器（例如hexo）來說，Hugo 具備如下特點：
- 極快的頁面編譯生成速度。（ ~1 ms 每頁面）
- 完全跨平台支持，可以運行在 Mac OS X, Linux, Windows, 以及更多!
- 安裝方便 Installation
- 本地調試 Usage 時通過 LiveReload 自動即時刷新頁面。
- 完全的皮膚支持。
- 可以部署在任何的支持 HTTP 的服務器上。
2. hugo的基本使用
| 基本環境 | go、git、github |
| 安裝方法 | 官網下載對應版本的源碼，添加到環境變量 |
| 生成博客 | hugo new site 博客名 |
| 下載主題 | git clone … |
| 設置主題 | echo ‘theme = “cactus”’ » config.toml |
| 啟動博客 | hugo server -w |
| 新建文章 | hugo new post/文章名.md |
生成public目錄 |
hugo -D |
3. 快速部署基本設置
博客的基本設置可以通過對應主題的GitHub幫助文檔進行一步步設置，也可以走捷徑，直接替換博客項目下的config.toml為主題文件中exampleSite下的config.toml文件，接着在config.toml中的對應位置修改自己的設置：
baseURL = "https://billie52707.cn"
languageCode = "en-us"
title = "人人都愛小雀斑's blogs"
theme = "cactus"
copyright = "billie" # cactus will use title if copyright is not set
disqusShortname = "example" # Used when comments is enabled. Cactus will use site title if not set
# googleAnalytics = "UA-1234-5"
4. 文章添加標簽和分類
以你現在看到的這篇文章為例，新建一篇文章之后，如果想加入標簽，可以在每篇文章的頁首這樣設置：
title: "hugo建站 | 我的第一個博客網站"
date: 2020-08-04T18:42:17+08:00
categories:
- tec
tags:
- hugo
ps：注意-后面有一個空格
5. 頁腳信息的編輯
以我現在使用的cactus主題為例，頁腳配置文件位於：cactus/layouts/partials/footer.html，編輯如下：
<footer id="footer">
<div class="footer-left">
Copyright
©
{{ now.Format "2006" }}
<span>❤️{{ if .Site.Copyright }} {{ print .Site.Copyright }} {{ else }} {{ print .Site.Title }} {{ end }} | </span>
<span>粵ICP備20025795號-1 | </span>
<span>Powered By Hugo | </span>
<span id="busuanzi_container_site_pv">
pv：<span id="busuanzi_value_site_pv"></span> |
</span>
<span id="busuanzi_container_site_uv">
uv: <span id="busuanzi_value_site_uv"></span>
</span>
</div>
</footer>
6. 網站流量統計
工具：不蒜子，一個通過僅僅兩行代碼實現的網頁流量計數器
使用：
1、在/cactus/layouts/partials/head.html文件中引入不蒜子js文件
<!-- 不蒜子 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
2、在頁面添加統計代碼，在/cactus/layouts/partials/footer.html中添加如下代碼
<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>
3、設置文章閱讀數，在/cactus/layouts/posts/single.html中，大概35行的位置，添加如下代碼
<div class="article-tag">
<i class="fa fa-eye"></i>
<span id="busuanzi_container_page_pv">
<span id="busuanzi_value_page_pv">0</span>
</span>
</div>
具體顯示效果可移步此文章頁首標題處查看
4、設置文章字數和閱讀時間，在/cactus/layouts/_default/single.html中添加以下代碼
<h5 id="wc" style="font-size: 1rem;text-align: center;">{{ .FuzzyWordCount }} Words|Read in about {{ .ReadingTime }} Min|本文總閱讀量<span id="busuanzi_value_page_pv"></span>次</h5>
7. 添加評論系統Valine
Valine - 一款快速、簡潔且高效的無后端評論系統。
Valine 誕生於2017年8月7日，是一款基於Leancloud的快速、簡潔且高效的無后端評論系統。
理論上支持但不限於靜態博客，目前已有Hexo、Jekyll、Typecho等博客程序在使用Valine。
特性：
- 快速
- 安全
- Emoji 😉
- 無后端實現
- MarkDown 全語法支持
- 輕量易用(~15kb gzipped)
- 文章閱讀量統計 v1.2.0-beta1+
Tips：
- 整個過程，是以cactus主題為例的，其它主題操作大同小異。
- 配置之前應該先閱讀Valine快速開始
Leancloud相關配置：
評論系統依賴於leancloud，所以需要先在leancloud中進行相關的准備工作。
- 登錄 或 注冊 LeanCloud
- 登錄成功后，進入后台點擊左上角的創建應用
- 創建好應用，進入應用，左邊欄找到 設置 ，然后點擊 應用Key，此時記錄出現的 App ID 和 App Key，后面配置文件中會用到
- 因為評論和文章閱讀數統計依賴於存儲，所以還需要建立兩個新的存儲
Class，左邊欄找到並點擊 存儲，點擊 創建Class - 創建兩個存儲Class，分別命名為:
Counter和Comment - 為應用添加安全域名，左邊欄點擊 設置，找到 安全中心，點擊后會看到 安全域名 設置框，輸入博客使用的域名，點擊保存即可
8. 添加 Valine 參數項：
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
[params.valine]
enable = true
appId = '你的appId'
appKey = '你的appKey'
notify = false # mail notifier , https://github.com/xCss/Valine/wiki
verify = false # Verification code
avatar = 'mm'
placeholder = '說點什么吧...'
visitor = true
上面幾項內容的含義，這里簡單一說，具體還是要看 Valine官網中配置相關的內容：
| 參數 | 用途 |
|---|---|
| enable | 這是用於主題中配置的，不是官方Valine的參數，true時控制開啟此評論系統 |
| appId | 這是在 leancloud 后台應用中獲取的，也就是上面提到的 App ID |
| appKey | 這是在 leancloud 后台應用中獲取的，也就是上面提到的 App Key |
| notify | 用於控制是否開啟郵件通知功能，具體參考郵件提醒配置 |
| verify | 用於控制是否開啟評論驗證碼功能 |
| avatar | 用於配置評論項中用戶頭像樣式，有多種選擇：mm, identicon, monsterid, wavatar, retro, hide。詳細參考：頭像配置 |
| placehoder | 評論框的提示符 |
| visitor | 控制是否開啟文章閱讀數的統計功能i, 詳情閱讀文章閱讀數統計 |
9. 修改主題文件：
主要是修改主題中評論相關的布局文件 themes/even/layouts/partials/comments.html，按照 Valine快速開始 添加 Valine 相關代碼，找到以下位置，大概55～81行的位置：
<!-- gitment -->
{{- if .Site.Params.gitment.enable -}}
<div id="comments-gitment"></div>
<!--這里省略了部分代碼-->
<noscript>Please enable JavaScript to view the <a href="https://github.com/imsun/gitment">comments powered by gitment.</a></noscript>
{{- end }}
<!--這個位置添加Valine相關代碼-->
添加的 Valine 評論的代碼如下：
<!-- valine -->
{{- if .Site.Params.valine.enable -}}
<!-- id 將作為查詢條件 -->
<span id="{{ .URL | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
<span class="post-meta-item-text">文章閱讀量 </span>
<span class="leancloud-visitors-count">1000000</span>
<p></p>
</span>
<div id="vcomments"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script type="text/javascript">
new Valine({
el: '#vcomments' ,
appId: '{{ .Site.Params.valine.appId }}',
appKey: '{{ .Site.Params.valine.appKey }}',
notify: {{ .Site.Params.valine.notify }},
verify: {{ .Site.Params.valine.verify }},
avatar:'{{ .Site.Params.valine.avatar }}',
placeholder: '{{ .Site.Params.valine.placeholder }}',
visitor: {{ .Site.Params.valine.visitor }}
});
</script>
{{- end }}
可以看到上述代碼中引用了配置文件中的相關參數，這樣以后修改配置就不用修改代碼了，只需要改配置文件 config.toml，另外注意到的是，我也添加了文章閱讀數統計的顯示內容。將配置文件中 valine 配置的 eanble 設置為 true
10. 上傳代碼到GitHub
上傳代碼這部分我選擇的方案是把相關git代碼寫進一個可執行文件下，然后后面更新博客的話運行這個可執行文件就行了，步驟如下：
- 在GitHub創建一個倉庫，並命名為
your_github_id.github.io，注意your_github_id一定要小寫 - 在博客項目目錄下新建文件
deploy.sh - 打開
deploy.sh並編輯
hugo -D #打包成靜態文件目錄public
cd public #切換到public目錄
git init
git remote rm origin
git remote add origin https://github.com/your_github_id/your_github_id.github.io.git #鏈接到你的GitHub博客項目
git add .
git commit -m "update"
echo "Pushing to github"
git pull origin master
git push -u origin +master
11. 為你的博客網站添加一個域名
上傳代碼到GitHub之后，在GitHub項目下新建一個’CNAME’文件，打開並編輯，在第一行寫入你的域名（所以你要先有一個域名，並備案），比如我的就是billie52707.cn，這一步目的是做一個域名的關聯，當你訪問你的域名的時候，就會關聯到你的博客項目來。
接着，以阿里雲為例，在這之前，你的域名已經備案好了，登錄阿里雲，進入你的域名列表，在域名右側點擊解析，點擊添加安全組,新手引導，在記錄值輸入你的博客項目GitHub pages的IP地址，IP地址可以通過終端輸入ping your_github_id.github.io獲取。
12. 后記
最后歡迎大家的訪問 👉 billie52707.cn