Skip to content
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

Glossary, encyclopedia: Add Infrastructure As Code article. #23431

Merged
merged 7 commits into from
May 5, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/docs/glossary.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,10 @@ Once a site has been [built](#build) by Gatsby and loaded in a web browser, [cli

As part of its data layer and [build](#build) process, Gatsby will automatically **infer** a [schema](#schema), or type-based structure, based on available data sources (e.g. Markdown file nodes, WordPress posts, etc.). More control can be gained over this structure by using Gatsby's [Schema Customization API](/docs/schema-customization/).

### [Infrastructure As Code](/docs/glossary/infrastructure-as-code/)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### [Infrastructure As Code](/docs/glossary/infrastructure-as-code/)
### [Infrastructure as Code](/docs/glossary/infrastructure-as-code/)

I think we can refer to this as Infrastructure as Code or IaC throughout. As long as "as" isn't capitalized and we're consistent all the way through, I'm good.


Infrastructure As Code is the practice of using configuration files and scripts to automate the process of setting up your development, testing, and production environments.

## J

### [JAMStack](/docs/glossary/jamstack)
Expand Down
84 changes: 84 additions & 0 deletions docs/docs/glossary/infrastructure-as-code.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
title: Infrastructure as Code
disableTableOfContents: true
---

Learn what <q>Infrastructure as Code</q> means, and how you can use can use code to standardize and automate your Gatsby site.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Learn what <q>Infrastructure as Code</q> means, and how you can use can use code to standardize and automate your Gatsby site.
Learn what <q>Infrastructure as Code</q> means, and how you can use code to standardize and automate your Gatsby site.


## What is <q>Infrastructure As Code?</q>

_Infrastructure As Code_ is the practice of managing your development, testing, and production environments using configuration files or scripts. Provisioning and configuring environments individually can introduce errors or inconsistencies. You may, for example, find yourself running different versions of Node on your laptop and your production servers. Infrastructure As Code mimimizes this kind of drift and lets you automate the process of provisioning environments.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
_Infrastructure As Code_ is the practice of managing your development, testing, and production environments using configuration files or scripts. Provisioning and configuring environments individually can introduce errors or inconsistencies. You may, for example, find yourself running different versions of Node on your laptop and your production servers. Infrastructure As Code mimimizes this kind of drift and lets you automate the process of provisioning environments.
_Infrastructure As Code_ is the practice of managing your development, testing, and production environments using configuration files or scripts. Provisioning and configuring environments individually can introduce errors or inconsistencies. You may, for example, find yourself running different versions of Node on your laptop and your production servers. Infrastructure As Code minimizes this kind of drift and lets you automate the process of provisioning environments.


Your configuration file describes what resources your project requires. If you're building an API, for example, you might create a configuration file that says, "Please install Node 12.16.2, npm 6.14.4, Express 4.17.1, and PostgreSQL 12.2 for Ubuntu Linux." For a Gatsby project, your configuration file may add plugins and themes.

Configuration files, like other code files, are text. That means you can use version control software to store them and track changes to the environment. In short, infrastructure as code:

- Creates consistent environments.
- Saves time that would otherwise be spent setting up environments.
- Reduces the risk of errors caused by mismatched environments.
- Makes it easy to automate tasks.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than "easy" maybe a more polished version of "sets you up to automate tasks"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would "simplifies the automation of tasks" or "simplifies task automation" work?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Went with "Lays the groundwork for..."


## Automating Gatsby site development with Gatsby Recipes

[Gatsby Recipes](https://www.gatsbyjs.org/blog/2020-04-15-announcing-gatsby-recipes/) applies the infrastructure as code concept to front-end development. With Gatsby Recipes, you can automate common site building tasks, such as adding a plugin or test suite.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
[Gatsby Recipes](https://www.gatsbyjs.org/blog/2020-04-15-announcing-gatsby-recipes/) applies the infrastructure as code concept to front-end development. With Gatsby Recipes, you can automate common site building tasks, such as adding a plugin or test suite.
[Gatsby Recipes](/blog/2020-04-15-announcing-gatsby-recipes/) applies the infrastructure as code concept to front-end development. With Gatsby Recipes, you can automate common site building tasks, such as adding a plugin or test suite.


To get started with Gatsby Recipes, upgrade to the latest version of Gatsby and the Gatsby CLI.

```shell
npm install -g gatsby-cli@latest
npm install gatsby@latest
```

You can see the list of available recipes by using `gatsby recipes`. Use your up or down arrow keys to select a recipe, and press the _Enter_ or _Return_ key to run it.

![A screenshot that contains a list of Gatsby recipes.](https://www.gatsbyjs.org/static/abf1101318022126e896af6222fb1cb7/b04e4/recipes-screenshot.png)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would make infrastructure-as-code a folder and copy this image into it. This file would then be index.md in the same folder.


Gatsby Recipes use [MDX](/docs/glossary/mdx/). They're a readable mix of Markdown and React. MDX is an extension of [Markdown](/docs/glossary/markdown/) that lets you use [JSX](/docs/glossary#jsx) in Markdown-formatted documents. Here's the [Styled Components](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/recipes/styled-components.mdx) recipe.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Gatsby Recipes use [MDX](/docs/glossary/mdx/). They're a readable mix of Markdown and React. MDX is an extension of [Markdown](/docs/glossary/markdown/) that lets you use [JSX](/docs/glossary#jsx) in Markdown-formatted documents. Here's the [Styled Components](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/recipes/styled-components.mdx) recipe.
Gatsby Recipes use [MDX](/docs/glossary/mdx/). They're a readable mix of Markdown and React. MDX is an extension of [Markdown](/docs/glossary/markdown/) that lets you use [JSX](/docs/glossary#jsx) in Markdown-formatted documents. As an example, check out the [Styled Components recipe](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/recipes/styled-components.mdx).


```markdown
# Setup Styled Components

[Styled Components](https://styled-components.com/) is visual primitives for the component age.
Use the best bits of ES6 and CSS to style your apps without stress 💅

---

Install necessary NPM packages

<NPMPackage name="gatsby-plugin-styled-components" />
<NPMPackage name="styled-components" />
<NPMPackage name="babel-plugin-styled-components" />

---

Install the Styled Components plugin in gatsby-config.js

<GatsbyPlugin name="gatsby-plugin-styled-components" />

---

Sweet, now it's ready to go.

Let's also write out an example page you can use to play
with Styled Components.

<File
path="src/pages/styled-components-example.js"
content="https://gist.githubusercontent.com/KyleAMathews/34541b87c4194ba2290eedbe8a0b1fe0/raw/dba4d3ffecb5f2a3a36e0e017387185a9835c685/styled-components-example.js"
/>

---

Read more about Styled Components on the official docs site:

https://styled-components.com/
```

You can also write and run your own recipes, or run recipes that were created by and shared with the community. Pass the path or URL of the recipe as an arguement. For example, to run a local Gatsby recipe, use `gatsby recipes ./name-of-your-recipe.mdx`. To run a remote recipe, use `gatsby recipes https://example.com/community-made-recipe.mdx`.

Gatsby Recipes help you save time and reduce configuration errors by automating the set up process.

## Learn more

- [Announcing Gatsby Recipes](https://www.gatsbyjs.org/blog/2020-04-15-announcing-gatsby-recipes/)
- [Developing Recipes](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#developing-recipes) from the Gatsby repository
2 changes: 2 additions & 0 deletions www/src/data/sidebars/doc-links.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -778,6 +778,8 @@
link: /docs/glossary/hydration/
- title: JAMStack
link: /docs/glossary/jamstack/
- title: Infrastructure As Code
link: /docs/glossary/infrastructure-as-code/
- title: Markdown
link: /docs/glossary/markdown/
- title: MDX
Expand Down