用Gatsby快速创建一个Markdown格式的博客

2 年 ago

科, 颖

1 minute

“嗯，我想要自己建立一个博客。”
“如果可能，我希望能够直接将Qiita上的文章发布到博客上。”
“更进一步，我希望能够直接将Markdown格式的文件放入博客中。”
“但是我并不想要麻烦的事情，甚至不想要自己设立服务器。”

就算是這樣任性，也能做出一個部落格來。對，用 Gatsby 就行了。

准备工作

假设已经安装了 npm ，我们可以继续进行。
首先，让我们创建一个 Gatsby 项目。
在查看官方教程的同时，让我们一步步地输入命令。

npm install -g gatsby-cli
gatsby new {任意のプロジェクト名}

搞定啦！真快。

進入生成的目錄，執行 npm run develop，就可以瀏覽 Gatsby 的預設頁面了。

如果你想使用 TypeScript，請將 src/pages 目錄中的 js 檔案副檔名改為 tsx。原本就有考慮使用 TypeScript 進行開發，這樣就行了。太讚了。

解析Markdown文件

由于准备工作已经完成，我们立即开始正题吧。
为了解析Markdown，我们将使用gatsby-transformer-remark。
通过npm install gatsby-transformer-remark进行安装，并将其配置添加到gatsby-config.js中。

  plugins: [
    `gatsby-transformer-remark`,
  ],

只要在插件项目中添加描述，它就会自动运行。

然后，我们要添加要读取的Markdown文件。在项目的根目录下的任何位置都可以，但这次我们将其添加到src/markdown下面。
一旦我们成功放置了一些适当的Markdown文件，我们可以再次编辑gatsby-config.js文件，添加对它们的描述。

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown`,
        path: `${__dirname}/src/markdown`,
      },
    },
  ]

这个设置是为了使得 Gatsby 生态系统能够识别 Markdown 文件。

如果已经完成了以上设置，请在本地环境中启动并访问http://localhost:8000/___graphql。
Gatsby采用了GraphQL，可以通过GraphQL获取各种信息。
对于刚刚添加的Markdown文件也是如此，通过添加上述设置，可以从GraphQL获取它们。
让我们尝试发送以下查询。

query MyQuery {
  allMarkdownRemark {
    nodes {
      html
    }
  }
}

如果没有问题的话，刚刚添加的 Markdown 文件应该可以以 HTML 格式获取。

对于盖茨比的添加

那么，让我们将之前获取的HTML添加到Gatsby中。
通过之前所做的修改，我们现在可以通过GraphQL以HTML格式获取Markdown文件了。
在Gatsby中可以使用GraphQL来实现这一点。

import * as React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

export const query = graphql`
  query MyQuery {
    allMarkdownRemark {
      nodes {
        id
        html
      }
    }
  }
`

const IndexPage = ({data}) => (
  <Layout>
    <div dangerouslySetInnerHTML={{__html: data.allMarkdownRemark.nodes[0].html}}></div>
  </Layout>
)

export default IndexPage

通过指定参数为data，您可以加载通过GraphQL获取的数据。非常简单。
由于数据是以HTML格式获取的，所以只需直接将其输出即可。

在 React 中，我们使用的 dangerouslySetInnerHTML 是一个属性。我之所以特别使用 “dangerously” 这个词，是因为它存在 XSS 的潜在危险性。更详细的信息请参考官方文档。

只需要通过npm run develop等方式来确认结果。
如果设置正确，应该能够正确显示Markdown文件的内容。

最后

這就是說，使用 Gatsby 可以輕鬆創建 Markdown 格式的博客的文章。
除了上述內容外，我還使用了 Github Pages，將它變成了一個簡單的個人博客。
嚴格來說，雖然在 Qiita 上換行符號會被保留，但在我所創建的內容中，只有連續兩個空格才能換行。
不過除此之外，幾乎都能正常運行，如果只是需要換行的話並不難處理。
Gatsby 真的很方便呢。