用Gatsby.js建立一個本身的博客（一）

Gatsby.js（「蓋茨比」js）是目前建立我的博客的最佳工具之一。

Gatsby.js 是一個靜態 PWA（漸進式網頁 App） 生成器。相對於 Wordpress 或是 Jekyll 這些老字號，Gatsby 的優點在於它結合了最新的技術，同時很好平衡了開發的簡易性：

• 前端 React + Webpack
• 後臺數據讀取使用 Graphql
• 自帶谷歌的PRPL標準（谷歌對於 PWA 的最佳實踐）

這些技術選擇帶來的好處顯而易見：

• 自由性，能夠完成高度定製化的網站
• 使用最新技術，像大 boss 同樣開發
• 無卡頓，瀏覽體驗極佳

前提

最好先對Graphql有個大概的瞭解。

起步

相似於 create-react-app 和 vue-cli，首先全局安裝 gatsby.js

npm i -g gatsby-cli
複製代碼

而後建立項目

gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
# 這裏使用了gatsby官方提供的一個blog模板
複製代碼

最後進入 gatsby-blog 文件夾，運行

gatsby develop
複製代碼

好了，打開localhost:8000一個 demo 我的博客 就完成了。以後只要在 pages 文件夾下添加 .md 文件就能自動生成新博客文章了。是否是很方便？

不過以這個 starter kit 做爲起手，對於理解如何使用 Gatsby.js 並不合適。因此本文但願從白板的 hello world 開始，搭建一個

• 能夠自動將你寫的 .md 文件轉換成博文
• 主頁顯示列表
• 能夠「上一篇」、「下一篇」切換

的極簡博客。

建立

gatsby new my-blog
# 進入文件夾運行
gatsby develop
複製代碼

如console的提示，localhost:8000是網站，localhost:8000/___graphql則能夠打開 graphql 的 GUI。通常稱爲graphiQL。

graphiQL小教學：
打開localhost:8000/___graphql看看gatsby的後臺已經包含的信息吧。點擊頁面右上角的 Docs, 彈出 api 文檔。點擊query: RootQueryType,咱們看到目前已經能夠調用的 api，如allSitePage,allSitePlugin等，主要是插件列表，和 page 文件列表。在左側的輸入界面能夠調用全部的 api 並得到調用結果。讓咱們嘗試輸入吧：

{
  allSitePage {
    edges {
      node {
        path
        layout
        jsonName
        component
      }
    }
    totalCount
  }
}
複製代碼

點擊播放按鈕（或快捷鍵 ctrl + enter），成功獲得輸出以下：

{
  "data": {
    "allSitePage": {
      "edges": [
        {
          "node": {
            "path": "/dev-404-page/",
            "layout": "index",
            "jsonName": "dev-404-page.json",
            "component": "D:/code/test/gatsby-test/.cache/dev-404-page.js"
          }
        },
        {
          "node": {
            "path": "/404/",
            "layout": "index",
            "jsonName": "404.json",
            "component": "D:/code/test/gatsby-test/src/pages/404.js"
          }
        },
        {
          "node": {
            "path": "/",
            "layout": "index",
            "jsonName": "index.json",
            "component": "D:/code/test/gatsby-test/src/pages/index.js"
          }
        },
        {
          "node": {
            "path": "/page-2/",
            "layout": "index",
            "jsonName": "page-2.json",
            "component": "D:/code/test/gatsby-test/src/pages/page-2.js"
          }
        },
        {
          "node": {
            "path": "/404.html",
            "layout": "index",
            "jsonName": "404-html.json",
            "component": "D:/code/test/gatsby-test/src/pages/404.js"
          }
        }
      ],
      "totalCount": 5
    }
  }
}
複製代碼

這正是pages文件夾下的全部文件。all開頭的 api 的主要信息在edges/node下，是gatsby的一個約定俗成，以後代碼中會屢次出現。

談到文件夾結構，gatsby相似於 next.js 的文件風格：

src
├── components # 組件
├── layouts    # 公用UI，好比 header/footer
├── pages      # 全部的頁面，文件名即訪問路徑
└── templates  # 模板，以後詳細講
複製代碼

只要會 React, 相信簡單讀一下代碼已經能夠上手開發了。不過博客的重點是實現 .md 到 html 的轉換。
這裏須要安裝兩個插件

yarn add gatsby-transformer-remark gatsby-source-filesystem
複製代碼

而後修改配置文件 gatsby-config.js：

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    // 添加如下兩個插件，一個用於讀取md文件，一個用於轉換其爲html
    'gatsby-transformer-remark',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'src',
        path: `${__dirname}/src`,
      },
    },
  ],
複製代碼

從新跑一遍gatsby develop。打開graphiQL，查看 Docs，咱們看到多了兩個 api，allFile和allDirectory，這是gatsby-source-filesystem插件的做用，如今咱們能夠讀取全部本地的文件的信息了。但爲何沒有操做.md相關的 api 呢？那是由於咱們尚未建立任何md文件！

寫第一篇 Markdown

在pages文件夾下創建pages/2018-01-23-first-blog/index.md
我的以爲是一種不錯的文件命名規範。(並不是強制)

創建第一篇.md文以下：

---
path: "/first-blog"
date: "2018-01-23"
title: "個人第一篇博文"
excerpt: "新年新氣象" ---

# 第一篇博文！

新的一年，個人打算以下：

1. 吃飯
2. 睡覺
3. 打豆豆
複製代碼

打開graphiQL的 Docs，如今又多了一個 api allMarkdownRemark。

注意在開頭用 --- 隔開的部分會被 gatsby-transformer-remark 插件識別，並保存到 frontmatter 部分。嘗試調用：

{
  allMarkdownRemark {
    edges {
      node {
        fileAbsolutePath
        html
        frontmatter {
          title
          path
          date
          excerpt
        }
      }
    }
  }
}
複製代碼

注意到html字段的返回值，咱們的.md文件的主體已經被轉化爲html了！後臺萬事就緒。

下篇教程，咱們將把這些信息轉化爲博客的 UI。gatsby爲此提供了gaysby-nodeapi 以及 templates（模板）。