gabrielleeyj
Navigate back to the homepage
About Me

Migrating to GatsbyJS

Gabriel Lee
June 13th, 2020 · 1 min read

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,

1git clone git@github.com:narative/gatsby-starter-novela.git novela-site
2cd novela-site
3yarn
4yarn dev

Open a browser to localhost:8000 and TADA! You finally have your site running locally for editing.

gatsby netlify
Gatsby + Netlify

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!

More articles from gabrielleeyj

How I learnt to code

Before I begin, let me warn you first that this is going to be a long read. I started to code in html and css back in the 1990s, when…

June 15th, 2020 · 5 min read

Understanding CS50

Recently, edX was giving out free signups for HarvardX CS50. So I thought to retake and review the course once again but this time paying…

June 22nd, 2020 · 1 min read
© 2020 gabrielleeyj
Link to $mailto:hello@gabrielleeyj.comLink to $https://github.com/kayigeLink to $https://www.linkedin.com/in/gabrielleeyj/Link to $https://www.instagram.com/gabrielleeyjLink to $https://www.facebook.com/melchsee