使用Hugo框架搭建博客的過程 - 前期准備

前言

這篇教程介紹了如何搭建這樣效果的博客。

所需步驟

可以從這樣的角度出發：

1. 注冊域名。
2. 使用CDN加快網站訪問速度。
3. 網站內容需要部署在服務器或對象存儲平台上。
4. 重要的是放什么內容。博客需要選擇框架，或自己開發。
5. 框架確定后，選擇主題，或自己開發。
6. 配置主題。
7. 發表第一篇Hello World！

在這個過程中，前期准備階段包括：框架選擇、主題選擇、注冊域名、備案和CDN配置。

博客框架

框架選擇

1. Wordpress
   缺點：不安全。
   主題推薦：Sakura
2. Hexo
   缺點：渲染生成文章速度不如Hugo。
   主題推薦：matery
3. Hugo
   The world’s fastest framework for building websites.

結論

1. 選擇Hugo框架。
2. 靜態博客方便備份。
3. 用Markdown寫文章，方便以后遷移。
4. 缺點，使用對象存儲服務需要支付流量費，存在被DDOS的風險。

下載

1. Hugo和Hugo extend區別
   Hugo extend支持Sass/SCSS。下載地址
2. Windows可考慮使用scoop下載, 安裝與升級很方便。

Hugo主題

LoveIt

功能很全面的一個主題，支持很多功能，節省了不少自己折騰的時間。LoveIt主題介紹

安裝主題有兩種方案，如果不修改主題配置和模板，可以直接添加添加子模塊，這樣比較簡單。

修改主題會麻煩一些，但是可以讓自己的博客與眾不同。需要將Fork到自己的倉庫，有一個缺點，fork后添加的submodule是自己的倉庫，使用Dependabot需要手動和上游同步之后，才會觸發blog倉庫更新檢查。所以不適用Dependabot。

1. 不修改主題模板
   添加子模塊到blog倉庫的themes目錄下。
   git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

   可設置Dependabot自動合並主題更新，參考：About Dependabot version updates和Automate Theme Update。

2. Fork主題后進行DIY

   1. fork主題到自己的倉庫。
   2. 添加子模塊：
      git submodule add <自己倉庫的url> <path>
   3. 設置上游進行同步，在主題目錄中執行
      git remote add upstream <上游主題的url>

toha

toha是一個非常適合做個人簡歷的主題。

注冊域名

萬網注冊域名。
配置DNS解析，域名郵箱解析等可能存在沖突。

參考DNS解析沖突規則

HTTPS證書

使用HTTPS證書避免HTTP劫持風險，劫持https請求需要偽造證書。

阿里雲可申請免費HTTPS證書，但是一個子域名需要單獨申請一個證書。

Chrome瀏覽器HTTP網站顯示“不安全”，是怎么回事?

谷歌從Chrome 56版本瀏覽器開始對使用HTTP協議傳輸密碼信息的網站進行“不安全”警告；而2018年7月，谷歌Chrome 68將對所有HTTP網站顯示“不安全”警告。隨着Chrome瀏覽器的版本升級，會有越來越多的用戶看到HTTP網站的“不安全”警告。來源：https://www.sohu.com/a/242732942_188485

備案

• IPC備案
• 公安備案

如果在萬網購買的域名，備案過程很簡單，按要求填寫信息，上傳照片即可。注意照片要合要求，否則可能會被打回來重新上傳。

香港，國外的服務器不需要備案。

CDN

購買CDN資源包，加速域名訪問。靜態博客不需要購買動態請求次數。

以上步驟完成后，將域名解析到CDN，CDN加速源站或對象存儲服務（在部署階段介紹）。訪問域名，確定CDN是否加速。

1. 通過ping命令查看IP是否為CDN的IP。
2. 打開Chrome控制台，查看返回包頭是否有X-Cache字段。

參考

• LoveIt主題文檔
• 阿里雲幫助文檔
• Windows軟件包管理工具：Scoop