DEV Community

Cover image for Recoding my portfolio using Gatsby đŸ€˜
Demily Clément
Demily Clément

Posted on • Originally published at demily-clement.com

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
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

Top comments (7)

Collapse
 
tobiaswhetton profile image
΀obias Whetton

Great read! I had a very similar experience to you, I used to build Wordpress websites 10 years ago and then also moved onto using Jekyll – it was so easy to just add new markdown files and generate new pages once you set up right!

And two years ago I started building landing pages in Gatsby and I loved the flexibility, speed and scalability. The marketing site for my startup Supernotes is also Gatsby + Netlify.

A few of my friends have now moved onto the no-code life with Webflow, but I still swear by Gatsby right now.

Collapse
 
killianfrappartdev profile image
Killian Frappart

Ton portfolio est super bravo !

Je pensais aussi utiliser Gatsby pour rĂ©aliser le mien quand j'aurai des projets Ă  montrer, cette introduction tombe Ă  pic pour moi 😁

Collapse
 
demily_clement profile image
Demily Clément

Merci ! N'hĂ©site pas Ă  tester, mĂȘme si c'est uniquement pour publier une page statique qui affiche quelques lignes sur toi et ton parcours ! ;)

Collapse
 
giselamd profile image
Gisela Miranda Difini

Really nice!! I used Novela Theme Gatsby starter for mine! Here it is: giselamirandadifini.com/

Collapse
 
demily_clement profile image
Demily Clément

Thank you ! It looks very clean 👍

Collapse
 
arnaudcortisse profile image
Arnaud Cortisse • Edited

Looks clean! Did you get started with a starter or did you do everything by yourself?
I also created mine with Gatsby :)

Quick note: you could add a favicon to make it look even better.

Collapse
 
demily_clement profile image
Demily Clément

Thank you for your feedback, I'll add it in my next release!
I used a theme named "fresh", using stackbit.io
I added a couple of features like disqus and integration to credit photo authors that I use for my blog posts.