3,370 reads

Planning to Switch Site From Html to Gatsby?

by Bhavani RaviJanuary 19th, 2019

Too Long; Didn't Read

<em>Here’s what I learned when I built my portfolio with Gatsby and ReactJS</em>

Companies Mentioned

featured image - Planning to Switch Site From Html to Gatsby?

Here’s what I learned when I built my portfolio with Gatsby and ReactJS

The days of WordPress days are all gone now. Even after being a backend developer for 3 years, playing around with PHP still haunts me. I think this is true for most of the Python developers out there. Also, who would want a heavy site for a single page portfolio right?

Why I Hate Wordpress?

Well, Duh… It’s PHP
I moved my blogs to medium, hence all I wanted was a lightweight single page site.
Now that the blogs are moved to medium, I no longer have to host my site anywhere, meaning I don’t have to pay a server.
At a point, the amount of time I spent with figuring out a plugin, and a template was so much that I decided I would be well off writing things on my own.

Why Gatsby?

Gatsby is a React-based, GraphQL powered static site generator. Around the same time, I wanted to learn what’s what of ReactJS
Though it’s a static site generator, it comes with a provision to write and host blogs. Just in case I change my mind in future I don’t have to do a complete revamp.
The community is big. So if you get stuck somewhere and raise a question, Tada… will get help instantly.

5 Things to Keep in Mind

1. The template

I was hunting for a template that fits my personality and finally landed up in one which was completely written in HTML, CSS, and JS. I converted most of the HTML to react components but, converting the JS code to React was something that I struggled with. Don’t Judge me I have no prior React experience.

For eg., The navigation bar controls are controlled by Bootstrap’s JS files. In order to incorporate those functionalities, I had to use ReactStrap, a React plugin with Bootstrap components.

How did it look on my template?

....</nav>

How I had to change it?

class ExtendedNavbar extends React.Component{toggle() {this.setState({isOpen: !this.state.isOpen});}

render(){<Navbar className="navbar-expand-lg" light={true}><NavbarToggler className="navbar-toggler" onClick={this.toggle}/><Collapse isOpen={this.state.isOpen} navbar id="navbarSupportedContent"><Nav className="nav navbar-nav menu_nav ml-auto" navbar>...</Nav></Collapse></Navbar>}

2. Where’s my CSS

All that Gatsby exposes is an index.jsfile which contains a root component. For someone from a pure HTML background, I didn’t know where to add the raw CSS, I tried to add it as react imports but it threw errors at random places.

But then, I found React Helmet where you can add your CSS and bam !!! I could see the styles applied.

<Helmet><title>My Title</title><meta name="description" content="Helmet application" /><link to css1><link to css2></Helmet>

3. It works, but with a delay

I added the CSS as a part of React helmet and I could see colors on my screen. I was happy only for a day. The next day, one of my friends pointed out that my CSS is loading but with a delay and I need to fix it and it is a big deal. I went around blogs after blogs trying to fix it.

Since I was using React-helmet, The browser waits until all the React components render and then applies styles to them. The only way to fix it was to find the <head> tag and stick the CSS links in there. But Gatsby’s index.js you only render the component that needs to go into the body of your site. ie., you won’t see the usual structure of a web page which looks like this.

Finally one of the blogs asked me to just copy the html.js from the default template and put it on my src folder. Yay!!! Now I could see <html> tag. Now I know where to exactly stick those CSS links.

4. Production to performance

All good. Now, It was set for production. I hosted it with GitLab pages. Things looked good but it took forever to load the page. It is a big deal because, if the page doesn’t load in 2 secs people are going to just leave. I was trying everything possible but the Google lighthouse was spitting at me for poor performance.

At a point, I gave up and cried for help, and then I found out what the issue was. It was GitLab’s pages, the free hosting they provide sucks. So I had to move it from GitLab to Netlify and guess what? Life’s Good again.

5. GraphQL

Learning GraphQL after having a hand in MongoDB was not a big deal. But GraphQL does not have a select all select * from blogs kind of query. Hence, you have to explicit about the parameters you want from the JSON data.

For eg., If I add URL to the projects, then I have to specify it in the static query for it to fetch the URL param.

There were times where I would add an additional parameter to the siteMetaData and refresh the site a million times, scratching my head what’s gone wrong.

The takeaway, apparently I won’t be a bad full-stack developer, but I prefer backend because that is where my heart is.