Build Gatsby Blog

titleBuild Gatsby Blogdate2020-05-11path/build-gatsby-blogauthorRick LoveexcerptBuild your own React based Blog with Gatsbytagstutorial, gatsby, vscode, github

Gatsby is a static site generator based on React.

What this practically means is that you can create a great website that is super fast, but still allows you to code in the best UI Framework (React) to customize and create powerful components.

It has a great ecosystem and is very popular. In fact, the React team uses Gatsby for their docs pages.

Preview the Target

Create a Netlify Account

Create a New Netlify Site with Gatsby

Clone the Gatsby repo locally

  • Open the Github link for your blog (from the last step, or go to github and find your blog repo)
  • Get the clone url (on the right)
  • Git Clone your repo
    • Copy the clone link
    • Open Terminal
    • Navigate to your Projects/Sites directory
      • cd /Projects/Sites
    • Run the git clone command:
      • i.e. git clone https://github.com/ricklove/rick-love-blog.git

Open the site in Visual Studio Code

  • Open vscode
  • Open Folder: Projects/Sites/YOUR-NAME-blog
  • View the contents
    • src/pages/
      • This contains the main pages for the site
    • src/pages/about.md
      • This is a simple page that you can copy that as a template to create new pages
    • src/posts/
      • This contains the blog posts for the site
    • src/posts/example.md
      • This is an example post and you can copy this as a template to create new blog posts

Create a Blog Post

  • Copy src/posts/example.md and create a new blog post 2020-05-11-first-post.md
  • Enter the appropriate information for the Title, Author, etc.
  • Write a short blog post in markdown

Commit and Push to Deploy

  • Commit the changes with vscode
  • Push the changes
  • Wait for the update
  • Visit Netlify Config Page for the blog to see status
    • Look on the side to see "Production Deploys"
  • View the blog post on the internet

Related Articles

2020-10-24Typescript Type System Adventurevscode2020-10-13Typescript 'any' is eviltutorial2020-05-12Customize Gatsby Blogtutorial, gatsby2020-05-11Build Gatsby Blogtutorial, gatsby, vscode, github



© 2021 Rick Love