Building website with Gatsby & deployment 🚀 with Now

Happy new year 🎉
I hope you've all enjoyed some quality time with family and friends and prepared for some resolutions for the new year.

As for me, one of the first things I wanted to accomplish this year was the complete redesign of my website. This one was built using the Pelican python-based static site generator combined with the Flex theme.

All in all, it encompassed interesting features like mobile responsiveness and plugins for Disqus, AddThis and Google Analytics.
And most importantly, it easily integrated with Markdown files which was convenient for post writing.

Everything was ok, until I noticed some problems ...

Slow-loading web pages ⌛

The loading time kept increasing as I added new data to my website. While this was in general not a problem on the desktop view, the mobile one suffered a lot from it.

A limited theme template 🤔

The template I was using didn't allow me to showcase personal projects. Adding new pages was not easy either. In fact, I had to dive inside the html code of the theme and tweak it to make it meet my needs. I found it tedious to have the logic of the theme separated from the engine of the blog.

Some code highlighting issues ❌

Embedding code snippets is an important part of my posts. I unfortunately noticed a frustrating rendering problem that appears on mobile devices such as the wrap of long lines of codes.
Seriously who wants to read that kind of code?

A limited set of plugins 🤷‍♂️

Pelican has various plugins but some of them are obsolete or work only with a specific version of Pelican and some functionalities are missing.

So I started searching for an alternative to Pelican.
What I had in mind was a framework that'd allow me to build fast-loading and responsive pages while maintaining a great level of customization.

That's when I heard about Gatsby:

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps - gatsbyjs.org

I think the official description sums it up very well. Besides here's what made me also switch to Gatsby:

• It's built on top of the latest web technologies such as React.js and Webpack: building a new portfolio was therefore an opportunity to learn new front-end frameworks
• Gatsby can connect to a variety of data sources including Markdown files, APIs, databases...
• Gatsby makes site deployment very easy by building your site as static files in the public folder which can afterward be pushed to Github, Netlify or Amazon Amplify
• It only loads the critical HTML, CSS, JS it needs to render the content of the website so that clicking seems very fast

We can go on and on, but the only way to convince yourself is by trying it out, right?

Getting started with Gatsby

My goal is not to give you a thorough tutorial on how to use Gatsby: there are in fact tons of great resources on the internet. You can check the official documentation for instance.

But here's some steps to a quick start:

Prepare your environment

1. Install node and npm. If you're using a Mac for instance, you can launch this command assuming you have homebrew.

brew install node

If you are using Windows or a Linux distribution, you can check the documentation. It's pretty straightfoward.

2. Install Git
3. Install the Gatbsy CLI

npm install -g gatsby-cli

Create a website

This part is borrowed from the documentation.

Now you are ready to use the Gatsby CLI tool to create your first Gatsby site. Using the tool, you can download “starters” (partially built sites with some default configuration) to help you get moving faster on creating a certain type of site. The “Hello World” starter you’ll be using here is a starter with the bare essentials needed for a Gatsby site.

1. Open up your terminal.
2. Run gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world. (Note: Depending on your download speed, the amount of time this takes will vary. For brevity’s sake, the gif below was paused during part of the install).
3. Run cd hello-world.
4. Run gatsby develop.

That's pretty much it. Now you have a static website running locally. Try to modify its content and you'll see (after saving) your modifications being updated in real-time.

Use a pre-existing template

If you're not a front-end ninja like me, you can look up a template you like on the showcase tab of the official website.

There are tons of open-source websites and portfolios built using Gatsby.

Gatsby Plugins

Now the most interesting part of the Gatsby framework: Gatsby Plugin Library.

If you want to extend the capabilities of your website by adding for example image responsiveness, SEO, Google Analytics, offline support, a sitemap, a robot.txt and more, here is where you can find everything you need.

The community is vibrant and the plugins and well supported. You can search about them in the search bar.

If you want to have a great SEO for your blog or your portfolio, I found this repo that enumerates a list of useful Gatsby plugins.

Deploy 🚀

Once you're happy with your website, you can generate static files ready for deployment by running the build command at the root of your project.

gatsby build

This command creates a static version of your website ready to go live on the internet and residing in the public folder. You can either copy it to your server, push it to GitHub pages or use a deployment and hosting service such as Netlify. I personally chose Vercel because I found that it easily automated my workflows and even to start deployments with Now.

The documentation is great, you can find many blog posts that walk you through the process of deploying a Gatsby site on ZEIT. Here's a great one from gatsbyjs.org and another one from zeit.co.