我如何使用Gatsby和Netlify建立博客 (How I Built My Blog Using Gatsby and Netlify)

您能說出更具標志性的二人??組合嗎？？ (Can you name a more iconic duo? ?)

Years ago, whenever I built a static website, I didn’t use any fancy frameworks or build tools. The only thing I brought into my projects was jQuery, or if I was feeling extra fancy, I used Sass.

多年前，每當我建立一個靜態網站時，我就沒有使用任何精美的框架或工具。我帶到項目中的唯一東西是jQuery，或者如果我覺得自己很花哨，可以使用Sass。

Nowadays, we have tools like Gatsby and Netlify, which greatly improve the experience of building static websites. Rather than thinking about boilerplate and configuration (looking at you Webpack), you can just focus on your application.

如今，我們擁有Gatsby和Netlify等工具，這些工具極大地改善了構建靜態網站的體驗。無需考慮樣板和配置(看著Webpack)，您只需專注于您的應用程序即可。

I wouldn’t hesitate to say that the Gatsby and Netlify flow is the best programming experience I’ve ever had. Let me explain why.

我會毫不猶豫地說Gatsby和Netlify流程是我所擁有的最佳編程體驗。讓我解釋一下原因。

蓋茨比 (Gatsby)

Gatsby is a static site generator that uses React. Everything is configured out of the box including React, Webpack, Prettier, and more.

Gatsby是使用React的靜態站點生成器。開箱即用地配置了所有內容，包括React，Webpack，Prettier等。

Since Gatsby builds on top of React, you get all the benefits of React, such as its performance, components, JSX, React library ecosystem, and a large community (React is nearing 100,000 stars on GitHub ?).

由于Gatsby建立在React之上，因此您可以獲得React的所有優勢，例如其性能，組件，JSX，React庫生態系統和一個大型社區(GitHub上的React接近100,000個星？)。

If you haven’t used React before, there is a learning curve. But there are plenty of well-written tutorials that make React very accessible. The official React documentation is also very well written.

如果您以前沒有使用過React，那將是一條學習曲線。但是有很多寫得很好的教程使React非常易于訪問。官方的React文檔也寫得很好。

For many static websites like my blog, I need to use external data sources (my actual blog posts) during the build process. Gatsby provides support for many forms of data, including Markdown, APIs, Databases, and CMSs like WordPress. To access this data, Gatsby uses GraphQL.

對于像我的博客這樣的許多靜態網站，我需要在構建過程中使用外部數據源(我的實際博客文章)。 Gatsby支持多種形式的數據，包括Markdown，API，數據庫和WordPress之類的CMS。要訪問此數據，Gatsby使用GraphQL。

All my blog posts are in Markdown, so I’m using a Gatsby plugin (gatsby-transformer-remark) that lets me query my Markdown files using GraphQL. It also converts a Markdown file to HTML straight out of the box like magic. I simply need to use the following GraphQL query to access a specific post:

我所有的博客文章都在Markdown中，所以我使用的是Gatsby插件( gatsby-transformer-remark )，該插件使我可以使用GraphQL查詢Markdown文件。它還像魔術一樣直接將Markdown文件轉換為HTML。我只需要使用以下GraphQL查詢來訪問特定的帖子：

query BlogPostByPath($path: String!) {  markdownRemark(frontmatter: { path: { eq: $path } }) {    frontmatter {      title      date(formatString: "Do MMMM YYYY")    }    html  }}

Using this query, I access the data through my props like so:

使用此查詢，我可以通過自己的道具訪問數據，如下所示：

const BlogPost = ({ props: { data: { markdownRemark } } }) => (  <div>    <h1>{markdownRemark.title}</h1>    <p>{markdownRemark.date}<p>    <div dangerouslySetInnerHTML={{ __html: markdownRemark.html }} />  </div>)

If you understand GraphQL, accessing data from Markdown using Gatsby feels right at home. If GraphQL is new to you, it does add yet another thing to learn. But the documentation on using GraphQL with Gatsby has plenty of information and code snippets that you can use.

如果您了解GraphQL，則可以使用Gatsby從Markdown訪問數據。如果GraphQL對您來說是新手，它確實增加了另一件事要學習。但是，將GraphQL與Gatsby一起使用的文檔中有大量信息和代碼片段可供您使用。

If you are building a simple blog with only one or two queries, there are Gatsby starter kits that set up gatsby-transformer-remark and all the querying for you. To speed up development, I used one called gatsby-starter-blog-no-styles.

如果您要建立一個僅包含一個或兩個查詢的簡單博客，則可以使用Gatsby入門套件來設置gatsby-transformer-remark以及所有查詢。為了加快開發速度，我使用了一種稱為gatsby-starter-blog-no-styles的方法。

I am a huge fan of styled-components, so I tried to use it when building this blog. I did encounter an issue, since there was no way for me to specify to gatsby-transformer-remark how to style my components. Instead I had to use plain CSS for styling. I would love to see something like the following in gatsby-config.js :

我非常喜歡樣式化組件，因此在構建此博客時嘗試使用它。我確實遇到了一個問題，因為我無法指定gatsby-transformer-remark如何設置組件樣式。相反，我不得不使用普通CSS進行樣式設計。我希望在gatsby-config.js看到類似以下內容：

import styled from 'styled-components'

const Header = styled.h1`  font-size: 24px;  color: #333333;`

module.exports = {  plugins: [    {      resolve: 'gatsby-transformer-remark',      options: {        h1: Header      }    }  ]}

In addition to the ease of actually using Gatsby, the official documentation is very well written and up to date. Each guide in the docs explain concepts of Gatsby so well, it’s likely that in most cases you won’t need to check any third party source of information.

除了實際使用Gatsby的便利性之外，官方文檔的書寫方式也很好，并且是最新的。文檔中的每本指南都很好地解釋了蓋茨比的概念，在大多數情況下，您可能不需要檢查任何第三方信息源。

The only difficulty I had with Gatbsy was when I deployed my website. I had a FOUC (flash of unstyled content). I found that upgrading Gatsby from 1.8.12 to 1.9.250 fixed the issue. I’m not too sure why this fixed it, and I assume it must have been an internal issue with Gatsby.

我對Gatbsy的唯一困難是在部署網站時。我有一個FOUC(未樣式化內容的閃爍)。我發現將蓋茨比從1.8.12升級到1.9.250可以解決此問題。我不太確定為什么要解決此問題，并且我認為它一定是蓋茨比的內部問題。

Netlify (Netlify)

Usually, when building a static website, I’ll use GitHub pages because it’s free and fairly easy to set up. Although I still think GitHub pages is a great tool, Netlify takes the process one step further to make the developer experience even more efficient.

通常，在構建靜態網站時，我會使用GitHub頁面，因為它是免費的，而且設置起來也很容易。盡管我仍然認為GitHub頁面是一個很好的工具，但Netlify進一步將這一過程進一步提高了開發人員的體驗效率。

Once you’ve hooked up Netlify to your repo, each push to your GitHub repository automatically builds your website, according to the static site generator you’re using, and deploys it to production.

將Netlify連接到倉庫后，每次推送到GitHub存儲庫都會根據您使用的靜態站點生成器自動構建您的網站，并將其部署到生產環境中。

I currently only use Netlify for static site hosting. But it also supports cloud functions, domain management (with SSL), form submissions, a/b testing, and more.

我目前僅將Netlify用于靜態站點托管。但它也支持云功能，域管理(使用SSL)，表單提交，A / B測試等。

Netlify’s web interface is also clean and easy to use. The difference from AWS is night and day. While AWS is highly configurable, many developers don’t use this functionality. When I first used S3 or Lambda (Amazon’s static file and cloud function services), I spent a considerable amount of time looking up Amazon’s difficult and sometimes out-of-date documentation. There is a whole lot of unneeded complexity and Amazon jargon when using AWS. In comparison, Netlify is a breath of fresh air. It’s one of those services that just works.

Netlify的Web界面也干凈且易于使用。與AWS的區別是白天和黑夜。盡管AWS具有高度可配置性，但許多開發人員并未使用此功能。當我第一次使用S3或Lambda(Amazon的靜態文件和云功能服務)時，我花費了大量時間查找Amazon的困難文檔，有時甚至是過時的文檔。使用AWS時，有很多不必要的復雜性和Amazon行話。相比之下，Netlify則是新鮮空氣。這只是其中的一項服務作品。

The best part about Netlify is that it’s free. If you’re in a large team or need more resources for cloud functions, form submissions, and more, they do have paid options. If you plan on building a small blog like I am, it’s unlikely you’ll need to pay for anything.

關于Netlify的最好的部分是它是免費的。如果您是一個大型團隊，或者需要更多資源用于云功能，表單提交等等，那么他們確實有付費選擇。如果您打算建立像我這樣的小型博客，那么您就不必為任何事情付費。