Closed shannonbux closed 5 years ago
@calcsam
In this post, we’ll walk through how to host & publish your next Gatsby site to AWS using AWS Amplify.
AWS Amplify is a combination of client library, CLI toolchain, and UI components. Amplify allow developers to get up & running with full-stack cloud-powered applications with features like authentication, GraphQL, storage, REST APIs, analytics, Lambda functions, hosting & more.
Using the Hosting feature, you can deploy your application to AWS as well as set up your site with Amazon Cloudfront CDN. This is what we’ll be doing in this tutorial. Let’s begin!
First, we’ll want to create a new Gatsby project. If you don’t already have Gatsby installed, install it:
Next, we’ll create a new Gatsby site:
Finally, change into the new site directory:
Now that we have our Gatsby site up & running, let’s add hosting & make the site live on AWS.
First, we’ll install the AWS Amplify CLI:
With the AWS Amplify CLI installed, we now need to configure it with an IAM User:
amplify configure
For a video walkthrough of how to configure the AWS Amplify CLI, click here.
Now, we can create a new Amplify project in the root of our Gatsby project:
amplify init
Now, the Amplify project has been created. You will see that you have a new amplify folder in your project directory as well as an .amplifyrc file. Both of these contain your AWS Amplify project configuration.
Next, we can type amplify into our command line & see all of the options that we have:
amplify
At the bottom, we can see the available categories available to us. Hosting is the category we would like to enable, so let’s do so now:
amplify add hosting
Here, we'll be prompted for the following:
This will set up our local project with everything we need, now we can publish the app to AWS. To do so, we’ll run the following command:
amplify publish
Here, we’ll be prompted for the following:
Now, our resources will be pushed up to our account & our site will be published to a live url!
What just happened? A few things:
We should have also be given the URL that the site is hosted on. At any time that we would like to get the url for our site, we can run:
amplify status
This command should give us all of the info about our app including the url of our website.
If we ever want to configure the hosting setup, including adding Cloudfront, we can run:
amplify configure hosting
Here, we’ll be prompted for what we would like to change about the project configuration.
To learn more about AWS Amplify, check out the Getting Started page.
Hi @didacta! Would you mind opening a PR and mentioned this issue #8103 in the PR description to add the doc you added above?
Oops, sorry. Checked How Gatsby Changes Teams' Website Development Workflow accidentally. Removed it again. Before someone gets crazy about my edit. 😆
Should we (the random contributors) have such permissions at all?
Edit: @shannonbux Isn't Typography.js already in the docs or am I getting something wrong?
Also, as a next step I would suggest that all contributors who work on articles should mention that in the comments to avoid duplicates.
Hi @shannonbux! I'll make a PR for the Deploying to Heroku doc.
I'm working on the "Using Fragments" section, should have a PR in the next 24-36 hours.
I'd like to write a guide on deploying from Github, via Wercker to Azure if you'd be interested in having it added to the docs
great @jkjustjoshing that'd be great! Want to mention this issue in your PR for easy tracking?
Also @dougajmcdonald would you be interested in writing a blogpost on that? We trying to keep the number of deployment docs to just a select few, and then blog about other deployment strategies (and link to those blogposts from the deployment overview doc (/docs/deploying-and-hosting/)
Brand guidelines/press kit page (https://github.com/gatsbyjs/gatsby/issues/4150) could maybe go on the list, too?
@shannonbux I'd love to, do you have an oss Gatsby blog I can contribute to? Or do you want me to do something external?
@dougajmcdonald we do! See this directory for blog content, and model your post in the same fashion: https://github.com/gatsbyjs/gatsby/tree/master/docs/blog
@CanRau good thought. I think not here, because this issue is for content migration (@shannonbux has identified source material that could be helpful/repurposed into documentation). #4150 is possible/probable future content, but not something we have existing content to migrate.
Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!
Hey again!
It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY
. Please feel free to reopen this issue or create a new one if you need anything else.
Thanks again for being part of the Gatsby community!
Summary
Lots of content in our blog, plugin and starter READmes, and other external resources have valuable content we could pull into the docs.
Note -- These docs may be in one of three states:
Sourcing
Deploying
Hosting
Styling
Building pages
Building a page with a GraphQL query(Duplicative. Already exists)Rendering sidebar navigation dynamically(New doc, not migration)Performance + Optimization
Optimizations that Gatsby makes for you (hold, needs clarification; missing in airtable)Overviews
How Gatsby Works Diagram (hold, needs clarification; missing link in airtable)Plugins
Headless CMS
GraphQL
Process
How to submit a PR*Testing
[ ] Test configuration with Gatsby (hold, needs clarification; not scoped narrowly enough, all external sources)Misc
Interactive pages* #8739Motivation
We are doing this to bring valuable content into the docs so that it is more centralized, maintainable, and discoverable.