Gatsbyan1.0

I decide to share my blog template as open source on github. View the web preview at https://7sferry-gatsby-contentful-starters.netlify.app/ You also can view my blog at https://ferry.now.sh

Features:

Contentful CMS
Facebook Comment
Tags
SEO
Archives by date
Pagination
Many more...

Tech used:

GatsbyJS
React
Contentful CMS
Lodash
and many others, you can check the pakcage.json

Requirements:

Node JS - I used Node v12.8.1
Gatsby CLI - I used gatsby-cli v2.10.10
Git
Contentful CMS account
Facebook account - optional for blog comment

Simple Step to Install With Gatsby Starters Command:

run 'gatsby new Gatsbyan1.0 https://github.com/7sferry/Gatsbyan1.0'
type 'cd Gatbsyan1.0' and enter
execute 'npm run develop'
your site would be run on http://localhost:8000

Step to Install Without Gatsby Starters Command:

run 'git clone https://github.com/7sferry/Gatsbyan1.0.git'
type 'cd Gatbsyan1.0' and enter
run 'npm install'
create file .env on your root projects directory
set your spaceId and token from contenful CMS on '.env' (you can look at here)
you could change every properties on config at 'config.js' or modify SEO variables at '/src.components/SEO.js'
you also could change facebook appId with your appId for comment section at '/src.components/Comment.js'
execute 'npm run develop' on cli
your site would be run on http://localhost:8000

Step to get SpaceId and Token:

after login and open the homepage content, click burger menu on the top left

create new space

choose space type

write down your space name and choose 'create an example' then choose blog tab and click proceed

after everything has been set, go to content tab and you will see 4 default contents

go to media tab and publish all draft images (by default heroImage is required and you can't build your site with unpublished images)

open setting tab and choose 'API keys'. Click 'Add api key' on the top right. Copy space ID and token to your '.env' file you created before

execute 'npm run develop' on cli
now you should be able to access your content at http://localhost:8000

You can deploy your site to any static site hosting like netlify, vercel, or anywhere. There is webhook on netlify and you can set this up later to your site hosting for content update everytime you publish your content.

here is the google page speed insight score for both mobile and desktop

If you having trouble setting this up, don't hesitate to contact me 😎