After 2 months of learning practical javascript (www.watchandcode.com). I figured to try playing with a JS framework by migrating my website out of squarespace(www.squarepace.com).

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).

• tags
• table of contents
• next/previous posts
• image gallery
• scroll to top
• title code blocks

After successfully building the site with,

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!

First, Github (www.github.com) sign up for an account. Create a repo and push all the files to the repository. Second, i used Gatsby Cloud (www.gatsbyjs.com) to deploy to Netlify (www.netlify.com).

Netlify

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 104.198.14.52
• create CNAME record and point it to Netlify (generated-name).netlify.app.

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!