利用 Nuxt.js 與 nuxt/content 搭建部落格 (1)

轉職工程師至今也已經過了一年多了，也開始興起想要記錄自己學習歷程的想法。

「不如就架設一個技術部落格吧！」，我對自己這樣說。有了這個念頭之後，便開始去尋找到底哪裡適合架設部落格。

一般常見的網誌平台，例如 痞客邦 或是 Blogger.com，對於做為技術部落格來說，似乎不是那樣的合適，想來想去，那還是自己架設好了。

靜態網站

考量到 SEO，一開始就選擇要做 SSR (Server-Side Rendering) 為主的網站；另外考量到自己可能三天打魚，兩天曬網的個性，一開始還是先不用要去租用虛擬主機或是 VPS，好了，於是就決定把部落格架在 GitHub Pages 啦！

Which CMS

在 GitHub Pages 上面架設部落格有很多選擇，常見的有 Hexo、Hugo、Vuepress、Gatsby 等，不過不知道是自己天生反骨還是怎樣，想說為了練功 (讓自己有第一篇文章可以寫)，剛好現在公司的專案是 Nuxt.js 架設的，那就乾脆使用 Nuxt.js 搭配它的 plugin： nuxt/content，產生靜態頁面，可以放在 GitHub Pages 上，自己來搭建一個部落格吧！

What is Nuxt.js & nuxt/content

Nuxt.js 是一個以 Vue.js library 為核心的 SSR 解決方案，而 nuxt/content 則是一個可以作為一個類似 Git-based Headless CMS 的 Nuxt.js Plugin。

開始建立部落格專案

這邊是透過 create-nuxt-app 的方式進行 Nuxt.js 專案的建立

npx create-nuxt-app <project-name>

設定的部分我就不贅述了，主要就照著 cli 上面的問題一步一步建立就好，不過為了良好的 coding 習慣，建議可以把 ESlint、Prettier 與 StyleLint 一起安裝，讓自己的程式碼更有規範。

在操作的時候可能在 cli 裡面有看到問說要不要安裝 Content，這邊說的 Content 其實就是我們所說的 nuxt/content，如果這邊忘記選擇沒關係，建立好專案之後，在專案的跟目錄底下在下以下指令：

Yarn:

yarn add @nuxt/content

NPM:

npm install @nuxt/content

最後在 nuxt.config.js 裡面設定使用 @nuxt/content 就大功告成啦！

{
  modules: [
    '@nuxt/content'
  ],
  content: {
    // Options
  }
}

之後可以先試試看在 Terminal 中輸入 npm run dev 試試看專案可不可以正常啟動，如果都沒問題就表示有成功安裝啦！

之後再來教大家如何進行 Nuxt.js 靜態頁面的編譯與 nuxt/content 的設定。