如何将Gatsby应用程序部署到DigitalOcean应用平台上-一一网

作者选择了/dev/color，作为Write for DOnations计划的一部分接受捐赠。

简介

在本教程中，你将在DigitalOcean的AppPlatform上部署一个Gatsby应用程序。App平台是一个平台即服务，可以自动构建、部署和管理应用程序。当与Gatsby这样的静态网站生成器的速度相结合时，它提供了一个可扩展的JAMStack解决方案，不需要服务器端编程。

在本教程中，你将在你的本地机器上创建一个Gatsby应用样本，将你的代码推送到GitHub，然后部署到App Platform。

前提条件

在你的本地机器上，你需要一个运行Node.js的开发环境；本教程在Node.js 14.16.0版本和npm 6.14.11版本上进行了测试。要在macOS或Ubuntu 20.04上安装，请按照《如何在macOS上安装Node.js并创建本地开发环境》中的步骤，或按照《如何在Ubuntu 20.04上安装Node.js》中的《使用PPA进行安装》一节进行。
在你的本地机器上安装Git。你可以按照《为开源做贡献》的教程。在你的电脑上安装和设置Git。
一个GitHub的账户，你可以通过访问创建账户页面来创建。
一个 DigitalOcean 账户。
下载Gatsby CLI 工具到你的本地机器上。你可以在《如何建立你的第一个Gatsby网站》教程的第1步中学习如何做到这一点。
对JavaScript的理解将是有用的。你可以在我们的《如何用JavaScript编程》系列中了解更多关于JavaScript的知识。你不需要知道React才能开始，但熟悉基本概念会有帮助。你可以通过这个系列学习React。

第1步 – 创建一个Gatsby项目

在本节中，你将创建一个Gatsby应用程序的样本，以后你将把它部署到App Platform。

首先，从GitHub克隆默认的Gatsby启动器。你可以在终端使用以下命令来完成。

git clone https://github.com/gatsbyjs/gatsby-starter-default
复制代码

Gatsby启动器网站为你提供了你需要的模板代码，以开始编码你的应用程序。关于创建Gatsby应用程序的更多信息，请查看《如何建立你的第一个Gatsby网站》。

当你完成克隆 repo，cd 到gatsby-starter-default 目录。

cd gatsby-starter-default
复制代码

然后安装Node依赖项。

npm install
复制代码

在你下载了应用程序并安装了依赖项后，在文本编辑器中打开以下文件。

nano gatsby-config.js
复制代码

你刚刚打开了Gatsby的配置文件。在这里，你可以改变关于你的网站的元数据。

进入title 键，将Gatsby Default Starter 改为Save the Whales ，如以下高亮行所示。

gatsby-starter-default/gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Save the Whales`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}
复制代码

关闭并保存该文件。现在在你喜欢的文本编辑器中打开索引文件。

nano src/pages/index.js
复制代码

为了继续 “拯救鲸鱼 “的主题，用Adopt a whale today 替换Hi people ，将Welcome to your new Gatsby site. 改为Whales are our friends. ，并删除最后一个<p> 标签。

gatsby-starter-default/src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Adopt a whale today</h1>
    <p>Whales are our friends.</p>
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["AUTO", "WEBP", "AVIF"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage
复制代码

保存并关闭该文件。你要把盖茨比的宇航员图片换成鲸鱼的GIF。在你添加GIF之前，你将首先需要创建一个GIF目录并下载它。

进入src 目录并创建一个gifs 文件。

cd src/
mkdir gifs
复制代码

现在导航到你新创建的gifs 文件夹。

cd gifs
复制代码

从Giphy下载一个鲸鱼的GIF。

wget https://media.giphy.com/media/lqdJsUDvJnHBgM82HB/giphy.gif
复制代码

Wget是一个允许你从网上下载文件的工具。Giphy是一个承载GIF的网站。

接下来，将名称从giphy.gif 改为whales.gif 。

mv giphy.gif whales.gif
复制代码

在你改变了GIF的名称后，移回项目的根文件夹，再次打开索引文件。

cd ../..
nano src/pages/index.js
复制代码

现在你将把GIF添加到你的网站主页上。删除StaticImage 导入和元素，然后用以下突出显示的行来替换。

gatsby-starter-default/src/pages/index.js

import React from "react"
import { Link } from "gatsby"

import whaleGIF from "../gifs/whales.gif"
import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Adopt a whale today</h1>
    <p>Whales are our friends.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <img src={whaleGIF} alt="Picture of Whale from BBC America" />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
复制代码

这里你导入了鲸鱼的GIF，并将其包含在<div> 元素之间的图像标签中。alt 标签告知读者GIF的来源。

关闭并保存索引文件。

现在你将在本地运行你的网站，以确保它的工作。从你项目的根部，运行开发服务器。

gatsby develop
复制代码

在你的网站完成构建后，在浏览器的搜索栏中输入localhost:8000 。你会发现以下内容在你的浏览器中呈现。

Front page of a Save the Whales website

在本节中，你创建了一个Gatsby应用程序的样本。在下一节中，你将把你的代码推送到GitHub，这样App Platform就可以访问它。

第2步 – 推送你的代码到GitHub

在本教程的这一部分，你将提交你的代码到git ，并推送到GitHub上。从那里，DigitalOcean的应用程序平台将能够访问你的网站的代码。

转到项目的根目录，创建一个新的git仓库。

git init
复制代码

接下来，将任何修改的文件添加到git。

git add .
复制代码

最后，用下面的命令提交所有的修改到git。

git commit -m "Initial Commit"
复制代码

这将把你的应用程序的这个版本提交给git版本控制。-m 需要一个字符串参数，并使用它作为提交的信息。

**注意：**如果你之前没有在这台机器上设置git，你可能会收到以下输出。

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.
复制代码

运行这两个git config 命令，在继续前进之前提供这些信息。如果你想了解更多关于git的信息，请查看我们的How To Contribute to Open Source:开始使用Git的教程。

你会收到如下的输出。

Output[master 1e3317b] Initial Commit
 3 files changed, 7 insertions(+), 13 deletions(-)
 create mode 100644 src/gifs/whales.gif
复制代码

一旦你提交了文件，去GitHub登录。登录后，创建一个名为gatsby-digital-ocean-app-platform的新仓库。你可以把这个仓库变成私有或公共的。

Creating a new github repo

创建完新的仓库后，回到命令行，添加远程仓库的地址。

git remote set-url origin https://github.com/your_name/gatsby-digital-ocean-app-platform
复制代码

确保将your_name 改为你在 GitHub 上的用户名。

接下来，声明你要推送到main 分支，方法如下。

git branch -M main
复制代码

最后，把你的代码推送到你新创建的 repo。

git push -u origin main
复制代码

一旦你输入了你的证书，你会收到类似以下的输出。

OutputCounting objects: 3466, done.
Compressing objects: 100% (1501/1501), done.
Writing objects: 100% (3466/3466), 28.22 MiB | 32.25 MiB/s, done.
Total 3466 (delta 1939), reused 3445 (delta 1926)
remote: Resolving deltas: 100% (1939/1939), done.
To https://github.com/your_name/gatsby-digital-ocean-app-platform
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
复制代码

现在你就可以在你的 GitHub 账户中访问你的代码了。

在这一节中，你把代码推送到了远程 GitHub 仓库。在下一节中，你将把Gatsby应用从GitHub部署到App Platform。