[Gatsby]Setting up the Gatsby Website

type

Post

status

Published

date

Jul 25, 2022

slug

summary

Choose a Starter Template

A good way to start is to use one of the Starter Templates:

Gatsby Starters: Library

Get up and running with pre-made Gatsby templates!

https://www.gatsbyjs.com/starters/

The benefit of using a starter is that you don’t have to start from scratch, you can have a Gatsby website up and running really fast. There are many Starter Templates that were built to sever different purposes/systems/platforms, you can choose whatever you like, and the setup is usually pretty similar.

The one we are going to use will be the Gatsby Lumen Starter created by Alexander Shelepenok, this is also the starter that I used for my website.

GitHub - alxshelepenok/gatsby-starter-lumen: A constantly evolving and thoughtful architecture for creating static blogs with Gatsby.

A constantly evolving and thoughtful architecture for creating new static blogs. Beautiful typography. Mobile first approach in development. Syntax highlighting in code blocks using PrismJS. Pagination support. $ npm install $ npm run start .

https://github.com/alxshelepenok/gatsby-starter-lumen

GitHub - alxshelepenok/gatsby-starter-lumen: A constantly evolving and thoughtful architecture for creating static blogs with Gatsby.

Clone and Install the Starter

Open the terminal and change the directory to the path where you want to store your website, then run this:


gatsby new your_website_name git_link

Using Gatsby Lumen Starter as an example, it will be


gatsby new lumen-starter https://github.com/alxshelepenok/gatsby-starter-lumen.git

💡

If you are using macOS/Linux and ran into errors like permission issues, you may want escalate the permission by doing: sudo gatsby new your_website_name git_link

You can usually find the git link on the starter’s GitHub repo

By running this command, gatsby-cli will clone the repo and install all the required packages for you. Once that’s done, we can try running the gatsby site with:


# change the directory to the project
cd lumen-starter
# start the website in develop mode
gatsby develop

Note: some starters may have different commands for this, check their repo readme file for instructions.

You should a result like this:

When you see this, it means that you are hosting your Gatsby website locally, you can open a browser and visit localhost:8000 and see a preview of the site

Upload your website to GitHub

After making sure our website is running correctly, it’s best to upload it to GitHub before we make any further changes so that we can version control our progress and roll back if we break anything.

Open GitHub Desktop and choose Add Local Repository. Point it to the folder where we store our website.

Next, publish the repo to GitHub, you can choose to keep it private if you want.

Visit your GitHub and you should see your codes published on it

Customize the website

💡

Things may be different in this section depending on what starter you use, check their readme file for instructions on how to customize different starts.

There are a few things that we can customize before we start dealing with the posts and contents.

Open up the project in Visual Studio Code and take a look at the following two files


/package.json
/content/config.json

Let’s break them down one by one, first let’s look at the package.json file

Things that you might want to change are name, version, description, keywords, repository, license, and author

These items will not affect anything on the website, but they are information about this project, so I do suggest you update them.