I did my own research on static site generators, between Hugo (www.gohugo.io), GatsbyJS (www.gatsbyJS.com) and Jekyll (https://jekyllrb.com/). Hugo built with Go significantly popular however i decided against it because it works best if you have a large collection of pages, Jekyll wins by a huge margin because you can just code it in HTML/CSS tags without specifying components onto the page. Lastly GatsbyJS, similar to ReactJS and since JS was something that I wanted to learn. It was my choice to migrate my website.
Its still a work in progress however, i finally managed to get it up and running. It’s a customised version of the narative theme by novela (https://github.com/narative/gatsby-theme-novela).
- table of contents
- next/previous posts
- image gallery
- scroll to top
- title code blocks
After successfully building the site with,
1git clone email@example.com:narative/gatsby-starter-novela.git novela-site2cd novela-site3yarn4yarn dev
Open a browser to localhost:8000 and TADA! You finally have your site running locally for editing.
Next up, it was figuring out how to host your website. Originally, I had my own hosting environment. However it now seems that it will save me some money because its free now!
It took some time for me to figure out how to setup and deploy the site as its different when you can develop locally yet it fails to build. The next challenge after a successful build was to link your custom domain, searching on their community forums many like me face the same issue.
Its actually quite simple, if you bought a custom domain out of the usual domain sellers.
You need to go to your hostings
cPanel > Zone Editor.
- create A record with Netlify DNS IP
- create CNAME record and point it to Netlify
Inside Netlify dashboard, add in your custom domain name. Once its done, just wait for a CDN refresh and viola! Your website is now up!