Recoding my portfolio using Gatsby 🤘
Tags: javascript, react, gatsby, graphql
Published: 2020-08-11 07:21:43

Hello everyone ! 👋

In this article I will give you feedback on my portfolio's develpment with [JAMstack](https://jamstack.wtf/) using [Gatsby](https://github.com/gatsbyjs/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](https://www.gatsbyjs.org/plugins/) / [themes](https://www.gatsbyjs.org/starters/?v=2) 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](https://www.gatsbyjs.org/docs/graphql-concepts/): 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](https://www.lafabriquedunet.fr/blog/headless-cms/) for exemple.

![Gatsby themes](https://dev-to-uploads.s3.amazonaws.com/i/ojz08jcdsu6ex1m4kwp5.png)
*Gatsby themes*

## Show-time !

[Here's the link to my new portfolio](https://www.demily-clement.com/), 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](https://www.gatsbyjs.org/docs/). 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](https://www.gatsbyjs.org/starters/?v=2), or even use [Stackbit](https: // www .stackbit.com /) 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](https://pages.github.com/) to host your static site on Github Pages.

For this new version, I chose to host my application using [Netlify](https://www.netlify.com/). 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](https://www.netlify.com/)
- [GitHub Pages](https://pages.github.com/)
- [Stackbit](https://www.stackbit.com/)