Skip to content

04.01.2020Main

How I created this blog

"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:

prismic-create-repository

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:

  1. Content: your main page content, categories, blog posts and etc will be here.
  2. 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.
  3. Media Library: which is self explanatory.
  4. 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:

prismic-api-key

save the access token somewhere safe as we will need it in the future.

Recent posts

  • 31.12.2019Main

    Hello World!