All Articles

部落格搬遷紀錄,用 Gatsby.js 取代 Hexo

為何要改用 Gatsby.js 架構

我從2015年左右開始寫部落格,一開始是開在 Logdown 平台上,後來因為它停止維護了,於是改用 Hexo 自己建,並託管在 Github Pages 上。

舊部落格

而現在會想改架構原因如下:

  1. 前陣子因為在忙畢業和當兵,好一陣子沒更新部落格了,而且又換了新筆電,舊的 Hexo 設定要花時間重新熟悉
  2. 這兩年都在玩 React.js,一直很想用 Gatsby.js 這套基於 React.js 的靜態網頁生成框架來做點什麼
  3. 當完兵過年期間閒得蛋疼,想學點新技術恢復開發手感

於是決定用 Gatsby.js 來重架部落格啦!

Gatsby.js官網


搬遷過程

之前用 Hexo 時,30篇文章是 Markdown 格式的 .md 檔,檔案都還留著,而 Gatsby.js 也支援使用 .md 檔來生成靜態頁面,和 Hexo 的運作邏輯基本一致。

因此搬遷流程不會太複雜:

  1. 用 Gatsby 建立新專案
  2. 把 30 個文章 .md 檔移過去
  3. 調整新部落格設定(樣式、頁面配置、Domain設定等)
  4. 生成靜態頁面再丟上 Github Pages,就算是搬遷完成了

1. 用 Gatsby 建立新專案

這部分我卡最久,主要是 Gatsby 生態圈太大,有太多方式可以建立起一個 Gatsby 網站,很多選擇需要決定。

我不想花太多時間在搬遷,而是想專注在寫文章,但因為我後續想要深度客製化我的部落格,所以花了不少時間在思考各個方案:

  1. 自己架、或是託管在 Gatsby Cloud 上? 自己架,比較容易客製化,也不用花錢
  2. 需不需要 CMS?要的話要哪套? 先不用,CMS 我不熟,研究起來沒完沒了,先成功搬遷我 30 篇文章即可
  3. 靜態檔要 Host 在哪裡? Github Pages,之前就是在這裡,用起來很舒服、穩定,沒有理由換
  4. 要從頭開始建 Gatsby 專案,還是從 starter 專案開始? 找 starter 專案開始,想趕快搬遷完成,從頭建太慢

於是我瀏覽了 Gatsby 的 starter 列表 ,找了下面這套順眼的樣板開始建專案:

gatsby-starter-lumen

lumen starter

按照裡面的教學建立起了專案:

yarn global add gatsby-cli # 若沒 gatsby-cli 的話,才須先安裝

gatsby new my-blog https://github.com/alxshelepenok/gatsby-starter-lumen

cd my-blog
gatsby develop # 啟動 local server

跑完後就可以用瀏覽器開 http://localhost:8000 在自己電腦上看到新部落格了

2. 把 30 個文章 .md 檔移過去

把 .md 檔放到新專案的 /content/posts/ 底下

搬遷所有文章

然後調整各文章的 metadata,符合新專案的命名和格式,重點是 draft 要設成 false,才能看到文章!

更新 metadata

3. 調整新部落格設定(樣式、頁面配置、Domain設定等)

再來就是調整細部內容成我想要的樣子,部落格 title、社群連結、網址、Disqus連結、favicon 等,主要是調整 config.js

'use strict';

module.exports = {
  url: 'https://www.easonchang.com',
  pathPrefix: '/',
  title: 'Eason\'s Playground - blog by Eason Chang',
  subtitle: 'Let\'s make something awesome!\n',
  copyright: '© All rights reserved.',
  disqusShortname: 'xxxxxxxxxxxxx',
  postsPerPage: 10,
  googleAnalyticsId: 'G-XXXXXXXXX',
  useKatex: false,
  menu: [
    {
      label: '文章',
      path: '/'
    },
    {
      label: '關於我',
      path: '/pages/about'
    },
    {
      label: '專案',
      path: '/pages/projects'
    }
  ],
  author: {
    name: 'Eason Chang',
    photo: '/bio-img.jpeg',
    bio: 'Hi, I am Eason!',
    contacts: {
      email: '[email protected]',
      facebook: 'chang.ying.hsiang',
      telegram: '',
      twitter: '',
      github: 'Kamigami55',
      rss: '',
      vkontakte: '',
      linkedin: 'easonchang101',
      instagram: '',
      line: '',
      gitlab: '',
      weibo: '',
      codepen: '',
      youtube: '',
      soundcloud: '',
      medium: '',
    }
  }
};

4. 生成靜態頁面再丟上 Github Pages,就算是搬遷完成了

我原本的 Hexo 部落格就是架在 Github Pages 上,repo 是 Kamigami55/Kamigami55.github.io ,網址會是 Kamigami55.github.io

另外原本就還有在 GoDaddy 上買網域指向這個位置,所以部落格最終網址會是 https://www.easonchang.com/

而我現在做的動作是把舊 repo 改名封存,重開一個新的 Kamigami55/Kamigami55.github.io repo,並把剛剛編輯好的 gatsby 專案 push 到 master branch 存放原始碼。

然後在終端機執行以下指令,建立新部落格的靜態檔,並會自動 push 到 gh-pages branch。

yarn deploy

最後在 Github repo 設定頁開啟 Github Pages 功能,按照下圖的方式設定:

Pages設定

就可以看到全新的部落格上線了!

https://www.easonchang.com/

全新 Eason's Playground 部落格


Troubleshooting

調整每頁的顯示的文章數量

我找的模板預設每頁只顯示 4 篇文章,實在太少了,我想改成每頁顯示 10 篇文章。config.js 內有 postsPerPage 參數可以直接調整,但調了以後無效。

研究了大半天後發現應該是 gatsby 傳遞 context 時 type 沒有設定到,需要修改 /src/types/index.js

// ...
export type PageContext = {
  tag: string,
  category: string,
  currentPage: number,
  prevPagePath: string,
  nextPagePath: string,
  hasPrevPage: boolean,
  hasNextPage: boolean,
  postsLimit: number // <--- add this
};
// ...

我有在 這個 issue 回覆一些想法,研究更清楚後若確定是個 bug,會發 PR 把它修掉。


心得&未來方向

整個搬遷花了我一整天的時間,以前的設定太久沒碰,又沒有寫文章記錄,真的會忘光光,很浪費之前投入的時間,於是這次決定一定要寫文章紀錄自己搬遷的流程,給未來的自己備忘。

未來應該還會寫很多部落格調校文章,還有很多東西想修改,像是深度客製化樣式、加入 GA 追蹤、深色主題、文章編輯流程優化等,期待後續的發展!