backgroundLayer 1Navigate back to the homepage

React & GraphQL blog Done & Deployed in 10 minutes

Patryk Jeziorowski
December 28th, 2019 · 2 min read

Hello! Do you know Dan Abramov? 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 using React, Gatsby and its server-side rendering/graphQL features in less than 10 minutes!

Our goal:

Overreacted.io

Prerequisites

If you don’t have yet node installed on your system, follow appropriate installation instructions on nodejs.org.

Let’s begin!

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

1npm i -g gatsby-cli

Now we can bootstrap the project

1gatsby 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:

1cd blazing-fast-blog ; gatsby develop

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

Check if it’s running - 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

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:

1import merge from "deepmerge"
2import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"
3
4const darkBackground = `#282B35`
5const darkPrimary = `#F9A6C4`
6const lightBackground = `#FFFFFF`
7const lightPrimary = `#D23669`
8
9export default merge(defaultThemeColors, {
10 primary: lightPrimary,
11 lightBackground: lightBackground,
12 modes: {
13 dark: {
14 background: darkBackground,
15 primary: darkPrimary,
16 },
17 },
18})

Save the changes. Now, navigate to http://localhost:8000 and compare with 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!

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!

How does the process of publishing a new version of the 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, 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):

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

Now it’s time to navigate to Netlify.com and register & login

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

Netlify


Click New site from Git

Choose GitHub & authorize Netlify


After authorization, a list of repositories should appear: Netlify

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 Netlify

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

Done & Deployed! Netlify


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

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

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from talkoverflow

Learn Golang - Basics

Introduction Go is a modern programming language that is very simple and quick to learn. It makes full use of the power of today’s…

December 23rd, 2019 · 5 min read

What are design patterns?

High-level overview OOP (object-oriented programming) gurus once concluded that it's pointless to reinvent the wheel every time you…

December 21st, 2019 · 1 min read
© 2019–2020 talkoverflow
Link to $https://facebook.com/talkoverflowsoftware/Link to $https://twitter.com/pjeziorowskiLink to $https://github.com/pjeziorowskiLink to $https://www.linkedin.com/in/patrykjeziorowski/