gatsby_从零到部署：我如何使用Netlify + Gatsby从零开始创建静态网站
gatsby
After my first year working as a frontend web developer, I got the idea to have my own personal site. It’d be a platform to showcase my work, share content, and serve as a creative outlet for me outside of work. Here, I’ll walk you through my experience building the site from zero to deploy.
在担任前端Web开发人员的第一年后，我想到了拥有自己的个人网站的想法。 这将是一个展示我的作品，共享内容并在工作之外为我提供创意的平台。 在这里，我将向您介绍从零到部署构建站点的经验。
购买域名：Google域名 (Buying a Domain: Google Domains)
I started from square one, buying a domain. There are lots of options out there. I chose Google Domains since I already had an account and wouldn’t have to open another just for this. It costs $12/year (standard price) and was freaky fast to set up. (FYI, you can buy a domain through Netlify as well.)
我从第一方开始，购买了一个域名。 有很多选择。 我选择Google Domains是因为我已经拥有一个帐户，不必为此专门开设另一个帐户。 它的价格为每年12美元(标准价格)，而且设置异常Swift。 (仅供参考，您也可以通过Netlify购买域名。)
3 months went by where my domain was blank. I was too caught up in the many details of getting the site up and running. Taking a step back, I realized that no one was even going to see my site until I decide to start actively promoting it. Once I relieved myself of the pressure, I pushed myself to put something there to fill the void. With the heavy weight off my shoulders, I decided to have fun with it and make something simple and fun.
三个月过去了，我的域名空白。 我太着迷于启动和运行网站的许多细节。 退后一步，我意识到，直到我决定开始积极推广它之前，没人会看到我的网站。 一旦我减轻了压力，我便强迫自己在那儿放些东西以填补空白。 背负了沉重的重担，我决定尝试一下它，使事情变得简单有趣。
入门 (Getting Started)
There’s a lot to consider when creating a website: design, UI/UX, accessibility, SEO, analytics, and more. It can be overwhelming to think about and plan for all at once.
创建网站时需要考虑很多因素：设计，UI / UX，可访问性，SEO，分析等。 一次为所有事情考虑和计划可能是压倒性的。
To make it less intimidating, I decided to break it down into stages. Stage one was to make a simple “coming soon” page and deploy it. Then, once that was up and running, I could work behind-the-scenes on designing, developing, and perfecting the site.
为了减少威胁，我决定将其分解为多个阶段。 第一步是制作一个简单的“即将推出”页面并进行部署。 然后，一旦启动并运行，我就可以在幕后进行设计，开发和完善该站点的工作。
“Done is better than perfect.” — Sheryl Sandberg
“做完比求完美强。” —谢里尔·桑德伯格
构建前端：Gatsby.js (Building the front end: Gatsby.js)
I first learned about Gatsby at the ReactNext conference I attended, and have been curious about using it ever since. An alternative I considered was Hugo, another very popular static site generator written in Go.
我最初在参加的ReactNext会议上了解了盖茨比， 从那以后一直对使用它感到好奇。 我考虑过的另一个选择是Hugo，这是另一个非常流行的用Go语言编写的静态网站生成器。
Gatsby.js was also attractive to me since it’s based on React.js, which we use in our stack at Lemonade. It also incorporates GraphQL, which is something I’ve been meaning to try out. I’m all for efficiency, so I’m curious how GraphQL helps fetch data more efficiently, and allow the frontend to be less dependent on the server logic.
Gatsby.js对我也很有吸引力，因为它基于React.js，我们在Lemonade的堆栈中使用了它。 它还包含GraphQL，这是我一直想尝试的东西。 我全力追求效率，所以我很好奇GraphQL如何帮助更有效地获取数据，并使前端对服务器逻辑的依赖性降低。
When it came time to choosing a boilerplate, or “starter” as Gatsby calls them, I knew I wanted something basic. After looking through the popular starters, I chose to go with the gatsby-starter-default over gatsby-starter-netlify-cms.
当选择盖茨比称之为样板或“入门”的时候，我知道我想要一些基本的东西。 通过流行的首发看后，我选择去与gatsby-starter-default了gatsby-starter-netlify-cms 。
Why? I didn’t want to commit to the site being primarily a blog. With the Netlify starter I’d have a lot of extra dependencies that I didn’t foresee needing.
为什么？ 我不想将网站主要定为博客。 使用Netlify入门程序，我会拥有很多我没有预见到的额外依赖项。
The first iteration of the site is a simple “coming soon” placeholder page with an emphasis on simple. I took some inspiration from CodePen, made my custom React component, and added some custom fonts and icons. That’s it.
该网站的第一版是一个简单的“即将推出”占位符页面，重点是simple 。 我从CodePen获得了一些启发，制作了自定义的React组件，并添加了一些自定义的字体和图标。 而已。
To edit the default header title, I was gently forced () to dip into GraphQL. Here’s a slimmed down version of what my header looks like:
要编辑默认标题标题，我被迫()浸入GraphQL。 这是我标题的精简版：
The key takeaways here are:
这里的要点是：
StaticQuery has 2 props:
queryandrenderStaticQuery有2个道具：
query和renderSiteTitleQueryis the operation name. Think of it like a function name. It’s useful for debugging and logging purposes, allowing you to easily search for the specific query in your codebase.SiteTitleQuery是操作名称。 可以将其视为函数名称。 它对于调试和日志记录很有用，使您可以轻松地在代码库中搜索特定的查询。One major benefit of
StaticQueryoverpage queryis that it lets you set up a GraphQL query within the component where it’s used (as opposed to passing it through as a prop).与
page query，StaticQuery一个主要优点是它使您可以在使用它的组件内设置GraphQL查询(而不是通过prop进行传递)。I edited my title in the
gatsby-config.jsfile, where site configuration options are stored. This explains where thesiteindata.site.siteMetadata.titlecomes from.我在
gatsby-config.js文件中编辑了标题，该文件存储了站点配置选项。 这说明了data.site.siteMetadata.title中的site来自何处。
托管：Netlify (Hosting: Netlify)
With so many tools available, it’s hard to know what’s right for the scope of a project. The important criteria for me were:
有这么多可用的工具，很难知道什么是项目范围的正确选择。 对我来说重要的标准是：
- Free hosting for a custom domain 免费托管自定义域
- Ease of use 使用方便
- Ability to serve dynamic (not just static) content 能够提供动态(而不仅仅是静态)内容
- Built-in HTTPS security 内置HTTPS安全性
Netlify is a hosting and serverless backend service for static sites. It gave me everything I was looking for plus bonus features that I hadn’t even thought of, like:
Netlify是静态站点的托管和无服务器后端服务。 它为我提供了我一直在寻找的所有内容以及我什至没有想到的额外功能，例如：
- Ability to view a preview version before deploying to production 能够在部署到生产之前查看预览版本
- Out-of-the-box A/B testing functionality 开箱即用的A / B测试功能
They sort of spoil you in that way, I was impressed.
他们被这种方式宠坏了，我印象深刻。
Once I had achieved what you saw above, I decided it was ready to deploy. Since I didn’t use Netlify as my DNS provider, I had to set up a “custom domain.” I followed their tutorial, and a few minutes later it was configured.
一旦实现了您上面看到的内容，我就决定可以进行部署了。 由于我没有使用Netlify作为DNS提供程序，因此我不得不设置“自定义域”。 我按照他们的教程进行操作 ，几分钟后就完成了配置。
All I had left to do was deploy. For that, there are a few options:
我剩下要做的就是部署。 为此，有一些选择：
Continuous Deployment
持续部署
Link your Github (or other) account, and Netlify will automatically build and deploy for you when you push your newest version. You can also choose to limit their Github access to only your public repos.
关联您的Github(或其他)帐户，当您推送最新版本时，Netlify将自动为您构建和部署。 您还可以选择将他们的Github访问权限限制为仅您的公共存储库。
Manual
手册
If you choose not to link your account, or were like me and just wanted to try it out the first time, you can easily drag and drop your project to trigger the deploy.
如果您选择不链接您的帐户，或者与我一样，只是想首次尝试，则可以轻松地拖放项目以触发部署。
I tested it out with the manual way for the first deploy. 2 minutes () later, the site was up and running.
我以手动方式对它进行了测试，以进行首次部署。 2分钟()后，该站点已启动并正在运行。
Check it out → edenadler.com
看看→ edenadler.com
回顾性 (Retrospective)
For this basic POC, I’m glad I didn’t try to do fancy things with GraphQL, and be overly ambitious with the site design and execution. You may even notice things, like the favicon, that are still there from the Gatsby boilerplate. I truly wanted to do the bare minimum. Done rather than perfect.
对于这个基本的POC，我很高兴我没有尝试使用GraphQL做花哨的事情，并且对网站的设计和执行过于野心勃勃。 您甚至可能会注意到Gatsby样板中仍然存在的图标，例如收藏夹图标。 我真的很想做到最低限度。 做而不是完美。
Whether you’re creating your own personal site, working on a side project, or writing a blog post, don’t strive for perfection. Set a realistic, tangible goal for yourself and get started. If your project involves trying out new technologies, don’t try them all out at once. Break the project up into smaller, bite-sized tasks that you can accomplish in a day, or even an afternoon. Most importantly, have fun with it.
无论您是创建自己的个人网站，从事辅助项目还是撰写博客文章，都不要追求完美。 为自己设定一个现实，切实的目标并开始。 如果您的项目涉及尝试新技术，请不要立即尝试所有新技术。 将项目分解为一些较小的任务，您可以在一天甚至一个下午内完成这些任务。 最重要的是，玩得开心。
我的下一个阶段 (My Next Stages)
- Hire designer & implement the designs 雇用设计师并实施设计
- Plan & add content 规划和添加内容
- Play around with GraphQL integration 玩转GraphQL集成
- … many more ideas …更多想法ideas
Thanks for reading ✨ If you have questions, feel free to comment here or connect with me on Instagram ❤
感谢您的阅读✨如果您有任何疑问，请随时在此处评论或在Instagram上与我联系❤
gatsby