基於「Hugo」搭建我的博客網站

前言

搭建我的網站，之前咱們通常會選擇 WordPress，由於其使用範圍廣（聽說全世界 80%的網站都是用它搭建的）、主題豐富、上手簡單。

近年來，markdown 內容格式漸漸流行，咱們更願意使用 markdown 格式來寫文章，寫完後用靜態網站生成工具把文章內容轉換成 html 格式，再發布到我的網站。生成靜態網站的工具中，比較優秀的有 Jekyll、Hexo、Hugo 幾個。

簡單比較一下動態網站框架 WordPress 與靜態網站生成框架 Hexo、Hugo 的區別：

項目	開發語言	優點	不便之處
WordPress	php	1. 有可視化後臺能夠編寫文章； 2. 使用範圍廣； 3. 主題、插件豐富。	1. 依賴過多致使加載較慢； 2. 須要服務器部署，依賴數據庫； 3. 數據須要定時備份。
Hexo	nodejs	1. 靜態生成，SEO 友好； 2. npm 生態有豐富的插件可用於擴展功能。	1. 本地編譯生成靜態文件速度較慢； 2. 調試麻煩，常常遇到 js 報錯。
Hugo	go	1. 編譯速度最快; 2. 開發主題很是方便。	1. 目前主題數量較少。

綜合來看，我仍是比較推薦使用 Hugo 來搭建我的網站。

安裝 Hugo

MacOS 系統下，可使用 brew 來進行安裝。

brew install hugo
複製代碼

安裝完後，能夠全局使用 Hugo 命令

hugo version
複製代碼

建立我的網站

hugo new site myblog
複製代碼

進入建立的 myblog 目錄，能夠看到生成的目錄結構長這樣：

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
複製代碼

選擇一個主題

建立完網站以後，咱們能夠在 Hugo 官方的 主題商店 選擇一個本身喜歡的主題，並下載下來使用。

這裏以 hugo-notepadium 這個主題爲例，進入上一步建立的我的網站，並克隆主題到 themes 文件夾：

git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
複製代碼

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
    └── hugo-notepadium
複製代碼

修改網站配置

修改站點配置文件 config.toml ，填寫本身的網站信息和使用的主題名稱，也能夠根據 主題說明 裏示例的配置信息來自定義網站內容。

baseURL = "https://example.com"
title = "MyBlog"
theme = "hugo-notepadium"
copyright = "©2020 my name."
複製代碼

建立文章

接下來咱們能夠開始寫文章了，經過：

hugo new posts/helloworld.md
複製代碼

新建一篇文章。在生成的文件中使用 markdown 格式來書寫文章內容。

---
title: "Helloworld"
date: 2020-04-19T23:56:47+08:00
draft: true ---

## 說明

> HelloWorld

這是內容
複製代碼

網站預覽

執行 server 命令，對全部已發佈和編輯中的文章進行預覽：

hugo server -D
複製代碼

發佈內容

寫完文章，預覽沒問題後，能夠更改文章的草稿狀態 draft: false，而後編譯生成靜態網站內容了：

hugo -t hugo-notepadium
複製代碼

能夠看到，幾乎瞬間完成編譯工做。生成的靜態內容都在 public 目錄下面：

public
├── 404.html
├── categories
├── css
├── index.html
├── index.xml
├── page
├── posts
├── sitemap.xml
└── tags
複製代碼

部署到線上

最簡單的部署方式，只須要把 public 目錄下的內容上傳到 Github，並使用 Github Pages 建立一個站點，就能夠經過：xxx.github.io 訪問了，還能夠綁定自定義域名。

也能夠本身寫一個 shell 腳本，作到每次編譯完文章後自動同步 public 目錄下的內容到 Github 或者本身的服務器，來保持線上站點的內容及時更新。

總結

經過前面的步驟咱們看到經過 Hugo 建立靜態網站是很是方便的，而且發佈前的編譯速度也很是快。比起傳統的動態網站，可能不足的地方在於沒有可視化後臺來隨時新增或修改 markdown 內容，可是實際上也是能夠作到的，咱們能夠選擇開發本身的主題，在主題開發過程當中，咱們能夠經過 getJSON 來獲取 API 傳遞的動態數據，有了這個功能，說不定就能夠很好的結合動態網站與靜態網站的優點了。之後有時間再講一下如何開發自定義主題吧。

參考

• Hugo 官方文檔
• Hugo 主題商城
• hugo-notepadium

歡迎關注個人公衆號，或在評論區給我留言。

原文閱讀地址：idoubi.cc/posts/build…