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
- Contentful CMS
- Facebook Comment
- Tags
- SEO
- Archives by date
- Pagination
- Many more...
- GatsbyJS
- React
- Contentful CMS
- Lodash
- and many others, you can check the pakcage.json
- 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
- 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
- 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
- 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 😎