Go to homepage

Pavel Susicky

Frontend developer from Czech republic

My Github accountMy Twitter accountMy Dev.to accountMy LinkedIn account

Technology stack for your blog in 2019

Published on 12/7/2019

javascript
react
blog

Personal blog is one of the most popular projects for every developer. It can be done in various ways from plain HTML, CSS and Javascript files to a big codebase with all the best practises you can imagine.

I want to share with you the stack I've used to create my blog, so let's get right into it! 🚀

Quick note: this blog is created as JAMStack solution, so we don't need any kind of server to handle our blog posts creation and so on. So it is possible to host it on any static website hosting such as Netlify, Github pages and more!

React

I guess many of you already know React. It is a Javascript library for creating user interfaces. Application is build using components, which can be composed together and reuse across the project, which makes it very powerful.

It's a core of our application because other libraries listed below depend on React itself.

Available on npm registry

Official docs: https://reactjs.org/docs/getting-started

Gatsby

Gatsby is a Javascript framework (for React.js apps) which helps you to set up your application. It handles most of the boilerplate code you would otherwise handle by yourself (webpack config, "server-side" rendering, GraphQL, and so on..). Apps built with gatsby are really (really) fast.

You can use Gatsby plugins in your application, which enhance your app by features, or you can create a custom plugin for others.

By the way, Gatsby has one of the most "bulletproof" documentation you will find on the internet. If you stumble across some error, try to search the gatsby docs, there is a big chance that it is already covered there.

Available on npm registry

Official docs: https://www.gatsbyjs.org/docs/

Typescript

Known as superset of Javascript. It adds static type-checking on top of Javascript and provides clever IntelliSense in your favourite Text editor/IDE.

Typescript is still evolving, and every new version brings new features, which saves hours and hours of developer's valuable time.

Available on npm registry

Official docs: https://www.typescriptlang.org/docs/home

Emotion

Emotion is a CSS-in-JS library. It has been gaining popularity lately and there are many aspects why! It has built-in scoping for your styles. Working server-side rendering out of the box, or with a little and easy configuration. State-based styling and many more features!

Available on npm registry:

Official docs: https://emotion.sh/docs/introduction

Eslint

ESLint is a tool for identifying and reporting on patterns found in JavaScript (also Typescript) code. It should be a must-have tool in your tech stack because it will force you to use best-practises across the project and if your blog is open-sourced you should definitely be thinking about adding it!

Available on npm registry

Official docs: https://eslint.org/docs/user-guide/getting-started

Prettier

Prettier is an opinionated code formatter, which supports most popular languages. It keeps consistency in your code formatting, which can be very valuable and also time-saving because you don't need to format code manually.

Available on npm registry

Official docs: https://prettier.io/docs

Jest

Is a very popular testing library. It integrates very well with react.

Available on npm registry

Official docs: https://jestjs.io/docs/en/getting-started

React Testing Library

For testing react components you usually go for enzyme, but you should be thinking about going for testing library because it makes your tests to be less dependent on the component's internal state.

Note: if you switch from enzyme to testing library you will need to change (a little) your thinking about writing tests because it is different from enzyme.

You should definitely take a look at blog by Kent C. Dodds (author of testing library) if you want some in-depth knowledge about testing library!

Available on npm registry

Official docs: https://testing-library.com/docs/react-testing-library/intro

Cypress

Is an end to end testing framework, which enables you to write all kinds of tests:

  • Unit tests
  • Integration tests
  • e2e tests

It's a very nicely done framework with amazing documentation (with text and video versions!) and it's very easy to set up.

Available on npm registry

Official docs: https://docs.cypress.io/