diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md index fe4fad120434f..91086c53d6293 100644 --- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md +++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md @@ -23,7 +23,7 @@ mostly develop with Node). I tried to develop my blog inside a Docker container, but this was extremely slow. Some weeks ago, one of my colleagues at work told me about -[Gatsby](https://www.gatsbyjs.org) Since I was already learning +[Gatsby](/) Since I was already learning [React](https://reactjs.org/) and had started looking at [GraphQL](http://graphql.org/) (after attending a talk at [Nordic.js](http://nordicjs.com/))—I was very interested in giving it a try. diff --git a/docs/blog/2018-02-16-bright-future-for-the-web/index.md b/docs/blog/2018-02-16-bright-future-for-the-web/index.md index 974a4875246fd..07f4c48b0f11c 100644 --- a/docs/blog/2018-02-16-bright-future-for-the-web/index.md +++ b/docs/blog/2018-02-16-bright-future-for-the-web/index.md @@ -24,7 +24,7 @@ It was for those reasons that I was hesitant to pull the trigger on a static sit One day after airing my grievances about the current state of static site generators on Slack a fellow developer recommend that I check out Gatsby. Gatsby is yet another static site generator but what really set it apart for me was how it was built with [React](https://reactjs.org/) and emphasized a rich plugin system. This was a big plus for me as I was itching to learn more about React and the plugin system alleviated some initial pain that I would have had dealing with mundane tasks. Out of the box you get a fantastic development environment with live reloading that required almost no configuration. With Gatsby specific plugins and React components it can handle pretty much anything you throw at it. -Next came integrating the statically generated site with data stored in a CMS. Again Gatsby was well suited for this and I was able to easily integrate with Contentful via the [gatsby-source-contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/) plugin. Contentful is an example of a headless CMS, meaning that is is not tied to any particular technology or language. Contentful allows you to store content using a pleasant user interface and it can then output the data via an API. Best of all Contentful puts you in the driver seat and lets you define your own content model however you see fit. Think [WordPress Advanced Custom Fields](https://www.advancedcustomfields.com/) on steroids. With the content stored in Contentful Gatsby then uses the Contenful API along with the awesome power of [GraphQL](http://graphql.org/) to query data at build time. Cool stuff! +Next came integrating the statically generated site with data stored in a CMS. Again Gatsby was well suited for this and I was able to easily integrate with Contentful via the [gatsby-source-contentful](/packages/gatsby-source-contentful/) plugin. Contentful is an example of a headless CMS, meaning that is is not tied to any particular technology or language. Contentful allows you to store content using a pleasant user interface and it can then output the data via an API. Best of all Contentful puts you in the driver seat and lets you define your own content model however you see fit. Think [WordPress Advanced Custom Fields](https://www.advancedcustomfields.com/) on steroids. With the content stored in Contentful Gatsby then uses the Contenful API along with the awesome power of [GraphQL](http://graphql.org/) to query data at build time. Cool stuff! The final piece of the puzzle was determining where to host the website. I had recently experimented with Netlify on a somewhat [pointless website for my dog](https://www.doggoforhire.com/) and I was impressed by its ease of use and how they offered a fully featured developer tier for free. In no time I was able to get my Gatsby powered website up and running on Netlify. Then with the help of webhooks I was able to have Contentful tell Netlify to “rebuild” the website whenever a new post was published. Finally with Netlify’s form handling functionality I hooked up a contact form all without a single line of backend code or even a database. diff --git a/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md b/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md index e25f93461b3d1..710a3d015fe34 100644 --- a/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md +++ b/docs/blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md @@ -32,7 +32,7 @@ _Utilize developers to prototype faster_ In order to do user testing, usually user researchers work with designers to construct pixel perfect prototypes of various options, either static or clickable. Constructing and iterating on these artifacts can take days or weeks. -Gatsby makes another option possible. Some Gatsby users report [setting up a production site](https://www.gatsbyjs.org/blog/2018-01-18-how-boston-gov-used-gatsby-to-be-selected-as-an-amazon-hq2-candidate-city/) with live UI that is building and deploying in under an hour. +Gatsby makes another option possible. Some Gatsby users report [setting up a production site](/blog/2018-01-18-how-boston-gov-used-gatsby-to-be-selected-as-an-amazon-hq2-candidate-city/) with live UI that is building and deploying in under an hour. Especially if your organization already uses a React or HTML-based component library, your team may consider bringing in a developer to construct live wireframe-level prototypes. This may enable you to accelerate the user research process, start the development process with a working prototype rather than from scratch, and ultimately let you arrive at a better version of your site. @@ -50,7 +50,7 @@ Gatsby's extensible system of API hooks, tight integration with static hosts lik _Use development pages to communicate project status & collaborate with designers_ -One option some teams have found powerful is to create static page components within Gatsby to [handle necessary parts of the development/QA workflow](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#1-pre-integration-qa). +One option some teams have found powerful is to create static page components within Gatsby to [handle necessary parts of the development/QA workflow](/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#1-pre-integration-qa). This could include: @@ -60,4 +60,4 @@ This could include: _Use branch and pull request-based artifacts to collaborate on specific pieces of work_ -Using the [branch and pull request-based artifacts](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#building-staging-urls) automatically created by a service like Netlify for collaboration between developers, designers, and QA. Because generated artifacts are static, pull request collaboration workflows are resilient to underlying content schema changes, such as field deletion, that might break a typical CMS development environment. +Using the [branch and pull request-based artifacts](/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#building-staging-urls) automatically created by a service like Netlify for collaboration between developers, designers, and QA. Because generated artifacts are static, pull request collaboration workflows are resilient to underlying content schema changes, such as field deletion, that might break a typical CMS development environment. diff --git a/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md b/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md index c910466352a0d..ba66b97aa71c7 100644 --- a/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md +++ b/docs/blog/2018-04-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/index.md @@ -70,7 +70,7 @@ perfect fit for a number of reasons: could have achieved this level of optimization on our own in this timeframe. 1. A growing plugin library that allows for easy integrations that utilize Gatsby’s GraphQL data query system. With these we could easily use things like - [gatsby-source-contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/?=conten) + [gatsby-source-contentful](/packages/gatsby-source-contentful/?=conten) and [gatsby-plugin-i18n](https://github.com/angeloocana/gatsby-plugin-i18n). 1. A growing community of developers sharing resources and best practices. Credit is due to [mccrodp](https://github.com/mccrodp) for setting up @@ -162,7 +162,7 @@ type, you can simply drag-n-drop things in Contentful! From there, we had to teach GatsbyJS how to properly render each page based on pathway. We did this by implementing the `createPages` function in the [Gatsby -Node API](https://www.gatsbyjs.org/docs/node-apis/). For each Housing Court Page +Node API](/docs/node-apis/). For each Housing Court Page (also per language!), Gatsby creates 6 different pages based on the pathways. While our solution had to account for some [limitations in GraphQL](https://github.com/facebook/graphql/issues/414), everything wound up diff --git a/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md b/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md index ded903381ca28..17d22faa21dd0 100644 --- a/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md +++ b/docs/blog/2018-06-07-build-a-gatsby-blog-using-the-cosmic-js-source-plugin/index.md @@ -356,7 +356,7 @@ export const pageQuery = graphql` ` ``` -That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each post needs a specific URL. So, we are going to inform Gatsby about the new URLs we need using the [`createPages` API](https://www.gatsbyjs.org/docs/node-apis/#createPages). +That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each post needs a specific URL. So, we are going to inform Gatsby about the new URLs we need using the [`createPages` API](/docs/node-apis/#createPages). Path: `gatsby-node.js` diff --git a/docs/blog/2018-07-07-the-gatsby-plugin-page-creator/index.md b/docs/blog/2018-07-07-the-gatsby-plugin-page-creator/index.md index ffc26463e4df8..d783b59efae30 100644 --- a/docs/blog/2018-07-07-the-gatsby-plugin-page-creator/index.md +++ b/docs/blog/2018-07-07-the-gatsby-plugin-page-creator/index.md @@ -65,7 +65,7 @@ Library. After a few weeks of code reviews the # How you can use this plugin You can find -[`gatsby-plugin-page-creator`](https://www.gatsbyjs.org/packages/gatsby-plugin-page-creator/?=page-creator) +[`gatsby-plugin-page-creator`](/packages/gatsby-plugin-page-creator/?=page-creator) in the plugin library. Use `yarn add gatsby-plugin-page-creator` to add this into your project. In `gatsby-config.js`, use a JSON object to use the plugin, making sure to add the required path option with your desired directory diff --git a/docs/blog/2018-08-13-using-decoupled-drupal-with-gatsby/index.md b/docs/blog/2018-08-13-using-decoupled-drupal-with-gatsby/index.md index da6523756d5b8..73e3087a7c78a 100644 --- a/docs/blog/2018-08-13-using-decoupled-drupal-with-gatsby/index.md +++ b/docs/blog/2018-08-13-using-decoupled-drupal-with-gatsby/index.md @@ -11,7 +11,7 @@ Kyle Mathews is presenting on “Gatsby + Drupal” at [Decoupled Drupal Days NY (Hint: it’s about how nicely Gatsby and Drupal work together!) -Take a look at the source code of [the official Gatsby + Drupal example site](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal) or [see it live](https://using-drupal.gatsbyjs.org/). Gatsby co-founder, Kyle Mathews, has a [long history with Drupal](https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/#drupal-and-the-lamp-stack) and built this example site in Gatsby’s early days: +Take a look at the source code of [the official Gatsby + Drupal example site](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal) or [see it live](https://using-drupal.gatsbyjs.org/). Gatsby co-founder, Kyle Mathews, has a [long history with Drupal](/blog/2018-05-24-launching-new-gatsby-company/#drupal-and-the-lamp-stack) and built this example site in Gatsby’s early days: ![Screenshot of decoupled Drupal site build with Gatsby](umami-site.png) @@ -25,7 +25,7 @@ It only takes a few steps to use Gatsby with Drupal as a headless CMS (also know Hooking up Gatsby to a new or existing Drupal site takes just a few steps: -- Add the [`gatsby-source-drupal` plugin](https://www.gatsbyjs.org/packages/gatsby-source-drupal/) to your Gatsby site +- Add the [`gatsby-source-drupal` plugin](/packages/gatsby-source-drupal/) to your Gatsby site - Configure the plugin with your Drupal credentials & hosted URL - Access all your Drupal data using GraphQL queries diff --git a/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md b/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md index 05d7b4381b37d..624c88c41c575 100644 --- a/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md +++ b/docs/blog/2018-09-25-announcing-graphql-stitching-support/index.md @@ -19,7 +19,7 @@ Watching the spread of GraphQL has all been incredibly exciting to watch and a f But unfortunately, these new GraphQL APIs have been awkward to use inside Gatsby as you first had to wrap the API inside a Gatsby source plugin before you could query the data from your components. -To fix this, [Gatsby 2.0](/blog/2018-09-17-gatsby-v2/) adds experimental support for schema stitching of external GraphQL APIs to its internal schema. Schema stitching allows merging multiple GraphQL schemas together, which greatly simplifies working with third-party GraphQL APIs. Along with low-level support for stitching in general, we are shipping an official [gatsby-source-graphql](https://www.gatsbyjs.org/packages/gatsby-source-graphql/) plugin, which enables connecting to an arbitrary GraphQL API with just a few lines of configuration! +To fix this, [Gatsby 2.0](/blog/2018-09-17-gatsby-v2/) adds experimental support for schema stitching of external GraphQL APIs to its internal schema. Schema stitching allows merging multiple GraphQL schemas together, which greatly simplifies working with third-party GraphQL APIs. Along with low-level support for stitching in general, we are shipping an official [gatsby-source-graphql](/packages/gatsby-source-graphql/) plugin, which enables connecting to an arbitrary GraphQL API with just a few lines of configuration! # Getting started diff --git a/docs/blog/2018-1-18-strapi-and-gatsby/index.md b/docs/blog/2018-1-18-strapi-and-gatsby/index.md index c24519eb954a0..3c061c1945b0e 100644 --- a/docs/blog/2018-1-18-strapi-and-gatsby/index.md +++ b/docs/blog/2018-1-18-strapi-and-gatsby/index.md @@ -19,13 +19,13 @@ Static websites and PWA both have strong advantages which make us crave for a wa ### What is Gatsby? -[Gatsby](https://www.gatsbyjs.org) is a _blazing-fast **website framework** for React_. It allows developers to build React based websites within minutes. Whether you want to develop a blog or a corporate website, Gatsby will fill your needs. +[Gatsby](/) is a _blazing-fast **website framework** for React_. It allows developers to build React based websites within minutes. Whether you want to develop a blog or a corporate website, Gatsby will fill your needs. -[![Gatsby Logo](logo-gatsby.jpg)](https://www.gatsbyjs.org) +[![Gatsby Logo](logo-gatsby.jpg)](/) -Because it is based on React, the website pages are never reloaded which makes the generated website super fast. A large set of plugins is available to let developers save time and get data from any source (Markdown files, CMS, etc.). Gatsby is strongly based on the ["node" interface](https://www.gatsbyjs.org/docs/node-interface/), which is the center of Gatsby's data system. +Because it is based on React, the website pages are never reloaded which makes the generated website super fast. A large set of plugins is available to let developers save time and get data from any source (Markdown files, CMS, etc.). Gatsby is strongly based on the ["node" interface](/docs/node-interface/), which is the center of Gatsby's data system. -Created by [Kyle Mathews](https://twitter.com/kylemathews), the project has been officially [released in July 2017](https://www.gatsbyjs.org/blog/gatsby-v1/) and is already [used by tens of companies](https://github.com/gatsbyjs/gatsby#showcase). +Created by [Kyle Mathews](https://twitter.com/kylemathews), the project has been officially [released in July 2017](/blog/gatsby-v1/) and is already [used by tens of companies](https://github.com/gatsbyjs/gatsby#showcase). ### What is Strapi? @@ -169,7 +169,7 @@ When you manage a static website, your data can come from different sources: Mar Gatsby understands this pretty well. So its creators decided to build a specific and independent layer: the data layer. This entire system is strongly powered by [GraphQL](http://graphql.org). -To connect Gatsby to a new source of data, you have to [develop a new source plugin](https://www.gatsbyjs.org/docs/source-plugin-tutorial/). Fortunately, [several source plugins already exist](https://www.gatsbyjs.org/docs/plugins), so one of them should fill your needs. +To connect Gatsby to a new source of data, you have to [develop a new source plugin](/docs/source-plugin-tutorial/). Fortunately, [several source plugins already exist](/docs/plugins), so one of them should fill your needs. In this example, we are using Strapi. Obviously, we are going to need a source plugin for Strapi APIs. Good news: [we have built it for you](https://github.com/strapi/gatsby-source-strapi)! @@ -388,7 +388,7 @@ export const query = graphql` ` ``` -That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each article needs a specific URL. So, we are going to inform Gatsby about the new URLs we need thanks to the [`createPage` function](https://www.gatsbyjs.org/docs/creating-and-modifying-pages). +That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each article needs a specific URL. So, we are going to inform Gatsby about the new URLs we need thanks to the [`createPage` function](/docs/creating-and-modifying-pages). First, we are going to code a new function called `makeRequest` to execute the GraphQL request. Then, we export a function named `createPages` in which we get the list of articles and create a page for each of them. Here is the result: @@ -596,7 +596,7 @@ Since the content is managed by Strapi, the authors can write article through a Feel free to continue this project to discover both Gatsby and Strapi advantages. Here are some features you can add: list of authors, article's categories, and comment system with the Strapi API or Disqus. You can also create other kind of websites (e-commerce shop, corporate website, etc.). -When your project is achieved, you will probably want to deploy it. The static website generated by Gatsby can [easily be published on storage providers](https://www.gatsbyjs.org/docs/deploying-and-hosting): Netlify, S3/Cloudfront, GitHub pages, GitLab pages, Heroku, etc. The Strapi API is nothing else than a simple Node.js API, so it can be hosted on Heroku or any Linux instance that has Node.js installed. +When your project is achieved, you will probably want to deploy it. The static website generated by Gatsby can [easily be published on storage providers](/docs/deploying-and-hosting): Netlify, S3/Cloudfront, GitHub pages, GitLab pages, Heroku, etc. The Strapi API is nothing else than a simple Node.js API, so it can be hosted on Heroku or any Linux instance that has Node.js installed. The [code source of this tutorial is available on GitHub](https://github.com/strapi/strapi-examples/tree/master/gatsby-strapi-tutorial). To see it live, clone the repository, run `npm run setup`, start the Strapi server (`cd api && strapi start`) and the Gatsby server (`cd blog && npm run develop`). diff --git a/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md b/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md index 6c792f8ae8bf6..b3562609daf34 100644 --- a/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md +++ b/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md @@ -35,7 +35,7 @@ Our Hacktoberfest goals are: 1. To provide a range of issues with a clearly defined scope, with minimal background knowledge needed outside of the issue description. 2. To make contributing to Gatsby as welcoming, friendly, and accessible as we can -- especially to first-time contributors. -Plus, if you’ve never contributed to Gatsby before, after your very first PR is merged, you can redeem some [free Gatsby swag](https://www.gatsbyjs.org/contributing/contributor-swag/)! (_Note: Not Hacktoberfest related. We do this always!_) +Plus, if you’ve never contributed to Gatsby before, after your very first PR is merged, you can redeem some [free Gatsby swag](/contributing/contributor-swag/)! (_Note: Not Hacktoberfest related. We do this always!_)

Thanks @gatsbyjs for the t-shirt! If there are any developers out there that haven’t tried out Gatsby yet here is my dog Birch silently judging you. 😉 Trust me, it’s awesome. pic.twitter.com/THDSmhKdBb

— Ryan Wiemer (@ryanwiemer) July 25, 2018
diff --git a/docs/blog/2018-10-18-creating-compelling-content-experiences/index.md b/docs/blog/2018-10-18-creating-compelling-content-experiences/index.md index fceb9ed905638..3af4676cdbeef 100644 --- a/docs/blog/2018-10-18-creating-compelling-content-experiences/index.md +++ b/docs/blog/2018-10-18-creating-compelling-content-experiences/index.md @@ -11,7 +11,7 @@ In the last three sections, we’ve described the different facets of how to cre While these trends target different stakeholders, they’re deeply interrelated. That’s because to adopt a new architecture in one area, you often need to adopt new technologies in the other two. -With users after user writing headlines like "[Gatsby + Contentful + Netlify (and Algolia)](https://www.gatsbyjs.org/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/)" -- grouping a React-based website framework, a headless CMS, a static host + CDN, and a search provider -- it’s clear these these technologies are meant to be used together. +With users after user writing headlines like "[Gatsby + Contentful + Netlify (and Algolia)](/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/)" -- grouping a React-based website framework, a headless CMS, a static host + CDN, and a search provider -- it’s clear these these technologies are meant to be used together. Website teams moving to this space have to plan four steps -- one for each category, plus integration. @@ -45,7 +45,7 @@ This allows content teams to replace their heavyweight CMS monolith with their c ### Third, choose a performance strategy -There are two main approaches to performance -- [payload optimization and delivery optimization](https://www.gatsbyjs.org/blog/2018-10-16-why-mobile-performance-is-crucial#how-performance-optimization-works). +There are two main approaches to performance -- [payload optimization and delivery optimization](/blog/2018-10-16-why-mobile-performance-is-crucial#how-performance-optimization-works). Payload optimization involves performance-enhancing development practices. Delivery optimization means compiling websites to static files that can be served from a global CDN, rather than running servers and databases. @@ -53,7 +53,7 @@ Often, to ensure a fast site, you'll need both. To do delivery optimization, you'll need to pick a JAMStack site generator like Hugo or Gatsby. -To do payload optimization, your team will need to implement a [long performance checklist](https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/), or pick a framework such as Gatsby that [performs payload optimization](https://www.gatsbyjs.org/features/#legend) out of the box. +To do payload optimization, your team will need to implement a [long performance checklist](https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/), or pick a framework such as Gatsby that [performs payload optimization](/features/#legend) out of the box. ### Fourth, choose your content mesh diff --git a/docs/blog/2018-10-25-using-gatsby-without-graphql/index.md b/docs/blog/2018-10-25-using-gatsby-without-graphql/index.md index 8c7b189ed83fc..aa65d321eb108 100644 --- a/docs/blog/2018-10-25-using-gatsby-without-graphql/index.md +++ b/docs/blog/2018-10-25-using-gatsby-without-graphql/index.md @@ -27,7 +27,7 @@ Most examples in the Gatsby docs and on the web at large focus on leveraging sou > _[Source plugins](/docs/source-plugin-tutorial/)_ “source” data from remote or local locations into Gatsby nodes, which are then queryable within your Gatsby site using GraphQL. _[Gatsby nodes](/docs/node-interface/)_ are the center of Gatsby’s data handling layer. -We're calling this the **"content mesh"** — the infrastructure layer for a decoupled website. ([Sam Bhagwat](https://twitter.com/calcsam) introduced and explored this concept in his recent five-part series, [The Journey to a Content Mesh](https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh)). +We're calling this the **"content mesh"** — the infrastructure layer for a decoupled website. ([Sam Bhagwat](https://twitter.com/calcsam) introduced and explored this concept in his recent five-part series, [The Journey to a Content Mesh](/blog/2018-10-04-journey-to-the-content-mesh)). **However, you don't _need_ to use source plugins (or create Gatsby nodes) to pull data into a Gatsby site!** In this post we'll explore how to use Gatsby without GraphQL (using "unstructured data"), and some of the pros and cons of doing so. @@ -52,7 +52,7 @@ That's it! #### 1. Use Gatsby's `createPages` API. -`createPages` is a [Gatsby Node API](/docs/node-apis/#createPages). It hooks into a certain point in [Gatsby's bootstrap sequence](https://www.gatsbyjs.org/docs/gatsby-lifecycle-apis/#bootstrap-sequence). +`createPages` is a [Gatsby Node API](/docs/node-apis/#createPages). It hooks into a certain point in [Gatsby's bootstrap sequence](/docs/gatsby-lifecycle-apis/#bootstrap-sequence). By [exporting `createPages`](https://github.com/jlengstorf/gatsby-with-unstructured-data/blob/0a91d87b9d4d24a0e6b04b33cc271e054b7467b6/gatsby-node.js#L21) from our example Gatsby site's `gatsby-node.js` file, we're saying, "at this point in the bootstrapping sequence, run this code". diff --git a/docs/blog/2018-11-01-hacktoberfest-wrapup/index.md b/docs/blog/2018-11-01-hacktoberfest-wrapup/index.md index df5c1727ce011..4e50ca40fffe8 100644 --- a/docs/blog/2018-11-01-hacktoberfest-wrapup/index.md +++ b/docs/blog/2018-11-01-hacktoberfest-wrapup/index.md @@ -87,5 +87,5 @@ We had a great time and learned a lot from this year's Hacktoberfest! Thanks to Check out other posts from this year's Gatsby Hacktoberfest: -- [Hacktoberfest kickoff](https://www.gatsbyjs.org/blog/2018-10-09-hacktoberfest-kickoff/) -- [Uptick in docs contributions for Gatsby Hacktoberfest](https://www.gatsbyjs.org/blog/2018-10-12-uptick-docs-contributions-hacktoberfest/) +- [Hacktoberfest kickoff](/blog/2018-10-09-hacktoberfest-kickoff/) +- [Uptick in docs contributions for Gatsby Hacktoberfest](/blog/2018-10-12-uptick-docs-contributions-hacktoberfest/) diff --git a/docs/blog/2018-12-04-gatsby-analogy/index.md b/docs/blog/2018-12-04-gatsby-analogy/index.md index ead90669b1f8c..430e5a1c337cd 100644 --- a/docs/blog/2018-12-04-gatsby-analogy/index.md +++ b/docs/blog/2018-12-04-gatsby-analogy/index.md @@ -76,7 +76,7 @@ Say you order delivery for dinner. It arrives, you eat. Later, you look at the m ## 5. Consolidate data sourcing and transformations -With Gatsby, your data can be sourced from just about anywhere -- content management systems, Markdown, APIs, databases, etc. A recent series on the Gatsby blog detailed the concept of the “[content mesh](https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/)”: +With Gatsby, your data can be sourced from just about anywhere -- content management systems, Markdown, APIs, databases, etc. A recent series on the Gatsby blog detailed the concept of the “[content mesh](/blog/2018-10-04-journey-to-the-content-mesh/)”: [Gatsby is] the infrastructure layer for a decoupled website. The content mesh stitches together content systems in a modern development environment while optimizing website delivery for performance. diff --git a/docs/blog/2018-12-17-turning-the-static-dynamic/index.md b/docs/blog/2018-12-17-turning-the-static-dynamic/index.md index 608d7c7be1bee..fd461a7793d28 100644 --- a/docs/blog/2018-12-17-turning-the-static-dynamic/index.md +++ b/docs/blog/2018-12-17-turning-the-static-dynamic/index.md @@ -12,17 +12,17 @@ excerpt: Gatsby is great for not only static sites but also traditional web appl > A: Gatsby can be used to build fully dynamic sites, which surprises some people because of it’s label as a “static site generator”. It’s fully equipped to be a powerful alternative to create-react-app and other similar solutions with the addition of easy pre-rendering and perf baked in. — biscarch -Even though Dustin [recently wrote about Gatsby for Apps](https://www.gatsbyjs.org/blog/2018-11-07-gatsby-for-apps/) and open sourced his [Gatsby Mail](https://gatsby-mail.netlify.com/) demo, I do still find people constantly having to explain that Gatsby is "not just for sites". +Even though Dustin [recently wrote about Gatsby for Apps](/blog/2018-11-07-gatsby-for-apps/) and open sourced his [Gatsby Mail](https://gatsby-mail.netlify.com/) demo, I do still find people constantly having to explain that Gatsby is "not just for sites". Today I'd like to show you how you can incrementally add functionality to a Gatsby static site with Netlify Functions, and then add authentication with Netlify Identity to begin a proper Gatsby app. ## Static-Dynamic is a spectrum -Why would you use something like Gatsby over Jekyll or Hugo or one of the [hundreds of Static Site Generators](https://www.staticgen.com/) out there? [There are many reasons](https://www.gatsbyjs.org/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/), but one of the unique selling points is how Gatsby helps you build ["Static Progressive Web Apps"](https://www.gatsbyjs.org/docs/progressive-web-app/#progressive-web-app) with React. +Why would you use something like Gatsby over Jekyll or Hugo or one of the [hundreds of Static Site Generators](https://www.staticgen.com/) out there? [There are many reasons](/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/), but one of the unique selling points is how Gatsby helps you build ["Static Progressive Web Apps"](/docs/progressive-web-app/#progressive-web-app) with React. -[Gatsby's ability to rehydrate](https://www.gatsbyjs.org/docs/production-app/#dom-hydration) (what a delicious word!) the DOM means you can do incredibly dynamic things with Javascript and React that would be much harder with legacy SSG's. +[Gatsby's ability to rehydrate](/docs/production-app/#dom-hydration) (what a delicious word!) the DOM means you can do incredibly dynamic things with Javascript and React that would be much harder with legacy SSG's. -Let's say you have a typical static Gatsby site, like [gatsby-starter-default](https://www.gatsbyjs.org/starters/gatsby-starter-default). You can `npm run build` it, and it spits out a bunch of HTML files. Great! I can host that for free! +Let's say you have a typical static Gatsby site, like [gatsby-starter-default](/starters/gatsby-starter-default). You can `npm run build` it, and it spits out a bunch of HTML files. Great! I can host that for free! Now your client comes to you and asks you to add some custom logic that needs to be executed on the server: diff --git a/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md b/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md index 8c31ddeb1fba2..03f1c834826ab 100644 --- a/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md +++ b/docs/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/index.md @@ -57,7 +57,7 @@ Whenever I code with a new framework or plugin, I like to take inspiration from ## Generating pages from dynamic content -Almost every website has a set of content items that use the same template. It can be news articles, a list of offices, or products and other similar items. For these cases, [Gatsby allows us to programmatically generate](https://www.gatsbyjs.org/tutorial/part-seven/) these pages using their content and a template. This is so cool as I was able to create the whole website using just three files representing static pages, two templates of dynamic pages and this simple piece of code using GraphQL and data from Kentico Cloud: +Almost every website has a set of content items that use the same template. It can be news articles, a list of offices, or products and other similar items. For these cases, [Gatsby allows us to programmatically generate](/tutorial/part-seven/) these pages using their content and a template. This is so cool as I was able to create the whole website using just three files representing static pages, two templates of dynamic pages and this simple piece of code using GraphQL and data from Kentico Cloud: ```jsx graphql(` diff --git a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md index b9ad8f74b9c53..0478283fd6ab7 100644 --- a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md +++ b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md @@ -30,13 +30,13 @@ However, it would be a pain to have to manually convert images into different si Even so, when I tried to do more complicated workflows like adding CSS preprocessing with dependence on the JavaScript ecosystem with the [Node Package Manager (npm)](https://www.npmjs.com/), it became a lot more convoluted. Looking at a few recipes I’ve found, I would have to dive down the road of writing [Gulp](https://gulpjs.com/) workflows and somehow connect them to Jekyll commands. I also chanced upon the [Jekyll Asset Pipeline](https://github.com/matthodan/jekyll-asset-pipeline) which seems what I could use. I didn’t dive too deep into it, but from brief glances it seems like I would have to come up with a lot of custom scripting to interface with JavaScript libraries on my own. -I guess having used [webpack](https://webpack.js.org/) at work, I was pampered by this open source community where there are loaders and documented recipes for doing almost anything, granted that someone was willing to wade into the world of "JavaScript fatigue". Around the same time, [@yangshun](https://github.com/yangshun) introduced me to [Gatsby](https://www.gatsbyjs.org/), a React static site generator which seemed really fascinating. It also seemed a good opportunity for me to get my hands dirty with frontend development again. +I guess having used [webpack](https://webpack.js.org/) at work, I was pampered by this open source community where there are loaders and documented recipes for doing almost anything, granted that someone was willing to wade into the world of "JavaScript fatigue". Around the same time, [@yangshun](https://github.com/yangshun) introduced me to [Gatsby](/), a React static site generator which seemed really fascinating. It also seemed a good opportunity for me to get my hands dirty with frontend development again. As I had some free time on my hands, why not rewrite everything again and keep myself updated with the ever-changing JavaScript ecosystem? Seems like a lot of fun! ## Final Form — Gatsby -[Gatsby](https://www.gatsbyjs.org/) is a static site generator that can render sites from markup documents using templates defined as React components. It functions similarly to Jekyll, where you can pick a [starter project](https://github.com/gatsbyjs/gatsby-starter-blog), [drop in](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/content/blog/hello-world/index.md) some markdown documents for articles, and [be rewarded](https://gatsbyjs.github.io/gatsby-starter-blog/) with a website with minimal effort. +[Gatsby](/) is a static site generator that can render sites from markup documents using templates defined as React components. It functions similarly to Jekyll, where you can pick a [starter project](https://github.com/gatsbyjs/gatsby-starter-blog), [drop in](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/content/blog/hello-world/index.md) some markdown documents for articles, and [be rewarded](https://gatsbyjs.github.io/gatsby-starter-blog/) with a website with minimal effort. It offers much much more, however. Gatsby lets me leverage all the modern tools for building web applications and to add interactive experiences for visitors like a fully fledged [React](https://reactjs.org/) application. Not only that, it is unlike traditional single page applications, and works _without_ JavaScript! Things would certainly be more complicated if I were to add a JavaScript compilation pipeline to a Jekyll site, and a JavaScript framework would be a better fit. @@ -98,7 +98,7 @@ Because of the APIs exposed by Gatsby for interfacing with its internals, powerf - Can be extended with a `gatsby-node.js` file in the root of the project -The [Node.js APIs](https://www.gatsbyjs.org/docs/node-apis/) let plugins extend or modify the heavy lifting performed by the Node.js process when compiling the application. Your gatsby-node.js file can export functions which modify the GraphQL data that is provided to React components when they are rendered. The APIs are also used by plugins to extend the internals of Gatsby e.g. the default webpack config can also be customized here. +The [Node.js APIs](/docs/node-apis/) let plugins extend or modify the heavy lifting performed by the Node.js process when compiling the application. Your gatsby-node.js file can export functions which modify the GraphQL data that is provided to React components when they are rendered. The APIs are also used by plugins to extend the internals of Gatsby e.g. the default webpack config can also be customized here. Take the example of what happens during the processing of markdown files into pages. The [gatsby-source-filesystem](/packages/gatsby-source-filesystem) plugin scans directories and from files it finds, creates File nodes. These File nodes are then processed by [gatsby-transformer-remark](https://github.com/gatsbyjs/gatsby/tree/a3fea82b4d4b4c644156e841401821933e8d694a/packages/gatsby-transformer-remark) , parsing the markup into HTML with the [Remark](https://remark.js.org/) markdown processor. @@ -106,15 +106,15 @@ Take the example of what happens during the processing of markdown files into pa - Can be extended with a `gatsby-ssr.js` file in the root of the project -The [server side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) allow hooks to be defined to modify the rendering process of the application. For example, the [Typography.js Plugin](/packages/gatsby-plugin-typography) uses this to [inline the styles](https://github.com/gatsbyjs/gatsby/blob/ab1d7f50adcff5b7085e6236973b8c30083aa523/packages/gatsby-plugin-typography/src/gatsby-ssr.js#L11-L14) required into the DOM head when rendering. +The [server side rendering APIs](/docs/ssr-apis/) allow hooks to be defined to modify the rendering process of the application. For example, the [Typography.js Plugin](/packages/gatsby-plugin-typography) uses this to [inline the styles](https://github.com/gatsbyjs/gatsby/blob/ab1d7f50adcff5b7085e6236973b8c30083aa523/packages/gatsby-plugin-typography/src/gatsby-ssr.js#L11-L14) required into the DOM head when rendering. #### Browser APIs - Can be extended with a `gatsby-browser.js` file in the root of the project -Finally, the [browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) allows plugins to run code on lifecycle events while Gatsby is running in the browser. The [Google Analytics Plugin](/packages/gatsby-plugin-google-analytics) [uses these APIs](https://github.com/gatsbyjs/gatsby/blob/a3fea82b4d4b4c644156e841401821933e8d694a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js#L4-L5) to track the location of the user on route changes. +Finally, the [browser APIs](/docs/browser-apis/) allows plugins to run code on lifecycle events while Gatsby is running in the browser. The [Google Analytics Plugin](/packages/gatsby-plugin-google-analytics) [uses these APIs](https://github.com/gatsbyjs/gatsby/blob/a3fea82b4d4b4c644156e841401821933e8d694a/packages/gatsby-plugin-google-analytics/src/gatsby-browser.js#L4-L5) to track the location of the user on route changes. -The best part about using Gatsby is that there plenty of plugins available leveraging these APIs that give us new features almost for free. Want to add offline mode to your application? RSS feeds? Styled components? Just lookup the [available plugins](https://www.gatsbyjs.org/docs/plugins/#official-plugins) and drop them into the [`gatsby-config.js`](https://github.com/jiahaog/jiahao.codes/blob/master/gatsby-config.js)! +The best part about using Gatsby is that there plenty of plugins available leveraging these APIs that give us new features almost for free. Want to add offline mode to your application? RSS feeds? Styled components? Just lookup the [available plugins](/docs/plugins/#official-plugins) and drop them into the [`gatsby-config.js`](https://github.com/jiahaog/jiahao.codes/blob/master/gatsby-config.js)! ## Next Steps diff --git a/docs/blog/2018-2-7-jam-out-your-blog/index.md b/docs/blog/2018-2-7-jam-out-your-blog/index.md index dbb1283c143a4..0e24b0c4d7e61 100644 --- a/docs/blog/2018-2-7-jam-out-your-blog/index.md +++ b/docs/blog/2018-2-7-jam-out-your-blog/index.md @@ -17,7 +17,7 @@ I’m willing to assume that many readers have been here before and are currentl My goal here is to share a tool set helps bring order to my freelance chaos. I'll be walking through a workflow that's ideal for personal blogs and hand-off projects where some sort of a CMS is in scope. -I'll also be referencing a wonderful article written by Josh Weaver, [Gatsby + Contentful + Netlify (and Algolia)](https://www.gatsbyjs.org/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/). Josh’s article spoke to my goals and frustrations perfectly and inspired me to share this alternative approach. +I'll also be referencing a wonderful article written by Josh Weaver, [Gatsby + Contentful + Netlify (and Algolia)](/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/). Josh’s article spoke to my goals and frustrations perfectly and inspired me to share this alternative approach. _**Let’s get into it.**_ diff --git a/docs/blog/2018-3-03-case-study-mike-johnston/index.md b/docs/blog/2018-3-03-case-study-mike-johnston/index.md index 8583a0002c57f..1dacda3532084 100644 --- a/docs/blog/2018-3-03-case-study-mike-johnston/index.md +++ b/docs/blog/2018-3-03-case-study-mike-johnston/index.md @@ -38,7 +38,7 @@ Since we had complete freedom on the frontend, we wanted to pursue a solution ba One way to sidestep a great deal of these concerns is to make use of as much static content as possible. Static content is astonishingly light on system resources to serve up even at higher traffic levels, and it can be propagated to worldwide [Content Delivery Networks](https://en.wikipedia.org/wiki/Content_delivery_network) and served up to local users at lightning speeds. Static content traditionally has two big problems, however. It’s not trivial for non-technical users to update with frequently changing content, and it’s typically not very interactive or responsive. -[Gatsby](https://www.gatsbyjs.org/) is a project that has grown quickly into a best-of-both-worlds solution that is able to weave static file generation into a cohesive browser-based application complete with preloaded client-side routing to each static page. After the initial page load, Gatsby ensures that the browser begins fetching each additional page that is linked to ahead of time. When the user clicks a link, the browser doesn’t need to make an additional round-trip request to the server to get the next page. The experience of navigating around the site is noticeably faster than traditional page loads, and Gatsby provides a plugin to ensure that Google Analytics actions are still triggered for each routing event. +[Gatsby](/) is a project that has grown quickly into a best-of-both-worlds solution that is able to weave static file generation into a cohesive browser-based application complete with preloaded client-side routing to each static page. After the initial page load, Gatsby ensures that the browser begins fetching each additional page that is linked to ahead of time. When the user clicks a link, the browser doesn’t need to make an additional round-trip request to the server to get the next page. The experience of navigating around the site is noticeably faster than traditional page loads, and Gatsby provides a plugin to ensure that Google Analytics actions are still triggered for each routing event. ## WordPress Integration with Triggered Builds diff --git a/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md b/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md index 62843bba34a43..11b2a1b4119f7 100644 --- a/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md +++ b/docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md @@ -38,7 +38,7 @@ With monorepos the code is split into specific packages (aisles). Meaning you ca Everything is accessible from a single place, while still being organised enough to navigate painlessly. Enough with the theory, let’s move on to the tutorial, which is split into 2 sections: development and deployment. -*Development* — We’ll configure an existing application, built with [Gatsby](https://www.gatsbyjs.org/), into a monorepo. I won’t delve too much into its implementation details because it’s beyond the scope of this article. We’ll attend the lavish party that the great Gatsby throws for us and we won’t ask why or how they did it. +*Development* — We’ll configure an existing application, built with [Gatsby](/), into a monorepo. I won’t delve too much into its implementation details because it’s beyond the scope of this article. We’ll attend the lavish party that the great Gatsby throws for us and we won’t ask why or how they did it. Another tool we’ll use is [Lerna](https://github.com/lerna/lerna), which will manage the dependencies of our project. Lerna will also allow us to link packages together which we’ll use to share components. diff --git a/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md b/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md index 7ccc9d66c498d..caf756a590449 100644 --- a/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md +++ b/docs/blog/2019-01-14-modern-publications-with-gatsby-ghost.md @@ -27,7 +27,7 @@ Many developers use static site generators alongside locally stored Markdown fil This is where a headless CMS comes in, which provides an admin client for authoring and content management, while still bringing all of the benefits of having a static front-end. Developers can use their preferred stack, and writers have an editor, content scheduling, SEO and much more at their fingertips. -When you look at the bigger picture of the [content mesh](https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/), it really starts to feel like an inevitable future for building publishing websites. +When you look at the bigger picture of the [content mesh](/blog/2018-10-04-journey-to-the-content-mesh/), it really starts to feel like an inevitable future for building publishing websites. ![](./images/ghost-jamstack.png) diff --git a/docs/blog/2019-01-24-swag-store/index.md b/docs/blog/2019-01-24-swag-store/index.md index e220eeb6c7bcc..b3e5483ffb3ca 100644 --- a/docs/blog/2019-01-24-swag-store/index.md +++ b/docs/blog/2019-01-24-swag-store/index.md @@ -264,4 +264,4 @@ And this: Dogs and cats in Gatsby swag? Yes please. I’ll have another. Find out how you can [#buildwithgatsby](https://twitter.com/search?src=typd&q=%23buildwithgatsby) on [Twitter](https://twitter.com/gatsbyjs) or on our [site](https://www.gatsbyjs.com/)! -You can also read about how we built out the store [here](https://www.gatsbyjs.org/blog/2018-08-09-swag-store/)! +You can also read about how we built out the store [here](/blog/2018-08-09-swag-store/)! diff --git a/docs/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/index.md b/docs/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/index.md index 3feba168854a2..7a8f11be61de2 100644 --- a/docs/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/index.md +++ b/docs/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/index.md @@ -29,7 +29,7 @@ It was a good improvement, but even the resulting 30-minute build time was too s ## Improving the preview experience -On a highly customizable website, previewing the changes you make is crucial. The fastest way to change something on a Gatsby platform is by using what we developers use daily: the development server. This server has a [feature](https://www.gatsbyjs.org/docs/environment-variables/#reserved-environment-variables) that allows you to live reload the data on the development server and everything on the website will be updated automatically. Neat! +On a highly customizable website, previewing the changes you make is crucial. The fastest way to change something on a Gatsby platform is by using what we developers use daily: the development server. This server has a [feature](/docs/environment-variables/#reserved-environment-variables) that allows you to live reload the data on the development server and everything on the website will be updated automatically. Neat! We started using this feature at the beginning of the migration, and content managers loved the feature. They just had to click a button to see their changes, all it took was a few seconds. diff --git a/docs/blog/2019-01-29-gatsby-eng-hiring-philosophy/index.md b/docs/blog/2019-01-29-gatsby-eng-hiring-philosophy/index.md index e1da5fd7e8fb8..71c0099d1c9e8 100644 --- a/docs/blog/2019-01-29-gatsby-eng-hiring-philosophy/index.md +++ b/docs/blog/2019-01-29-gatsby-eng-hiring-philosophy/index.md @@ -16,11 +16,11 @@ author: Sam Bhagwat ## Introduction -Last year, several contributors to Gatsby.js [created a startup company](https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/), Gatsby Inc, to make feature-rich and blazing-fast websites easier to build and run. +Last year, several contributors to Gatsby.js [created a startup company](/blog/2018-05-24-launching-new-gatsby-company/), Gatsby Inc, to make feature-rich and blazing-fast websites easier to build and run. **At Gatsby Inc, we’re trying to build an _organization_ (the Gatsby Inkteam) that can execute on the Gatsby product roadmap and vision**. Our philosophy around recruiting and hiring, as well as team-building, in the product / engineering org is designed to achieve this goal. -Because we [work in the open](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values/#work-in-the-open), we wanted to share that philosophy publicly. +Because we [work in the open](/blog/2018-09-07-gatsby-values/#work-in-the-open), we wanted to share that philosophy publicly. ### Two Classes of Risk @@ -46,7 +46,7 @@ One of Gatsby's goals is to provider users all the benefits of modern web out of Having GraphQL experts as we flesh out the Gatsby’s GraphQL integration via "schema stitching" 3rd-party-applications, and as our users continue to use GraphQL on a daily basis, is crucial. -The same is true of accessibility, CSS-in-JS, and the CMS as we recreate CMS functionality in the [content mesh](https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh/). +The same is true of accessibility, CSS-in-JS, and the CMS as we recreate CMS functionality in the [content mesh](/blog/2018-10-04-journey-to-the-content-mesh/). Several Gatsby Inkteam members have deep expertise on these topics, which is extremely helpful. @@ -138,17 +138,17 @@ In general, it’s a huge bonus when engineers have skills or experience such as Team structure/compensation and skills are two pillars of creating an effective product/engineering organization. The final pillar is an environment of effective collaboration and trust. -We have several [Gatsby core values](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values) that inform team collaboration philosophy. These include: +We have several [Gatsby core values](/blog/2018-09-07-gatsby-values) that inform team collaboration philosophy. These include: -- [Do the right thing when no one is looking](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values/#do-the-right-thing-when-no-one-is-looking) +- [Do the right thing when no one is looking](/blog/2018-09-07-gatsby-values/#do-the-right-thing-when-no-one-is-looking) -- [Work in the open](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values/#work-in-the-open) +- [Work in the open](/blog/2018-09-07-gatsby-values/#work-in-the-open) -- [Set and manage clear expectations](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values/#set-and-manage-clear-expectations) +- [Set and manage clear expectations](/blog/2018-09-07-gatsby-values/#set-and-manage-clear-expectations) -- [Embrace growth](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values/#embrace-growth) +- [Embrace growth](/blog/2018-09-07-gatsby-values/#embrace-growth) -- [You belong here](https://www.gatsbyjs.org/blog/2018-09-07-gatsby-values/#you-belong-here) +- [You belong here](/blog/2018-09-07-gatsby-values/#you-belong-here) From company-wide retrospectives to vibrant Slack channels to every Gatsby team member who is stretched by working on something more popular and public than they’ve worked on before, and a myriad of other large and small ways, we try to live these values every day. diff --git a/docs/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/index.md b/docs/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/index.md index 565189c0f6b8d..bb77c02e4b613 100644 --- a/docs/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/index.md +++ b/docs/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/index.md @@ -8,7 +8,7 @@ tags: ["themes", "architecture"] > If you aren't familiar with Gatsby themes yet, then check out [Introducing > Gatsby -> Themes](https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/) +> Themes](/blog/2018-11-11-introducing-gatsby-themes/) > for a written introduction and [my Gatsby Days > talk](https://www.youtube.com/watch?v=wX84vXBpMR8) for a more audio/visual > approach. diff --git a/docs/blog/2019-01-31-using-react-context-api-with-gatsby/index.md b/docs/blog/2019-01-31-using-react-context-api-with-gatsby/index.md index ee23a220bd00b..03e5ca3082cc0 100644 --- a/docs/blog/2019-01-31-using-react-context-api-with-gatsby/index.md +++ b/docs/blog/2019-01-31-using-react-context-api-with-gatsby/index.md @@ -14,7 +14,7 @@ One of the few types of alternative theme that adds real value to users is a low In considering the different ways to implement this a natural fit become apparent: React’s new Context API. Having worked with Context API before, this seemed like a particularly well suited use for this API. However, I soon realized I would need to do a little set-up work to get this up and running. -After a brief search, I came across just what I was looking for, the Gatsby Browser APIs. Specifically, the [`wrapRootElement`](https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement) API was a perfect fit for this use case. This API allows you to wrap your root element with a wrapping component, e.g. a `Provider` from Redux or... a ThemeProvider from React Context. Using this, I managed to achieve dark mode for my use case. +After a brief search, I came across just what I was looking for, the Gatsby Browser APIs. Specifically, the [`wrapRootElement`](/docs/browser-apis/#wrapRootElement) API was a perfect fit for this use case. This API allows you to wrap your root element with a wrapping component, e.g. a `Provider` from Redux or... a ThemeProvider from React Context. Using this, I managed to achieve dark mode for my use case. Let's do a deep dive into how this feature was actually implemented step by step using React Context, Gatsby, and a Theme Provider to implement a dark mode UI! diff --git a/docs/blog/2019-02-14-behind-the-scenes-q-and-a/index.md b/docs/blog/2019-02-14-behind-the-scenes-q-and-a/index.md index 13119249f803c..abda8fd2b7b8d 100644 --- a/docs/blog/2019-02-14-behind-the-scenes-q-and-a/index.md +++ b/docs/blog/2019-02-14-behind-the-scenes-q-and-a/index.md @@ -29,16 +29,16 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh ### Functional Questions (How do I do X with Gatsby?) **Question:** Can I serialize an api to be stored and accessed client-side only? -**Answer:** Yup (with a source plugin!). If it's a GraphQL API you can even use [https://www.gatsbyjs.org/packages/gatsby-source-graphql/](https://www.gatsbyjs.org/packages/gatsby-source-graphql/ "https://www.gatsbyjs.org/packages/gatsby-source-graphql/") to invoke that API at _build time_ +**Answer:** Yup (with a source plugin!). If it's a GraphQL API you can even use [https://www.gatsbyjs.org/packages/gatsby-source-graphql/](/packages/gatsby-source-graphql/ "https://www.gatsbyjs.org/packages/gatsby-source-graphql/") to invoke that API at _build time_ **Question:** How would you recommend handling Gatsby pointing to environment specific endpoints? For example, we're required to deploy the same artifact to dev - uat - prod, so for pointing our app at the appropriate endpoint, we're looking at location.href and using if/else to determine the endpoint. Is there a better way? -**Answer:** Check out [https://www.gatsbyjs.org/docs/environment-variables/](https://www.gatsbyjs.org/docs/environment-variables/ "https://www.gatsbyjs.org/docs/environment-variables/") for env variables. +**Answer:** Check out [https://www.gatsbyjs.org/docs/environment-variables/](/docs/environment-variables/ "https://www.gatsbyjs.org/docs/environment-variables/") for env variables. **Question:** Is it possible to have the gatsby-\*.js files be rewritten in TypeScript? **Answer:** gatsby-browser.js and gatsby-ssr.js work just fine if you add gatsby-plugin-typescript. We don't have a out-of-the-box solution for gatsby-node.js but you could require the typescript interpreter and then require another typescript file and re-export its code from gatsby-node.js. **Question:** Gatsby transformers support Markdown and asciidoc. Possible support for Sphinx reStructuredText? -**Answer:** Certainly! Gatsby is super pluggable, so whatever content you want to bring to Gatsby, just write a plugin! [https://www.gatsbyjs.org/docs/source-plugin-tutorial/](https://www.gatsbyjs.org/docs/source-plugin-tutorial/ "Gatsby plugins") +**Answer:** Certainly! Gatsby is super pluggable, so whatever content you want to bring to Gatsby, just write a plugin! [https://www.gatsbyjs.org/docs/source-plugin-tutorial/](/docs/source-plugin-tutorial/ "Gatsby plugins") **Question:** How did you implement the Github PR test for lighthouse scoring? **Answer:** All available in this repo. I run Lighthouse from a CI container, and then parse the response: [https://github.com/dschau/gatsby-perf-audit](https://github.com/dschau/gatsby-perf-audit "https://github.com/dschau/gatsby-perf-audit") @@ -47,10 +47,10 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** Yup! React. Lazy is great + standard async imports. **Question:** How can I expose global variables during the build process? We are looking to use JSDom during the build process. We currently have the async loading of the Interweave module, but we want our ssr generated html to match the final rendered DOM. -**Answer:** Check out this docs page [https://www.gatsbyjs.org/docs/environment-variables/#environment-variables](https://www.gatsbyjs.org/docs/environment-variables/#environment-variables "https://www.gatsbyjs.org/docs/environment-variables/#environment-variables") +**Answer:** Check out this docs page [https://www.gatsbyjs.org/docs/environment-variables/#environment-variables](/docs/environment-variables/#environment-variables "https://www.gatsbyjs.org/docs/environment-variables/#environment-variables") **Question:** Is there a way to enable SSR on run time to things like a post preview? -**Answer:** If you mean a screenshot of the built site, you could deploy to a staged URL, and then use a plugin like [https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot") and then query for your page preview (we do this on gatsbyjs.org!). Additionally, something like using a screenshot service ([https://screenshot-v2.now.sh/blog.dustinschau.com?type=png](https://screenshot-v2.now.sh/blog.dustinschau.com?type=png "Screenshot")) would work, as well. We're working on a service for this: [https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/](https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/ "Gatsby Preview") +**Answer:** If you mean a screenshot of the built site, you could deploy to a staged URL, and then use a plugin like [https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-screenshot") and then query for your page preview (we do this on gatsbyjs.org!). Additionally, something like using a screenshot service ([https://screenshot-v2.now.sh/blog.dustinschau.com?type=png](https://screenshot-v2.now.sh/blog.dustinschau.com?type=png "Screenshot")) would work, as well. We're working on a service for this: [https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/](/blog/2018-07-17-announcing-gatsby-preview/ "Gatsby Preview") **Question:** How do you automate testing for performance regression? **Answer:** Build Lighthouse into your CI pipeline. @@ -62,32 +62,32 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** Yes, build-times do go up with image processing as it's very CPU intensive. **Question:** I have an app which has Frontend and Admin Panel so how do I do code splitting based on Module so the admin javascript should not include in Frontend and vice versa? -**Answer:** Gatsby splits code automatically by route so code only used on the admin panel will only be loaded there. Check out this page for details about how to build the admin section [https://www.gatsbyjs.org/docs/building-apps-with-gatsby/](https://www.gatsbyjs.org/docs/building-apps-with-gatsby/ "https://www.gatsbyjs.org/docs/building-apps-with-gatsby/") +**Answer:** Gatsby splits code automatically by route so code only used on the admin panel will only be loaded there. Check out this page for details about how to build the admin section [https://www.gatsbyjs.org/docs/building-apps-with-gatsby/](/docs/building-apps-with-gatsby/ "https://www.gatsbyjs.org/docs/building-apps-with-gatsby/") ### GraphQL / Data Layer **Question:** How does Gatsby work with GraphQL APIs? Create static pages with the content or only when it renders the page? -**Answer:** With third party graphql APIs — [https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/](https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/ "https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/") +**Answer:** With third party graphql APIs — [https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/](/blog/2018-09-25-announcing-graphql-stitching-support/ "https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/") **Question:** Is it necessary to use GraphQL for work with Gatsby? -**Answer:** Nope! [https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/](https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/ "GraphQL") +**Answer:** Nope! [https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/](/docs/using-gatsby-without-graphql/ "GraphQL") **Question:** I'm new to GraphQL and probably haven't dug deep enough yet, but it's not clear to me how to add new properties and surface them in GraphQL, so my components can consume it. -**Answer:** You can start with [https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/](https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/ "https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/") and go from there! +**Answer:** You can start with [https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/](/docs/using-gatsby-without-graphql/ "https://www.gatsbyjs.org/docs/using-gatsby-without-graphql/") and go from there! ### Best Practices with Gatsby **Question:** How are static assets handled with Gatsby? What is the best approach when using larger amount of SVG icons (think emojis) which may increase the bundle size by more than 100kb's? -**Answer:** There's a few ways you can handle it. See this docs page which talks about the various options [https://www.gatsbyjs.org/docs/adding-images-fonts-files/](https://www.gatsbyjs.org/docs/adding-images-fonts-files/ "https://www.gatsbyjs.org/docs/adding-images-fonts-files/") +**Answer:** There's a few ways you can handle it. See this docs page which talks about the various options [https://www.gatsbyjs.org/docs/adding-images-fonts-files/](/docs/adding-images-fonts-files/ "https://www.gatsbyjs.org/docs/adding-images-fonts-files/") **Question:** The question asked about search—how would you implement a site search in Gatsby? -**Answer:** One of the best things about Gatsby is that it's pretty agnostic on tech stack(s). So you're free to use what you want. I've used Algolia in the past and loved it, but you're free to implement this however you'd like! [https://www.gatsbyjs.org/docs/adding-search/](https://www.gatsbyjs.org/docs/adding-search/ "Gatsby Docs") +**Answer:** One of the best things about Gatsby is that it's pretty agnostic on tech stack(s). So you're free to use what you want. I've used Algolia in the past and loved it, but you're free to implement this however you'd like! [https://www.gatsbyjs.org/docs/adding-search/](/docs/adding-search/ "Gatsby Docs") **Question:** Any advice for running automated performance tests for sites that are hidden behind a login page? **Answer:** A CI can do a build and then run the lighthouse test on the built site. **Question:** Regarding Environment Variables and security- how do we keep secure endpoints using env vars like process.env to handle authorization keys and secrets? Does this mean Node would be required in prod environment? -**Answer:** Yes, process.env is recommended for secret management. [https://www.gatsbyjs.org/docs/environment-variables/](https://www.gatsbyjs.org/docs/environment-variables/ "https://www.gatsbyjs.org/docs/environment-variables/"), Generally you'd add these to gatsby-config.js — so would be used for the build but wouldn't be sent to users, so the keys wouldn't leak. +**Answer:** Yes, process.env is recommended for secret management. [https://www.gatsbyjs.org/docs/environment-variables/](/docs/environment-variables/ "https://www.gatsbyjs.org/docs/environment-variables/"), Generally you'd add these to gatsby-config.js — so would be used for the build but wouldn't be sent to users, so the keys wouldn't leak. **Question:** What is your opinion on using CSS, ie Styled Components, Emotion or BEM? **Answer:** We don't really have an official opinion--we want you to build apps however you prefer! That being said, I quite like CSS in JS (particularly emotion). I did a little podcast with Chris Coyier if you're interested--[https://css-tricks.com/video-screencasts/168-css-in-js/](https://css-tricks.com/video-screencasts/168-css-in-js/ "https://css-tricks.com/video-screencasts/168-css-in-js/") @@ -98,22 +98,22 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh ### Content Management Systems (CMS) **Question:** Will Gatsby compile/export static files using the theme from a Ghost installation or will Gatsby compile/export based on another Gatsby theme? -**Answer:** When you use Gatsby + Ghost you will construct UI in Gatsby rather than Ghost -- [https://www.gatsbyjs.org/blog/2019-01-14-modern-publications-with-gatsby-ghost/](https://www.gatsbyjs.org/blog/2019-01-14-modern-publications-with-gatsby-ghost/ "https://www.gatsbyjs.org/blog/2019-01-14-modern-publications-with-gatsby-ghost/") +**Answer:** When you use Gatsby + Ghost you will construct UI in Gatsby rather than Ghost -- [https://www.gatsbyjs.org/blog/2019-01-14-modern-publications-with-gatsby-ghost/](/blog/2019-01-14-modern-publications-with-gatsby-ghost/ "https://www.gatsbyjs.org/blog/2019-01-14-modern-publications-with-gatsby-ghost/") **Question:** Should I stop using Wordpress altogether? Does Wordpress play well with Gatsby or is Contentful better? Looks like JAMstack is a Wordpress killer. **Answer:** It's not a 100% replacement yet — best to start experimenting with things and see how it feels! **Question:** How do content managers preview their changes? -**Answer:** We have some tooling planned for this :) Stay tuned! [https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/](https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/ "https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/") +**Answer:** We have some tooling planned for this :) Stay tuned! [https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/](/blog/2018-07-17-announcing-gatsby-preview/ "https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/") **Question:** Is there a good starting point to compare building sites with Gatsby that developers would have built on platforms like WordPress or Craft, etc previously? -**Answer:** There are blog posts people have written about their experience on our blog at [https://www.gatsbyjs.org/blog/tags/wordpress](https://www.gatsbyjs.org/blog/tags/wordpress "Gatsby Blog") +**Answer:** There are blog posts people have written about their experience on our blog at [https://www.gatsbyjs.org/blog/tags/wordpress](/blog/tags/wordpress "Gatsby Blog") **Question:** What are best practices for making a Gatsby site dynamic by posting/fetching to/from a DB, like MongoDB, MySql, etc.. -**Answer:** You can use a DB as your backend -- [https://www.gatsbyjs.org/docs/sourcing-from-databases/](https://www.gatsbyjs.org/docs/sourcing-from-databases/ "Gatsby Docs"). Posting to a database can be done with AJAX requests. +**Answer:** You can use a DB as your backend -- [https://www.gatsbyjs.org/docs/sourcing-from-databases/](/docs/sourcing-from-databases/ "Gatsby Docs"). Posting to a database can be done with AJAX requests. **Question:** What are your thoughts on sanity.io? -**Answer:** Seems great :) Check out this blog post for more info -> [https://www.gatsbyjs.org/blog/2019-01-25-blazing-fast-development-with-gatsby-and-sanity-io/](https://www.gatsbyjs.org/blog/2019-01-25-blazing-fast-development-with-gatsby-and-sanity-io/ "https://www.gatsbyjs.org/blog/2019-01-25-blazing-fast-development-with-gatsby-and-sanity-io/") +**Answer:** Seems great :) Check out this blog post for more info -> [https://www.gatsbyjs.org/blog/2019-01-25-blazing-fast-development-with-gatsby-and-sanity-io/](/blog/2019-01-25-blazing-fast-development-with-gatsby-and-sanity-io/ "https://www.gatsbyjs.org/blog/2019-01-25-blazing-fast-development-with-gatsby-and-sanity-io/") **Question:** What are some best practices around aligning (dynamic) CMS content schema with code changes in Gatsby? **Answer:** Great question - and we have some thoughts here. We're launching cloud services to tackle this very problem in 2019. In the interim--most CMSs have some type of webhook content, so you can trigger a re-build (static content is cheap, and so are changes!) when content changes. @@ -122,7 +122,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** That would be a great idea! We've talked to some folks doing this. **Question:** If a company had numerous content managers (let's say 30), and they all needed to be able to create and publish content to a blog (which could be multiple on the same site) or a page, each update would require a new build? Is that an accurate understanding? -**Answer:** We're building a service for Preview that'll instantly update a staging version of the site and that can handle as many content updaters as you throw at it [https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/#reach-skip-nav](https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/#reach-skip-nav "https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/#reach-skip-nav") +**Answer:** We're building a service for Preview that'll instantly update a staging version of the site and that can handle as many content updaters as you throw at it [https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/#reach-skip-nav](/blog/2018-07-17-announcing-gatsby-preview/#reach-skip-nav "https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/#reach-skip-nav") **Question:** The Preview feature is awesome. But I'm thinking like a 24 hours news channel, which our company has, and a manager needing to post content at 2 am, or even more, stories being posted multiple times an hour at all hours. Will each update require a new build? **Answer:** Yes. Builds are fast and automatic though so doesn't take any extra work or mental overhead. @@ -131,13 +131,13 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** That's a bit tricky as the content body is a HTML string. There's issues talking about how to make this happen so jump into the discussion and help out. **Question:** Is there a 3rd party CMS that you recommend that works particular well with Gatsby? -**Answer:** Lots of CMS-s! Here's a list: [https://www.gatsbyjs.org/docs/headless-cms/](https://www.gatsbyjs.org/docs/headless-cms/ "Gatsby Docs") +**Answer:** Lots of CMS-s! Here's a list: [https://www.gatsbyjs.org/docs/headless-cms/](/docs/headless-cms/ "Gatsby Docs") **Question:** How can you trigger a content refresh on the Gatsby site (frontend) when using gatsby-source-wordpress with a Wordpress CMS? **Answer:** You create a webhook on your CMS, and point the webhook at your CI system (eg Netlify). **Question:** I have a site built on Drupal 7. How easy would it be to migrate to Gatsby with say Netlify as a CDN? -**Answer:** gatsby-source-drupal only supports Drupal 8 at the moment, I believe. [https://www.gatsbyjs.org/packages/gatsby-source-drupal/?=drupal](https://www.gatsbyjs.org/packages/gatsby-source-drupal/?=drupal "Gatsby and Drupal") +**Answer:** gatsby-source-drupal only supports Drupal 8 at the moment, I believe. [https://www.gatsbyjs.org/packages/gatsby-source-drupal/?=drupal](/packages/gatsby-source-drupal/?=drupal "Gatsby and Drupal") **Question:** Have you implemented a rich text field from Contentful? If so, were you able to get gatsby-image working with embedded images in the rich text field? **Answer:** Gatsby works with Contentful rich text in beta right now. If you have specific Qs about the status, you can raise as a GH issue. @@ -145,13 +145,13 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh ### Gatsby for Dynamic Web Apps **Question:** Are there data fetching hooks that we can use for client-side loading of authenticated content that isn't serialized at build-time? -**Answer:** Check out [https://www.gatsbyjs.org/docs/building-a-site-with-authentication/](https://www.gatsbyjs.org/docs/building-a-site-with-authentication/ "https://www.gatsbyjs.org/docs/building-a-site-with-authentication/") and [https://www.gatsbyjs.org/docs/building-apps-with-gatsby/](https://www.gatsbyjs.org/docs/building-apps-with-gatsby/ "https://www.gatsbyjs.org/docs/building-apps-with-gatsby/") +**Answer:** Check out [https://www.gatsbyjs.org/docs/building-a-site-with-authentication/](/docs/building-a-site-with-authentication/ "https://www.gatsbyjs.org/docs/building-a-site-with-authentication/") and [https://www.gatsbyjs.org/docs/building-apps-with-gatsby/](/docs/building-apps-with-gatsby/ "https://www.gatsbyjs.org/docs/building-apps-with-gatsby/") **Question:** How to do SSR loading for Dynamic content- for example, a blog, as it uses build time SSR technique? **Answer:** Gatsby's data layer and source plugins can fetch data dynamically at build time to grab your data. Then whenever your data changes, you rebuild your site with the updated content. Builds are fast so you can update the site every few minutes if necessary. **Question:** Is Dynamic content SEO Friendly when we use data layer ? -**Answer:** Yep! Check out [https://www.gatsbyjs.org/docs/seo/](https://www.gatsbyjs.org/docs/seo/ "https://www.gatsbyjs.org/docs/seo/") +**Answer:** Yep! Check out [https://www.gatsbyjs.org/docs/seo/](/docs/seo/ "https://www.gatsbyjs.org/docs/seo/") **Question:** How do you keep on top of things like price changes and stock availability with a static generated site? **Answer:** We actually do this on the GatsbyJS store. Check out the code, and hope it's helpful: [https://github.com/gatsbyjs/store.gatsbyjs.org](https://github.com/gatsbyjs/store.gatsbyjs.org "Gatsby Swag Store") @@ -160,7 +160,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** Yes! You can learn more about what types of dynamic apps you can build with Gatsby here: [https://www.gatsbyjs.com/build-web-apps-webinar](https://www.gatsbyjs.com/build-web-apps-webinar "Dynamic Apps Webinar") **Question:** What is the recommended approach for sites that have integrations like a oauth authentication or web mapping that need code to be run only in the browser (not SSR)? I have read about checking for module or browser and using babel dynamic import. Is there a way to have a separate bundle lazy loaded only when loaded in the browser? -**Answer:** Check out [https://www.gatsbyjs.org/docs/building-a-site-with-authentication/](https://www.gatsbyjs.org/docs/building-a-site-with-authentication/ "Gatsby docs") +**Answer:** Check out [https://www.gatsbyjs.org/docs/building-a-site-with-authentication/](/docs/building-a-site-with-authentication/ "Gatsby docs") **Question:** Dustin mentioned a recording on building dynamic apps with Gatsby. Is that available? **Answer:** Yes- you find that recording here: [https://www.gatsbyjs.com/build-web-apps-webinar](https://www.gatsbyjs.com/build-web-apps-webinar "Gatsby Building Apps Webinar") @@ -171,7 +171,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** React-static is a subset of Gatsby — it lets you programmatically create pages like Gatsby and has a limited plugin system but doesn't have a data layer for connecting to 3rd party APIs or transforming markdown and images. **Question:** Is there a good write up of how Gatsby compares to other static site generators (e.g. NextJS)? If so, where is it? -**Answer:** Here's a good overview, although doesn't tackle Next specifically: [https://www.gatsbyjs.org/features/](https://www.gatsbyjs.org/features/ "Gatsby features") +**Answer:** Here's a good overview, although doesn't tackle Next specifically: [https://www.gatsbyjs.org/features/](/features/ "Gatsby features") **Question:** From an SSR perspective, how is Gatsby different from Next.js? **Answer:** Gatsby does SSR at "build-time" — which means all the SSRing is done _before_ a user requests a page which means your app loads really fast and it's easy to run and scale. Next.js does SSR at runtime which means that you need running servers to handle traffic and have to handle caching and scaling of servers in response to traffic. @@ -179,7 +179,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh ### Scaling Gatsby (Gatsby for Large Apps) **Question:** I'm working for a e-Commerce company. We have millions of products in our shop. The product detail site is somewhat the same but for the data. Is there a way to generate all those pages for each of those products in a feasible time? -**Answer:** Gatsby generally maxes out at 50k pages or so (right now) but you could break up the page, check out [https://www.gatsbyjs.org/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/](https://www.gatsbyjs.org/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/ "https://www.gatsbyjs.org/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/") +**Answer:** Gatsby generally maxes out at 50k pages or so (right now) but you could break up the page, check out [https://www.gatsbyjs.org/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/](/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/ "https://www.gatsbyjs.org/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/") **Question:** How do you suggest to setup delta builds? Say I have 10 pages and am changing only one. Is it possible to build just the one and not all 10? **Answer:** This is incremental builds! We're thinking on it and certainly want to deliver this feature--it'd be a great one! @@ -188,7 +188,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** We don't yet have incremental builds, but 1000 page sites should build relatively quickly (a couple of minutes). Stay tuned on incremental builds! **Question:** You mentioned 'Incremental builds' on another question, can you point me to where I can read more about the ideas and status? -**Answer:** Some prior art here: [https://github.com/gatsbyjs/gatsby/issues/5002](https://github.com/gatsbyjs/gatsby/issues/5002 "https://github.com/gatsbyjs/gatsby/issues/5002") and [https://github.com/gatsbyjs/gatsby/issues/9083](https://github.com/gatsbyjs/gatsby/issues/9083 "https://github.com/gatsbyjs/gatsby/issues/9083") Once we're ready to start implementing, we'll most likely create an RFC and solicit community feedback for the functionality. We haven't talked too much about it publicly, but you can read a general overview in our company launch post which talks about our long-term vision [https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/#distributed-computing--event-sourcing](https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/#distributed-computing--event-sourcing "https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/#distributed-computing--event-sourcing") +**Answer:** Some prior art here: [https://github.com/gatsbyjs/gatsby/issues/5002](https://github.com/gatsbyjs/gatsby/issues/5002 "https://github.com/gatsbyjs/gatsby/issues/5002") and [https://github.com/gatsbyjs/gatsby/issues/9083](https://github.com/gatsbyjs/gatsby/issues/9083 "https://github.com/gatsbyjs/gatsby/issues/9083") Once we're ready to start implementing, we'll most likely create an RFC and solicit community feedback for the functionality. We haven't talked too much about it publicly, but you can read a general overview in our company launch post which talks about our long-term vision [https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/#distributed-computing--event-sourcing](/blog/2018-05-24-launching-new-gatsby-company/#distributed-computing--event-sourcing "https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/#distributed-computing--event-sourcing") **Question:** It was mentioned Gatsby has an upper limit of 50K pages, is that before you need to increase nodes memory or an upper limit written into Gatsby's build process? **Answer:** Not a strict upper limit, more of a rough one that we've seen in the wild. @@ -199,7 +199,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh ### Gatsby Use Cases **Question:** To use gatsby for a blog - is this overengineering? -**Answer:** Definitely not! Here are some blogs built with Gatsby: [https://www.gatsbyjs.org/showcase/?filters%5B0%5D=Blog](https://www.gatsbyjs.org/showcase/?filters%5B0%5D=Blog "Gatsby Showcase"). One notable one is Dan Abramov — [https://overreacted.io/](https://overreacted.io/ "https://overreacted.io/") +**Answer:** Definitely not! Here are some blogs built with Gatsby: [https://www.gatsbyjs.org/showcase/?filters%5B0%5D=Blog](/showcase/?filters%5B0%5D=Blog "Gatsby Showcase"). One notable one is Dan Abramov — [https://overreacted.io/](https://overreacted.io/ "https://overreacted.io/") **Question:** Is it overkill to build every site with Gatsby.js? **Answer:** We don't think so :) @@ -214,7 +214,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** All of the above! **Question:** Is Gatsby production ready? It's fantastic! -**Answer:** Yep! Here are some sites using Gatsby in production: [https://www.gatsbyjs.org/showcase/ ](https://www.gatsbyjs.org/showcase/ "Gatsby Showcase")(includes the Flamingo e-commerce site). +**Answer:** Yep! Here are some sites using Gatsby in production: [https://www.gatsbyjs.org/showcase/ ](/showcase/ "Gatsby Showcase")(includes the Flamingo e-commerce site). ### Misc. questions @@ -225,7 +225,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** Basically a URL, eg `/blog/{post-name}` **Question:** Should i know React before starting to learn Gatsby? -**Answer:** You don't need to! Gatsby is a great playground for learning React. Check out this post: [https://www.gatsbyjs.org/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/](https://www.gatsbyjs.org/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/ "https://www.gatsbyjs.org/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/") +**Answer:** You don't need to! Gatsby is a great playground for learning React. Check out this post: [https://www.gatsbyjs.org/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/](/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/ "https://www.gatsbyjs.org/blog/2018-12-19-gatsby-scales-with-expertise-and-scope/") **Question:** You mention not having to worry about the web server, but what about the APIs that handle the order flow? Are those just separate API servers? **Answer:** Exactly, yep. You'll almost certainly have to worry about some servers, but it's incredibly freeing to not have to worry about your UI going down! Nice thing of going static/build-time SSR is that you're isolated from your API going down if you are able to generate static content from your API. @@ -252,7 +252,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** Not by default as it's rather heavy. There's docs on how to do this though if you want to support it. It's a progressive enhancement so things will all still work in older browsers. They just won't be as efficient. **Question:** Is there a good upgrade path for new versions of Gatsby? -**Answer:** Unless you're on v1, you won't need a migration. If you are on v1 and want to move to v2: [https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/](https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/ "https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/"). +**Answer:** Unless you're on v1, you won't need a migration. If you are on v1 and want to move to v2: [https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/](/docs/migrating-from-v1-to-v2/ "https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/"). **Question:** Following up on upgrade path question—how would you upgrade between version of 2.\~? **Answer:** You can bump the version # in your package.json and then you're done. @@ -273,7 +273,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** You can configure it that way -- send webhooks to have your CI server rebuild. **Question:** Can you talk more about Themes & how to create custom themes for V2? -**Answer:** Look at [https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/](https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/ "https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/") and [https://www.gatsbyjs.com/gatsby-days-themes-chris/](https://www.gatsbyjs.com/gatsby-days-themes-chris/ "https://www.gatsbyjs.com/gatsby-days-themes-chris/") and stay tuned for more posts in next week! +**Answer:** Look at [https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/](/blog/2018-11-11-introducing-gatsby-themes/ "https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/") and [https://www.gatsbyjs.com/gatsby-days-themes-chris/](https://www.gatsbyjs.com/gatsby-days-themes-chris/ "https://www.gatsbyjs.com/gatsby-days-themes-chris/") and stay tuned for more posts in next week! **Question:** Does Gatsby also have a solution for optimizing the experience of videos out of the box? Like gatsby-image for videos? **Answer:** Not at the moment. Video is harder to work with than images as video processing is very CPU intensive. We'd love to find a solution that works with video providers like YouTube, Vimeo, etc. @@ -282,7 +282,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh **Answer:** Yes- they're all posted on our website here: [https://www.gatsbyjs.com/resources/webinars/](https://www.gatsbyjs.com/resources/webinars/ "Gatsby Webinars") **Question:** What's the best way to get involved with contributing to Gatsby? Do you have regular calls for contributors or a preferred async channel e.g. Slack / Discord? -**Answer:** We do have Discord, and highly recommend it! Check out our Community page -> [https://www.gatsbyjs.org/docs/community/](https://www.gatsbyjs.org/docs/community/ "Gatsby Community") +**Answer:** We do have Discord, and highly recommend it! Check out our Community page -> [https://www.gatsbyjs.org/docs/community/](/docs/community/ "Gatsby Community") --- diff --git a/docs/blog/2019-02-27-reactiflux-q-and-a/index.md b/docs/blog/2019-02-27-reactiflux-q-and-a/index.md index 8873a01eb2435..160f115046e23 100644 --- a/docs/blog/2019-02-27-reactiflux-q-and-a/index.md +++ b/docs/blog/2019-02-27-reactiflux-q-and-a/index.md @@ -49,7 +49,7 @@ Date of interview: December 13 2018 **A:** Improving integrations with hosted services (CMSs etc) often used with Gatsby + improving Gatsby build speeds — we're working to support very large sites in new year e.g. 1 million+ pages. -We're also working on adding [Gatsby Theme support](https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/) which @biscarch is leading. +We're also working on adding [Gatsby Theme support](/blog/2018-11-11-introducing-gatsby-themes/) which @biscarch is leading. — kylemathews @@ -81,7 +81,7 @@ We're also working on adding [Gatsby Theme support](https://www.gatsbyjs.org/blo **Q:** How far down the roadmap are incremental builds? — ghardin137 -**A:** Pretty close! We're working on creating a hosted Gatsby build service which will include incremental build support. We should be able to launch that in first half of next year. We're focused right now on launching [Gatsby Preview](https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/) and then this will be the next thing we'll tackle. +**A:** Pretty close! We're working on creating a hosted Gatsby build service which will include incremental build support. We should be able to launch that in first half of next year. We're focused right now on launching [Gatsby Preview](/blog/2018-07-17-announcing-gatsby-preview/) and then this will be the next thing we'll tackle. — kylemathews @@ -89,7 +89,7 @@ We're also working on adding [Gatsby Theme support](https://www.gatsbyjs.org/blo **Q:** Do you hope or believe that gatsby (and JAM-stack in general), headless CMS's and microservices will overcome rigid and outrdated wordpress sites and architechture? — max -**A:** Yup! That's why I started [the Gatsby OSS project and company](https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/)! CMSs we're designed in the late 1990s and are very outdated for today's cloud/serverless computing environment. We want Gatsby to be able to replace CMSs. +**A:** Yup! That's why I started [the Gatsby OSS project and company](/blog/2018-05-24-launching-new-gatsby-company/)! CMSs we're designed in the late 1990s and are very outdated for today's cloud/serverless computing environment. We want Gatsby to be able to replace CMSs. — kylemathews @@ -141,7 +141,7 @@ While it's inevitable that bugs come with any platform you choose to build on, G **A:** Yeah — this is a top priority — we've been a bit overwhelmed post v2 launch handling issues/PRs but our we've thought a lot about this problem and next steps are a) [make it possible to export your schema and directly control it](https://github.com/gatsbyjs/gatsby/issues/4261). -We're also very excited that more and more services are offering native GraphQL APIs which gets us out of having to dynamically create the schema. We added [support for stitching in graphql schemas](https://www.gatsbyjs.org/blog/2018-09-25-announcing-graphql-stitching-support/) earlier this year and have a lot more plans to make schema stitching more powerful e.g. [add support for transforming data from 3rd party schemas](https://github.com/gatsbyjs/rfcs/pull/11). +We're also very excited that more and more services are offering native GraphQL APIs which gets us out of having to dynamically create the schema. We added [support for stitching in graphql schemas](/blog/2018-09-25-announcing-graphql-stitching-support/) earlier this year and have a lot more plans to make schema stitching more powerful e.g. [add support for transforming data from 3rd party schemas](https://github.com/gatsbyjs/rfcs/pull/11). — kylemathews @@ -149,9 +149,9 @@ We're also very excited that more and more services are offering native GraphQL **Q:** Any info on contributing to the codebase or documentation greatly appreciated. Any tips that might not be in the official How To, or a contact if applicable/available. Thank you for your time — seanmoore1976 -**A:** Definitely! So I'd recommend starting with the [How to Contribute guide](https://www.gatsbyjs.org/docs/how-to-contribute/). +**A:** Definitely! So I'd recommend starting with the [How to Contribute guide](/docs/how-to-contribute/). -It's a great place to get started. That said, I'd also encourage to check out [a Pairing session](https://www.gatsbyjs.org/docs/pair-programming/), where a Gatsby employee and you will pair 1:1 for about an hour or so to work on a problem or challenge you've run into. We've had some really good stuff come out of pairing sessions, and I think people really like them as a way to get started contributing! +It's a great place to get started. That said, I'd also encourage to check out [a Pairing session](/docs/pair-programming/), where a Gatsby employee and you will pair 1:1 for about an hour or so to work on a problem or challenge you've run into. We've had some really good stuff come out of pairing sessions, and I think people really like them as a way to get started contributing! — dustin @@ -163,7 +163,7 @@ It's a great place to get started. That said, I'd also encourage to check out [a So--however you implement authentication into a React application can be followed similarly with a Gatsby application, because a Gatsby app is a React application. -We do have [a guide/tutorial written here](https://www.gatsbyjs.org/docs/authentication-tutorial/) which many have found helpful. Shameless shout out to my little side-project (just a demo, not a real product!) [gatsby-mail](https://github.com/dschau/gatsby-mail) which has user authentication (via React context) as well. +We do have [a guide/tutorial written here](/docs/authentication-tutorial/) which many have found helpful. Shameless shout out to my little side-project (just a demo, not a real product!) [gatsby-mail](https://github.com/dschau/gatsby-mail) which has user authentication (via React context) as well. Check it out, and hope it's helpful! @@ -183,7 +183,7 @@ A Gatsby email _application_. Contribute to DSchau/gatsby-mail development by cr **Q:** What support will Gatsby team provide to .com clients and the idea behind it? — kdichev -**A:** Many of the largest OSS projects have commercial companies backing them. Complicated software is well... complicated :smiley: and requires a lot of investment to build and maintain. I founded Gatsby Inc to be an excellent steward of the project and ecosystem & provide support and services for commercial users of Gatsby. Most large companies that adopt open source want to pay for commercial support — we provide that. Also there's many cloud services we're building that'll add a lot of value to companies using Gatsby like the before mentioned [Gatsby Preview](https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/). +**A:** Many of the largest OSS projects have commercial companies backing them. Complicated software is well... complicated :smiley: and requires a lot of investment to build and maintain. I founded Gatsby Inc to be an excellent steward of the project and ecosystem & provide support and services for commercial users of Gatsby. Most large companies that adopt open source want to pay for commercial support — we provide that. Also there's many cloud services we're building that'll add a lot of value to companies using Gatsby like the before mentioned [Gatsby Preview](/blog/2018-07-17-announcing-gatsby-preview/). — kylemathews @@ -217,7 +217,7 @@ P.S. Gatsby is hiring worldwide for OSS Maintainers **Q:** What about non-product partnership? — yuchi -**A:** We've started with [an agency partner program](https://www.gatsbyjs.org/blog/2018-08-01-partner-program/) which we'll be talking about more soon — if interested, please sign up! +**A:** We've started with [an agency partner program](/blog/2018-08-01-partner-program/) which we'll be talking about more soon — if interested, please sign up! — kylemathews diff --git a/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md b/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md index baedfc5dce87f..1c74d54fd9c70 100644 --- a/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md +++ b/docs/blog/2019-03-07-sell-gatsby-to-clients/index.md @@ -44,7 +44,7 @@ Since the entire website is pre-built, this translates into blazing fast page lo When you know your audience, then you can start to frame the discussion around what they care about. For a marketer, business manager, and many engineering managers, they care about business outcomes. So let’s look at each of the benefits from above: -**SEO (Search Engine Optimization):** SEO is a high priority for marketers and content creators. They spend a lot of time writing compelling content and crafting a narrative around their products, services, and brand. An SEO-optimized website means a higher organic search ranking and more website traffic, which can translate into leads and revenue. Many marketers have the ability to increase the quality of their content but not as much impact in increasing the website’s performance, which is a [key factor](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html "SEO and website performance") in SEO and search rankings for both mobile and [desktop](https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html "SEO for desktop"). Marketers can spend so much time optimizing content for SEO but then get blasted with a slow website. It’s a frustrating experience to get penalized for something you can’t control. For more about how Gatsby improves SEO, [see here](https://www.gatsbyjs.org/docs/seo/ "Gatsby and SEO"). +**SEO (Search Engine Optimization):** SEO is a high priority for marketers and content creators. They spend a lot of time writing compelling content and crafting a narrative around their products, services, and brand. An SEO-optimized website means a higher organic search ranking and more website traffic, which can translate into leads and revenue. Many marketers have the ability to increase the quality of their content but not as much impact in increasing the website’s performance, which is a [key factor](https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html "SEO and website performance") in SEO and search rankings for both mobile and [desktop](https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html "SEO for desktop"). Marketers can spend so much time optimizing content for SEO but then get blasted with a slow website. It’s a frustrating experience to get penalized for something you can’t control. For more about how Gatsby improves SEO, [see here](/docs/seo/ "Gatsby and SEO"). **Lead Conversion:** Many websites are optimized for lead conversion. Marketers need to capture leads (get a person’s email address or other contact information) to follow up with marketing/sales materials, answer questions, and sell their products/services. When a website is slow, it greatly impacts lead conversion rates because less people will spend the time to fill out a form if the page takes longer to load. In fact, mobile websites that take more than 3 seconds to load have a [53% bounce rate](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ "High bounce rate for slow sites"). That means you’re losing over half of your website visitors! And for e-commerce, [some estimates say you lose up to 1% in revenue for every 100ms delay in page load time.](https://www.section.io/blog/page-load-time-bounce-rate/ "page load times and ecommerce") The longer it takes a page the load, the more customers/leads/revenue you lose. No one wants that. @@ -54,13 +54,13 @@ When you know your audience, then you can start to frame the discussion around w ### **4. Give examples** -Give examples of websites that use the tech stack you’re recommending for the project and speak to the benefits that matter to your audience. At Gatsby, we have several case studies and the [Gatsby site showcase](https://www.gatsbyjs.org/showcase/ "Gatsby Site Showcase"), which highlights some of the latest Gatsby sites. Reference the site showcase or any of the case studies on our blog. I’ve included a list of current case studies and other resources below. And here are a few specific examples to choose from: +Give examples of websites that use the tech stack you’re recommending for the project and speak to the benefits that matter to your audience. At Gatsby, we have several case studies and the [Gatsby site showcase](/showcase/ "Gatsby Site Showcase"), which highlights some of the latest Gatsby sites. Reference the site showcase or any of the case studies on our blog. I’ve included a list of current case studies and other resources below. And here are a few specific examples to choose from: -**SEO for the Win!:** In a recent [case study](https://www.gatsbyjs.org/blog/2019-01-30-flamingo-case-study/ "Flamingo case study") with [Harry’s](https://www.harrys.com/en/us "Harry's"), Johnny Lin (Engineering Manager) and his team needed to launch a new website to support the launch of a new brand, [Flamingo](https://www.shopflamingo.com/ "Flamingo"). Flamingo is an e-commerce site that sells shaving products for women. The Flamingo team was preparing a big product launch on a tight timeline and needed a stable, secure website that was optimized for SEO. They knew they needed high search rankings to compete in this competitive market and a Gatsby website was the perfect fit. Johnny talked about the importance of the website: +**SEO for the Win!:** In a recent [case study](/blog/2019-01-30-flamingo-case-study/ "Flamingo case study") with [Harry’s](https://www.harrys.com/en/us "Harry's"), Johnny Lin (Engineering Manager) and his team needed to launch a new website to support the launch of a new brand, [Flamingo](https://www.shopflamingo.com/ "Flamingo"). Flamingo is an e-commerce site that sells shaving products for women. The Flamingo team was preparing a big product launch on a tight timeline and needed a stable, secure website that was optimized for SEO. They knew they needed high search rankings to compete in this competitive market and a Gatsby website was the perfect fit. Johnny talked about the importance of the website: We wanted to focus on performance at the beginning of the project, having it baked in. It’s easier than trying to make an already built website perform later. And as an e-commerce site, performance (SEO and conversion) is super important and Gatsby takes care of this for us. -**60% More Leads:** Zach Muha, Director of Digital Marketing with [Youfit Health Clubs](https://www.gatsbyjs.org/blog/2018-11-16-youfit-case-study/ "Youfit Health Clubs"), depended on the website to attract new customers. But their site was bogged down with excruciatingly slow page load times (some pages took 22 seconds to load!). This led to a high bounce rate which was killing the lead conversion numbers. Since [rebuilding the site with Gatsby](https://www.gatsbyjs.org/blog/2018-11-16-youfit-case-study/ "Youfit case study"), Youfit saw a 22% increase in organic search results and a 60% increase in lead conversion. Prior to the website rebuild, Youfit Health Clubs viewed their website as an “add-on” because the team did not see it as critical to the success of the company. But now that they are experiencing first-hand the benefits of Gatsby, their website has become a primary channel for lead generation. +**60% More Leads:** Zach Muha, Director of Digital Marketing with [Youfit Health Clubs](/blog/2018-11-16-youfit-case-study/ "Youfit Health Clubs"), depended on the website to attract new customers. But their site was bogged down with excruciatingly slow page load times (some pages took 22 seconds to load!). This led to a high bounce rate which was killing the lead conversion numbers. Since [rebuilding the site with Gatsby](/blog/2018-11-16-youfit-case-study/ "Youfit case study"), Youfit saw a 22% increase in organic search results and a 60% increase in lead conversion. Prior to the website rebuild, Youfit Health Clubs viewed their website as an “add-on” because the team did not see it as critical to the success of the company. But now that they are experiencing first-hand the benefits of Gatsby, their website has become a primary channel for lead generation. **Easy Onboarding for the Team:** For the Flamingo website launch, it was important that the team worked well together since they were working on a tight timeline. There was no room for major miscommunications or big errors. But because of Gatsby’s excellent documentation and ease of use, Johnny felt confident his team would be successful. He even had confidence in new team members handling the post-launch support. @@ -76,12 +76,12 @@ Case studies like the ones above can help show (not just tell) a team member or **Case Studies and Other Resources:** -[Flamingo, women’s body care brand from Harry’s, chooses Gatsby for critical ecommerce launch, 5X faster page loads](https://www.gatsbyjs.org/blog/2019-01-30-flamingo-case-study/ "Flamingo case study") -[Beyond Static: Hapticmedia uses Gatsby to a build dynamic web app](https://www.gatsbyjs.org/blog/2019-02-05-hapticmedia-case-study/ "Hapticmedia case study") -[Youfit uses Gatsby to increase lead generation by 60%](https://www.gatsbyjs.org/blog/2018-11-16-youfit-case-study/ "Youfit case study") -[SendGrid Knowledge Center cuts page load times in half with Gatsby](https://www.gatsbyjs.org/blog/2018-09-27-sendgrid-knowledge-center-cuts-page-load-times-in-half-with-gatsby/ "SendGrid case study") -[IBM Uses Gatsby to Manage Enterprise-Level Content](https://www.gatsbyjs.org/blog/2018-12-17-ibm-case-study/#big-company-big-website "IBM case study") -[Building a large, internationalized e-commerce website with Gatsby at Daniel Wellington](https://www.gatsbyjs.org/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/ "Daniel Wellington case study") +[Flamingo, women’s body care brand from Harry’s, chooses Gatsby for critical ecommerce launch, 5X faster page loads](/blog/2019-01-30-flamingo-case-study/ "Flamingo case study") +[Beyond Static: Hapticmedia uses Gatsby to a build dynamic web app](/blog/2019-02-05-hapticmedia-case-study/ "Hapticmedia case study") +[Youfit uses Gatsby to increase lead generation by 60%](/blog/2018-11-16-youfit-case-study/ "Youfit case study") +[SendGrid Knowledge Center cuts page load times in half with Gatsby](/blog/2018-09-27-sendgrid-knowledge-center-cuts-page-load-times-in-half-with-gatsby/ "SendGrid case study") +[IBM Uses Gatsby to Manage Enterprise-Level Content](/blog/2018-12-17-ibm-case-study/#big-company-big-website "IBM case study") +[Building a large, internationalized e-commerce website with Gatsby at Daniel Wellington](/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/ "Daniel Wellington case study") -[How Gatsby improves SEO](https://www.gatsbyjs.org/docs/seo/ "Gatsby and SEO") -[One-page summary](https://www.gatsbyjs.org/gatsby-one-pager.pdf "Gatsby summary") of Gatsby +[How Gatsby improves SEO](/docs/seo/ "Gatsby and SEO") +[One-page summary](/gatsby-one-pager.pdf "Gatsby summary") of Gatsby diff --git a/docs/blog/2019-03-11-gatsby-themes-roadmap/index.md b/docs/blog/2019-03-11-gatsby-themes-roadmap/index.md index 20e6c53fa099d..e76dd2c29fb40 100644 --- a/docs/blog/2019-03-11-gatsby-themes-roadmap/index.md +++ b/docs/blog/2019-03-11-gatsby-themes-roadmap/index.md @@ -35,7 +35,7 @@ plugin itself, resulting in `[...themeA.plugins, themeA, ...themeB.plugins, them any plugin it includes. For more on this, read [Introducing Gatsby -Themes](https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/). +Themes](/blog/2018-11-11-introducing-gatsby-themes/). We introduced one major change to composition after the initial release to support child themes. A child theme is a theme that also uses the @@ -102,7 +102,7 @@ In fact, any file that is processed by webpack can be shadowed. To learn more about child themes and component shadowing, [read this themes update blog -post](https://www.gatsbyjs.org/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/). +post](/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/). ## Improving Documentation @@ -142,7 +142,7 @@ core community `BlogPost` type with multi-author support. It would be immediately compatible with any theme that used the `BlogPost` type. If you're following closely you may have already seen [a blog post by Mikhail -Novikov](https://www.gatsbyjs.org/blog/2019-03-04-new-schema-customization/) on +Novikov](/blog/2019-03-04-new-schema-customization/) on the new schema customization APIs: `createTypes` and `createResolvers`. These are the primitives we are using to build data abstractions to use with themes. We're still experimenting and doing research here so I won't show any code diff --git a/docs/blog/2019-03-15-design-code-blog-post/index.md b/docs/blog/2019-03-15-design-code-blog-post/index.md index acd64faae3245..928605649d30a 100644 --- a/docs/blog/2019-03-15-design-code-blog-post/index.md +++ b/docs/blog/2019-03-15-design-code-blog-post/index.md @@ -44,4 +44,4 @@ The launch was a success and landed Design+Code at #1 on [Product Hunt](https:// Gatsby ignited their Search Engine Optimization (SEO) with Lighthouse scores of SEO at 100, Best Practices at 93, and Performance at 97 out of 100. The site is far out-performing its predecessor and has become the content-driven, sales machine that was anticipated. -Try out Gatsby to see how it can do the same for you. [Get started here](https://www.gatsbyjs.org/ "Gatsby get started"). +Try out Gatsby to see how it can do the same for you. [Get started here](/ "Gatsby get started"). diff --git a/docs/blog/2019-03-21-add-auth0-to-gatsby-livestream/index.md b/docs/blog/2019-03-21-add-auth0-to-gatsby-livestream/index.md index 02b7ba769a396..e009611eb342b 100644 --- a/docs/blog/2019-03-21-add-auth0-to-gatsby-livestream/index.md +++ b/docs/blog/2019-03-21-add-auth0-to-gatsby-livestream/index.md @@ -36,12 +36,12 @@ The code we built is [available on GitHub](https://github.com/jlengstorf/gatsby- ## Additional links and resources -- [Building Apps With Gatsby](https://www.gatsbyjs.org/docs/building-apps-with-gatsby/) +- [Building Apps With Gatsby](/docs/building-apps-with-gatsby/) - [Auth0](https://auth0.com/) - [Simple auth example in Gatsby](https://github.com/gatsbyjs/gatsby/blob/master/examples/simple-auth/) - [Source code for the Gatsby store](https://github.com/gatsbyjs/store.gatsbyjs.org), which uses Auth0 to authenticate users - [Source code for the Gatsby store API](https://github.com/gatsbyjs/api.gatsbyjs.org), which uses Auth0 to authenticate requests -- [Docs for the `wrapRootElement` API](https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement) +- [Docs for the `wrapRootElement` API](/docs/browser-apis/#wrapRootElement) - [Ado Kukic on Twitter](https://twitter.com/KukicAdo) - [Jason Lengstorf on Twitter](https://twitter.com/jlengstorf) diff --git a/docs/blog/2019-03-22-introducing-gatsby-preview-beta/index.md b/docs/blog/2019-03-22-introducing-gatsby-preview-beta/index.md index aaa0cafeea48a..046087a933e78 100644 --- a/docs/blog/2019-03-22-introducing-gatsby-preview-beta/index.md +++ b/docs/blog/2019-03-22-introducing-gatsby-preview-beta/index.md @@ -11,7 +11,7 @@ tags: ## What we’ve been up to -Back in July we announced [our alpha release of Gatsby Preview](https://www.gatsbyjs.org/blog/2018-07-17-announcing-gatsby-preview/). The team has been hard at work since getting your feedback and incorporating it into Gatsby Preview product. +Back in July we announced [our alpha release of Gatsby Preview](/blog/2018-07-17-announcing-gatsby-preview/). The team has been hard at work since getting your feedback and incorporating it into Gatsby Preview product. We’re excited to announce Gatsby Preview is now in beta! To the many people that have signed up to try Preview, we'll be inviting more and more of you over the coming weeks. Gatsby Preview will continue to be invite-only until we've worked with enough customers that we're confident of the usability, reliability, and scalability of our platform. diff --git a/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md b/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md index 0e36965088239..028b6bd7d2257 100644 --- a/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md +++ b/docs/blog/2019-03-26-what-the-jamstack-means-for-marketing/index.md @@ -108,7 +108,7 @@ As always, there is still work to do to ensure the site ranks well for the most - [Algolia](https://algolia.com/) powering the search functionality - [Zapier](https://zapier.com/) to automate community feedback into Slack for content improvements -We have also built and contributed an [advanced sitemap plugin](https://www.gatsbyjs.org/packages/gatsby-plugin-advanced-sitemap/?=sitemap) which automatically builds a sitemap for any Gatsby project. +We have also built and contributed an [advanced sitemap plugin](/packages/gatsby-plugin-advanced-sitemap/?=sitemap) which automatically builds a sitemap for any Gatsby project. Much of the SEO functionality is being pulled directly from Ghost via the API (which has all of the structured data, custom meta data, canonicals etc built-in). This means I can manage most of the content and meta data directly in the Ghost admin client. When I save new changes they're pushed into the static front-end via Netlify – it's a fantastic workflow!