As a software developer, one of the best way to write articles myself is to build a blog. Investing in creating a blog means learning new technologies which I explain below and thinking with my own words about the latest books, articles, and trends I read. It tells me more about myself, my opinion on geopolitics, computer science, or other subjects I find interesting. Before creating a blog, I was thinking about Medium, which is great and easy to write on. You can do a lot of cool things like importing articles, statistics, etc. I also was thinking about Dev.to which is a convenient platform for developers. Finally, I decided to create my own personal blog, which brings me a lot of benefices.

GatsbyJS

Gatsby is a free & open source framework based on React to boost developers to build static website. It’s defined like a static site generator but different from its competitors like Hugo, etc. The particularity of Gatsby is that it allows creating really fast static, progressive, and high-performance web app.

Mechanism

Gatsby does all the data fetching during the build time. No matter where your data come from, like MDX files, Contentful, Strapi, Netlify, or other headless CMS. Gatsby normalizes the fetched data into a graphQL API, that allows displaying the information easily. On the opposite where WordPress, Drupal, Joomla comes with a backend and MYSQL. These classic CMS need to get regular updates for stability and security, they are quite slow, and have vulnerabilities.

Commands I use

gatsby new my-blog
yarn // to install dependencies from package.json

Then depending on if you’re familiar with yarn: Development mode:

gatsby develop //or yarn develop

Generating mode:

gatsby build // or yarn build

Gatsby plugins

Gatsby comes with a lot of plugins, for image processing, analytics, offline support, PWA, SEO, etc. This is the strength of this popular framework, build to quickly optimize the website. Gatsby is efficient for search engine bots because it’s only HTML / CSS and JS, without complex backend or database connection.

React Helmet: Meta tags are very important for SEO. They tell search engines important information about your web page, such as how they should display it in search results. React helmet is the plugin I used to add metadata to my web pages.

Sitemap: A sitemap is an XML file that lists all your website pages, making sure Google can find and crawl them all, also helping it understand your website structure. The gatsby-plugin-sitemap plugin allows you to automatically generate a sitemap with Gatsby and then bots can discover all your pages.

PWA: I like progressive web apps. It was very important for me to have a PWA for my personal blog so users can download it like a native app. The starter I used already had offline support, so I didn’t have to configure anything. Gatsby is usually is best defined as a PWA generator instead of a static site generator.

Gatsby is performant

Stop worrying about performance in your web app, Gatsby take care of it for you. Gatsby sites are very very fast. Here’s what makes gatsby sites very performant: Gatsby follows Google’s PRPL architectural pattern: Push , Precash , Prerender , Lazyload. and other performance best practices Generates only static assets: no server needed Normalizes third party data It supports code splitting, enabling progressive rendering for your content. Gatsby does a lot of optimization for us out of the box.

Contentful

More than a headless CMS, Contentful is the API-first content management platform to create, manage and publish content on any digital channel. Contentful is connected to my Gatsby website through its GRAPHQL API.

Tailwind CSS

Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Web shared hosting platform

Hostinger & Webhooks

Hostinger is a web hosting provider and internet domain registrar. I’m using for my websites, mailboxes, and databases.

Namecheap

Namecheap is an ICANN-accredited domain name registrar, which provides domain name registration and SSL.

Github & Netlify

Github is used for the CI/CD, continuous deployment. I build the code with Gatsby build, then I commit & push my changes to the main branch of my public repository. A webhook on the push command is generated by Hostinger to update the static files online.