前言
我的博客從以前的博客園汕大小吳-博客園遷移到現在的 Github Page
汕大小吳啦 !!!
現在的博客是基於hexo
搭建的,使用的是hexo-theme-fluid
主題,部署在GitHub Page
上,使用的是自定義的域名,評論系統采用了gitalk
,然后圖片使用了hexo-asset-image
插件管理。
歡迎大家收藏我的新博客網址。
為啥從博客園切換到 Github Page?
-
博客園社區活躍度不復從前。
如果你瀏覽過博客園首頁的話,你會發現博客園首頁真的太爛了,使用體驗很差,見下圖。這就導致了博客園的社區活躍度不夠。作為一名寫作者,寫作的內容就會比較少人看到。所以我打算使用 Github Page 作為我的博客中心站點,然后可以根據我的需要將博客同步到我想要發布的平台,比如掘金、segmentfault、博客園等。
-
無法使用自己的域名
如果想要在網絡上建立起自己的個人品牌和影響力的話,還是很有必要使用自己的域名的。另外通過 Github Page+自定義域名,我們可以讓自己 github 上的項目都部署起來。比如我的博客是 ericwu.cn,我的前端面試盒子是 fe.ericwu.cn
-
定制化不夠自由
博客園提供的定制化基本上都是 CSS 相關的,如果想要深層次定制是不支持的,而我們有時候想要一些深層次的定制。
我是如何搭建現在的博客
說實話,搭建現在的博客我也是走了一些彎路,參考了許多博客文章,看了許多博客主題。我會將一些值得注意的點或者坑寫出來。
1.博客技術選型
我主要參考了楊瓊璞的文章:如何選定搭建個人獨立博客工具
我也看了很多博客,總結下我的看法就是。
Vuepress
簡潔至上,適合寫技術文檔,打算用在我的前端面試盒子上。Jekyll
功能豐富,相對vuepress
和hexo
算老,並且基於 Ruby 的。Hexo
功能豐富,也比較成熟,有很多插件,基於 Node。
綜上所述,我選擇使用hexo
來搭建博客,並且我看了很多博客主題,比較喜歡的是hexo-theme-fluid
主題,其文檔也比較詳細。
2.搭建過程
我的博客搭建主要參考了這篇文章:快用 Hexo+GitHub 搭建屬於自己的博客吧~ ,並且我使用了 gitalk 作為評論系統。這里說下值得注意的點有:
-
博客的 github 倉庫名。倉庫名必須為
yourname.github.io
,部署的時候,使用 Github Page 就會部署到yourname.github.io
下。如果你使用了比如 example 作為倉庫名,那么就會部署到yourname.github.io/example/
下。 -
如何給博客倉庫增加
README.md
:在_config.yml
中修改 skip_render 為skip_render: README.md
,然后在 source 目錄下增加你的倉庫介紹文件README.md
-
自定義域名。記得在你 source 目錄下增加 CNAME 文件,填寫你的自定義域名。部署的時候 Github 會自動幫你設置將
yourname.github.io
切換為你的自定義域名,如圖(當然你也可以手動設置)。
-
gitalk 評論系統。如果你使用了 fluid 主題的話,需要修改下代碼,如下圖,因為他們的 MD5 的那個 js 文件出問題了,當然最新版已經修復這個問題了。配置 gitalk 時,repo 名為倉庫名而不是倉庫地址。以及注冊應用時 gitalk 的回調地址,需要使用你的博客部署域名(也就是使用了自定義域名的話就要填自定義域名。
-
關於
hexo-asset-image
插件。現在的 CDN 需要備案域名,使用 CDN 的話有風險,如果 CDN 掛了,博客中的圖片就沒了,並且每次寫作時還要上傳圖片到 CDN 比較麻煩。所以這里推薦使用hexo-asset-image
插件,會給每篇博客創立一個目錄用於收錄圖片資源。但是這里有個坑,npm 上的hexo-asset-image
包是錯誤的,具體可以看這個issue#47。雖然官方代碼已經修復了,但是 npm 包還是錯誤,因此建議安裝他人發布的修復包,或者使用正確版代碼直接覆蓋掉 node_modules/hexo-asset-image/index.js 中的代碼。
總結
工欲善其事必先利其器。
一個簡單、簡潔的個人博客,既有利於提高自己的創作興趣,也有利於個人品牌的建設。
希望每個人都能搭建一個擁有自己個人特色的博客。