search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.19k stars 10.33k forks source link

Content migration overview issue #8103

Closed shannonbux closed 5 years ago

shannonbux commented 6 years ago

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 #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

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

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* #8739

Motivation

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

shannonbux commented 6 years ago

@calcsam

didacta commented 6 years ago

Deploying to S3/Cloudfront

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:

```language-sh npm install - global gatsby-cli ```

Next, we’ll create a new Gatsby site:

```language-sh gatsby new my-gatsby-site ```

Finally, change into the new site directory:

```language-sh 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:

```language-sh 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

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:

  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 commented 6 years ago

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

ghost commented 5 years ago

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.

OrthoDex commented 5 years ago

Hi @shannonbux! I'll make a PR for the Deploying to Heroku doc.

jkjustjoshing commented 5 years ago

I'm working on the "Using Fragments" section, should have a PR in the next 24-36 hours.

dougajmcdonald commented 5 years ago

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

shannonbux commented 5 years ago

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/)

CanRau commented 5 years ago

Brand guidelines/press kit page (https://github.com/gatsbyjs/gatsby/issues/4150) could maybe go on the list, too?

dougajmcdonald commented 5 years ago

@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?

amberleyromo commented 5 years ago

@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

amberleyromo commented 5 years ago

@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.

gatsbot[bot] commented 5 years ago

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!

gatsbot[bot] commented 5 years ago

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!