The Beginners Guide to setting up a Gatsby Blog in under an hour
Today we will be creating a blog with Gatsby and deploying it on Netlify. For the purposes of this blog, we will be using a Gatsby starter site (demo) rather than building it from scratch.
Gatsby Starter Peach template has the following features—
- Category Tags
- Tag pages
- Dark/Light modes
If you want to create a blog that looks like this in under an hour, keep reading!
- npm / yarn
- git / github
- React (not needed if you want to use the template as it is)
Let's get started
- Create a new repository on GitHub and clone it locally.
git clone https://github.com/your-username/your-blog cd your-blog
- Install the gatsby CLI
npm install -g gatsby-cli
- Create a new site using the starter site into app directory
gatsby new app https://github.com/ihsavru/gatsby-starter-peach
- Move the contents of the app directory to the root directory.
mv app/* . rm -rf app
Run the development server.
You can make any changes you want and it will be reflected on http://localhost:8000/
Open site-meta-data.json and edit the fields accordingly. You might have to restart your development server to see these changes being reflected. (You can skip these changes and edit later using Netlify CMS after deploying)
Next open static/admin/config.yml and change
ihsavru/gatsby-starter-peach to your repo.
Don't forget to create a
Add the following to it—
node_modules public .cache .DS_Store
After you are done, commit your changes and push it to GitHub.
git add . git commit -m "your commit message here" git push
- Create an account on Netlify
- After logging in, go to Sites
- Now click on "New Site from git"
- Complete the following steps - Connect to GitHub, select your repository and deploy site!
- Set build command to
gatsby buildand publish directory to
A random url will be generated where your site will be deployed.
Once the build status is completed, you can visit your site at the same url which will look something like this - https://confident-ritchie-123a6d.netlify.app
Connect with Netlify CMS
- Go to GitHub > Settings > Developer Settings or go to this url.
- Click on "New OAuth App"
- Enter the details as below
- Set the Authorization callback URL to https://api.netlify.com/auth/done and register the application
- After that click on "Generate a new client secret" and copy it
- Go to apps.netlify.org and go to your site
- Go to Site Settings > Access Control
- Under OAuth section, click on "Install Provider"
- Select GitHub and copy and paste your client secret as well as your client ID and click on install
- Go to your deployed Netlify site and go to the Admin page - https://your-site.netlify.app/admin
- Log in using GitHub.
- Now you can edit your blogs as well as your site metadata from here itself!
- You can delete the sample blogs that come with the template and add your own.