diff --git a/docs/docs/caching.md b/docs/docs/caching.md index 206cff161d48a..5bafdf13456a9 100644 --- a/docs/docs/caching.md +++ b/docs/docs/caching.md @@ -33,3 +33,4 @@ How you setup your caching depends on how you host your site. We encourage peopl The following plugins have been created: - [gatsby-plugin-netlify](/packages/gatsby-plugin-netlify/) +- [gatsby-plugin-s3](https://github.com/jariz/gatsby-plugin-s3) diff --git a/docs/docs/deploying-and-hosting.md b/docs/docs/deploying-and-hosting.md index e67a1c838d445..a2e386c5fb0f6 100644 --- a/docs/docs/deploying-and-hosting.md +++ b/docs/docs/deploying-and-hosting.md @@ -5,6 +5,6 @@ overview: true Getting your shiny new Gatsby site onto the cloud is probably the first thing you will want to do now that it's built! Also, give yourself a pat on the back real quick for creating something new! -In this section you'll find answers to questions about dealing with app routes that aren't at the root of your domain with `path prefixes`, as well as how to deploy to countless hosting solutions such as [Netlify](https://www.netlify.com/), [Cloudfront](https://aws.amazon.com/cloudfront/), and [GitHub Pages](https://pages.github.com/). As well as what's necessary to make sure you're fully prepared for a deploy! 🚀 +In this section you'll find answers to questions about dealing with app routes that aren't at the root of your domain with `path prefixes`, as well as how to deploy to countless hosting solutions such as [Netlify](https://www.netlify.com/), [AWS Amplify Console](https://console.amplify.aws), and [GitHub Pages](https://pages.github.com/). As well as what's necessary to make sure you're fully prepared for a deploy! 🚀 [[guidelist]] diff --git a/docs/docs/deploying-to-aws-amplify.md b/docs/docs/deploying-to-aws-amplify.md new file mode 100644 index 0000000000000..9affb8d28cd35 --- /dev/null +++ b/docs/docs/deploying-to-aws-amplify.md @@ -0,0 +1,34 @@ +--- +title: Deploying to AWS Amplify +--- + +In this guide we'll walk through how to deploy and host your Gatsby site using the [AWS Amplify Console](https://console.amplify.aws). + +AWS Amplify is a combination of client library, CLI toolchain, and a Console for continuous deployment and hosting. The Amplify CLI and library allow developers to get up & running with full-stack cloud-powered applications with features like authentication, storage, serverless GraphQL or REST APIs, analytics, Lambda functions, & more. The Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators). Continuous deployment allows developers to deploy updates to their web app on every code commit to their Git repository. Hosting includes features such as globally available CDNs, easy custom domain setup + HTTPS, feature branch deployments, and password protection. + +## Pre-requisites + +1. [Sign up for an AWS Account](https://portal.aws.amazon.com/billing/signup?redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation). There are no upfront charges or any term commitments to create an AWS account and signing up gives you immediate access to the AWS Free Tier + +1. This guide assumes that you have setup a Gatsby project. If you need to set up a project, start with the [Gatsby Auth starter with AWS Amplify](https://github.com/dabit3/gatsby-auth-starter-aws-amplify) then come back. The starter implements a basic authentication flow for signing up signing in users as well as protected client side routing. + +![Gatsby Amplify](./images/amplify-gatsby-auth.gif) + +## Deployment + +1. Log in to the [AWS Amplify Console](https://console.aws.amazon.com/amplify/home) and choose Get Started under Deploy. + ![Gatsby Amplify2](./images/amplify-gettingstarted.png) + +1. Connect a branch from your GitHub, Bitbucket, GitLab, or AWS CodeCommit repository. Connecting your repository allows Amplify to deploy updates on every code commit to a branch. + ![Gatsby Amplify2](./images/amplify-connect-repo.gif) + +1. Accept the default build settings. Give the Amplify Console permission to deploy backend resources with your frontend with a service role. This allows the Console to detect changes to both your backend and frontend on every code commit and make updates. If you do not have a service role follow the prompts to create one, then come back to the console and pick it from the dropdown. + ![Gatsby Amplify2](./images/amplify-build-settings.gif) + +1. Review your changes and then choose **Save and deploy**. The Amplify Console will pull code from your repository, build changes to the backend and frontend, and deploy your build artifacts at `https://master.unique-id.amplifyapp.com`. Bonus: Screenshots of your app on different devices to find layout issues :fire: + ![Gatsby Amplify2](./images/amplify-gatsby-deploy.gif) + +## References: + +- [Publishing Your Next Gatsby Site to AWS With AWS Amplify](https://www.gatsbyjs.org/blog/2018-08-24-gatsby-aws-hosting/) +- If you want more control over hosting on AWS you can also [deploy your Gatsby.js Site to AWS S3](/docs/deploying-to-s3-cloudfront/). diff --git a/docs/docs/images/amplify-build-settings.gif b/docs/docs/images/amplify-build-settings.gif new file mode 100644 index 0000000000000..611b4282db2cb Binary files /dev/null and b/docs/docs/images/amplify-build-settings.gif differ diff --git a/docs/docs/images/amplify-connect-repo.gif b/docs/docs/images/amplify-connect-repo.gif new file mode 100644 index 0000000000000..6c57cf3b267e1 Binary files /dev/null and b/docs/docs/images/amplify-connect-repo.gif differ diff --git a/docs/docs/images/amplify-gatsby-auth.gif b/docs/docs/images/amplify-gatsby-auth.gif new file mode 100644 index 0000000000000..3063179b15452 Binary files /dev/null and b/docs/docs/images/amplify-gatsby-auth.gif differ diff --git a/docs/docs/images/amplify-gatsby-deploy.gif b/docs/docs/images/amplify-gatsby-deploy.gif new file mode 100644 index 0000000000000..92bcfb0e2f54d Binary files /dev/null and b/docs/docs/images/amplify-gatsby-deploy.gif differ diff --git a/docs/docs/images/amplify-gettingstarted.png b/docs/docs/images/amplify-gettingstarted.png new file mode 100644 index 0000000000000..92505df523928 Binary files /dev/null and b/docs/docs/images/amplify-gettingstarted.png differ diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index ae21ee37d8cb4..26fbcf32f4bbb 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -22,6 +22,8 @@ items: - title: Preparing your site for deployment* link: /docs/preparing-for-deployment/ + - title: Deploying to AWS Amplify + link: /docs/deploying-to-aws-amplify - title: Deploying to S3 and CloudFront link: /docs/deploying-to-s3-cloudfront - title: Deploying to Aerobatic