Recoding my portfolio using Gatsby 🤘

Hello everyone ! 👋

In this article I will give you feedback on my portfolio's develpment with JAMstack using Gatsby.

A little background

I have a personal website / blog / portfolio for the past 10 years ... where I occasionally write my moods, tech favorites and tutorials. (mostly in French)
Over time, this project has been used as a sandbox to learn new skills.
In 2010, a first version was created with Wordpress hosted directly in-house 🤘 It was roots, but it allowed me to see how PHP, MySQL, Apache2 worked ... in short, everything you need to host a web application.
Then around 2013 changed to Jekyll, which allowed me very quickly to familiarize myself with the Ruby environment (and its ecosystem like Gem and Bundler ).
We are now in 2020, and it's time to change and ride the JAMstack hype train! 🚞

Why Gatsby?

To begin, I really like using React. I hesitated a bit to use Create-React-App, being familiar with this tool (at Picto Acccess, we use this boilerplate for some of our apps). Having heard more and more about the JAMstack, I told myself that it was the ideal paradigm to give my portfolio a fresh look!
I looked around and chose Gatsby because of the many benefits it offers:

• A growing community (more than 46k stars on Github)

• A wide choice of plugins / themes are available directly on the official website

• It's easy to get started (especially if you are familiar with React!)

• Improved performance (obviously ... since it is a static site)

• Has a lot of similarity with CRA: hot reloading, a development environment very easy to use and a ready-to-use build script. 🙌

• GraphQL support: A GraphQL server runs alongside your application, allowing you to retrieve all kinds of data related to your project.

• Evolution: with all the different plugins, I could possibly upgrade my static site using a Headless CMS for exemple.

Gatsby themes

Show-time !

Here's the link to my new portfolio, in French. (I'll play with some i18n plugins later !). Feel free to give me some feedback!

Where to start ?

The documentation for Gatsby is clear: here. You'll find a tutorial as well as a "Quick Start" part.
If you don't want to start "from scratch", you can use the starters offered by Gatsby, or even use Stackbit which allows you, in a few clicks, to generate a complete site.

Deployment & hosting 🧙🏼‍♀️

Gatsby ultimately generates static files, therefore you’ll have plenty of choice to host them.

As for me, the old version of my personal site was hosted using Github Pages. This is a free solution, powered by Github. You can have have private repositories with a free account, it's a solid option. You'll find here the documentation to host your static site on Github Pages.

For this new version, I chose to host my application using Netlify. Netlify offers different services including automatic SSL certificate generation (HTTPS), CDN, continuous integration and also what they call "notifications", which allows you to integrate forms on your static site (limited to 100 notifications per month for the free version).
Netlify also takes care of building & deploying your application from a simple push to your master branch, just like Github Pages.
Best of all, the integration is very easy: just click on the "New site from Git" button on the dashboard and choose the right repository. You can add a few more configurations, if you wish ... and that's it!

Conclusion

I strongly recommend you to test Gatsby, which for me offers good benefits by removing a bunch of constraints related to setups, builds & deployments, which ultimately allows us to focus on what really matter.

Thanks for reading and good code! 👋

Resources

• Netlify
• GitHub Pages
• Stackbit