我如何使用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的最好的部分是它是免费的。如果您是一个大型团队，或者需要更多资源用于云功能，表单提交等等，那么他们确实有付费选择。如果您打算建立像我这样的小型博客，那么您就不必为任何事情付费。