My discovery of Gatsby and ReactJs

May 5th, 2020 - ☕️ 4 min read

A quick check on why and how I developed my portfolio/blog using ReactJs and Gatsby.

!! Disclaimer !! This article isn't Tech oriented. It is simple feedback on my experience with Gatsby and React.

I've been making websites and applications for 4 years now, including 2 in a company. After these 4 years of development, I needed a portfolio. Moreover, I always wanted to have a personal blog to clarify shadowy areas I encountered during my early career, answer the questions I had as a young developer and transmit my feedback, feeling, and skills.

My starting point was :

  • A minimalist design -> simple and clear, to keep the important content forward.
  • Several pages :
    • About -> to present me and make my resume available.
    • Projects -> This is the portfolio part of the site, including all my achievements whether they are experimental or not.
    • Blog -> This is the part I wanted so much to be able to post all of my articles
    • Contact -> To keep a simple way to contact me directly from my website
  • As little logic as possible -> Usage of external services for forms, newsletter, storing images, PDFs, etc.
  • The use of a headless CMS -> To maintain a lightweight website and be able to publish my articles without coding.

Well, although simple, my basic idea was well thought out.

However, I also had constraints:

  • Last year, I haven't done a lot of front-end development.
  • I'm a perfectionist (huge contradiction with the first point...).
  • I wanted to do something new

This desire of novelty led me to think about something I ha used in early 2018: React-js And as far as I remember, React equal Power, Flexibility, Lightweight.

Seemed pretty perfect to me.

Choosing tool for website

Going with "vanilla" react seemed to me rather complicated and unsuitable. So I decided to make my researches and I came with this solution:

1G9aVAI3aezHLw_JsiCfB1Q

Gatsby is a framework based on react that allows you to generate static sites from your react code. To make it more explicit, I made a small diagram :

Untitled_Diagram

Explanation: You just have to develop your site in Reactjs and fetch your data from the sources of your choice (Wordpress, Ghost, Strapi, Netlify, JSON, Markdown), Gatsby will build your code and transform it into HTML, CSS, and Javascript.

Harry-Potter-Main-Article-1

Yes yes yes it's magic !!!!!

And this is the (simple) structure of a Gatsby project:

Capture_decran_2020-05-07_a_13.46.25

Complicated to make it simpler.

Using gatsby has been very simple for me, the documentation is very complete and the community is very active. I was able to build my site in 1 week by working 4 hours a day. I couldn't have dreamed of anything better.

Content management

I have chosen to couple Gatsby with a headless CMS (only backend interface) and for that, I decided to use Strapi.

Strapi is a very recent CMS that is flexible, fast ad lightning, etc... It's like the Role Royce of headless CMS.

And if you are not convinced, I invite you to read this Strapi vs Wordpress article.

Aaaaaand ?! Take your two-star jersey and add one because Strapi is French! (Sorry I love my country)

Using Strapi has been a pure joy for me. It makes you feel like you have no limits. You can customize it in the way you want from A to Z and the list of possibilities is very long.

To have an idea of the Strapi interface, here is an example:

strapi-content-type-builder

The data is then sent via an API (fully customizable) like this: ! strapi-json

And now, to get along with the Gatsby side of things, we use GraphQL (an open-source query language for APIs). And our query will look like this:

ArticleQuery

To display it, simply insert the information like this :

react-article-title

The title of our article is displayed, you just have to do the same with every fetched data.

Conclusion

As I said, Gatsby and Strapi is the perfect alliance for creating a powerful and modern website very quickly.

I will make a tutorial ASAP to teach how to make a website with Gatsby and Strapi in record time.

For now, keep coding !

Thomas