Foreword
很多熱愛寫作的小伙伴或許都曾想過，要是能擁有一個自己專屬的博客就好了界酒。這里呢，就跟大家詳細地分享一種自己動手搭建博客的簡單方案：GitHub Pages + Hugo嘴秸。
如果你感覺有點兒陌生毁欣，沒關(guān)系。雖說是自己動手搭建岳掐，但并不要求你有多少技術(shù)基礎(chǔ)凭疮，熟悉一下就好了。我在之前的分享中串述，曾跟大家提到過 GitHub执解，老讀者肯定不陌生了。例如這兩篇纲酗，不了解的小伙伴可以先戳鏈接去看下：
那 GitHub Pages 和 Hugo 又是什么呢衰腌？
- GitHub Pages 是一個靜態(tài)站點托管服務(wù)新蟆，直接將個人、組織或項目的頁面托管于 GitHub 庫或倉庫 (repository) 中右蕊。
- Hugo 是一個用 Go 語言編寫的靜態(tài)站點生成器琼稻，它針對速度、易用性和可配置性進行了優(yōu)化尤泽，快速靈活欣簇。
接下來规脸，看看如何一步一步地為自己搭建一個博客吧坯约！下面的步驟或許乍一看有點兒多，那是為了讓操作更具體更明確特意劃分的莫鸭，實際操作起來并不會很復(fù)雜闹丐。
注：以下步驟以在 macOS 上的操作為例，其它操作系統(tǒng)類似被因，只是一些工具和命令有區(qū)別卿拴。
第 1 步：新建一個 GitHub 庫。
-
注冊一個 GitHub 賬號梨与。
- 如果你已有賬號堕花，直接登錄。
- 如果你沒有賬號粥鞋，注冊并登錄缘挽。
GitHub: https://github.com
-
打開 GitHub Pages 官網(wǎng)，瀏覽并了解 User or organization site 部分對應(yīng)的操作步驟呻粹。
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 官方的安裝指南。
進行初步了解筹燕，安裝與你的操作系統(tǒng)對應(yīng)的必要工具轧飞。例如，我的 macOS 上已經(jīng)安裝了 Homebrew撒踪，這里就不需要再安裝了踪少。
如果你感到有點兒困惑，該指南頁面的后半部分有對 macOS 和 Windows 上如何安裝 Hugo 的詳細說明糠涛。
-
打開一個終端 Terminal援奢，輸入與操作系統(tǒng)對應(yīng)的 Hugo 安裝命令。
brew install hugo -
安裝完成后忍捡，輸入以下命令來確認(rèn)集漾。
hugo version
第 3 步：新建一個 Hugo 網(wǎng)站切黔。
-
進入你想存放 Hugo 網(wǎng)站文件夾的目錄。
我直接將其放在了 macOS 的家目錄下具篇。你也可以通過
cd命令切換到其它目錄纬霞。例如，如果你想放在 Documents 目錄下驱显，在終端里執(zhí)行cd ~/Documents即可诗芜。 -
執(zhí)行以下命令新建一個 Hugo 網(wǎng)站。
hugo new site lilian-blog # "lilian-blog" 是我的網(wǎng)站文件夾名埃疫。
第 4 步：選擇 Hugo 主題并克隆至本地目錄伏恐。
-
打開 Hugo Themes 頁面，選擇一個你喜歡的主題栓霜。
Hugo Themes: https://themes.gohugo.io
下文以選擇 Tranquilpeak 主題為例翠桦。
-
將所選主題克隆至本地目錄。
cd ~/lilian-blog # 進入網(wǎng)站目錄胳蛮，用你的網(wǎng)站目錄名替換 "lilian-blog"销凑。 mkdir -p themes # 創(chuàng)建 "themes" 目錄。 cd themes # 進入 "themes" 目錄仅炊。 git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak # 將 Tranquilpeak 主題克隆至 "tranquilpeak" 目錄斗幼。
第 5 步：編輯配置文件。
-
在 Hugo 網(wǎng)站文件夾的根目錄下抚垄，使用 Visual Studio Code 打開
config.toml文件蜕窿。如果你還沒用過 Visual Studio Code，建議下載安裝一下督勺，是一個很好用的開源文本編輯器渠羞，同時支持 Windows、Linux 和 macOS 操作系統(tǒng)智哀。
-
參考所選 Hugo 主題的配置說明次询，編輯
config.toml文件。注意：
theme配置項指的是所選主題的名稱瓷叫，必須與所選主題被克隆至的目錄名相同屯吊。在本例中，即theme = "tranquilpeak"摹菠。Tranquilpeak 主題的配置說明：https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tranquilpeak-configuration
第 6 步：新建一篇文章盒卸。
-
進入網(wǎng)站文件夾的根目錄。
cd ~/lilian-blog # "lilian-blog" 為網(wǎng)站文件夾名次氨。 -
使用以下命令新建一篇文章蔽介。
hugo new post/my-first-post.md # "my-first-post.md" 是新建文章的文件名。 編輯新建的文章，添加內(nèi)容并保存虹蓄。
第 7 步：本地預(yù)覽網(wǎng)站效果犀呼。
-
啟動 Hugo server。
hugo server -D -
使用瀏覽器打開 http://localhost:1313 預(yù)覽薇组。
- 如果你對預(yù)覽效果滿意外臂，進入下一步。
- 如果不滿意律胀，編輯
config.toml配置文件宋光，再次預(yù)覽。
第 8 步：構(gòu)建 Hugo 網(wǎng)站炭菌。
在 Hugo 網(wǎng)站文件夾的根目錄下罪佳，執(zhí)行 hugo 命令來構(gòu)建。
hugo # 構(gòu)建你的 Hugo 網(wǎng)站娃兽，默認(rèn)將靜態(tài)站點保存到 "public" 目錄菇民。
注意：Hugo 會將構(gòu)建的網(wǎng)站內(nèi)容默認(rèn)保存至網(wǎng)站根目錄的 public/ 文件夾中尽楔。
第 9 步：將網(wǎng)站文件夾轉(zhuǎn)換為 Git 庫投储。
-
進入
lilian-blog/public目錄，初始化 Git 庫阔馋。cd ~/lilian-blog/public # 生成的 HTML 文件保存在 "public" 目錄中玛荞，"public" 文件夾會被轉(zhuǎn)換為 Git 庫。 git init # 初始化 Git 庫呕寝。 -
查看
public目錄下的文件勋眯，會發(fā)現(xiàn)多了.git文件。ls -a # 顯示所有文件和目錄列表下梢，包含隱藏文件客蹋。
第 10 步：將 Git 本地庫關(guān)聯(lián)至遠程庫。
-
在
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 信息辆琅。上述命令返回結(jié)果如下：
[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 本地庫已成功關(guān)聯(lián)至遠程庫这刷。
第 11 步：提交你的修改至本地庫婉烟。
在 lilian-blog/public 目錄下，通過 commit 提交修改暇屋，并寫一個 commit message 來簡潔描述你的修改似袁。
git status # 查看當(dāng)前修改狀態(tài)。
git add . # 添加所有修改過的文件。你也可以只添加某個文件昙衅。
git commit -m "Add a new post" # "Add a new post" 是 commit message.
第 12 步：將你的修改推至遠程庫屋彪。
在 lilian-blog/public 目錄下，將修改推至遠程庫绒尊。
git push -u origin master
恭喜畜挥！現(xiàn)在你已經(jīng)走完了全程，擁有了一個自己構(gòu)建的博客網(wǎng)站婴谱。
我的博客地址是：https://lilin90.github.io
如果你想使用 HTTPS 以防止其他人窺探或篡改網(wǎng)站流量蟹但，在 GitHub 上打開相應(yīng)的庫，點擊 Settings 勾選 Enforce HTTPS 即可谭羔。
順便說一下华糖，我購買了個域名 https://lilianlee.me，并將其關(guān)聯(lián)到了默認(rèn)的 URL https://lilin90.github.io瘟裸。所以如果你訪問 https://lilin90.github.io客叉，會自動跳轉(zhuǎn)至 https://lilianlee.me。
接下來：之后如何添加一篇博客
之后如果要添加一篇博客话告，使用如下幾步即可：
- 新建一篇文章兼搏，編輯內(nèi)容。
- 本地預(yù)覽網(wǎng)站呈現(xiàn)效果沙郭。
- 構(gòu)建 Hugo 網(wǎng)站佛呻。
- 提交修改至 Git 本地庫。
- 將修改推至遠程庫病线。
Afterword
點擊“閱讀原文”吓著，即可閱讀本文的英文版。英文版里多了一些開頭的內(nèi)容送挑。
如果你也想擁有一個自己親手搭建的博客或網(wǎng)站绑莺，現(xiàn)在可以行動起來了！如果遇到網(wǎng)絡(luò)搜索解決不了的問題惕耕，或者有相關(guān)經(jīng)驗想跟大家分享纺裁，歡迎留言交流哦~
你可能想讀：
技術(shù)文檔誕生記 | 完整的技術(shù)寫作流程是怎樣的？
Technical Writer 可提供的交付物有哪些赡突？
GitHub + Markdown 的新輕型技術(shù)寫作模式速覽
GitHub + Markdown 的技術(shù)文檔方案深度解析
Technical Writer 日常工作中好用的小工具
技術(shù)傳播人士應(yīng)該知道的色彩搭配常識
如何使用顏色來提高技術(shù)文檔的可讀性对扶？
Technical Writer 如何 Review 技術(shù)文檔？| 重細節(jié)+全局觀
技術(shù)翻譯需要有 Technical Writer 的 sense
深度解析關(guān)于技術(shù)翻譯的六個認(rèn)知誤區(qū)
如何讓你的內(nèi)容輸出更加專業(yè)更有設(shè)計感惭缰？
書單 | 有哪些技術(shù)傳播從業(yè)者必知必看的書籍浪南？
有哪些適合技術(shù)傳播從業(yè)者關(guān)注的優(yōu)質(zhì)博客？（一）
有哪些適合技術(shù)傳播從業(yè)者關(guān)注的優(yōu)質(zhì)博客漱受？（二）
經(jīng)驗分享 | 來自 11 位 Technical Writer 前輩的職業(yè)發(fā)展建議（上篇）
經(jīng)驗分享 | 來自 11 位 Technical Writer 前輩的職業(yè)發(fā)展建議（下篇）
技術(shù)傳播沙龍精彩分享 | 高校老師與行業(yè)大牛談“互聯(lián)網(wǎng)技術(shù)寫作”
英語技術(shù)文檔的標(biāo)題到底該大寫還是小寫络凿？
不同階段如何應(yīng)對 Technical Writer 的職業(yè)顧慮或煩惱骡送？
如何使用正則表達式批量添加和刪除字符？
英語技術(shù)文檔中如何正確使用時態(tài)絮记？
英語技術(shù)文檔中如何正確使用人稱摔踱？
Markdown：寫技術(shù)文檔、個人博客和讀書筆記都很好用的輕量級標(biāo)記語言
如何為 Markdown 文件自動生成目錄怨愤？
技術(shù)寫作實例解析 | 簡潔即是美
兩分鐘趣味解讀 Technical Writer
若脫離理解派敷，直譯得再正確又有何意？
優(yōu)質(zhì)譯文不應(yīng)止于正確撰洗，還要 Well-Organized
Technical Writer 需要 Technical 到會寫代碼嗎篮愉？
寫在入職技術(shù)型創(chuàng)業(yè)公司 PingCAP 一個月之后
揭秘 Technical Writer 的工作環(huán)境 | 加入 PingCAP 五個月的員工體驗記
-END-
