Checkout the latest course: Building REST APIs with Flask and Python in 2023

Starting a new blog site using Gatsby Starter blog tempelate

Article Author
Pratap Sharma4 mins read
bloggatsbystarterblog

Everyone at some point of time wants to go digital and start a blog site for themselves of for their company. In this blog, I'll walk you through how to get your blog site ready.

Getting Started

Kick-off your personal-blog with this gatsby-blog boilerplate. The starter gets shipped with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing-fast app generator for React.

Before we start, please let us make sure we have node and npm installed in your system. Please follow the installation process of Node.

🚀 Quickstart

  1. Creating a Gatsby site.

You can use the Gatsby CLI to create a new site, specifying the blog starter and the project name.

# run command to create a new Gatsby site using the blog starter boilerplate

$ npx gatsby new pratapsharma.io https://github.com/gatsbyjs/gatsby-starter-blog
  1. Start developing the site.

Now, navigate into your new site's directory and start it up by running the command.

cd pratapsharma.io/
gatsby develop
  1. Open the source code and start editing!

By now your site should be running at http://localhost:8000!

There is also a second link: http://localhost:8000/\_\_\_graphql. This tool will help you experiment with querying your data. To learn more about using this tool, go to Gatsby tutorial.

GraphQL

GraphQL is a query language to query your API and get only the data you need, with a strong emphasis on doing it in one request. If you are able to collect a lot of data in one request, it means that you don’t have to do multiple round-trips to your server and back to get the required data.

Open the pratapsharma.io directory in your favourite code editor and edit src/pages/index.js.

//Example
import React from "react";

export default function Home() {
  return <div>Hello world!</div>;
}

Save your changes, and you'll see the browser update in real-time!

ℹ️ Features

  • Basic setup for a full-featured blog
  • Support for an RSS feed
  • Google Analytics support
  • Automatic optimization of images in Markdown posts
  • Support for code syntax highlighting
  • Includes plugins for straightforward, beautiful typography
  • Includes React Helmet to allow editing site meta tags
  • Includes plugins for offline support out of the box

🧐 Let's find out what's inside?

Here's a quick look at the top-level files and directories you'll see in the newly created Gatsby project.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

  1. /node_modules: This directory is where all you package dependency lives. It contains all of the modules(packages from you) of code that your project depends upon. It gets added here when you run npm install or yarn install. The packages will be added automatically added into this directory.

  2. /src: It here where all the codes related to the section of your front-end lies such as your site header or a page template. src is a convention for "source code". It means any code of the project should be added to inside the src folder.

  3. .gitignore: Any file/folder path added in this file will tell git not to track/maintain a version history for.

  4. .prettierrc: This is a configuration file for Prettier. Prettier is an extension tool to help keep the correct formatting of your code and make it consistent.

  5. gatsby-browser.js: If you are using any Gatsby browser APIs, it will expect to be in this file. It allows customization/extension of default Gatsby settings affecting the browser configuration.

  6. gatsby-config.js: This file is the main configuration file for a Gatsby site. It is here is where you can specify information about your site's metadata like the site's title, description, Gatsby plugins you'd like to include, etc.

//Sample
module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: "My New Blog",
    description: "This is my awesome blog I made from scratch!",
  },
  plugins: [],
};

  1. gatsby-node.js: It is here where Gatsby expects to find any usage of the Gatsby Node APIs. It allows customization/extension of default Gatsby settings affecting pieces of the site's build process.

  2. gatsby-ssr.js: Any usage of Gatsby server-side rendering APIs this file is where Gatsby expects to find. It allows the customization of default Gatsby settings affecting server-side rendering.

  3. LICENSE: The Gatsby starter is licensed under the 0BSD license, which means that you can see this file as a placeholder and replace it with your own license.

  4. package.json: This is the main entry point to the javascript project. It is a manifest file for javascript projects, which includes things like metadata (the project's name, author, version etc.). This is how npm knows which packages to install for your project.

  5. package-lock.json: This is an automatically generated file based on the exact versions of your npm dependencies that were installed in your project. (You cannot change this file directly).

  6. README.md: A text file which contains useful reference information about the project. You can add your documentation here.

Conclusion

Gatsby is indeed a great tool to set up your static site quickly. There is a number of tools and ways to go about it, but the first step the right direction is understanding what is going on behind the curtains. I hope this guide helped you gain knowledge, and it sticks with you in the future and helps you build great websites.

I'll prepare a more detail guide to creating a site from scratch.

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Discussions

Up next