更新于2019-10-10
01 前言
本文針對(duì)不掌握網(wǎng)頁設(shè)計(jì)或相關(guān)開發(fā)能力的用戶，提供一套高性價(jià)比的建立個(gè)人博客和作品集的解決方案律胀。具體而言润努，是作者摸索了WordPress建站，自己寫迫淹，Github Page建站等各類建站方法后秘通，最終選擇的基于「Github Page + 建站技術(shù)框架」的建站方法。
如果你并不掌握相關(guān)技術(shù)千绪，但需要建立一個(gè)網(wǎng)站形式的個(gè)人博客/作品集充易，你就是本文的目標(biāo)讀者。通過閱讀本文荸型，你能使用小于100元/年的花銷盹靴，掌握建立和維護(hù)一個(gè)高質(zhì)量個(gè)人博客/作品集所需要的相關(guān)技術(shù)和流程。
閱讀本文并結(jié)合步驟進(jìn)行操作瑞妇，視配置情況和網(wǎng)絡(luò)環(huán)境稿静，最快約1小時(shí)可以完成網(wǎng)站的配置和上線。當(dāng)然辕狰，由于網(wǎng)絡(luò)的不穩(wěn)定性和各種坑的出現(xiàn)改备，可能會(huì)需要數(shù)小時(shí)的時(shí)間才能完成。另外蔓倍，注意本文基于MacOS系統(tǒng)進(jìn)行操作悬钳，如果需要使用Windows系統(tǒng)進(jìn)行配置盐捷，可以自行百度或谷歌相關(guān)步驟的鏡像做法。
作者希望通過比較淺顯的語言解釋清楚必要的概念默勾，如果你作為技術(shù)小白無法理解相關(guān)描述碉渡，可在評(píng)論中指出。
本文所采用的基本技術(shù)內(nèi)容如下圖母剥。如果你對(duì)打了*號(hào)以外的內(nèi)容有一定基礎(chǔ)的認(rèn)知滞诺，將會(huì)有助于快速完成建站。如果你對(duì)此基本不太了解环疼，可以繼續(xù)閱讀下文的相關(guān)知識(shí)小科普习霹。
主要技術(shù)內(nèi)容
├── 「域名」，如 liyanzhang.com
├── 「Github」和「Github Page」
├── 可用的建站技術(shù)框架炫隶，本文以Hugo為主
│ ├── 「Jekyll」 (http://jekyllcn.com/)
│ ├── 「Hexo」 (https://hexo.io)
│ └── 「Hugo」 (https://gohugo.io/)
├──「圖床」
└── 「Markdown語法」
在理解了每一步驟的目的后再進(jìn)行操作顯然比一步步照著教程走更有幫助淋叶，建議大家詳細(xì)閱讀。
網(wǎng)站相關(guān)知識(shí)小科普
一個(gè)所謂的“網(wǎng)站”（以我的個(gè)人作品集(https://liyanzhang.com)為例）等限，可以被理解為放在互聯(lián)網(wǎng)上的一個(gè)倉庫爸吮，一個(gè)倉庫主要有門和庫存兩個(gè)部分。
1.門：域名
為了方便自己和其他用戶找到這個(gè)倉庫望门，它需要一個(gè)好記的名字或者地址形娇，也就是門。個(gè)人博客的地址往往以自己的名字命名筹误，比如我的是liyanzhang.com桐早，它的學(xué)名是域名。域名分為很多種厨剪，比如.cn結(jié)尾的一般是中國(guó)的域名哄酝，較多不支持國(guó)外瀏覽；比如.com結(jié)尾的是國(guó)際上最標(biāo)準(zhǔn)的域名祷膳；.edu.cn結(jié)尾的則是中國(guó)的教育機(jī)構(gòu)等等陶衅。這也意味著如果你希望你的博客或作品集是全球通用且正式的，建議選購.com/.net等高級(jí)域名（相對(duì)貴一點(diǎn)）,而日常使用的話直晨，.wiki/.top/.me等域名也是沒問題的搀军。除此之外，我們?cè)诮ㄕ具^程中也可能會(huì)接觸到網(wǎng)站形如“218.108.191.35”的IP地址勇皇，它們則是互聯(lián)網(wǎng)分配給每個(gè)用戶和每個(gè)網(wǎng)絡(luò)的名稱罩句。除非情況特殊，否則我們不會(huì)遇到它敛摘。
2.https安全協(xié)議
而在https://liyanzhang.com中的https又是什么呢门烂？它的學(xué)名是超文本傳輸安全協(xié)議，我們只需要知道它是一種安全的用于在網(wǎng)上傳輸數(shù)據(jù)的協(xié)議就可以了。在這里需要大家了解的一個(gè)內(nèi)容（也是不少人會(huì)建站過程中遇到的一個(gè)坑）是https與http的區(qū)別屯远。http較https少了一個(gè)“s”蔓姚，即“安全”。
下圖中分別是我的英文版作品集（https://liyanzhang.com)以及博客（http://oh-eureka.com)慨丐，前者是使用本文將為大家介紹的方法構(gòu)建的赂乐，而后者則是之前使用WordPress技術(shù)框架構(gòu)建的，可以發(fā)現(xiàn)借助Github Page的一些便利咖气，我們可以免費(fèi)實(shí)現(xiàn)https級(jí)別的網(wǎng)站。而一般來說挖滤，要在阿里云等服務(wù)提供商購買一年的https服務(wù)崩溪，大概需要2000元左右。使用https的好處是更安全斩松，更完美伶唯，更專業(yè)。當(dāng)然惧盹，http在我們的日常生活中也是完全夠用的乳幸。
http協(xié)議的網(wǎng)站會(huì)被標(biāo)為“不安全”
3.倉庫：服務(wù)器
在瀏覽器輸入框輸入“門牌號(hào)”域名后，我們會(huì)進(jìn)入到一個(gè)個(gè)網(wǎng)站的倉庫里钧椰，我們可以簡(jiǎn)單地把這些倉庫理解為服務(wù)器粹断。這些倉庫存在2種狀態(tài)。狀態(tài)一是“渲染”后的狀態(tài)嫡霞，也就是我們正常進(jìn)入網(wǎng)頁時(shí)看到的一個(gè)個(gè)漂亮的頁面瓶埋。但顯然這些網(wǎng)頁不是像一幅幅圖片一樣被擺在倉庫里的，而是以狀態(tài)二：“源代碼”形式存在的诊沪。按理來說养筒，一個(gè)基礎(chǔ)的網(wǎng)頁開發(fā)，我們需要學(xué)習(xí)html5端姚，css3晕粪，javascript等語法才能夠?qū)懞茫⒃跒g覽器上渲染好渐裸。但通過使用一些別人為我們建設(shè)好的技術(shù)框架巫湘，我們只需要像寫文章一樣寫好內(nèi)容，放到對(duì)應(yīng)的文件夾里橄仆，或者是修改一個(gè)已經(jīng)非常整潔明了的配置文件剩膘，就可以在網(wǎng)絡(luò)上看到渲染后的結(jié)果。這也是這些技術(shù)框架的意義盆顾。
因此怠褐，如果不滿足于簡(jiǎn)單地構(gòu)建和維護(hù)網(wǎng)站，可以自行百度或谷歌html5您宪，css3的相關(guān)內(nèi)容學(xué)習(xí)奈懒，大概2天時(shí)間便可以上手奠涌。
另一方面，在根據(jù)后文完成了所有的配置工作后磷杏，我們維護(hù)網(wǎng)站的流程是：
建站相關(guān)知識(shí)小百科
通過前文的介紹溜畅，相信你對(duì)一個(gè)“網(wǎng)站”的構(gòu)成，也就是它的門和倉庫极祸，有了一定的了解慈格。下文將為大家簡(jiǎn)單介紹幾種主流的建站方式和適合的用戶。
- 域名+WordPress/Cargo/Wix等自帶服務(wù)器建站
優(yōu)點(diǎn)：美觀遥金，定制化程度高浴捆，可以使用富文本編輯器編輯，易于維護(hù)
缺點(diǎn)：基礎(chǔ)費(fèi)用較高（￥200+～￥800+/年不等稿械，越好看越貴）选泻，需要較快訪問速度和儲(chǔ)存容量時(shí)費(fèi)用更高
總結(jié)：有錢就不用想了，這個(gè)走起
- 域名+GitHub Page建站
優(yōu)點(diǎn)：免費(fèi)美莫，快速
缺點(diǎn)：網(wǎng)站樣式和結(jié)構(gòu)較為單一（丑陋）页眯，維護(hù)不夠方便，無法監(jiān)控網(wǎng)站數(shù)據(jù)
總結(jié)：既然都用GitHub Page了厢呵，干啥不再多搞一下呢窝撵？
- 域名+GitHub Page+Hugo/Hexo/Jekyll等技術(shù)框架建站
優(yōu)點(diǎn)：免費(fèi)，快速述吸，定制化程度尚可忿族，較為美觀，維護(hù)不困難
缺點(diǎn)：不夠方便蝌矛，定制化程度還是不夠高
總結(jié)：相對(duì)性價(jià)比最高的選擇
再解釋一些撰寫博客需要了解的相關(guān)概念：
- 圖床：在個(gè)人博客/作品集中顯示的大量圖片如果都直接放在“倉庫”里道批，這個(gè)倉庫的容量可能會(huì)不足，同時(shí)入撒，讀取倉庫的內(nèi)容的速度可能也不夠快隆豹。因此，有一些公司（如七牛云）茅逮，提供了專用的“倉庫”來存放圖片或文件。通過將幾十kb到幾m的圖片/文件存放到這些專用的倉庫里献雅，再在我們的網(wǎng)頁中使用一行專門用于顯示圖片的代碼碉考，即可不占用我們的倉庫庫存，同時(shí)又快速顯示圖片挺身。具體的配置將會(huì)在下文介紹侯谁。
-
Markdown：一種流行的用于撰寫互聯(lián)網(wǎng)通用文章的語法。在我們寫文章時(shí)，往往會(huì)用到一級(jí)標(biāo)題墙贱、二級(jí)標(biāo)題热芹、加粗、斜體惨撇、顯示圖片伊脓、圖表、代碼塊等等各種特殊格式魁衙。Markdown語法使得我們可以使用這種語法撰寫文章后报腔，可以輕松地發(fā)布到互聯(lián)網(wǎng)支持MD的各種平臺(tái)（個(gè)人博客/簡(jiǎn)書/語雀/公眾號(hào)/知乎...)而不再需要每次都為每個(gè)平臺(tái)進(jìn)行排版。具體來說剖淀，比如我們需要撰寫一個(gè)一級(jí)標(biāo)題 標(biāo)題1榄笙，可以寫作：“# 標(biāo)題1”。具體的語法可以自行百度祷蝌，希望大家在撰寫博客的練習(xí)中不斷熟悉。在后文提到的Visual Studio Code中使用MarkDown寫作帆卓，可以直接進(jìn)行帶格式的預(yù)覽巨朦，如下圖。在圖中可以看到剑令，形如
[圖片上傳失敗...(image-2ee8ec-1569079407627)]_ _的形式可以使用圖床顯示圖片糊啡。
02 材料準(zhǔn)備
2.1 購買域名（10分鐘）
如果你已經(jīng)擁有一個(gè)域名并已完成備案，可直接查看下一條吁津。
我們使用阿里云購買一個(gè)你喜歡的域名棚蓄。
- 前往https://www.aliyun.com/，點(diǎn)擊右上角登錄碍脏，使用支付寶掃碼直接登錄梭依。
- 在頂部搜索框選擇“域名”，在輸入框輸入你想要的域名典尾，比如nidemingzi役拴，點(diǎn)擊搜索
- 查看結(jié)果，選擇你能夠接受的域名钾埂，或更換關(guān)鍵詞河闰。一般來說，建議選用.com/.cn/.net/.io結(jié)尾的域名褥紫。如果不幸域名已被注冊(cè)姜性，建議更換關(guān)鍵詞或尾綴，因?yàn)槲匈徺I價(jià)格較高髓考。
- 不需要添加任何其他服務(wù)部念，域名持有者選擇“個(gè)人”，按照要求完善信息∮』可以查看阿里云自行提供的“如何獲取優(yōu)惠口令”獲得一點(diǎn)點(diǎn)的優(yōu)惠矢腻。
- 購買后，直接進(jìn)入域名控制臺(tái)射赛，或通過頁面右上角“控制臺(tái)”-頁面左側(cè)側(cè)邊欄“域名”進(jìn)入域名控制臺(tái)多柑，如下圖。
- 你購買的域名應(yīng)該會(huì)出現(xiàn)在頁面中楣责，但在部分屬性狀態(tài)上與我會(huì)不同竣灌。
- 如果“域名狀態(tài)”或頁面中任何區(qū)域顯示域名需要進(jìn)行“備案”，則請(qǐng)按照阿里云的指引進(jìn)行域名備案秆麸。備案是必須的初嘹，視不同情況可能會(huì)在30min內(nèi)完成，也可能確實(shí)需要3-5天沮趣。
備案完成后屯烦，域名就完成準(zhǔn)備啦！
2.2 GitHub準(zhǔn)備（15分鐘）
如果你已經(jīng)擁有一個(gè)GitHub賬號(hào)房铭，并掌握了push/commit等指令或了解如何使用GitHub Desktop驻龟，可直接查看下一條。
GitHub (https://github.com)是世界范圍內(nèi)最大的男性交友平臺(tái)代碼托管平臺(tái)缸匪。由于程序員寫的代碼和項(xiàng)目不僅多翁狐，而且還會(huì)不斷地進(jìn)行增、刪凌蔬、改露懒，必須要有一個(gè)在云端的平臺(tái)為大家管理這些代碼。通過GitHub砂心，程序員可以在自己的電腦上寫代碼（就像我們將做到的在自己的電腦上的文件夾里編輯文件）懈词，再上傳發(fā)布到GitHub上。通過我們的標(biāo)記操作（輸入一些指令）辩诞，GitHub會(huì)記錄下我們更改文件的操作钦睡，以便我們后悔更改后直接服用“后悔藥”恢復(fù)文件至某一版本。當(dāng)然躁倒，在我們搭建網(wǎng)站和維護(hù)的過程中荞怒，幾乎不需要用到任何復(fù)雜的操作，只需要修改文件后發(fā)布到GitHub上即可秧秉。
- 進(jìn)入github.com, 輸入自己喜歡的用戶名褐桌，自己的Email和Password，檢測(cè)沒有重復(fù)后即點(diǎn)擊Sign up for GitHub完成注冊(cè)象迎∮叮可能會(huì)收到激活郵件呛踊。
- 進(jìn)入GitHub后，界面如下圖所示啦撮。左側(cè)為你已經(jīng)建立的一些“項(xiàng)目”谭网，中間會(huì)出現(xiàn)你關(guān)注的內(nèi)容，右側(cè)則是一些動(dòng)態(tài)赃春。
- 點(diǎn)擊https://desktop.github.com/愉择，下載GitHub Desktop客戶端，方便我們管理本地的倉庫织中。
- 完成安裝后雙擊打開锥涕，登錄注冊(cè)好的GitHub賬號(hào)。
登錄完成后狭吼，即完成準(zhǔn)備层坠！
2.3 其他軟件準(zhǔn)備（5分鐘）
- 下載 Visual Studio Code（https://code.visualstudio.com/），用于編寫我們的文檔刁笙。它是一款輕量強(qiáng)大的代碼編輯器破花。
- 在App Store下載iPic，用于上傳文章中的圖片到圖床上疲吸。下載后安裝即可旧乞，配置將在后文交代。
03 具體配置
3.1 配置GitHub Page（15分鐘）
GitHub Page是一種由GitHub中的Repository（倉庫/項(xiàng)目）直接創(chuàng)建的網(wǎng)頁磅氨。傳統(tǒng)的網(wǎng)頁需要擁有一個(gè)獨(dú)立的服務(wù)器，往往需要另外購買嫡纠，價(jià)格雖然不貴烦租，但管理十分困難。相比之下除盏，GitHub Repository的管理則非常簡(jiǎn)單叉橱，使用前文介紹的GitHub Desktop甚至不需要記憶任何指令。按照數(shù)百萬人都在用的GitHub管理模式者蠕，我們?cè)诒镜鼐庉婻epo中的內(nèi)容窃祝，上傳到GitHub上，則GitHub Page也能夠?qū)?yīng)更新踱侣。
接下來粪小，指引大家配置并上線自己網(wǎng)站的初始界面。（也可以跟著GitHub Page自己的指引嘗試配置）
- 登錄GitHub抡句，點(diǎn)擊頁面左側(cè)欄“New”按鈕探膊，新建一個(gè)Repo。
- 在Repository name處填寫“小寫用戶名.github.io”待榔，比如我的用戶名是“Yanzhang-LI”逞壁，則我應(yīng)該填寫“yanzhang-li.github.io”流济。注意一定要完全準(zhǔn)確對(duì)應(yīng)，否則該Repo無法作為GitHub Page生效腌闯。
- 點(diǎn)擊“Set up in Desktop”绳瘟。如果沒有反應(yīng)，則在系統(tǒng)上直接打開GitHub Desktop姿骏，該Repo應(yīng)該會(huì)顯示在界面上糖声，選擇您剛建立的username.github.io并點(diǎn)擊藍(lán)色按鈕Clone它到本地。這意味著你會(huì)在自己的電腦上擁有一個(gè)以username.github.io為名字的文件夾工腋。當(dāng)你更改文件夾里的文件時(shí)姨丈，GitHub Desktop會(huì)檢測(cè)到你的更改，而你可以commit并push到GitHub上擅腰。
- 打開Visual Studio Code蟋恬，使用快捷鍵Command/Ctrl+N或點(diǎn)擊“New file”新建一個(gè)文件。使用快捷鍵Command/Ctrl+S保存該文件趁冈，注意：將該文件命名為index.html歼争，并保存至剛剛建立的以username.github.io為名字的文件夾中。index.html是GitHub Page解析網(wǎng)頁時(shí)渗勘，會(huì)首先解析的主頁沐绒。
- 將以下html5代碼復(fù)制進(jìn)index.html，隨后再次使用Command/Ctrl+S保存旺坠。
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
- 打開GitHub Desktop乔遮，它應(yīng)當(dāng)會(huì)自動(dòng)出現(xiàn)你對(duì)文件所做的更改。確認(rèn)左側(cè)欄全選后取刃，在紅色輸入框內(nèi)輸入任何你想用來標(biāo)記這次更改的話蹋肮，比如“第一次commit”，隨后點(diǎn)擊下方藍(lán)色按鈕“Commit to master”璧疗，此時(shí)已經(jīng)完成了標(biāo)記工作坯辩。最后我們點(diǎn)擊上方欄最右的“Publish branch”將該變更發(fā)布到GitHub上，等待完成崩侠。
- 在瀏覽器中輸入https://你的用戶名.github.io漆魔，看看你最開始網(wǎng)頁的效果吧！
- 如果沒有任何反應(yīng)却音，請(qǐng)等待幾分鐘改抡。如果還是沒有內(nèi)容，請(qǐng)?jiān)趃ithub.com上檢查你的username.github.io的Repo中是否有一個(gè)index.html文件系瓢，同時(shí)文件中的代碼是否如前文所述雀摘。
- 如果一切順利，此時(shí)你的github page就已經(jīng)配置完成了八拱。如果你會(huì)撰寫一些前端代碼阵赠，你已經(jīng)可以在username.github.io上瀏覽你的更新涯塔。
通過上面的操作，你應(yīng)該能夠理解本地的“username.github.io文件夾”和“GitHub Page”間的關(guān)系清蚀。本地的文件夾中的內(nèi)容一旦發(fā)生改變匕荸，就可以通過GitHub Desktop進(jìn)行commit（打點(diǎn)記錄改變），再push到GitHub云端枷邪。經(jīng)過這樣的操作榛搔，云端的GitHub倉庫代碼和本地的username.github.io文件夾的內(nèi)容就一致了。而再經(jīng)過GitHub Page的渲染东揣，我們就可以使用域名訪問我們的個(gè)人網(wǎng)站了践惑。
截至目前，我們其實(shí)已經(jīng)擁有了一個(gè)名為username.github.io的網(wǎng)站了嘶卧。但顯然這樣的域名并不夠酷尔觉，所以我們將會(huì)再花幾分鐘配置好域名。配置域名的原理是通過將username.github.io“解析”到你所購買的域名芥吟，解析的具體含義我們不必了解侦铜，總之，以后你既可以通過username.github.io钟鸵，也可以通過你所購買的域名訪問這個(gè)網(wǎng)頁钉稍。
- 在GitHub上進(jìn)入你的username.github.io的Repo，進(jìn)入其設(shè)置棺耍。
- 找到GitHub Pages設(shè)置贡未，在“Custom domain”中輸入你所購買的域名，點(diǎn)擊Save蒙袍。
- 進(jìn)入阿里云-登錄-控制臺(tái)-域名俊卤，找到你購買的域名或你需要與username.github.io綁定的域名，點(diǎn)擊“解析”左敌。
- 點(diǎn)擊“添加記錄”，共需要添加兩次記錄俐镐。記錄類型都選擇“CNAME”矫限，主機(jī)記錄第一次填寫“www”，第二次填寫“@”佩抹，解析線路均選擇默認(rèn)叼风，記錄值均填寫“你的用戶名.github.io”。
解析結(jié)束后等待數(shù)分鐘棍苹，嘗試在瀏覽框中輸入你的域名无宿，如果可以順利訪問則解析成功。
3.2 配置Hugo和Hugo主題 （40分鐘）
要使用Hugo來安排我們的網(wǎng)站枢里，我們首先要在我們的電腦本地配置Hugo技術(shù)框架孽鸡。下文以Mac系統(tǒng)為例蹂午，Windows系統(tǒng)請(qǐng)百度鏡像做法，如“win 安裝hugo”彬碱。
- 在電腦本地安裝Homebrew
- 點(diǎn)擊進(jìn)入https://brew.sh/index_zh-cn
- command+c復(fù)制路徑豆胸，打開應(yīng)用程序里的“終端（terminal）”，將指令command+v粘貼后回車巷疼。
b. 出現(xiàn)上圖語句后回車晚胡，輸入Password（電腦密碼），注意輸入時(shí)不會(huì)有任何反應(yīng)嚼沿，輸入完畢按下回車后如果進(jìn)程順利則輸入正確估盘，否則重新輸入。
c. 出現(xiàn)上圖文字表示安裝成功骡尽。
- 在電腦本地安裝Hugo
- 打開“終端”應(yīng)用程序遣妥，輸入
brew install hugo - 按照指令操作，等待安裝進(jìn)程結(jié)束
- 結(jié)束后爆阶，輸入
hugo version如果出現(xiàn)了版本號(hào)燥透，則說明安裝成功
Hugo安裝完畢后，請(qǐng)?jiān)?a target="_blank">https://themes.gohugo.io / GitHub / Google上尋找適合你的個(gè)人博客/作品集的網(wǎng)站模板辨图。選定模板后班套，再進(jìn)行主題的配置和發(fā)布。
隨便列舉一些能看得過去的主題：
- https://themes.gohugo.io/kross-hugo-portfolio-template/
- https://themes.gohugo.io/hugo-myportfolio-theme/
- https://themes.gohugo.io/yourfolio/
- https://themes.gohugo.io/forty/
- 配置Hugo主題
所謂的主題故河，就是別人給我們寫好的了一套網(wǎng)頁樣式吱韭，包括主頁、文章鱼的、圖片等各類內(nèi)容的樣式理盆，因此我們只需要注重內(nèi)容的生產(chǎn)。一般來說凑阶，我們可以替換主題中文字和圖片的內(nèi)容猿规，如果對(duì)css等語言有一定了解的同學(xué)，可以修改模塊的具體樣式（形狀宙橱、顏色姨俩、比例等）。在上文可以看到，Hugo等框架為我們提供了大量的主題，我們需要首先配置好Hugo和Hugo主題贴妻，再將它發(fā)布到GitHub Page上即可行疏。接下來以我選用的hugo-forty主題為例，解釋主題的配置。
其流程大致為：本地新建Hugo Website -> git clone主題文件 -> 在本地修改你的網(wǎng)站 -> 發(fā)布到GitHub Page
**
- 在本地任意一個(gè)你喜歡的地方，比如“文稿Documents”路徑下，新建一個(gè)文件夾菊卷，可以命名為my website缔恳。
-
在應(yīng)用程序（或使用快捷鍵command+空格搜索）找到“終端Terminal”并打開，輸入“cd”后再輸入空格的烁，再用鼠標(biāo)拖動(dòng)my website文件夾至終端中褐耳，直到終端中的命令變?yōu)椤癱d 文件夾的路徑”，按下回車渴庆。該操作使得終端進(jìn)入了my website文件夾铃芦，我們將要在該文件夾中進(jìn)行一系列指令操作。
image.png
image.png -
在終端中輸入指令“hugo new site my-website”其中的"my-website"可以替換為任何連續(xù)的文件夾名稱襟雷，如“yanzhang-portfolio”等刃滓，完成后將出現(xiàn)一個(gè)以此為名稱的新文件夾，里面已經(jīng)有好幾個(gè)文件夾和文件了耸弄。
image.png - 在終端中輸入指令"cd 你剛剛寫的文件夾名稱"咧虎，如"cd my-website"，隨后再輸入"cd themes"计呈。
- 成功進(jìn)入后砰诵，輸入"git clone https://github.com/MarcusVirg/forty"，具體的指令因?yàn)橹黝}的不同也會(huì)不同捌显。等待下載完成茁彭，如果網(wǎng)絡(luò)不好可能會(huì)崩掉，重來即可扶歪，最好使用翻墻網(wǎng)絡(luò)理肺。這幾步的含義是將存放于github上的主題文件下載到我們電腦本地上，這樣我們的hugo網(wǎng)站就擁有了主題善镰。后面妹萨，我們將在本地對(duì)我們的Hugo網(wǎng)站進(jìn)行內(nèi)容修改，最后發(fā)布到GitHub上炫欺，我們就可以通過域名訪問了乎完。
image.png -
完成下載后，進(jìn)入themes文件夾品洛，里面將出現(xiàn)forty文件夾树姨，進(jìn)入themes/forty/exampleSite，復(fù)制里面的config.toml文件到最開始的my-website文件夾中毫别，替換原來的config.toml文件娃弓。
image.png
image.png - 重新打開終端典格，輸入"cd "（注意有空格）后拖拽my-website文件夾的路徑到終端中岛宦，回車后進(jìn)入到my-website文件夾下，輸入"hugo server"并回車耍缴，出現(xiàn)如下圖所示則成功砾肺。最后挽霉，打開瀏覽器，在路徑框內(nèi)輸入"http://localhost:1313/"变汪。如果出現(xiàn)了樣式正確的樣板網(wǎng)站頁面侠坎，則配置成功。在終端窗口被激活的狀態(tài)下按下control+c組合鍵裙盾，終止該預(yù)覽实胸。
image.png
image.png
image.png
配置部分到此就結(jié)束了。接下來番官，將會(huì)進(jìn)一步完成圖床的配置工作庐完，并在 04 維護(hù) 部分中介紹配置網(wǎng)站的具體方法。
3.3 配置圖床 （20分鐘）
我們使用七牛云圖床或騰訊云圖床和iPic來配置圖床徘熔，win系統(tǒng)請(qǐng)使用picGo等軟件门躯。
注意，由于七牛云規(guī)則變更酷师，免費(fèi)測(cè)試的七牛云圖床存儲(chǔ)空間僅在30天有效讶凉，如果需要永久有效的圖床，需要擁有一個(gè)已經(jīng)完成備案的域名（注意備案不等于實(shí)名認(rèn)證）山孔，備案需要超過1周的時(shí)間懂讯，較為麻煩。我個(gè)人使用了自己備案的域名饱须，也建議大家給自己的域名備案域醇。
如果不想這么麻煩，可以換用騰訊云來配置蓉媳，相關(guān)步驟非常類似譬挚。
具體可見https://blog.csdn.net/u012195214/article/details/79204607。
附上iPic官方的配置說明：https://toolinbox.net/iPic/酪呻。
配置完成后减宣，如何在markdown語法中使用，請(qǐng)百度markdown語法進(jìn)行學(xué)習(xí)玩荠。
04 維護(hù)
在這一部分漆腌，我將會(huì)介紹一個(gè)典型的Hugo網(wǎng)站文件夾中的各個(gè)文件的作用，以及我們將如何配置他們阶冈。在此處闷尿，還是以前文的Forty主題為例，對(duì)于大多主題是通用的女坑。
剛完成配置的Hugo文件夾
├── config.toml 總配置文件填具，可以在里面更改各類配置
├── archetypes 不必理會(huì)
│ └── default.md
├── content 存放文章內(nèi)容的文件夾，可以在里面新建不同類目的文件夾
│ ├── blogs
│ │ ├── blog0917.md
│ │ └── ... 你的其他文章
│ ├── works
│ └── ... 你的其他分類
├── data 不必理會(huì)
├── layouts 不必理會(huì)
├── resources 不必理會(huì)
├── static 用于存放你在content中的文章會(huì)用到的圖片等資料
├── public 完成配置后，生成出來的網(wǎng)站會(huì)被放到這里
└── themes
└── forty 你選擇的主題名稱
├── archetypes 不必理會(huì)
├── exampleSite 完成初始化配置后不必理會(huì)
├── images 不必理會(huì)
├── layouts 不必理會(huì)
└── static 各類配置文件
├── css css文件劳景，可以修改代碼以更改樣式
├── img 用于存放主頁會(huì)用到的圖片等文件誉简，如banner.jpg
├── js 不必理會(huì)
├── sass 不必理會(huì)
└── fonts 不必理會(huì)
在上面，我初步解釋了每個(gè)文件夾的作用盟广。我們主要會(huì)涉及到 config.toml文件闷串，content文件夾，static文件夾筋量，public文件夾烹吵，themes/forty/static文件夾這幾個(gè)內(nèi)容的修改，接下來逐一詳細(xì)介紹桨武。
- config.toml
config意為配置年叮，.toml是一種數(shù)據(jù)格式。該文件根據(jù)不同的主題會(huì)有所不同但總體上類似玻募。在這個(gè)文件里只损，可以定義網(wǎng)站的名稱，各個(gè)地方的文字七咧、圖片跃惫、結(jié)構(gòu)等等。具體的描述艾栋，使用Visual Studio Code打開文件后爆存，里面會(huì)有相應(yīng)的說明。也可以實(shí)時(shí)修改后在本地預(yù)覽網(wǎng)頁時(shí)實(shí)時(shí)查看（具體方法見后文）蝗砾。
- content文件夾
里面放有你的博客和文章/作品先较，以markdown文件形式存在。每個(gè)文件的頭部會(huì)有一些屬性需要配置悼粮，隨后就可以使用正常的markdown語法進(jìn)行寫作闲勺。
- static文件夾
在里面存放著文章的封面等會(huì)被用到的圖片資料，可以在content中的markdown文件中以路徑形式取用扣猫。
- public文件夾
當(dāng)在本地結(jié)束配置后菜循，在終端中使用"hugo"指令，網(wǎng)站的內(nèi)容將被生成到public文件夾申尤。該文件夾的內(nèi)容應(yīng)該被復(fù)制黏貼到本地的GitHub Page文件夾（username.github.io文件夾）并上傳到GitHub癌幕。
- themes/forty/static文件夾
和static文件夾類似，只不過這里面是與主題有關(guān)的所有文件昧穿，包括css勺远，js，圖片等时鸵。如果了解代碼原理胶逢，可以在這里進(jìn)行配置修改。
維護(hù)和發(fā)布流程
- 在“終端”中，使用前文提到的 “cd + 空格 + 路徑”的形式進(jìn)入到你的hugo網(wǎng)站文件夾（如my-website文件夾）宪塔。
- “終端”輸入“hugo server”指令，成功后在瀏覽器進(jìn)入localhost:1313囊拜，本地預(yù)覽網(wǎng)站某筐。
- 修改前文提到的各類文件或其他markdown文件，在瀏覽器中查看效果冠跷。
- 修改完畢后南誊，回到“終端”，按快捷鍵ctrl+c停止本地預(yù)覽蜜托。輸入指令“hugo”抄囚。
- 前往hugo網(wǎng)站文件夾中的public文件夾，復(fù)制里面的所有文件到GitHub Page文件夾(username.github.io文件夾)橄务。
- 打開GitHub Desktop幔托，監(jiān)測(cè)到多個(gè)文件被改變。Commit后push到云端蜂挪，稍等2分鐘重挑，在網(wǎng)頁上輸入你的域名查看是否更新成功。
至此棠涮，你已經(jīng)了解了如何創(chuàng)建谬哀、配置并維護(hù)你的個(gè)人網(wǎng)站，恭喜严肪！
本文更新于2019年9月史煎，如有任何錯(cuò)漏或謬見，敬請(qǐng)諒解與告知驳糯，感謝篇梭！
