"Don’t focus on having a great blog. Focus on producing a blog that’s great for your readers."
- Brian Clark
Since long time ago I have struggled to come up with a system for my blog and since I'm not a big fan WordPress although I'm using it for some of my clients I decided to make my own. the concept of static site generators was appealing to me and everywhere I looked it appeared that Gatsby JS is the best choice but since I didn't have any experience working with React I tried to choose a pass that needed less coding.
So here is a brief explanation of what I've done:
Static site generator: Gatsby JS
Headless CMS: Prismic
Hosting: GitHub Pages
Continuous Integration: Travis CI
Connection Prismic to Travis CI: Integromat
Before we get started make sure you have the latest version of Node.js from here.
It's worth pointing out that everything that I've used here is available for free.
1- Gatsby Part
First you need to install the gatsby-cli
npm install -g gatsby-cli
Then we need to create a new gatsby site locally, In my searches I came across this git repo by LekoArts that helped me a lot, although it has a full instruction on how to use it, I'm gonna explain here anyway.
Create a new gatsby site and navigate to it's folder by doing:
gatsby new project-name https://github.com/LekoArts/gatsby-starter-prismic cd project-name
2- Prismic Part
At this point you need to create configure your Prismic account, so first head to Prismic.io and create an account, then go to your dashboard and create a new repository for your blog, free plan would enough for a blog:
then head on to your repository, there you have to choose your main language for your content, you can add other languages in the future.
on the left side bar you will see four options:
- Content: your main page content, categories, blog posts and etc will be here.
- Custom Types: every entity that you use in your blog must be defined here first, there is two types of custom type, Repeatable Type which your blog posts and projects will be and Single Type which is for entities such as main page.
- Media Library: which is self explanatory.
- Experiments: this feature is no longer available.
So let's create a type for our home page, head on to custom types, enter a name for our type which is "homepage", choose single type and hit create. now go to the repository that we cloned earlier in Gatsby part and go to ".prismic" folder, there you will see some JSON files, open "homepage.json" and copy the content, then get back to prismic, on the right sidebar select "JSON editor" tab and paste the content from "homepage.json" by doing this you will create every element necessary to build your home page. now repeat these steps for the remaining types:
- Category: API ID > category, Type > Repeatable
- Hero Links: API ID > hero_links, Type > Single
- Post: API ID > post, Type > Repeatable
- Projects: API ID > projects, Type > Single
Now we are ready to create content, head on to the "Content" section, first you need to create content for your homepage, hero_links and projects and don't forget to fill out every input field, then create a category that you can call test and then create at least one post which include every Slice at least once.
In order to connect our Gatsby site to Prismic we will need an API key, on the bottom of left sidebar go to settings then API & Security and in the Generate an Access Token section, first give the application a name and then his Add this application, an API Key will be generated for you:
save the access token somewhere safe as we will need it in the future.