盖茨比乔布斯_部署您的第一个盖茨比站点以进行Netlify-CSDN博客

盖茨比乔布斯

Recently, Netlify has become one of the hotter topics in Web Development. They are loved in the community and just received millions of dollars of funding to continue making their product better. If you aren't familiar, Netlify is a web host with particular support Static Sites (think Gatsby.js, Next.js, etc.) as well as other incredible features like serverless (lambda) functions, free https certs, and more! In this article, we are going to walk through the steps to deploy a Gatsby app to Netlify.

最近， Netlify已成为Web开发中的热门话题之一。他们在社区中倍受青睐，并刚刚获得数百万美元的资金，以继续改善他们的产品。如果您不熟悉，Netlify是一个虚拟主机，它特别支持静态站点（例如Gatsby.js，Next.js等）以及其他无服务器功能，例如无服务器（lambda）功能，免费的https证书等等！在本文中，我们将逐步介绍将Gatsby应用程序部署到Netlify的步骤。

For a run down on Gatsby, check out our guide: Zero to Deploy: A Practical Guide to Static Sites with Gatsby.js

要了解Gatsby的详细信息，请查看我们的指南：零部署：使用Gatsby.js的静态网站实用指南

TLDR (TLDR)

Create a Github Repository
创建一个Github仓库
Create Gatsby App with Gatsby CLI
使用Gatsby CLI创建Gatsby App
Push App to Github
将应用程序推送到Github
Create New Site in Netlify and Connect to Github Repository
在Netlify中创建新站点并连接到Github存储库

创建GitHub存储库 ( Create GitHub Repository )

To deploy to Netlify, the easiest way is to set up Continuous Deployment by connecting to an existing repository in GitHub, Gitlab, or Bitbucket. Since Github is the most popular in the open source community, that's what I'm going to use, but either option is fine. Obviously, the first part is to create the GitHub repository for our Gatsby app.

要部署到Netlify，最简单的方法是通过连接到GitHub ， Gitlab或Bitbucket中的现有存储库来设置持续部署。由于Github在开源社区中最受欢迎，这就是我要使用的，但是任何一种都很好。显然，第一部分是为我们的Gatsby应用程序创建GitHub存储库。

After the repo is created, you'll see instructions on how to connect an existing app to the repo. We will use the steps in a minute, so you might keep this page open for reference.

创建存储库后，您将看到有关如何将现有应用程序连接到存储库的说明。我们将在一分钟内使用这些步骤，因此您可以保持此页面打开以供参考。

创建您的第一个盖茨比应用程序 ( Creating Your First Gatsby App )

Since this article is not specifically focused on building Gatsby apps, we are going to use a generator/scaffolding tool to generate a starter app. For this we will use the gatsby-cli package from NPM by installing it globally. If you're looking for more details on working with Gatsby specifically you can refer to Zero to Deploy: A Practical Guide to Static Sites With Gatsby.js

由于本文并非专门针对构建盖茨比应用程序，因此我们将使用生成器/脚手架工具生成启动器应用程序。为此，我们将通过全局安装NPM的gatsby-cli软件包。如果您正在寻找有关使用Gatsby的更多详细信息，则可以参考“ 零部署：使用Gatsby.js静态站点的实用指南”。

npm install -g gatsby-cli

From here, you can generate the starter app with the following command.

在这里，您可以使用以下命令生成入门应用程序。

gatsby-cli new <app_name>

After opening the project in Visual Studio Code, the file structure for your hot new Gatbsy App looks like this.

在Visual Studio Code中打开项目后，新的热门Gatbsy App的文件结构如下所示。

There is a decent amount of boilerplate code included here that shows you some of the basics of Gatsby. It included some pages, components, css, navigation, etc. Definitely worth looking through more if you're curious. From here, we can start the app to see what it looks like using gatsby develop.

这里包含大量样板代码，向您展示了盖茨比的一些基础知识。它包括一些页面，组件，css，导航等。如果您好奇的话，绝对值得一看。从这里开始，我们可以使用gatsby develop启动该应用程序以查看其外观。

This starts the app in development mode, accessible at port 8000 in your browser.

这将以开发模式启动该应用，可通过浏览器的端口8000访问该应用。

This development server supports live-reloading, so any changes you save to your app will restart the server. For example, if I make a change to the index.js file, you can see the app rebuilds.

此开发服务器支持实时重载，因此您保存到应用程序中的所有更改都将重新启动服务器。例如，如果我对index.js文件进行了更改，则可以看到该应用程序正在重建。

...and see the changes in the browser.

...并在浏览器中查看更改。

将Gatsby App推送到Github ( Push Gatsby App to Github )

Now that we have our Gatbsy app created, we need to connect it to our Github repository. First, initialize your local folder as a Git repo by running git init. Then add commit all of your files by running git add * followed by git commit -m "initial commit.

现在，我们已经创建了Gatbsy应用程序，我们需要将其连接到Github存储库。首先，通过运行git init将本地文件夹初始化为Git存储库。然后通过运行git add *然后运行git commit -m "initial commit添加提交所有文件。

Now we need to connect the local git repo to Github. To do this, you can refer back to Github page mentioned above. For additional reference, here are the commands.

现在我们需要将本地git repo连接到Github。为此，您可以参考上面提到的Github页面。作为其他参考，以下是命令。

git remote add origin <github_url> git push -u origin master.

git remote add origin <github_url> git push -u origin master 。

部署站点以进行Netlify ( Deploy Site to Netlify )

Now for the good part...DEPLOYING!

现在，大部分……部署！

If you haven't yet, you'll need to sign up with Netlify. You can use Github, Gitlab, Bitbucket, or email to register.

如果尚未注册，则需要注册Netlify。您可以使用Github，Gitlab，Bitbucket或电子邮件进行注册。

Then, click the New Site From Git button. From here, you'll be given a choice for Cotinuous Deployment, so choose Github. This means that every time you check your code into your Github repository, your site will be rebuilt to reflect those changes.

然后，单击“ New Site From Git按钮。从这里，您可以选择连续部署，因此选择Github。这意味着每次您将代码检入Github存储库时，都会重建您的站点以反映这些更改。

Then select your repository.

然后选择您的存储库。

Now you'll need to configure your deployment. You can choose which branch of your repository to connect for Continuous Deployment. Probably the most common branch is master, and that's what I'm going to use here.

现在，您需要配置部署。您可以选择连接存储库的哪个分支以进行持续部署。可能最常见的分支是master，这就是我在这里要使用的分支。

The next two settings, build command and public directory, are important to understand. Basically, Netlify allows you to run one command when it rebuilds your site. With Gatbsy sites, you almost always want to run gatsby build. This does a production build of your site, and by default, puts the built assets in a directory called public. This public directory is where Netlify will actually serve your site/files. For this reason, we will run the gatsby build command as well as tell Netlify our public directory is, in fact, called public.

接下来的两个设置，build命令和public目录，对理解很重要。 基本上，Netlify允许您在重建站点时运行一个命令。 使用Gatbsy网站时，您几乎总是想运行gatsby build 。这将对您的网站进行生产构建，并且默认情况下会将构建的资产放在名为public的目录中。该公共目录是Netlify实际为您的站点/文件提供服务的位置。因此，我们将运行gatsby build命令，并告诉Netlify我们的公共目录实际上称为public 。

Go ahead and click Deploy Site.

继续并单击“部署站点”。

This will go out to Github and pull your latest code, then run the command we defined. You should see that a build is in progress.

这将转到Github并提取您的最新代码，然后运行我们定义的命令。您应该看到正在进行构建。

After a minute or so, you'll see that it's finished.

大约一分钟后，您会看到它已经完成。

You can click the link associated with your site to see it live!

您可以单击与您的站点关联的链接以实时查看它！

You did it...your very first Gatsby site is LIVE!! The cool part is that, from now on, every time you commit to your master branch, your site will be automatically rebuilt. I'll make a small change in my code (the h1 tag in the index.js file) and push it to Github.

您做到了...您的第一个盖茨比站点已经上线了！最酷的部分是，从现在开始，每次您提交到master分支时，都会自动重建您的站点。我将对代码（index.js文件中的h1标记）进行一些小的更改，然后将其推送到Github。

Back in Netlify, under the deployments tab, you can see that the site is being rebuilt.

返回Netlify，在“部署”选项卡下，您可以看到该站点正在重建。

...and a minute or so later, it's finished.

...大约一分钟后，它完成了。

and you can reload the page in the browser and see the changes.

您可以在浏览器中重新加载页面并查看更改。

There's one little bonus I want to mention here. Although, I won't go into too much detail, there are ways to add more customization to your deployments. You can do this by including a configuration file, called Netlify.toml, in the root of your directory. In here, you can specify your build command as well as many other things.

我想在这里提一个小小的奖金。虽然，我将不做过多介绍，但是有一些方法可以为您的部署添加更多的自定义。为此，您可以在目录的根目录中包含一个名为Netlify.toml的配置文件。在这里，您可以指定构建命令以及许多其他内容。

It's also worth noting that there are other settings you can look at in the Netlify dashboard under the Settings tab.

还值得注意的是，您可以在Netlify仪表板的“设置”选项卡下查看其他设置。

Specifically, you can defined Environment Variables here, which are incredibly useful.

具体来说，您可以在此处定义环境变量，这非常有用。

回顾 ( Recap )

So, that's it. The first time I actually deployed a Gatsby site to Netlify, it only took me like 5 minutes! I was amazed and became very excited to learn more and share with you! Would love to hear in the comments about the projects you guys are working on and how working with Netlify has been for you. Feel free to comment below or reach out to me on Twitter, @jamesQquick.

就是这样了。我第一次将Gatsby网站真正部署到Netlify时，只花了我5分钟！我很惊讶，很高兴能学习更多并与您分享！希望在评论中听到您正在从事的项目以及与Netlify的合作如何为您服务。请在下面发表评论，或通过Twitter @jamesQquick与我联系。