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/
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!
Top comments (15)
Thanks for sharing your stack, Paul.
I think it's great to play with the technologies building your own project, but nowdays I'd go with much simplier technology stack, because I'm tired of endless fighting with combining packages to work together, fixing weird errors, updating dependencies, e.t.c.
After all, it's just a static blog with few posts.
Yes totally agree! However, I think of my blog as a project I can experiment with and it is a great way to test different tools đ But nothing can beat plain static blog đ
Nice stack.
For me, Vue and Gridsome instead of React and Gatsby. Just a personal taste as I prefer Vue over React. ;)
Gridsome is pretty new and less mature compared with Gatsby but hoping it can catch up in the future.
I am just starting getting my hands dirty on modern frontend technologies so for now, I prefer working with pure Javascript, but plan to give Typescript a try in the future.
ESLint, Prettier, Jest, and Cypress are pretty standard JS tools nowadays so I also use all of them in my frontend projects.
Yes if I had used Vue instead of React I would have taken the same stack!
Typescript is awesome and you should definitely try it! I would say it is a must-have if you are working on a bigger project.
I'm using it for every project (even the small ones), but that's because I came from C# background and I really missed types in Javascript đ
I just checked Gridsome it's awesome
I am currently working on the Java Technology Stack and following are the part of my work-stack and I am pretty enjoying it as sometimes it gets messy and boring but at the end it is fun.
Where do you deploy the Spring?
Currently Our Spring Application is Deployed on Linode Instance as it is easy to handle and the productivity is very effective as well.
Are you sure about Gatsby? I tried it out like 4 months ago and essentially with TypeScript nothing worked. One error after the other and most plugins I wanted to try also either did not work directly or required more wiring than actually described in the docs. Long story short: I found it horrible.
That sounds totally horrible đ
I haven't experienced any issues wiring Gatsby with Typescript, did you follow the official docs? It uses gatsby plugin for typescript and everything should be working properly.
I would try some kind of gatsby-typescript-starter, if you decide to try gatsby again, I'll be glad to help!
On the other hand, some plugins might be less documented or even doesn't work at all, because they are made and maintained by other developers (so they might become outdated and so on). However, the most used plugins should be quite good documented.
Sure I followed the official documentation. My problems started essentially right with import statements and continued to all things possible like bundle splitting. You can read more details on my blog.
Overall, I found that Gatsby is super overkill for just having a blog. Just install parcel-bundler and parcel-plugin-codegen and you can set up a blog in no time with smaller and faster sites as a result.
One of the things that is a mess with Gatsby is that everything must be a plugin. Want to use leaflet? Well, you'll need a plugin. Why can't I just use react-leaflet?!
But enough of the rant :). Loved the article structure and tech composition, even though some comparison (e.g., emotion vs styled components) would have been good. â€ïž
Hi Paul, thanks for sharing your stack!
Have you tried Frontity + WordPress? I'd love to hear your thoughts about it :)
For me C++ WebRTC , Typescript with node and Angular :) I am working on some cutting edge streaming with Computer vision AI and IoT Edge technologies integrated into the solution.
Sounds very interesting! I would be happy if you keep us updated on how it goes đ
Brilliant Paul!