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 -based, powered static site generator. Around the same time, I wanted to learn what’s what of ReactJS React GraphQL 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 , a React plugin with Bootstrap components. ReactStrap How did it look on my template? <nav class="navbar navbar-expand-lg navbar-light"> ....</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 file 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. index.js But then, I found where you can add your CSS and bam !!! I could see the styles applied. React Helmet <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 tag and stick the CSS links in there. But Gatsby’s 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. <head> index.js <html><head></head><body></body></html> Finally one of the blogs asked me to just copy the from the default template and put it on my folder. Yay!!! Now I could see tag. Now I know where to exactly stick those CSS links. html.js src <html> 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 ’s pages, the free hosting they provide sucks. So I had to move it from to and guess what? Life’s Good again. GitLab GitLab Netlify 5. GraphQL Learning GraphQL after having a hand in MongoDB was not a big deal. But GraphQL does not have a select all kind of query. Hence, you have to explicit about the parameters you want from the JSON data. select * from blogs <StaticQuery query={graphql`query {site {siteMetadata {projects{namedescriptionskills}}}</StaticQuery> 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 and refresh the site a million times, scratching my head what’s gone wrong. siteMetaData The takeaway, apparently I won’t be a bad full-stack developer, but I prefer backend because that is where my heart is. Check out the portfolio at bhavaniravi.com .

Community Is

Fetch

Google

Instantly

Learn Pandas Via Usecases — Part 2

Python Pandas — Basics to Beyond

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Planning to Switch Site From Html to Gatsby?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Caches in Python

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Caches in Python

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps