當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

gatsby_我如何使用Gatsby和Netlify建立博客

發(fā)布時間：2023/11/29 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 gatsby_我如何使用Gatsby和Netlify建立博客小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

gatsby

by Pav Sidhu

通過帕夫·西杜(Pav Sidhu)

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

您能說出更具標(biāo)志性的二人??組合嗎？？ (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.

多年前，每當(dāng)我建立一個靜態(tài)網(wǎng)站時，我就沒有使用任何精美的框架或工具。我?guī)У巾?xiàng)目中的唯一東西是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等工具，這些工具極大地改善了構(gòu)建靜態(tài)網(wǎng)站的體驗(yàn)。無需考慮樣板和配置(看著Webpack)，您只需專注于您的應(yīng)用程序即可。

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流程是我所擁有的最佳編程體驗(yàn)。讓我解釋一下原因。

蓋茨比 (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的靜態(tài)站點(diǎn)生成器。開箱即用地配置了所有內(nèi)容，包括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的所有優(yōu)勢，例如其性能，組件，JSX，React庫生態(tài)系統(tǒng)和一個大型社區(qū)(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，那將是一條學(xué)習(xí)曲線。但是有很多寫得很好的教程使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.

對于像我的博客這樣的許多靜態(tài)網(wǎng)站，我需要在構(gòu)建過程中使用外部數(shù)據(jù)源(我的實(shí)際博客文章)。 Gatsby支持多種形式的數(shù)據(jù)，包括Markdown，API，數(shù)據(jù)庫和WordPress之類的CMS。要訪問此數(shù)據(jù)，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文件。它還像魔術(shù)一樣直接將Markdown文件轉(zhuǎn)換為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:

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

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訪問數(shù)據(jù)。如果GraphQL對您來說是新手，它確實(shí)增加了另一件事要學(xué)習(xí)。但是，將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入門套件來設(shè)置gatsby-transformer-remark以及所有查詢。為了加快開發(fā)速度，我使用了一種稱為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 :

我非常喜歡樣式化組件，因此在構(gòu)建此博客時嘗試使用它。我確實(shí)遇到了一個問題，因?yàn)槲覠o法指定gatsby-transformer-remark如何設(shè)置組件樣式。相反，我不得不使用普通CSS進(jìn)行樣式設(shè)計。我希望在gatsby-config.js看到類似以下內(nèi)容：

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.

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

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的唯一困難是在部署網(wǎng)站時。我有一個FOUC(未樣式化內(nèi)容的閃爍)。我發(fā)現(xiàn)將蓋茨比從1.8.12升級到1.9.250可以解決此問題。我不太確定為什么要解決此問題，并且我認(rèn)為它一定是蓋茨比的內(nèi)部問題。

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.

通常，在構(gòu)建靜態(tài)網(wǎng)站時，我會使用GitHub頁面，因?yàn)樗敲赓M(fèi)的，而且設(shè)置起來也很容易。盡管我仍然認(rèn)為GitHub頁面是一個很好的工具，但Netlify進(jìn)一步將這一過程進(jìn)一步提高了開發(fā)人員的體驗(yàn)效率。

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存儲庫都會根據(jù)您使用的靜態(tài)站點(diǎn)生成器自動構(gòu)建您的網(wǎng)站，并將其部署到生產(chǎn)環(huán)境中。

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用于靜態(tài)站點(diǎn)托管。但它也支持云功能，域管理(使用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的區(qū)別是白天和黑夜。盡管AWS具有高度可配置性，但許多開發(fā)人員并未使用此功能。當(dāng)我第一次使用S3或Lambda(Amazon的靜態(tài)文件和云功能服務(wù))時，我花費(fèi)了大量時間查找Amazon的困難文檔，有時甚至是過時的文檔。使用AWS時，有很多不必要的復(fù)雜性和Amazon行話。相比之下，Netlify則是新鮮空氣。這只是其中的一項(xiàng)服務(wù) 作品。

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.

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

TL; DR (TL;DR)

Gatsby and Netlify are the easiest way to build and publish a static website. Period.

Gatsby和Netlify是構(gòu)建和發(fā)布靜態(tài)網(wǎng)站的最簡單方法。期。

If you would like an example of how to build a blog using Gatsby, the code for my blog is available on GitHub.

如果您想使用Gatsby構(gòu)建博客的示例，可以在GitHub上找到我的博客的代碼。

This post was originally published on my blog: How I Built My Blog Using Gatsby and Netlify

這篇文章最初發(fā)布在我的博客上：我如何使用Gatsby和Netlify建立我的博客

Thanks for reading, please ? if you found this useful! I’d love to hear your thoughts on Gatsby and Netlify in the comments.

謝謝閱讀，好嗎？如果您覺得這有用！我很樂意在評論中聽到您對蓋茨比和Netlify的看法。

翻譯自: https://www.freecodecamp.org/news/how-i-built-my-blog-using-gatsby-and-netlify-f921f1a9f33c/