How this site works

Why this site?

Before talking about how this blog is set up and the technologies used, I wanted to explain why I built this site, first of all I wanted to have a blog to write on different subjects, but especially on tech and dev. I spend a lot of time reading and testing new technologies/packages that I found it relevant to group my impressions somewhere.

I might like to eventually have a portfolio part or another devoted to my side projects or even a bookmark part to keep somewhere all the interesting links I find.

Technologies used

My prerequisites

To make this site I had some requirements:

• I wanted the site to be efficient, try to have 100 in a lighthouse report
• I wanted to be able to easily create a post
• I wanted to write my posts in markdown
• I wanted to be able to deploy very easily
• I wanted to add a technology that I don't know to test it

Choice of technologies

Next.js

My choice turned to Next.js which is a simple, complete and easy to use React framework. It also allows static generation of pages, The HTML is generated at build time and will be reused on each request. This will make the site very efficient. With getStaticPath Next.js will statically pre-render all the paths return in this fonction In my case all blog posts:

const getStaticPaths: GetStaticPaths = () => {
  const postsSlug = getAllPostsSlug();
  const paths = postsSlug.map((slug) => ({
    params: {
      slug,
    },
  }));

  return {
    paths,
    fallback: false,
  };
};

You can see the list of pages generated during the build (next build)

Page                                                                Size     First Load JS   
┌ ● /                                                               2.53 kB          76 kB   
├   /_app                                                           0 B            73.5 kB   
├ ○ /404                                                            192 B          73.6 kB   
└ ● /blog/[slug] (669 ms)                                           28.7 kB         102 kB   
    ├ /blog/how-to-make-a-minimalist-blog-theme-in-drupal (348 ms)
    └ /blog/how-this-site-works (321 ms)

MDX

As I wanted to write my articles in markdown but I also wanted to be able to add code to my articles, I decided to use MDX, which allows to use JSX directly in the markdown file, my articles are therefore in .mdx, so I can display a button:

To do this there are different packages but I used next-mdx-remote

Tailwind

As I said in the intro I wanted to use a new technology that I have never used, and it came across tailwind

One of the advantages of tailwind is the speed to style components, there is a bit of learning about the classes but they are quite logical so it is almost self-explanatory. Another advantage is the total customization, we can define the different sizes, colors etc..

I also used the official plugin @tailwindcss/typography which adds rules for all the basic HTML tags, and allows to style my markdown articles and I am very happy with the results.

Vercel

Vercel is the company behind Next.js and the simplest and easiest tool for deploy a static site. Just login with your github account, select the project and the branch was successful and that's it.

Scripts

To create the posts I developed a small script which allows to create the .mdx file with the metadata and the image folder if necessary. I am using the prompts package to create this script.

Performance

Finally, the use of these technologies perfects me to have a very efficient site, whether on the homepage and on the articles.