12. Rebuilding my website with gatsby in 15 minutes
The fomo is real. I’ve been meaning to try out Gatsby for a while now.
I have a hard time learning a new tech for the sake of learning. Unless I have a use-case, an end goal in mind, I don’t feel motivated to put in the effort. I talked about this more in newsletter #2: The best way to learn something.
A use case presented itself last week:
I send this newsletter every week and it’s archived on buttondown.email (old ones on mailchimp), I’d like these to be hosted on my own website instead.
I have a tiny website: sid.studio with a few pages. I built it with good old html and css. Looks decent, loads super fast. But it’s static. When I want to change the header, I have to edit all the files.
I write this newsletter in markdown, I’d have to convert them into html first and use the same styles as my website. Doing this manually would be an annoying task, so I wrote a node script to pull the email from buttondown and convert them into html pages. You can read the source code with comments here.
The idea behind this script was I’ll schedule it to run after I send the newsletter every Friday morning.
While writing this script, I knew I’ll run into more roadblocks along the way. The biggest one I was scared of was syntax highlighting.
Here’s how it looked without syntax highlighting: 😕
I’d have to customise the markdown renderer to overwrite the default code block. I’m doing something similar for links already:
// marked is a great markdown rendering library
const marked = require('marked')
// create a new marked instance
const renderer = new marked.Renderer()
// overwrite the link
renderer.link = function(href, title, text) {
// get the result of link rendering
const link = marked.Renderer.prototype.link.call(this, href, title, text)
// string replace <a tag to add the target attribute
return link.replace('<a', "<a target='_blank' ")
}
It could work but I’m not a fan of this solution. I’m trying to patch together a few unrelated things, I can anticipate this becoming unmaintainable in the future. Only if there was a better technology to create dynamic components 😛
I’ve been looking at MDX from afar and meaning to give it a try. MDX let’s you render React components inside of markdown! Sounds cool, right? I can render custom code blocks inside the markdown I write.
I’m in love with this statement that I heard last week:
“For each desired change, make the change easy (warning: this may be hard), then make the easy change” - Kent Beck
Instead of just adding functionality on top of your existing code, first make it easier to add that functionality (this is the hard step) and then easily add the functionality.
This is really interesting, because the nature of software is to become complex overtime.
The initial version is built with some features and assumptions in mind. Over time, you have to add features that you had not anticipated earlier and might not fit the assumptions.
Force fitting these features makes the codebase complex. It slows down future development, we often call this adding technical debt.
In my example: I built a static html + css website because I just wanted a way to share links of things I was working on. Now I want this website to become a blog with syntax highlighting as well.
I can force fit this with the node script + extended markdown renderer I showed above, but it would make the codebase complex and difficult to extend further.
So, first I have to make the change easy to make. Before I can integrate MDX, I have to convert my website into React. Now, I have no desire to maintain another webpack configuration.
New use case, chance to use new tech! Time to try out Gatsby, I guess.
I opened gatsbyjs.org to give it a try. For the initiated, Gatsby is a fast static site generator for React. That’s exactly my use case!
Here’s the elevator pitch for Gatsby:
No setup, bring your own data, performance optimizations out of the box. Count me in!
Here’s how you start:
# install gatsby globally
$ npm install --global gatsby-cli
# tell gatsby to create a new site
$ gatsby new myblog && cd myblog
# start dev server
$ gatsby develop
3 commands and I have a working site with a pages
directory 😎
I started dropping my html pages into React components in the pages directory. Took me about 15 minutes to port the entire website!
I had to convert some of the html attributes to JSX of course.
- Had to convert
class
toclassName
- Convert svg attributes to JSX compatible attributes (
fill-rule
tofillRule
)
And that was it!
P.S. We won’t have to do the first one for long, ReactDOM will support class
as well soon! Here’s the tweet announcing this change 🔥
After that, I quickly abstracted some code into reusable components like header, social icons, etc. Gatsby let’s you create a common layout file so I don’t have to include it in every page.
Building and deploying the site was easy as well: gatsby build
+ gatsby serve
.
On top of that, Gatsby has a rich plugin ecosystem. There’s a plugin to do almost everything I want: integrate MDX, use mixpanel for analytics, set meta tags for twitter, etc. There’s even a syntax highlight plugin for MDX!
Now that my website is fully in React/Gatsby, I can make the easy change of adding the Gatsby plugin for MDX and copy pasting my newsletters 😋
It’s always exciting to learn and work with new tech!
If you already work with React, I’d highly recommend giving Gatsby a try, it’s way easier than I expected.
The code for my website is open source: https://github.com/siddharthkp/studio
Time for question of the week: What new tech are you learning right now? Hit reply and let me know.
Hope this was useful on your journey
Sid