用 Gridsome 搭建自己的 Blog

如同 React 有 Gatsby 這個靜態網站生成器,那麼 Vue 版本的 Gridsome 使用起來如何?。
blog.image

何謂靜態網站產生器

只要是用內容模板產生的靜態網站,皆可稱之為靜態網站產生器,而如果面對的使用者為一般使用者的話,通常還會附帶內容管理系統 (CMS) ,如 Wordpress,Wix 等等。但這類附帶 CMS 的對於工程師來說實在過於繁瑣,工程師希望可以簡單就好,隨便寫寫 markdown ,套點樣式就可以了,基於這種面向的也開始慢慢推出如 Jekyll,ghost,hugo,hexo 等等,而隨著時代跟程式語言的框架演進,每個語言/框架都有一套 static site generator,似乎也變成了定番。

關於 Vue 生態系底下有哪些

  • VuePress 主要用來生成技術文件網站,內建搜尋相當好用。
  • Nuxt.js 相當完整的 vue spa,主打為 ssr,雖然也可以當作靜態網站生成,但有點殺雞用牛刀
  • Gridsome 本次主要要介紹之框架,參考於 React 的 gatsby,關於前端效能的圖片處理,code splitting 都已經包裝在裡面,單純簡潔效能好,缺點為很多blog 常見模組都不見得有支援,真有需要得自己刻。

用 Gridsome 實作

先安裝 gridsome cli

yarn global add @gridsome/cli

接著用 cli 產出 template

gridsome create my-gridsome

如此一個有基本架構的 blog 系統就已完成,整個專案架構跟 nuxt.js 很像,主要是以 pages folder 接上 router 來產出 page,如同官網說明一般,就是那麼簡單。

接上內容

接著就是重頭戲了,要來決定內容的來源,gridsome 支援各種 headless cms 來源,如 contentful ,greenhouse,sanity 等等。而我選擇用本地 markdown file 當作我的內容來源。

安裝 transformer-remark 以及 source-filesystem 這兩個 plugin

yarn add @gridsome/source-filesystem
yarn add @gridsome/transformer-remark

這兩個 plugin 可以指定 folder,讓他成為你的內容來源,然後把放在那邊的 markdown file 轉成即時的 graphQL 資料格式,接著來串接這些資料。

在 index 頁面的 vue template 底下,用 gridsome 特別的 page-query 區塊

<page-query>

query($page:Int) {
  entries: allBlog(perPage: 10, page: $page) @paginate {
    totalCount,
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        title
        excerpt
        image(width:800)
        path
        timeToRead
        humanTime: date(format:"DD MMM YYYY")
        dateTime: date
      }
    }
  }
}

</page-query>

如此範例,會把存在你 graphQL 的 blog data 照著設定的來為撈出來並存在 this.$page裡面。只要來拿這資料來畫畫面,一個基本的 blog 範例就完成了。

類似文章

record.image

Engineering

Nodejs 的下一代?Deno 1.0 理念翻譯及初探心得。

有 Nodejs 之父之稱的 Ryan Dahl, 因為 Nodejs 裡面隱藏了太多的技術債,所以下定決心開發一個新的語言。

author.image

1 min

record.image

Engineering

How to build a vue component library

如果用 vue.js 開發了某個 component ,而希望將它包成 library放到npm讓大家使用的話,到底應該怎麼做呢?

author.image

1 min