React blog built & deployed in 10 minutes
Tags: react, javascript, webdev, beginners
Published: 2019-12-28 13:36:03

---
title: React blog built & deployed in 10 minutes
published: true
date: 2019-12-28 13:30:00 UTC
tags: ["react", "javascript", "webdev", "beginners"]
canonical_url: https://talkoverflow.com/posts/creating-gatsby-blog/
---

Hello! Do you know [Dan Abramov](https://twitter.com/dan_abramov?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor)? He’s the creator of popular Javascript `react-redux` library and a member of the core React team.

In this post, we will create and deploy a blog based on his site - [overreacted.io](https://overreacted.io) using **React** , **Gatsby** and its **server-side rendering/graphQL features** in less than **10 minutes**!

## <svg viewbox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Our goal:
<undefined><span style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:1161px">
      <span style="padding-bottom:72.17915590008613%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcsVAn//xAAVEAEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAQABBQIpf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABkQAAIDAQAAAAAAAAAAAAAAAAABEBEx8P/aAAgBAQABPyHQ40OuUf/aAAwDAQACAAMAAAAQ8B//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAABBAMBAAAAAAAAAAAAAAARAAEQUSExceH/2gAIAQEAAT8QMhVFAXc5oRu4nmNc9R//2Q==');background-size:cover;display:block"></span>
  <img alt="Overreacted.io" title="Overreacted.io" src="https://talkoverflow.com/static/6e29963110875d5028f8281ad11c50a6/d2488/overreacted.jpg" srcset="/static/6e29963110875d5028f8281ad11c50a6/89707/overreacted.jpg 345w,/static/6e29963110875d5028f8281ad11c50a6/f3f8e/overreacted.jpg 690w,/static/6e29963110875d5028f8281ad11c50a6/d2488/overreacted.jpg 1161w" sizes="(max-width: 1161px) 100vw, 1161px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy">
    </span><br></undefined>
## <svg viewbox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Prerequisites

If you don’t have yet `node` installed on your system, follow appropriate installation instructions on [nodejs.org](https://nodejs.org/en/).

## <svg viewbox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Let’s begin!

First thing we need to do is to install `gatsby-cli`:

```
npm i -g gatsby-cli
```

  

Now we can bootstrap the project

```
gatsby new blazing-fast-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
```

  

This command clones the project template and prepares a development environment.

After it’s done, we can start the application:

```bash
cd blazing-fast-blog ; gatsby develop
```

Our page should be up and running in a few seconds.

Check if it’s running - [http://localhost:8000](http://localhost:8000)

When it’s up, you can also take a quick look at the **GraphQL data explorer** running here -\> [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql)

It’s not relevant for us for now, but it’s very handy during the development (it only runs for the development version of the site of course).

We need to make a few quick adjustments:

- open `gatsby-config.json`

It’s a file where we can configure our Gatsby site - we can add & configure plugins or define site metadata.

For now, you can adjust the `title`, `author` and `description` in the `siteMetadata` section.

After you’re done with adjusting `siteMetadata`, open `src/gatsby-theme-blog/components/gatsby-plugin-theme-ui/colors.js`

Here you can overshadow the default theme colours.

Replace the `src/gatsby-theme-blog/components/gatsby-plugin-theme-ui/colors.js` file content with:

```js
import merge from "deepmerge"
import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"

const darkBackground = `#282B35`
const darkPrimary = `#F9A6C4`
const lightBackground = `#FFFFFF`
const lightPrimary = `#D23669`

export default merge(defaultThemeColors, {
 primary: lightPrimary,
 lightBackground: lightBackground,
 modes: {
 dark: {
 background: darkBackground,
 primary: darkPrimary,
 },
 },
})
```

Save the changes. Now, navigate to [http://localhost:8000](http://localhost:8000) and compare with [overreacted.io](https://overreacted.io)

Quite nice for a couple of minutes of work, huh? **We got a nice foundation for further customizations and development of our site**.

By editing the `colors.js` file we used Gatsby’s concept of theme **shadowing** , but before we go through Gatsby details, let’s deploy our site!

## <svg viewbox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Deployment

We’ll use `Netlify` - it gives us a **CI/CD pipeline, SSL, custom domain, hosting and integration with GitHub for free**. Everything happens kinda automagically - for me, their free plan is a steal!

## <svg viewbox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>How does the process of publishing a new version of site look like?

1. You edit your site/create new content
2. You commit and push to your GitHub repository
3. Netlify detects new commits, builds the page, runs tests & deploys a new version seamlessly

First thing we need to do to deploy our site, is to create a new repository on our GitHub account.

- Go to [github.com](https://github.com), log in and create a new repository

After creating a new GitHub repository, in terminal navigate to our project folder.

**Then, commit & push the changes to the newly created GitHub repository** (with proper YOUR\_USERNAME and REPO\_NAME):

```bash
git add . 
git commit -m "Initial structure"
git remote add origin https://github.com/${YOUR_USERNAME}/${REPO_NAME}.git 
git push -u origin master
```

  

Now it’s time to navigate to [Netlify.com](https://netlify.com) and register & log in

When you’re logged in, navigate to your `Profile` -\> `Sites`

 ![Netlify Sites](https://talkoverflow.com/static/41d234806bf72ebb273bc926d0c1b766/d2488/netlify-sites.jpg "Netlify Sites")  

Click `New site from Git`

Choose GitHub & authorize

 ![Netlify Github](https://talkoverflow.com/static/17c5c657098ff74e6c7b3da37b81413d/d2488/netlify-github.jpg "Netlify Github")  

After authorization, a list of repositories should appear:

<undefined><span style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:1161px">
      <span style="padding-bottom:51.93798449612403%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe5pSKP/xAAWEAEBAQAAAAAAAAAAAAAAAAARASD/2gAIAQEAAQUCCZ//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAVEAEBAAAAAAAAAAAAAAAAAAABIP/aAAgBAQAGPwIK/8QAFxABAQEBAAAAAAAAAAAAAAAAAQAREP/aAAgBAQABPyEBm4GRIMxz/9oADAMBAAIAAwAAABDjz//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQADAAMAAAAAAAAAAAAAAAEAESEQMUH/2gAIAQEAAT8QxfIbtBUt6MUtgGrJ04//2Q==');background-size:cover;display:block"></span>
  <img alt="Netlify Github" title="Netlify Github" src="https://talkoverflow.com/static/86195eaf4e9a732da4176d95bfab582b/d2488/netlify-repos.jpg" srcset="/static/86195eaf4e9a732da4176d95bfab582b/89707/netlify-repos.jpg 345w,/static/86195eaf4e9a732da4176d95bfab582b/f3f8e/netlify-repos.jpg 690w,/static/86195eaf4e9a732da4176d95bfab582b/d2488/netlify-repos.jpg 1161w" sizes="(max-width: 1161px) 100vw, 1161px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy">
    </span><br></undefined>

If you don’t see your new repository, click `Configure the Netlify app on GitHub` and grant Netlify access to your repository

After you’re done with this, select your repository from the list.

In next step, simply click `Deploy site`

<undefined><span style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:1161px">
      <span style="padding-bottom:72.17915590008613%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAOABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAAB3SNiIYv/xAAYEAADAQEAAAAAAAAAAAAAAAAAARECEP/aAAgBAQABBQKEIjTnf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABcQAAMBAAAAAAAAAAAAAAAAAAABEDH/2gAIAQEABj8CmCv/xAAaEAEAAQUAAAAAAAAAAAAAAAABABARMUFR/9oACAEBAAE/IUAAEBwi2RBd22v/2gAMAwEAAgADAAAAEHTP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGxABAAICAwAAAAAAAAAAAAAAAQARECExcYH/2gAIAQEAAT8QCTDQUag+fEqIWjsgmF1FSsf/2Q==');background-size:cover;display:block"></span>
  <img alt="Netlify Deploy" title="Netlify Deploy" src="https://talkoverflow.com/static/440fd3b4c2a870968f2065dac2cc62f6/d2488/deploy-netlify.jpg" srcset="/static/440fd3b4c2a870968f2065dac2cc62f6/89707/deploy-netlify.jpg 345w,/static/440fd3b4c2a870968f2065dac2cc62f6/f3f8e/deploy-netlify.jpg 690w,/static/440fd3b4c2a870968f2065dac2cc62f6/d2488/deploy-netlify.jpg 1161w" sizes="(max-width: 1161px) 100vw, 1161px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy">
    </span><br></undefined>

And that’s all! After a minute, your site will be up and running. You can check its URL here:

<undefined><span style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:853px">
      <span style="padding-bottom:118.2883939038687%;position:relative;bottom:0;left:0;background-image:url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAYABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAEGBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHlNjUxjaCUWhP/xAAZEAABBQAAAAAAAAAAAAAAAAAAAREgISL/2gAIAQEAAQUCs0Os/wD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAWEAADAAAAAAAAAAAAAAAAAAAAMOH/2gAIAQEABj8CIj//xAAcEAACAgIDAAAAAAAAAAAAAAAAARFBEJExcYH/2gAIAQEAAT8hTjw9E0TDlvQ+mKVR4MWP/9oADAMBAAIAAwAAABC76AH/xAAXEQADAQAAAAAAAAAAAAAAAAAAEBEh/9oACAEDAQE/EIa//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAQ/9oACAECAQE/EGd//8QAHxAAAgEEAgMAAAAAAAAAAAAAAREAITFBcWHhgZHw/9oACAEBAAE/ECnJ646wsofnExw76QGRU1FE63L3TcVVA8hxFj0obz//2Q==');background-size:cover;display:block"></span>
  <img alt="Netlify Url" title="Netlify Url" src="https://talkoverflow.com/static/0be9df65497a9d6cbbcd55ef3adac9d9/34ce1/netlify-url.jpg" srcset="/static/0be9df65497a9d6cbbcd55ef3adac9d9/89707/netlify-url.jpg 345w,/static/0be9df65497a9d6cbbcd55ef3adac9d9/f3f8e/netlify-url.jpg 690w,/static/0be9df65497a9d6cbbcd55ef3adac9d9/34ce1/netlify-url.jpg 853w" sizes="(max-width: 853px) 100vw, 853px" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0" loading="lazy">
    </span><br></undefined>

Done & Deployed!

 ![Netlify Deploy](https://talkoverflow.com/static/59b2cd7816e917bbe0a84b5f6d5caa83/34ce1/netlify-deployed.jpg "Netlify Deploy")  

If you have a custom domain, you can follow instructions from **2nd step of Getting started on Netlify** and use your domain instead.

## <svg viewbox="0 0 16 16" width="16" height="16" fill="currentcolor" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Conclusions

In this post, in a couple of minutes, we created overreacted.io-like blog and deployed it to Netlify. We got a solid foundation for blog customizations and **possibility of learning React, GraphQL & Gatsby while maintaining our blog**.

If you **liked this post** or **want me to write more** posts about Gatsby and site customizations/adding features, **please let me know in comments and likes**.

**Thank you for reading!**