This is not the first time I built this particular blog. Just a year ago I built it with Gridsome.js - and I wasn't happy about it, not because of Gridsome, but because I didn't like how it looked, and I didn't like how I manage the content.

The content was in markdown, which is great, but every time I wanted to change something, there was a bunch of manual work to be done, especially to upload images and link to them in the article. That's on me.

I wanted to make it different this time

I didn't want anything fancy, just a simple blog. The content is what's valuable the most in a blog, not really how it looks, although user experience has to be there, of course.

Learning from mistakes is very important, and I learned that if adding new content is not easy, then you'll never feel like adding new content!

I wanted to launch fast, with minimum features, and improve things later. I decided to go for a statically generated website because I wanted performance and because the content does not change too often. There's no authentication or anything like that.

Design

As I always do, I started with brainstorming features (necessary features and future nice-to-haves), and how the website will be structured. I do this in the design phase because that's where I feel creative, and there's where I can play around with different styles easily. Doing that with CSS would be crazy.

I used Adobe XD to design the UI. Although I wanted the website to be simple, I also wanted to show that I'm passionate about making nice websites, so I didn't want it to be too simple. You just have to find the right balance, I guess.

Frontend

Nuxt.js is an awesome framework for Vue.js, which allows you to render your application on the server-side, and also can generate a static website.

Server-side rendering is a god-send for a SPA as a dynamic website, but in this case, a static website is perfect as it provides the most performance and the simplest hosting because the website is just simple HTML files.

For the styling, I used TailwindCSS, which is a utility framework. I love using TailwindCSS in all my projects. I find that it helps me work faster and be more creative while keeping me disciplined and not using magic numbers. I love how the design specifications are structured in a TailwindCSS config file, which makes it easier for new developers to maintain your code.

Backend

This part, I did twice.

First, I decided to make a custom API with Adonis.js (a node.js framework) because I had plans that the website features grow in the future. This way it would be easier to add new features.

However, if that happens, it would make more sense to rewrite the website according to the business needs of that moment.

So I decided to go with Strapi, a self-hosted content management system that I can set up in a few minutes, make an account on its GUI, set the content structure I need, deploy it, and provides me an API automatically.

I hooked Strapi into a MySQL database. I chose MySQL because it was already installed, not because it's my first pick, but for a simple application like this, database performance won't matter because the website is static.

Strapi also provides a WYSIWYG Text Editor with markdown out of the box if you set a field as rich text.

Imagine the work I have to do to create a custom control panel UI to manage my content and hook it up to a custom API.

While in development, I made use of Postman to request data from the API and make sure everything is returned as expected for the frontend to work with.

Git

I use git for all my projects, as anyone should. I separated my frontend project and my CMS into separate repositories on GitHub because they are different things.

I don't like using git from the terminal. I find this easy to make mistakes, and the user experience is not comparable to what a GUI can give you.

So I used the best git GUI tool in my opinion, GitKraken!

GitKraken is very visual, and it's beautiful too. It makes using git safe and easy because pressing buttons is better to understand than typing commands. Made a mistake? Just press Undo. Want to put something somewhere? Just drag it.

I work much faster with a git GUI tool than with the terminal, and I feel like I have more power, also because I don't have to remember commands and because I can see everything at a glance.

I recommend GitKraken to everyone, beginners, professionals, businesses. It's not even expensive.

Infrastructure

I used Digital Ocean to make a virtual machine running on Ubuntu.

I set up both frontend and backend repositories in their own directories, and used NGINX to handle requests and send them to the right website.

Every time I make an update, I merge it into the main branch on git, and then pull it from the virtual machine.

For the frontend, I also need to trigger the static website generator every time the content in the CMS changes.

I would like to do better automation in this department in the future, but for now, I don't find it a burden as it doesn't happen every day.

Closing Thoughts

Building projects is fun, especially when you try new things out. With every project, you learn something new, and you have something to show.

I built this blog because I want to provide value, and I hope you find it useful.

More features coming in the future. Let me know any feedback you might have and I hope to see you here again.