New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content migration overview issue #8103

Open
shannonbux opened this Issue Sep 13, 2018 · 12 comments

Comments

Projects
None yet
@shannonbux
Collaborator

shannonbux commented Sep 13, 2018

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

  • Sourcing from Netlify CMS
  • Sourcing from Drupal* #8740
  • Sourcing from WordPress* #8742
  • Sourcing from Contentful* #8741
  • Sourcing from the filesystem* #8730

Deploying

  • Deploying to S3/Cloudfront
  • Deploying to Netlify
  • Deploying to Aerobatic #8736
  • Deploying to Heroku #8721 (PR)
  • Deploying to Now #8737
  • Deploying to GitLab Pages #8738

Hosting

  • Deploying & Hosting (overview)
  • Hosting on Netlify #8844

Styling

  • CSS Modules*
  • Component CSS* #8726
  • Creating global styles
  • Typography.js*
  • PostCSS* #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* #8727
  • Layout components #8845
  • Programmatically create pages from data* #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 #8849
  • Optimizing plugins with Guess.js* #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) #7229 (PR)

Headless CMS

  • 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 #8843
  • Project Structure: Repos, Folders, File Naming Conventions (closed in #8405)
  • How to run a Gatsby workshop* #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* #8626 (PR)
  • Using Fragments #8834
  • Making a site with user authentication* #9179 (PR in progress)
  • Gatsby i18n #8716
  • Static folder* #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

This comment has been minimized.

Collaborator

shannonbux commented Sep 13, 2018

@didacta

This comment was marked as off-topic.

didacta commented Sep 13, 2018

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:

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.

AttilaTheHen added a commit to AttilaTheHen/gatsby that referenced this issue Sep 13, 2018

Create using-gatsby-image.md
Issue gatsbyjs#8103: This is for the second task, "using gatsby-image to prevent image bloat". I did my best to make sure the links from the original article were still present.

Not sure how to navigate the fact that in the original article, it's specifically Kyle talking, so right now everything's still in first-person. I also cut the last line, which was leading to the next section of the article so wouldn't be relevant here (unless I should have included that next section as well?).

Let me know if there's anything you'd like me to change - this is my first-ever contribution to an open source project (currently in a web dev bootcamp), so I'm sorry if I screwed anything up!
@shannonbux

This comment has been minimized.

Collaborator

shannonbux commented Sep 13, 2018

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

KyleAMathews added a commit that referenced this issue Sep 19, 2018

Create using-gatsby-image.md (#8131)
* Create using-gatsby-image.md

Issue #8103: This is for the second task, "using gatsby-image to prevent image bloat". I did my best to make sure the links from the original article were still present.

Not sure how to navigate the fact that in the original article, it's specifically Kyle talking, so right now everything's still in first-person. I also cut the last line, which was leading to the next section of the article so wouldn't be relevant here (unless I should have included that next section as well?).

Let me know if there's anything you'd like me to change - this is my first-ever contribution to an open source project (currently in a web dev bootcamp), so I'm sorry if I screwed anything up!

* Update using-gatsby-image.md

Updated with suggested changes!

* just added one more link

* fixes

@kakadiadarpan kakadiadarpan added no triage and removed no triage labels Sep 20, 2018

jonathanvoelkle added a commit to jonathanvoelkle/gatsby that referenced this issue Sep 21, 2018

Create deploy-to-netlify.md
Issue gatsbyjs#8103: this is for the "Deploy using Netlify". I tried to write a short beginner-friendly easy to follow guide for using Gatsby with Netlify.

The "Getting Started - Netlify" is copy-and-pasted of the "Deploy to S3" site, 
the introduction from the original "Deploy and Build" page.

calcsam added a commit that referenced this issue Sep 23, 2018

Create deploying-to-netlify.md (#8406)
Issue #8103: this is for the "Deploy using Netlify". I tried to write a short beginner-friendly easy to follow guide for using Gatsby with Netlify.

The "Getting Started - Netlify" is copy-and-pasted of the "Deploy to S3" site, 
the introduction from the original "Deploy and Build" page.

I don't see any need for an additional "Hosting on Netlify" article.

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->

shannonbux added a commit that referenced this issue Sep 25, 2018

shannonbux added a commit that referenced this issue Sep 25, 2018

Rfc process doc (#8537)
* #8103 rfc process doc draft

* simplified headers

oorestisime added a commit to oorestisime/gatsby that referenced this issue Sep 28, 2018

Create deploying-to-netlify.md (gatsbyjs#8406)
Issue gatsbyjs#8103: this is for the "Deploy using Netlify". I tried to write a short beginner-friendly easy to follow guide for using Gatsby with Netlify.

The "Getting Started - Netlify" is copy-and-pasted of the "Deploy to S3" site, 
the introduction from the original "Deploy and Build" page.

I don't see any need for an additional "Hosting on Netlify" article.

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->
@cardiv

This comment has been minimized.

Member

cardiv commented Oct 2, 2018

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

This comment has been minimized.

Contributor

OrthoDex commented Oct 2, 2018

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

@shannonbux

This comment has been minimized.

Collaborator

shannonbux commented Oct 5, 2018

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

This comment has been minimized.

Contributor

CanRau commented Oct 5, 2018

Brand guidelines/press kit page (#4150) could maybe go on the list, too?

@dougajmcdonald

This comment has been minimized.

Contributor

dougajmcdonald commented Oct 5, 2018

@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

This comment has been minimized.

Member

amberleyromo commented Oct 5, 2018

@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

This comment has been minimized.

Member

amberleyromo commented Oct 5, 2018

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

shannonbux added a commit that referenced this issue Oct 19, 2018

Delete doc since it was broken into smaller docs
This is a proposal to delete this doc now that we have broken all the deployment options into separate docs and I just added them to the sidebar. If this PR gets merged I'll also delete this doc from the sidebar.

Taken from #8103: 

### Deploying
- [x] Deploying to S3/Cloudfront
- [x] Deploying to Netlify
- [x] Deploying to Aerobatic #8736
- [x] Deploying to Heroku #8721 (PR)
- [x] Deploying to Now #8737
- [x] Deploying to GitLab Pages #8738

shannonbux added a commit that referenced this issue Oct 22, 2018

Delete doc since it was broken into smaller docs (#9262)
This is a proposal to delete this doc now that we have broken all the deployment options into separate docs and I just added them to the sidebar (commit 1af244b). If this PR gets merged I'll also delete this doc from the sidebar.

Taken from #8103: 

### Deploying
- [x] Deploying to S3/Cloudfront
- [x] Deploying to Netlify
- [x] Deploying to Aerobatic #8736
- [x] Deploying to Heroku #8721 (PR)
- [x] Deploying to Now #8737
- [x] Deploying to GitLab Pages #8738

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->

shannonbux added a commit that referenced this issue Oct 24, 2018

Authentication tutorial (#9179)
Regarding #8103 

Starting the authentication tutorial. (Misc/Making a site with user authentication*)

Mostly setting intro and starting to work into content.

cc @shannonbux

shannonbux added a commit that referenced this issue Oct 30, 2018

Fill out "Sourcing from the filesystem" stub article (#8777)
This issue (#8730) is part of the content migration project [#8103](#8103), which is meant to take existing content and repurpose it so it's easier to find in the docs.

jedrichards added a commit to jedrichards/gatsby that referenced this issue Nov 1, 2018

Delete doc since it was broken into smaller docs (gatsbyjs#9262)
This is a proposal to delete this doc now that we have broken all the deployment options into separate docs and I just added them to the sidebar (commit gatsbyjs@1af244b). If this PR gets merged I'll also delete this doc from the sidebar.

Taken from gatsbyjs#8103: 

### Deploying
- [x] Deploying to S3/Cloudfront
- [x] Deploying to Netlify
- [x] Deploying to Aerobatic gatsbyjs#8736
- [x] Deploying to Heroku gatsbyjs#8721 (PR)
- [x] Deploying to Now gatsbyjs#8737
- [x] Deploying to GitLab Pages gatsbyjs#8738

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->

jedrichards added a commit to jedrichards/gatsby that referenced this issue Nov 1, 2018

Authentication tutorial (gatsbyjs#9179)
Regarding gatsbyjs#8103 

Starting the authentication tutorial. (Misc/Making a site with user authentication*)

Mostly setting intro and starting to work into content.

cc @shannonbux

jedrichards added a commit to jedrichards/gatsby that referenced this issue Nov 1, 2018

Fill out "Sourcing from the filesystem" stub article (gatsbyjs#8777)
This issue (gatsbyjs#8730) is part of the content migration project [gatsbyjs#8103](gatsbyjs#8103), which is meant to take existing content and repurpose it so it's easier to find in the docs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment