[TOC]
一、前言
關于搭建一個博客或個人網站的好處不用我多說，但創(chuàng)建網站的難度可能會讓人望而卻步。本人從網絡上獲得過很多幫助，學到很多。很早就萌發(fā)了自己建網站并分享知識的想法，但是又不想在簡書這類的網站上寫作。原諒我是個拖延控，有時間就寫一點，很可能一篇文章寫好久，也不喜歡在網上編輯。此外，知識需要積累形成框架，由于平時我所有的筆記都放在有道云筆記中，復制粘貼到簡書有時候格式不對，又不想進行二次編輯。最重要的是不夠Geek（裝逼）。
其實中間有過一段時間，利用hexo、github和github page創(chuàng)建過靜態(tài)網站。但是用得不太順手，原因有很多，比如：老是花時間在怎么改網頁主題上，而不是專注在寫作上；markdown（md）文件中的圖片遷移很麻煩，網上的圖片老是會丟失；github page 在國內打開很慢而且SEO不容易搜索到。因此，一直耽誤到現(xiàn)在，但一直賊心不死，想得到一個不太需要維護，可以專注寫作，文檔可以同步（在別的電腦上也可以編輯），又很geek的網站。我的想法是把所有筆記保存在有道云筆記中進行維護和整理，需要分享的話可以在本地用typora寫md文檔。此外，md文檔中的圖片用圖床解決移動問題，然后托管到git自動渲染成網頁。這樣只要圖床不掛，分享或上傳到其它平臺就很方便，因為只要復制md文檔就行。為什么不直接用有道云筆記中的md呢？因為插入圖片得是VIP才行，而導出來的md文檔里所有圖片的超鏈接是私人鏈接，移到別的地方根本沒辦法顯示圖片。最終我覺得搭網站最好的方式是：hugo+github+Netlify。適合我的筆記保存和寫作的最佳方式是：有道云筆記+typora+picgo。如果覺得太麻煩了，不想把博客和有道云筆記等之類的筆記工具連接在一起，也不會傳到其它平臺上，可以直接用typora寫作，利用hugo的page bundle綁定圖片。
關于利用hugo和Github建網站的博客很多，但是有些博客內容有些出入，可能是由于英文翻譯或版本更新所造成的。這里建議大家直接看hugo的英文官網和hugo in action，或者官方翻譯。此外，網上的博客可以進行參考。這篇博客主要針對搭建過程中可能遇到的問題進行記錄，希望對大家有所幫助。
二、原理
那么如何用靜態(tài)網頁創(chuàng)建網站呢？很多博客一上來就直接講方法，怎么一步步運行，得到一個簡陋的網頁。但是不知其所以然，因此這里想先介紹一下基本原理，方便理解和后面的debug。
- 首先你得在本地生成靜態(tài)網頁文件。這里推薦用hugo或hexo。
- 然后把靜態(tài)網頁文件托管到github倉庫。這里推薦使用git和gitlab工具。
- 把遠程的靜態(tài)網頁文件進行渲染，形成讓大家可根據網址直接閱覽的網頁?？捎胓ithub page和Netlify.
- 找到有道云筆記的md文件，用typora進行編輯，并用圖床解決圖片容易丟失問題。
關于hugo和hexo，github和gitlab，github page和Netlify的差別網上有很多博客，這里就不贅述了。目前我覺得最好的方式是：hugo+github+Netlify。
三、快速入門
如果有相關靜態(tài)網頁生成的經歷，可以直接忽略快速入門，直接到下一節(jié)：進階。
1、本地生成靜態(tài)網頁文件
下面簡要闡述過程：
hugo new site hugo
cd hugo
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
hugo new posts/my-first-post.md
hugo server
這時出現(xiàn)類似下面的信息，說明生成靜態(tài)網頁成功。可以在瀏覽器上輸入 http://localhost:1313/ 進行瀏覽。
Building sites …
| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 1
Static files | 39
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0
Built in 37 ms
Watching for changes in E:\blogs\hugo\{archetypes,content,data,layouts,static,themes}
Watching for config changes in E:\blogs\hugo\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
如果出現(xiàn)下面的錯誤：
hugo new posts/my-first-post.md
Error: "E:\blogs\quickstart\config.toml:3:1": unmarshal failed: Near line 3 (last key parsed ''): bare keys cannot contain '\x00'
這是因為E:\blogs\hugo\config.toml里面有一些NUL的間隔符，可能是由于echo的命令產生的。手動把它們刪除就行了。
2、托管到github
把我們本地生成的靜態(tài)網頁托管到github上進行保存，而不用自己進行維護。
首先在github上新建賬號，并創(chuàng)建一個新的倉庫，以倉庫名為test為例。再下載安裝git 。
cd .\public
git init
git add .
git commit -m "update"
git remote add origin https://github.com/你的git賬戶/test.git
git push origin master:master
這樣就把東西上傳到github上了。
為了方便發(fā)布網頁，可以寫成一個腳本，然后每次發(fā)布只要右鍵選擇git bash here后運行./deploy.sh就可以。
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# build the project
hugo
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# push source to github
git push origin master:master
3、用Netlify渲染網頁
最后我們用Netlify對托管到github上的靜態(tài)網頁進行渲染。很簡單，可以看這篇教程。至此一個簡陋的網頁就建好了。記得改一下Netlify自動分配給你的域名，不過只能更改前綴。要求不高也還好了。但是可一點也不cool啊，客官別急，請看下面進階教程。
四、進階
1、添加主題
首先我們可以到hugo主題庫中找一個自己喜歡的主題。我比較喜歡的一個主題是academic，B站上還有人介紹Academic視頻。
由于大部分主題都已經有站點所需要的各種文件夾，所以不用自己再建站點。直接clone下來，把主題換成子模塊的就行。快速入門的什么的可以忘記了_。
git clone https://github.com/sourcethemes/academic-kickstart.git My_Website
cd My_Website
git submodule update --init --recursive
2、修改網頁
我們可以根據academic文檔進行修改，變成你自己喜歡的樣式。這個academic幫助文檔講得很清楚，這里就不贅述。
不過提一下添加評論系統(tǒng)，這應該是一個剛需。要不然沒有互動在那孤芳自賞？
由于academic主題設置commento很方便，這里圖方便直接用了：
- 把config/_default/params.toml中的
engine = 0改成engine = 2。 - 注冊commento賬號，把你自己博客域名進行綁定即可。
此外，國外用的比較多的有Disqus，國內有valine和Gittalk。不過Gitalk有點復雜，可參考這篇博客進行安裝。
五、寫作
1、圖片管理
在md文檔中插入的圖片是一個麻煩事。一般來說有三種解決方案。如下所示
放置在static中
可以直接把圖片放在static中，不過以后圖片一多就麻煩了。如果后面想遷移什么的就太麻煩了。
利用page bundle
可以在post下面新建文件夾，重命名為你想要的博客名后新建md文件。這個md文檔名稱一定得是index.md，然后我們就可在同一目錄下放置圖片。md可以使用相對位置進行引用。
其實如果不是為了同時保存md文件在有道云筆記的話，這種方式是最方便的，而且免費。
利用圖床
這里利用picgo工具，把圖片復制后，按一個快捷鍵就會自動上傳到picgo內設置的圖床上。
picgo教程支持8大圖床?？梢赃x免費的smms和github（雖然github慢了點），也可以氪金買云服務。
同時typora還支持picgo的插件，直接復制圖片就可以實現(xiàn)上傳到云端。不過配置可能會遇到些問題，可以參考這篇博客排坑。
綜上，圖床是最方便的，但需要點時間配置各個軟件。page bundle是最簡單的，但是如果沒法移動到其它平臺。
2、更新博客的流程
日后更新博客時就只需要在本地的hugo\content\post文件夾中編輯新的md文件，然后./deploy.sh就會自動編譯靜態(tài)網頁然后上傳至github，同時Netlify會檢測Github中庫的動態(tài)，并及時更新發(fā)布的網站內容。
3、在另一臺電腦上寫作
由于靜態(tài)網頁是托管到github，可以很方便地進行同步。直接用git pull把github拉下來就行，寫完后git push 到倉庫就萬事大吉了。
以上就是免費創(chuàng)建個人靜態(tài)網站地最佳實踐。全免費，渲染快捷且可以專注寫作，不用費心維護。
六、域名
最后為了裝一下，怎么也得換個個性化的域名啊。網上到處看了看，感覺比較復雜。因為在國內買域名還得備案，聽說很麻煩。后來直接到name.com購買了域名。
域名解析
可以參考這篇博客。值得注意的是：在你的域名購買商處管理DNS的時候，要加兩條DNS。一條是沒有www，一條是有www。
七、Debug
- push error
git push academic master
remote: Permission to Feng-Zhang/academic-kickstart.git denied to xiaofeng007.
fatal: unable to access 'https://github.com/Feng-Zhang/academic-kickstart.git/': The requested URL returned error: 403
控制面板-用戶帳戶-憑據管理器-找到git:https://github.com-編輯
對這個憑據進行編輯，把要遠程的賬號和密碼加上。
