全部文章

使用Gatsby創建博客網站

多年以前曾經在Google App Engine搭建一個博客。但由於後來谷歌升級GAE环境,而我沒有及時更新代碼導致項目被刪除。而且我幾年來寫的文章都隨著項目被刪丟失了,讓我心痛不已。後來我創建了熱聞榜,在那兒寫文章。可惜它的活躍度低,我近期將其關停。

今天想搭建一個博客系統以記錄平時的心得體會。支持靜態html部署的博客系統是目前的流行做法。於是我搜索了下,找到了比較網站。它列出了幾乎所有的可用選項。Jekyll无疑最流行,我的同樂也使用它来搭建产品頁。JS的拥趸可以選择Hexo,它有良好的生态。排前面几個工具都是使用传统的服务器端模板語言来构造网頁。这些模板語言我也不陌生,因为之前使用过Django和Flask写后端程序。

然而我認為支持前後端同構的網頁框架是趨勢,因此想嘗試這種技術來搭建博客系統。而支持同構並且排名第一的是gatsby。它的渲染庫是React.js,剛好也是最火的前端庫。最終我選擇了它,並部署在Github Pages上。

  1. 先安裝gatsby工具
yarn global add gatsby
# 如果使用npm,用以下命令
npm install -g gatsby
  1. 基於一個博客模板創建新項目。這裡我使用了一個個人覺得設計還可以的模板。
gatsby new lumen-blog https://github.com/wpioneer/gatsby-starter-lumen
  1. 進入新項目,本地運行預覽博客效果。
cd lumen-blog
yarn install
yarn develop
  1. 打開config.toml文件配置博客元信息,如博客標題,描述和作者等。
  2. 初始化git,和配置git遠程節點。
git init
# 更改下面的地址
git remote add origin git:user@github.com/blog
  1. 部署至Github Pages。
yarn deploy

至此,大功告成。進入Github的倉庫設置頁,查看Github Pages的地址(url)即可查閱部署好的博客。

附額外福利和提示

如果部署到Github個人頁面,即倉庫名和地址均為username.github.io之類,那麼需要額外兩步.

  1. 配置文件config.toml需要配置
linkPrefix = ""
  1. 需要將靜態文件部署到master分支。可修改package.json文件中的script命令為
"deploy": "gatsby build --prefix-links && gh-pages -d public -b master"

,亦即給gh-pages添加了一個參數指定遠程推送分支。

反之如果部署到一個普通的倉庫(項目),只需要將linkPrefix設置為倉庫名,如linkPrefix = "/blog"

發表於2017年4月19日