loading...
Cover image for Recoding my portfolio using Gatsby 🤘

Recoding my portfolio using Gatsby 🤘

demily_clement profile image Demily Clément Originally published at demily-clement.com ・3 min read

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

Posted on by:

demily_clement profile

Demily Clément

@demily_clement

Developer living in Lille, passionate about the web and IT in general. Co-founder & CTO at Unis C. Develop with React & RubyonRails and devops with Kubernetes.

Discussion

markdown guide
 

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.

 

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 😁

 

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 ! ;)

 

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

 

Thank you ! It looks very clean 👍

 

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.

 

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.