Forem: Thomas Singerlé-Florus

How important is it to make conventions ?

Thomas Singerlé-Florus — Fri, 11 Sep 2020 13:25:26 +0000

For the past 2 years, I've been developing with the same team. And during those two years, we've spent a lot of time setting up conventions. It can be Code conventions, git conventions, or just a kind of a charter of good practices.

When I began this job, I couldn't understand why it was so important to make those conventions and to stick to them. For me, as a newbie, it was a complete waste of time.

Why would you spend so much time writing a readme? Why would you spend so much time to code like the other devs? why is it so f**king important to remove this semicolon? To add your PHP doc? To add spaces before you write the parameters of your function?

And I have to admit it, I understand why a lot of people think that way and why they are seeing that as a huuuuge waste of time.

But one week ago, things have changed in my mind.
I had a new job and a new team.

So as I have spent 2 years on the extreme side of code trying to make every single line as clean as possible and stick to already set guidelines, I was thinking that I will have to learn completely different guidelines and conventions, but I was wrong.

My first tasks were to add features on an old project that haven't change a lot since its creation 3 years ago. But as devs, we all know things kind of project that seems like a "no-rule zone".

But before that day, I wasn't realizing how frustrating it can be to have to work on this kind of project when you are new on it.

I realize how important it is to have rules and guidelines that you must stick to when you code. However, I do think that you can't realize that before you had to work on this kind of "no-rule-zone-projects".

I also have to say that it was highly exciting because I had the permission to demonstrate to my colleagues the power of conventions and what I've learned in the past 2 years.

But as everyone has a different vision of what is perfect and what is not, you have to set rules with your team!
These rules aren't necessarily fixed, you can change them through days, weeks, years. The only important thing is to have everyone contributing!
Every developer has a different approach to his work. And it is extremely rare to find someone that has the same one that you. And by "rare" I mean "impossible".

If you want a well running and beautiful project, you have to discuss with all the members of your team and try to find, together, a perfect way of doing what you want to do. Everyone has good ideas. The perfection that I am talking about is the moment when you find rules that suits the need of all your team.

Even if it can seem like a loss of time when you are starting your project, it is not. You will earn a lot of time when you will return on this project after a 3 months break or when you will have to add a feature to an old piece of code.
We all know that refactor isn't the most pleasable thing to do in our job (even if I like it a lot).
And when a new team member will start to work on this project. He will be very happy to have rules and conventions that will guide him in his work.

As I love clean code, I will soon upload articles on examples of guidelines that you can follow if you want to start to make beautiful and clean code.

However, here is a list of incredible links that I use, and that you can already read and try. (you will see, it is magic !!!!)

https://github.com/airbnb/javascript -> Airbnb's javascript guidelines
https://guides.github.com/features/wikis/ -> Github guide on how to make a perfect readme
https://buzut.net/cours/versioning-avec-git/bien-nommer-ses-commits -> A perfect commit guide ( in french )
https://blog.trello.com/trello-board-best-practices -> An amazing guide to master Trello boards

See you soon and keep coding (well)!
Thomas.

I want to build rockets….. with you !

Thomas Singerlé-Florus — Fri, 04 Sep 2020 13:43:36 +0000

Okay so right now you think that I am a weirdo…. And you’re right but it isn’t the point of this article.

I’ve always been fascinated and passionate by space exploration and rockets and everything that has something to do with space or our universe exploration. But sadly, because of my studies, I’ve had to let this passion go away from me…

But during the COVID-19 lockdown, I’ve returned to this old passion thanks to all the YouTubers that exist in this field.

And here comes this beautiful day of quarantine, when I found this video: https://www.youtube.com/watch?v=xvtzKox3QYg
I just said to myself “ Thomas, this guy is building outstanding rockets with no engineering background at all, you could totally do it too”.
And with a lot of research, I found that yeah, I can do it too.

But I found this boring. And as a full-stack developer, I don’t have any engineering background either, I’ve only built websites, APIs and apps.

So I’ve figured out a way to build some model rockets.

What if I wasn't the only one on this project?
The fact is that anyone on this platform has his specialty. I just think that if we all try to build this project together, we could create something amazing. Moreover, anyone could learn something from others.

The project will be to develop features of the launchpad/rocket and accessories together from all around the world. The assembly of the rocket will be done at my place in France.
All steps of the project will be documented on the website and in youtube videos. The goal is that anyone will have the exact same importance in the project. Anyone will be able to talk about the project, or even build another rocket at his own place.

The most important part is that it will be a project done from all around the world and in which everyone will collaborate and learn things.

I am, at this time, initiating contact with brands, creators, bloggers, etc. To help us with this project.

The goal of the first part of the project is to create a custom model rocket based on the SpaceX Falcon 9 and launch it near the french coast and try to recover the first stage on a precised landing zone ( just like the real one ). Everything will be fully autonomous.
I am actually writing a complete description of this project and building a website to explain everything. But you can already contact me if you are interested or if you want more information about it.

You can contact me in the comment section, on my website (tsflorus.me), or even by email: tsflorus@gmail.com ( I check everything multiple time a day )

I will be back very soon for a complete description!

See you,
Thomas

Feedback / advices on my portfolio/blog

Thomas Singerlé-Florus — Thu, 04 Jun 2020 13:43:16 +0000

Hi everyone !
Today, I have a special question to ask you.
About a month ago I have developed my personal blog / portfolio in three days. ( https://tsflorus.me ) The problem is that I am a perfectionist and I always want to do more.

Can you, please, give me your feedback about this website or even advices. Let me know if something is missing or if you see better design possibilities.
https://tsflorus.me

Thank you dear friends !

Build a website with Gatsby and Strapi - Part 1: 12 steps to install and deploy Strapi

Thomas Singerlé-Florus — Sun, 10 May 2020 19:14:45 +0000

For the first part of this tutorial serie, we will see how to install, configure and deploy Strapi.

Info : This tutorial serie is also available on my website

If you have any problems or struggle with this tutorial, let me know in the comment section (I check the comments very often)

Also, let me know what you think of this tuto and if there is stuff that can be added.

As said in the introduction article, Strapi is a powerful headless CMS that allows a lot of flexibility.

In this tutorial we will set both development and production environment.

Production : on heroku with a postgresql database
Development : on our local machine with the standard sqlite3 database

Step 1 - Install Strapi on our machine

Be sure to match all the requirements before continue.

- Node.js - 12.X minimum

- npm - 6.X minimum

Our strapi project will be named "strapi-cms"

To create it, open a new terminal window and type the following line :

yarn create strapi-app strapi-cms --quickstart

Strapi is going to install all required dependencies, setup all needed files and an sqlite3 database for our local environment.

Step 2 - Create an admin user

Now that Strapi is installed, a browser window will open. If it does not open, navigate to localhost:1337/admin and here is what you should see :

We are now going to fill the form and click the "Ready to start" button.

Warning : This user will only be saved in our local sqlite3 database, we willl have to recreate it in production

Step 3 - Create our first collection type for our articles

Strapi works with objects named "Collection types". If you have already worked with an MVC structure, a collection type is the equivalent of a model.

In a collection we define :

* Name

* Fields

* Relations with other collection types

To create one, let's take a look to the left sidebar

Click on Content-Types Builder

You can see that we already have 3 collection types :

Permission
Role
User

They have been generated by strapi when we have created the project.

Now we are going to click on Create new collection type.

The display name of this new CT will be article.

We are asked to select the different fields of this CT.

This is the list of the different fields we need with their names and types. After adding a field, click on Add another field until you reach the end of the list.

For our article we will select :

Text for the title → Short text named title
Date for the publication date → Date named date
Text for the description → Long text named description
Media for a cover picture → Single media named cover
Rich Text for the content → named content

We have now created our article collection type. Let's now hit the save button on the top right corner of the page.

What have we done ?

If we think in an MVC way, we have set up our database and our models. We have specified that we have a table named "article" in which we will find different fields called : title, date, description, cover and content.

This model is directly saved in our project as a json file (Which we will see a little bit later)

Step 4 - Create other collection types

We already have an article CT. But we need to add some extra fields.

As we are building a blog, it would be awesome to also have tags on each of our articles. It will allow us to create a search function and list every articles of a specified tag.

Let's add a CT named tag. To do that, just follow the steps of the article CT creation and specify these fields:

Text for the name → Short text named name

That's all. We don't need anything else.

As this CT is created, let's link it to our article CT so we will be able to add tags to each articles.

Go on the article CT and click Add another field then add a relation field and on the right side, select the Tag CT.

Let's speak about cardinality. If you ever worked with databases and created one, you will know that cardinality are very important. They allow us to know how much A have and/or belongs to B. Thanks to this result, the database creator will know if he has to create a new table or just a simple field.

In our case Articles has and belongs to many Tags, We have a cardinality of 1-1 (or * - * ) so we have to create a table, which is what we have done creating a new CT.

As I said, Articles has and belongs to many Tags. We now have to specify it by selecting this icon:

Click Finish, then Save and we are all set.

We will certainly add other fields or CT during this tutorial serie. When it will be the case, I will give you the list of fields and types you have to create.

Step 5 - Create an app on Heroku

Our Strapi app is now all set but we can access it only via localhost. We now have to put this app in production in order to access it from anywhere.

We will use Heroku. which is a Cloud application platform that allows you to host, deploy and serve web-apps.

You can get a free dyno here (not a sponsored link)

Personally, I have free a Hobby dev thanks to github education pack.

Once your account is created, we will add a new app. For me, this app is called tsflorus-strapi-tutorial and I have choose Europe for the region as I am in France.

Our heroku app is now created.

Step 6 - Add the postgres add-on to our Heroku app

As said at the beginning of this tuto, we need to setup a database along with our strapi instance.

Why ?

As Heroku is a cloud platform, when you will not be using your dyno, it will go into a sleep. Annd every-time the dyno will start, you will loose your data including articles, tags etc.

We will be using a postgreSQL database with the Heroku-postgres add-on.

To add this add-on, click on Ressources on the top navbar then search for Postgres in the Add-ons section.

Click on the right add-on then select your plan. For this tutorial we will go one a Hobby Dev plan.

Step 7 - Add our database information in the config vars

In order to secure our Strapi app, we will not put our database information directly in our config file but we will use environment variables.

To set environment variables inside of our Heroku app, go to Settings on the top navbar.

Let's click on Reveal Config Vars

We now see a var called Database URL and its value is a very long string such as this one:

postgres://fisojprjbmfmpl:e94f1e76a464632410d8246b47eca1e3f0f78e817165c9a7e5a22013f5499025@ec2-176-34-97-213.eu-west-1.compute.amazonaws.com:5432/da2n7sjsnqblr5

This URL contains every information of our database, Name, Username, Password, Host, Port.

In this case we have :

DATABASE_HOST = ec2-176-34-97-213.eu-west-1.compute.amazonaws.com
DATABASE_NAME = da2n7sjsnqblr5
DATABASE_USERNAME = fisojprjbmfmpl
DATABASE_PORT = 5432
DATABASE_PASSWORD = e94f1e76a464632410d8246b47eca1e3f0f78e817165c9a7e5a22013f5499025

For each info, we have to create a new var. Once its done, your page will look like this.

Great.

Step 8 - Configure your strapi database connection

The last step for setting up the database is to update the strapi configuration.

Let's open your favorite code editor on the root directory of your strapi project and go to config/environments/production/database.json

Make modifications in order to have exactly this file :

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
      },
      "options": {}
    }
  }
}

What we are telling to strapi here is to use our environment variables to get the database information. It will use the few vars we have created on the last step.

Step 9 - Deploy your strapi app on heroku

Deploy an app to heroku is very easy. There are few ways to do it.

Github hook → The app will rebuild every-time you update the default branch (master for example)
Container registry → If you are using Docker you will be able to deploy your docker-based app to heroku from its CLI
Heroku Git → Deploy an app directly with CLI by making it a Heroku repository

In out case, we will use the third method.

Heroku git and github can be used in parallel.

First of all let's add a line to the .gitignore file.

package-lock.json

If you don't add package-lock.json in the gitignore file, it may cause problems on heroku.

Now, we will need to install a package named pg which is a postgres package. If you forgot to install it, your build will be marked as succeeded but you will get an eroor when opening the app

If it was your case, just install pg package and redeploy your app.

If you have already install pg go on your app with terminal and type

heroku logs --tail

That will tell you where the problem is.

To install pg open a terminal window on the root directory of your Strapi project and enter the following command:

npm install pg --save

To deploy our application we need to go to the root folder of our Strapi app and follow theses steps :

1 - Login with heroku

heroku login

This will open a webpage so you can log in with your heroku crendentials

2 - Initialize the git repository

If you are using an existing git repository, skip this step

git init

3 - Set the remote branch for our app (here, tsflorus-strapi-tutorial has to be replaced with your heroku app's name)

heroku git:remote -a tsflorus-strapi-tutorial

4 - Add all of our changes

git add .

5 - Make a commit message

git commit -m "Initialize my Strapi app"

6 - Then, push to the master branch

git push heroku master

Heroku will now build your Strapi app into your Dyno. You can see the build logs by clicking on Overview in the top navbar.

Once the build is noted as succeeded you will be able to see your app by clicking the Open app button on the top-right corner of your screen.

And you will see that your app is now running in production !

We will now need to recreate an admin user. To do that, go on yourproject.herokuapp.com/admin replacing yourproject with your app name.

Exactly like we have done on the beginning, complete the admin user creation form then log in.

Congrats ! You now have an instance of strapi running in production.

Keep in mind that every-time you will make changes in development mode (locally) you will need to redeploy your strapi app to see them production. Plus, the entry you will add on development mode will not be added in the production mode as we are not using the same database. If you want, you can setup the same database for both dev and prod environments.

Step 10 - Create our first tag and article

We are now going to create our first tag and article.

Let's click on the Tags CT on the left navbar, then click on Add new Tag. **** Our first tag will be named hello-world. Enter this name when you are asked to and click save.

Now that we have our tag, let's add an article.

Click on Articles on the left navbar and you should see this window:

Add the content of your choice for each fields and save your new entry.

The content field is a markdown editor. If you don't now about markdown yet, check this link

Now, click on save and your article is saved !

Step 11 - Adjust permissions

As an headless CMS, Strapi render content via an API (I will upload very soon an article on APIs). For short, it means that we will not fetch data with a database connection but directly via a URL.

By default, Strapi's API is secure so that anyone cannot query our data. For this tutorial, we will allow every public user to query data of our Strapi API.

!! Disclaimer !! Never do this for a real serious project ! We are going to remove user protection jsut for the needs of this tutorial. Always secure your APIs !

On the left navbar of Strapi's dashboard, click on Roles & Permissions.

You can see that we have two different user roles. An Authenticated and a Public user.

Both roles are empty of user because we haven't add one. Your admin user isn't in the user table but just allow you to access this Admin Dashboard

We will edit permissions for the Public user.

Once you have clicked on Public, you will see under Permissions our two CT : Article and Tag.

For both of them we are going to check find and findone checkbox.

Note that on the right side you see a URL. In this case it is /tags/:id. This is the path we will have to use to fetch a specified tag.

We will also need to set this find and findone permissions for the Users-Permissions on the bottom of the page

Let's click on save.

Now we are ready to fetch our first article !

Step 12 - Fetch our first article

The default route for fetching your collection-types will be yourproject.herokuapp.com/collection-type where yourproject is the name of your app and collection-type the name of the CT you want to fetch.

You can fetch this data from anywhere just entering this URL. Personally, when I work with APIs I prefer to use a software named Insomnia which is a powerful tool for REST APIs.

If I fetch the CT articles, we will have this response:

Always add an extra "s" at the end of your CT name in the URL. To fetch our Article CT, I have to enter this URL : https://tsflorus-strapi-tutorial.herokuapp.com/articles

[
  {
    "id": 1,
    "title": "Hello world",
    "date": "2020-05-10",
    "description": "Just want to say hello to the entire world",
    "content": "# Oppugnant deus ficta fulva oculis manent lupis\n\n## Undis meminisse tum pariterque uterque iras lupum\n\nLorem markdownum Antiphatae moto, sis nuper, habuit coniunx, rursus. Volvens\nexamina, enim Medea, non stant me vocis ignarus! **Rector** aras omnia possis\ndomo querellis nullis, per verba, est ponti militia.\n\nPosset inquit. Vero ferarum offensi umorque; **ille Cereri**, vertitur hoc.\nVitalesque superba, inde suos **di iuxta**. *Ipsa formam*: agnus nec fluentum\ndextera Thetidis et Aurora pedumque: et.\n\n1. Et pulsa fovit me decorem sonantia strigis\n2. Succedit pastor\n3. Furta poteras est pulsus lenis Helenum origine\n4. Celebratior ferunt gravi\n5. Succurritis miseram opera spectacula aris violata signum\n6. Quem nudae genu vulnus\n\n## Muris quisquis\n\nTraiecit iactarique; eadem si pererrat orbis, hinc victor est fusum digitos\nbipenni ad altismunera. Pectora est placent, qui muris, ille nexu nomenque\nfidas, portus tonsa parentis, et nec.\n\n1. Ignorat verum illa videt volatu puer\n2. Lupi fugientis fures\n3. Sub octonis volitare herbas natasque opacas\n4. Silva Poeantia fueramque grande confluat\n5. Quae sit eodem circum audiat quid\n\nGramina Achaica multaque tepebat pede: iusserat, et esse, miserrima agebat\nstirpe, fateor lumina tabulas! Mortisque tigres sopistis Arethusae novit\n**turbida**: at Latiis vellet morsibus: *flamma*.\n[E](http://www.armanullum.org/timidum.html) Peleus pompas spectans erigitur\npenetratque tremensque parce. Vellera omnes; ulla absit sustinuit corque, denos\ncum templa Placatus animi.\n\n- Mea ensem adnuit\n- Aspicit ora Lucina\n- In equi florent\n\nDigna intrarant o vindice faciem, deinde, me nomen! Me fata quodque, iunxisse\nstrictique maximus et cantus ecquem vestrumque reliquit membra cum mediis omnia,\nadmissi? Medio arvum timuit obsequio aperti! Aspera pendeat ausus ad declinat\nter adhuc si cibis venabula *meos ibi*.",
    "created_at": "2020-05-10T14:52:24.883Z",
    "updated_at": "2020-05-10T14:52:24.883Z",
    "cover": {
      "id": 1,
      "name": "bermuda-searching",
      "alternativeText": "",
      "caption": "",
      "width": 876,
      "height": 912,
      "formats": {
        "small": {
          "ext": ".png",
          "url": "/uploads/small_bermuda-searching_ff94e074d2.png",
          "hash": "small_bermuda-searching_ff94e074d2",
          "mime": "image/png",
          "path": null,
          "size": 110.39,
          "width": 480,
          "height": 500
        },
        "medium": {
          "ext": ".png",
          "url": "/uploads/medium_bermuda-searching_ff94e074d2.png",
          "hash": "medium_bermuda-searching_ff94e074d2",
          "mime": "image/png",
          "path": null,
          "size": 181.99,
          "width": 720,
          "height": 750
        },
        "thumbnail": {
          "ext": ".png",
          "url": "/uploads/thumbnail_bermuda-searching_ff94e074d2.png",
          "hash": "thumbnail_bermuda-searching_ff94e074d2",
          "mime": "image/png",
          "path": null,
          "size": 27.26,
          "width": 150,
          "height": 156
        }
      },
      "hash": "bermuda-searching_ff94e074d2",
      "ext": ".png",
      "mime": "image/png",
      "size": 58.74,
      "url": "/uploads/bermuda-searching_ff94e074d2.png",
      "previewUrl": null,
      "provider": "local",
      "provider_metadata": null,
      "created_at": "2020-05-10T14:52:12.395Z",
      "updated_at": "2020-05-10T14:52:12.395Z"
    },
    "tags": [
      {
        "id": 1,
        "name": "hello-world",
        "created_at": "2020-05-10T14:47:32.091Z",
        "updated_at": "2020-05-10T14:47:32.091Z"
      }
    ]
  }
]

Perfect ! We have just fetch our first article ! Looks amazing.

Conclusion:

It is pretty easy to setup strapi, only 12 steps on you are ready to go.

But, you will see that we will quickly have a problem with our images. Images you will upload will only be saved on the cache of your dyno.

In the next tutorial, we will learn how to setup Cloudinary with Strapi in order to save your images even when the dyno will fall asleep.

Don't forget to follow me on twitter : @tsflorus and to check my website tsflorus.me where I post all of my articles.

If you don't want to miss the next tutorial, don't forget to subscribe to my dev profile and to my newsletter here.

See you soon and keep codinng !

Thomas

Build a website with Gatsby and Strapi - Introduction

Thomas Singerlé-Florus — Fri, 08 May 2020 22:18:25 +0000

Imagine that you want to build a powerful and fast website. A website for your company for example, including a blog. What would you use ? Wordpress ? Laravel ? Drupal ?

Well, those are pretty good choices.

If we look at this chart of the most used CMS on the web (according to Wappalyzer), Wordpress is clearly the most used CMS

And if we take a look at the most used web frameworks, we have a lot of things we can play with.

But what if we think different ?

I mean, the last time someone has done that, he created an apple that worth 1.3 trillion.

Well, in this tutorial we will learn to think different.

Another way of managing data

If you take a look at the CMS charts, we see Wordpress and Drupal. And what does they have in common ?

They both managing content of a front-end. For now, nothing new they are just random CMS.

The fact is that Wordpress and Drupal both have a Front and a Back-end.

The keywords for our project will be flexibility and power.

Here comes Headless CMS

A headless CMS is a CMS without presentational layer. This is just a backend.

I will not explain you in details what are headless CMS because it exist a lot of great article about it. You can check this one if you want.

Headless CMS are perfect for front-end developers because they allow a lot more flexibility on designing the UI.

I am not a front-end developer but when I was building my website I wanted something simple and powerful.

The data we will be building (articles and pages) will be accessible via an API. We will just have to fetched this data using API query with GraphQL.

Which CMS should we use ?

There are a lot of Headless CMS, Netlify, Ghost, Contentful etc. But the CMS we will be using is called Strapi. Strapi is a new powerful headless CMS build in France.

You can check my article on my discovery of Gatsby and Strapi here

I've choose Strapi because it is new and very easy to use.

Right, Now we have our headless CMS. But what is a website with just a backend ?

We now need a way to build our front-end. And for that, it exist something called static site generator. Did you already heard about them ?

Let's take a quick look to wappalyzer charts for most used Static site generator :

Take a look at the first result. It is called Gatsby and this is what we will use for this website.

I invite you to check the website of Gatsby to learn about this very powerful tool.

Gatsby is based on Javascript and more specifically it is a Reactjs based framework.

This is perfect for us, Reactjs will allow us to build a powerful web app (PWA → Progressive Web App). React js is also perfect for UX design. Again, I will not write a lot about react and I encouraged you to check others blog posts about react.

React also allows us to implement logic in the same file than the UI.

Now we know that we will use Gatsby and Strapi.

Deployment and production

When we will have build our website we will need to deploy it in order to be accessible on the web.

To do that, we will see how to deploy our CMS on heroku and our website on Vercel (Formerly ZEIT) using Now servers.

For this serie of tutorials, I will upload at least an article a week. We will see everything we need to get started with a simple website. Along with these articles, I will upload videos as soon as possible to complete it and to have a perfect look on this project.

Tutorials will be available on my website (mainlly) and on this account.

See you very soon and keep coding !

Thomas

My discovery of Gatsby and ReactJs

Thomas Singerlé-Florus — Thu, 07 May 2020 14:49:51 +0000

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 a 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 absolutely needed a portfolio. Moreover, I always wanted to have a personal blog in order 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 -> in order to present myself 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 -> In order 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 own research and I came with this solution:

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 :

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:

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 made the choice to couple Gatsby with a headless CMS (only backend interface) and for that I decided to use Strapi.

Strapi is a very recent CMS which 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:

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

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

To display it, simply insert the information like this :

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

Conclusion

Like 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