How I built my website?

Are you interested in how I build my site? Below you can find all the most necessary information.

Framework

I do a lot of programming as a hobby in my spare time, and I’ve had to deal with various technologies. For example, while learning Python, I built sites in Django. Then I tested very popular Javascript frameworks, namely Vue and React. Also their meta-frameworks (Nuxt.js and Next.js).

Both Django and Javascript metaframeworks are excellent solutions for large applications and web portals. However, in my case, that would be an overkill. Fortunately, Astro.js was created some time ago and is perfect for projects like mine.

Astro.js

This is an ideal framework for building content pages. You can generate static pages, as well as handle server requests on the backend. It’s much simpler than popular metaframeworks built with React (Next.js) or Vue (Nuxt), and you can simply use HTML/CSS/JS.

If you have some knowledge of basic page building, learning Astro will be an excellent stepping stone.

For me, the key factor in choosing it was several features and integrations that make content creation and site development very easy.

Content Collections i MDX

Content Collections is the most important feature for me. I love writing articles and notes using Markdown. In my opinion, it is the easiest and fastest way to write articles from the Internet.

In the Content Collections configuration, you can define what metadata each blog article should have and Astro during then checks if any data is missing. Such validation is definitely enough for me and I don’t need to have any complicated CMS (at least for now).

The second element of writing articles in Astro is MDX. It allows you to weave interactive components directly into markdown text. This way you can easily show interesting charts, forms or working UI components in your articles.

Tailwind CSS

I use Tailwind CSS to style the site. It has many opponents who think you should use regular CSS, but in my opinion it just works faster. Especially if you are the only programmer on the project ;)

If you are not familiar with Tailwind I will quickly explain what it is all about.

CSS

Let’s assume that we want to create simply a button. In pure CSS we create an HTML class and to it we create styling in .css file.

<button class="btn">Click Me</button>

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover {
  background-color: darkblue;
}

Tailwind CSS

In Tailwind, all you need to do is give the appropriate classes to the HTML element and you do not need to create a separate .css file.

<button
  class="px-4 py-2 text-base text-white bg-blue-500 border-0 rounded-md cursor-pointer hover:bg-blue-700"
>
  Click Me
</button>

It may look strange at first, but over time it is easy to get used to it.

Add-ons for Tailwind

Two very useful extensions to Tailwind are:

There are many, many more advantages of Tailwind, but I will write about them at another time.

Sitemap, RSS and og-canvas

There are a great many integrations for Astro, which can easily be added using the npx astro add * command. For me, the most important ones to start with are:

There are still integrations for inserting SEO meta tags, but I am perfectly happy to use the default options for setting them up.

Hosting the site

Above you have a brief description on the creation of the site itself, but the other issue is hosting that site. You can use platforms such as Netlify or Vercel, but personally I don’t like to tie myself to a particular company. I prefer to use my own server.

Server

I have a purchased VPS server with Docker installed, and I have Caprover set up on the Docker. It’s a great solution that allows you to install multiple Docker applications in 1-click. I use it to test various solutions and put up test databases for my hobby projects. It’s also very convenient for hosting your own websites and applications.

Configuring Astro

In Astro, all you need to do is add the Node.js runtime to your project, lightly configure the configuration and add a simple .dockerfile . The Node.js runtime allows you to handle various queries “on the backend”, which I will find very useful in the future.

Deployment

Caprover has a number of options for deploying apps, I’m using the simplest for now, which is to fire off a deployment using the Caprover terminal tool. All I have to do is upload the code to Github and let the server know to build a new version of the app.

Of course, I will eventually set up an automatic deployment of the app using Github Actions, but for now this simplest way is enough for me.

Analytics

I try not to help the big companies too much in tracking my readers, so I choose not to use Google Analytics, Facebook Pixel and other such oddities.

It’s known that over time I may come off badly on this because it will be harder to reach new people, but I don’t have a problem with it. I hope that if you like my material you will share it ;) However, all this doesn’t mean that I don’t use analytics at all. There are various great solutions to enable such a service on your own server.

I use Umami Analytics. It’s a super simple platform, but it gives me all the information I need about visits. I’m not able to recognise specific IP numbers and ‘returning users’, so I have no idea if you’re a new user to the platform or if you’ve ended up here again. Other statistics are enough for me.

For example, I can easily see if someone is currently reading the site. I can also very easily tag specific HTML elements for event tracking. Creating ‘funnels’ is not too much of a problem either. I gain data, you gain privacy and the big corporations don’t get your data.

Summary

I hope that some of the things I have described are new to you and will be useful to you in your projects. For sure, as the site develops, I will test new solutions and choose the most interesting and useful ones.

Any day now I will launch a Dev Log on this site, in which I will describe my adventures with programming. However, I want it to be a bit off to the side and not “clutter” the main blog, which is supposed to be mainly about User Experience.