Technology stack for your blog in 2019
Tags: javascript, react, blog
Published: 2019-12-07 15:33:05

---
title: Technology stack for your blog in 2019
published: true
description: What technology stack I have used for powering my Blog in 2019?
tags: javascript, react, blog
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sa4anzxlx0j0mluiu5e5.jpg
canonical_url: https://thesoreon.com/blog/technology-stack-for-your-blog-in-2019
---

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](https://www.npmjs.com/package/react) registry
**Official docs:** [https://reactjs.org/docs/getting-started](https://reactjs.org/docs/getting-started.html)

## 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](https://www.npmjs.com/package/gatsby) registry
**Official docs:** [https://www.gatsbyjs.org/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](https://www.npmjs.com/package/typescript) registry
**Official docs:** [https://www.typescriptlang.org/docs/home](https://www.typescriptlang.org/docs/home.html)

## 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:

- [@emotion/core](https://www.npmjs.com/package/@emotion/core)
- [@emotion/styled](https://www.npmjs.com/package/@emotion/styled)

**Official docs:** [https://emotion.sh/docs/introduction](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](https://www.npmjs.com/package/eslint) registry
**Official docs:** [https://eslint.org/docs/user-guide/getting-started](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](https://www.npmjs.com/package/prettier) registry
**Official docs:** [https://prettier.io/docs](https://prettier.io/docs/en/index.html)

## Jest

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

**Available** on [npm](https://www.npmjs.com/package/jest) registry
**Official docs:** [https://jestjs.io/docs/en/getting-started](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](https://kentcdodds.com/blog) by Kent C. Dodds (author of testing library) if you want some in-depth knowledge about testing library!

**Available** on [npm](https://www.npmjs.com/package/@testing-library/react) registry
**Official docs:** [https://testing-library.com/docs/react-testing-library/intro](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](https://www.npmjs.com/package/cypress) registry
**Official docs:** [https://docs.cypress.io/](https://docs.cypress.io/)

### Share your tech stack

What is your tech stack for this year? What technologies do you use in combination with Vue or Angular? Tell us in comments! 🧐

This post is published on my blog, see it **[here](https://thesoreon.com/blog/technology-stack-for-your-blog-in-2019)**!