Foreword
很多熱愛寫作的小伙伴或許都曾想過，要是能擁有一個自己專屬的博客就好了。這里呢，就跟大家詳細地分享一種自己動手搭建博客的簡單方案：GitHub Pages + Hugo。
如果你感覺有點兒陌生，沒關系。雖說是自己動手搭建，但并不要求你有多少技術基礎，熟悉一下就好了。我在之前的分享中，曾跟大家提到過 GitHub，老讀者肯定不陌生了。例如這兩篇，不了解的小伙伴可以先戳鏈接去看下：
那 GitHub Pages 和 Hugo 又是什么呢？
- GitHub Pages 是一個靜態站點托管服務，直接將個人、組織或項目的頁面托管于 GitHub 庫或倉庫 (repository) 中。
- Hugo 是一個用 Go 語言編寫的靜態站點生成器，它針對速度、易用性和可配置性進行了優化，快速靈活。
接下來，看看如何一步一步地為自己搭建一個博客吧！下面的步驟或許乍一看有點兒多，那是為了讓操作更具體更明確特意劃分的，實際操作起來并不會很復雜。
注：以下步驟以在 macOS 上的操作為例，其它操作系統類似，只是一些工具和命令有區別。
第 1 步：新建一個 GitHub 庫。
-
注冊一個 GitHub 賬號。
- 如果你已有賬號，直接登錄。
- 如果你沒有賬號，注冊并登錄。
GitHub: https://github.com
-
打開 GitHub Pages 官網，瀏覽并了解 User or organization site 部分對應的操作步驟。
GitHub Pages: https://pages.github.com
-
新建一個 GitHub repository，庫名為 username.github.io，username 即你的 GitHub 賬號 username。
新建 repository：https://github.com/new
Create a new repository
第 2 步：安裝 Hugo。
-
瀏覽 Hugo 官方的安裝指南。
進行初步了解，安裝與你的操作系統對應的必要工具。例如，我的 macOS 上已經安裝了 Homebrew，這里就不需要再安裝了。
如果你感到有點兒困惑，該指南頁面的后半部分有對 macOS 和 Windows 上如何安裝 Hugo 的詳細說明。
-
打開一個終端 Terminal，輸入與操作系統對應的 Hugo 安裝命令。
brew install hugo -
安裝完成后，輸入以下命令來確認。
hugo version
第 3 步：新建一個 Hugo 網站。
-
進入你想存放 Hugo 網站文件夾的目錄。
我直接將其放在了 macOS 的家目錄下。你也可以通過
cd命令切換到其它目錄。例如，如果你想放在 Documents 目錄下，在終端里執行cd ~/Documents即可。 -
執行以下命令新建一個 Hugo 網站。
hugo new site lilian-blog # "lilian-blog" 是我的網站文件夾名。
第 4 步：選擇 Hugo 主題并克隆至本地目錄。
-
打開 Hugo Themes 頁面，選擇一個你喜歡的主題。
Hugo Themes: https://themes.gohugo.io
下文以選擇 Tranquilpeak 主題為例。
-
將所選主題克隆至本地目錄。
cd ~/lilian-blog # 進入網站目錄，用你的網站目錄名替換 "lilian-blog"。 mkdir -p themes # 創建 "themes" 目錄。 cd themes # 進入 "themes" 目錄。 git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak # 將 Tranquilpeak 主題克隆至 "tranquilpeak" 目錄。
第 5 步：編輯配置文件。
-
在 Hugo 網站文件夾的根目錄下，使用 Visual Studio Code 打開
config.toml文件。如果你還沒用過 Visual Studio Code，建議下載安裝一下，是一個很好用的開源文本編輯器，同時支持 Windows、Linux 和 macOS 操作系統。
-
參考所選 Hugo 主題的配置說明，編輯
config.toml文件。注意：
theme配置項指的是所選主題的名稱，必須與所選主題被克隆至的目錄名相同。在本例中，即theme = "tranquilpeak"。Tranquilpeak 主題的配置說明：https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tranquilpeak-configuration
第 6 步：新建一篇文章。
-
進入網站文件夾的根目錄。
cd ~/lilian-blog # "lilian-blog" 為網站文件夾名。 -
使用以下命令新建一篇文章。
hugo new post/my-first-post.md # "my-first-post.md" 是新建文章的文件名。 編輯新建的文章，添加內容并保存。
第 7 步：本地預覽網站效果。
-
啟動 Hugo server。
hugo server -D -
使用瀏覽器打開 http://localhost:1313 預覽。
- 如果你對預覽效果滿意，進入下一步。
- 如果不滿意，編輯
config.toml配置文件，再次預覽。
第 8 步：構建 Hugo 網站。
在 Hugo 網站文件夾的根目錄下，執行 hugo 命令來構建。
hugo # 構建你的 Hugo 網站，默認將靜態站點保存到 "public" 目錄。
注意：Hugo 會將構建的網站內容默認保存至網站根目錄的 public/ 文件夾中。
第 9 步：將網站文件夾轉換為 Git 庫。
-
進入
lilian-blog/public目錄，初始化 Git 庫。cd ~/lilian-blog/public # 生成的 HTML 文件保存在 "public" 目錄中，"public" 文件夾會被轉換為 Git 庫。 git init # 初始化 Git 庫。 -
查看
public目錄下的文件，會發現多了.git文件。ls -a # 顯示所有文件和目錄列表，包含隱藏文件。
第 10 步：將 Git 本地庫關聯至遠程庫。
-
在
lilian-blog/public目錄下，為 Git 本地庫添加遠程庫。git remote add origin git@github.com:lilin90/lilin90.github.io.git # "lilin90/lilin90.github.io.git" 代表 "your-github-id/your-github-id.github.io.git"。 -
查看
config文件。cat .git/config # 顯示 config 信息。上述命令返回結果如下：
[core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true ignorecase = true precomposeunicode = true [remote "origin"] url = git@github.com:lilin90/lilin90.github.io.git fetch = +refs/heads/*:refs/remotes/origin/*如果
[remote "origin"]信息正常顯示，說明你的 Git 本地庫已成功關聯至遠程庫。
第 11 步：提交你的修改至本地庫。
在 lilian-blog/public 目錄下，通過 commit 提交修改，并寫一個 commit message 來簡潔描述你的修改。
git status # 查看當前修改狀態。
git add . # 添加所有修改過的文件。你也可以只添加某個文件。
git commit -m "Add a new post" # "Add a new post" 是 commit message.
第 12 步：將你的修改推至遠程庫。
在 lilian-blog/public 目錄下，將修改推至遠程庫。
git push -u origin master
恭喜！現在你已經走完了全程，擁有了一個自己構建的博客網站。
我的博客地址是：https://lilin90.github.io
如果你想使用 HTTPS 以防止其他人窺探或篡改網站流量，在 GitHub 上打開相應的庫，點擊 Settings 勾選 Enforce HTTPS 即可。
順便說一下，我購買了個域名 https://lilianlee.me，并將其關聯到了默認的 URL https://lilin90.github.io。所以如果你訪問 https://lilin90.github.io，會自動跳轉至 https://lilianlee.me。
接下來：之后如何添加一篇博客
之后如果要添加一篇博客，使用如下幾步即可：
- 新建一篇文章，編輯內容。
- 本地預覽網站呈現效果。
- 構建 Hugo 網站。
- 提交修改至 Git 本地庫。
- 將修改推至遠程庫。
Afterword
點擊“閱讀原文”，即可閱讀本文的英文版。英文版里多了一些開頭的內容。
如果你也想擁有一個自己親手搭建的博客或網站，現在可以行動起來了！如果遇到網絡搜索解決不了的問題，或者有相關經驗想跟大家分享，歡迎留言交流哦~
你可能想讀：
技術文檔誕生記 | 完整的技術寫作流程是怎樣的？
Technical Writer 可提供的交付物有哪些？
GitHub + Markdown 的新輕型技術寫作模式速覽
GitHub + Markdown 的技術文檔方案深度解析
Technical Writer 日常工作中好用的小工具
技術傳播人士應該知道的色彩搭配常識
如何使用顏色來提高技術文檔的可讀性？
Technical Writer 如何 Review 技術文檔？| 重細節+全局觀
技術翻譯需要有 Technical Writer 的 sense
深度解析關于技術翻譯的六個認知誤區
如何讓你的內容輸出更加專業更有設計感？
書單 | 有哪些技術傳播從業者必知必看的書籍？
有哪些適合技術傳播從業者關注的優質博客？（一）
有哪些適合技術傳播從業者關注的優質博客？（二）
經驗分享 | 來自 11 位 Technical Writer 前輩的職業發展建議（上篇）
經驗分享 | 來自 11 位 Technical Writer 前輩的職業發展建議（下篇）
技術傳播沙龍精彩分享 | 高校老師與行業大牛談“互聯網技術寫作”
英語技術文檔的標題到底該大寫還是小寫？
不同階段如何應對 Technical Writer 的職業顧慮或煩惱？
如何使用正則表達式批量添加和刪除字符？
英語技術文檔中如何正確使用時態？
英語技術文檔中如何正確使用人稱？
Markdown：寫技術文檔、個人博客和讀書筆記都很好用的輕量級標記語言
如何為 Markdown 文件自動生成目錄？
技術寫作實例解析 | 簡潔即是美
兩分鐘趣味解讀 Technical Writer
若脫離理解，直譯得再正確又有何意？
優質譯文不應止于正確，還要 Well-Organized
Technical Writer 需要 Technical 到會寫代碼嗎？
寫在入職技術型創業公司 PingCAP 一個月之后
揭秘 Technical Writer 的工作環境 | 加入 PingCAP 五個月的員工體驗記
-END-
