Content migration overview issue

[shannonbux]

Summary

Lots of content in our blog, plugin and starter READmes, and other external resources have valuable content we could pull into the docs.

1. If you'd like to write one of these docs, pick one from the list below
2. Then click on this URL to check what existing content can be repurposed in the article you're writing: https://airtable.com/shrU9erBeq1lhDy1Z
3. Then, open a PR with your article and mention this Issue Content migration overview issue #8103 in the PR description!

Note -- These docs may be in one of three states:

1. No doc exists yet (no corresponding file/page exists)
2. A stub article exists (the file is created and needs to be filled out)
3. A doc exists, but there is additional content we've identified that could possibly be used to make it better.

Sourcing

• Sourcing from Netlify CMS
• Sourcing from Drupal* Content migration - fill out "Sourcing from Drupal" stub article #8740
• Sourcing from WordPress* Content migration - fill out "Sourcing from WordPress" stub article #8742
• Sourcing from Contentful* Content migration - fill out "Sourcing from Contentful" stub article #8741
• Sourcing from the filesystem* Content migration - fill out "Sourcing from the filesystem" stub article #8730

Deploying

• Deploying to S3/Cloudfront
• Deploying to Netlify
• Deploying to Aerobatic Content migration - add "Deploying to Aerobatic" doc #8736
• Deploying to Heroku Add deploying-to-heroku.md #8721 (PR)
• Deploying to Now Content migration - add "Deploying to Now" doc #8737
• Deploying to GitLab Pages Content migration - add "Deploying to GitLab Pages" doc #8738

Hosting

• Deploying & Hosting (overview)
• Hosting on Netlify Content migration - create Hosting on Netlify doc #8844

Styling

• CSS Modules*
• Component CSS* Content migration - fill out "Component CSS" stub article in the docs #8726
• Creating global styles
• Typography.js*
• PostCSS* Content migration - fill out "PostCSS" stub article in the docs #8839

Building pages

Building a page with a GraphQL query (Duplicative. Already exists)
Rendering sidebar navigation dynamically (New doc, not migration)

• Creating and modifying pages
• Creating slugs for pages* Content migration - fill out "Creating slugs for pages" stub article #8727
• Layout components Content migration - create Layout Components doc #8845
• Programmatically create pages from data* Content migration - fill out "Programmatically create pages from data" stub article in the docs #8841 (PR
  under review)

Performance + Optimization

• using gatsby-image to prevent image bloat
• Progressive web app (PWA)
• Performance (overview)
• Lighthouse audit*
• Caching
• Using Service Workers With Gatsby Content migration - create "Using service workers with Gatsby" doc #8849
• Optimizing plugins with Guess.js* Content migration - create Optimizing site performance with Guess.js doc #8846 (PR in progess)
  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

• Plugins (overview) [v2] docs "Plugins" overview #7229 (PR)

Headless CMS

• Headless CMS (overview) feat: headless CMS overview #7292 (PR)

GraphQL

• Introducing GraphiQL*
• Querying data with GraphQL (overview)

Process

How to submit a PR*

• RFC process*
• v1 release notes*
• Submit to Plugin Library Content migration - create "Submit to Plugin Library" article in the docs #8843
• Project Structure: Repos, Folders, File Naming Conventions (closed in [docs][folder-structure] Added typical gatsby specific folder and fil… #8405)
• How to run a Gatsby workshop* Content migration - create "How to run a Gatsby workshop" doc #8847
  How to pitch Gatsby* (hold, needs clarification; missing in airtable)

Testing

[ ] Test configuration with Gatsby (hold, needs clarification; not scoped narrowly enough, all external sources)

Misc

Interactive pages* #8739

• Commands (Gatsby CLI)*
• Gatsby + markdown (doc)
• How Gatsby works with GitHub pages
• Adding search
• Linking between pages* Linking between pages doc #8626 (PR)
• Using Fragments Content migration - create "Using fragments" article #8834
• Making a site with user authentication* Authentication tutorial #9179 (PR in progress)
• Gatsby i18n Content migration - fill out "Gatsby i18n" stub article #8716
• Static folder* Content migration - fill out "Static Folder" stub #9222
• gatsby-source-filesystem programmatic import*
• Importing single files* (hold, needs clarification; AR: imo, the identified content makes more sense on the page it's on)
• Dropping images into static folders* (hold, needs clarification; not sure this is distinct enough from "static folder" to warrant separation)
• Importing media content* (hold, needs clarification; not scoped narrowly enough, all external sources)

Motivation

We are doing this to bring valuable content into the docs so that it is more centralized, maintainable, and discoverable.

[shannonbux]

@calcsam

[didacta]

Deploying to S3/Cloudfront

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!

Getting Started - Gatsby

First, we’ll want to create a new Gatsby project. If you don’t already
have Gatsby installed, install it:

npm install - global gatsby-cli

Next, we’ll create a new Gatsby site:

gatsby new my-gatsby-site

Finally, change into the new site directory:

cd my-gatsby-site

Getting Started - AWS Amplify

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:

npm i -g @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

• Choose your default editor: (for me, this is Visual Studio Code)
• Please choose the type of app that you’re building: javascript
• What JavaScript framework are you using: react
• Source Directory Path: src
• Distribution Directory Path: public
• Build Command: npm run-script build
• Start Command: npm run-script develop
• Do you want to use an AWS profile? Y
• Please choose the profile you want to use: default

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:

• Select the environment setup: DEV
  -hosting bucket name: gatsbyproj-20180808112129-hosting-bucket (or type whatever you’d like the bucket name to be)

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:

• Are you sure you want to continue? Y

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:

1. Amplify runs npm run build to build a new distribution of your app
2. A new S3 bucket is created in your AWS account
3. All code in the public directory is uploaded to the S3 bucket

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.

[shannonbux]

Hi @didacta! Would you mind opening a PR and mentioned this issue #8103 in the PR description to add the doc you added above?