---
title: "Here's my new website"
description: "All about this whole new site"
date: 2021-08-09
tags: ["site","hugo","selfhosting"]
draft: false
thumbnail: /blog/img/newsite.png
license: "CC BY-NC-SA 4.0 International"
---

I've completely redesigned and restructured my website using the Hugo static site generator and the Blist theme[^1].

[^1]: The Blist theme was developed by Varun A P (apvarun on GitHub) under the MIT License. Click [here](https://github.com/apvarun/blist-hugo-theme) to go to the official GitHub repository. The social icons were modified to use the [FontAwesome](https://fontawesome.com/) Brands icons.

The site now has 9 sections:
- **About** is a brief history of my passions and my presence online;
- **Downloads** is a repo where you can see everything I've made downloadable to the public[^2].
- **Art** is a gallery of all of my drawings with their speedpaint videos;
- **Blog** is just a place where I share announcements or my toughts about something;
- **Design** is a gallery of my graphic design and UI/UX mockup works;
- **Other** is where I show miscellaneous stuff like my Dream Sounds or customization resources for KDE Plasma;
- **Software** is where I talk about applications or games that I made or that I'd like to make;
- **Videos** is a gallery of all of my videos from YouTube and Odysee;
- **Wallpapers** is a gallery of the pictures I take around the world and the CG wallpapers I make;

[^2]: Hosted on my other server because I wanted the storage to be easy to operate on, that reverse proxy was a pain in the ass to get up and running. Thanks to [FreeApp2014](https://twitter.com/FreeAppSW) for the help.

You might be wondering why I remade the site abandoning the fancy dark and animated stuff I had before for this seemingly more boring looking site. The reason has to do with **simplicity and minimalism**. If you have a certain amount of "computer autism", as I like to call it, you might have this mentality of doing things more efficiently and more neatly, and making a website like this, meaning with a static generator and without bloated javascripts, is a perfect incarnation of that mentality in my opinion.

![The old website's speed according to Google Pagespeed Insights](/blog/img/oldsitespeed.png)

So the old website definitely looked good, but it was quite **heavy on bandwidth and poorly optimized**, problems that I simply don't have on this new one. But this doesn't mean that the new site will look boring forever, I might add in the future some more nice looking and animated elements like the blinking cursor at the site title (I spent 40 minutes making that in CSS 🙃). For now all you get is my RSS feed file [here](/rss.xml) to get notified of any new article and a little dark mode toggle near the search button (yep, this thing also has a search feature).

![Editing this very page in Kate](/blog/img/katemd.png)

The thing I like the most about static site generators like Hugo is that you can make pages simply by using **markdown**, a cool markup language which lets you use special tags to change the format of text, add lists, codeblocks, tables, images and so on. Also I feel like a cool guy adding weird simbols near words, for example when I put two asterisks at the beginning and end of a word or a sentence to make it bold (`**like this**` → **like this**), or creating new articles by going to the terminal and typing `hugo new blog/name-of-article.md`. Remember kids: the command line might look scary, but often times it can become **your best friend**! *This reminder was made by the Arch Linux Gang*.

![Editing plain HTML sucks balls!](/blog/img/indexhtml.png)

With the old website I had to manually edit the index in plain HTML to add a tile for a new section of the site or for a new thing I posted on Instagram for example, and if I wanted to add or edit a social media link in the footer I had to make the changes **on every single page** for it to be consistent across the whole website, and this was just too much work for something that a static generator can let you do **just once**, for example on this new site I just have to edit the `social.html` file located in the theme's partials (a partial is a piece of HTML code that is a part of a page and that will be added to all pages dynamically every time Hugo compiles the site).

![Running the local preview server](/blog/img/hugoserverd.png)

Another nice thing about these generators is that you can make edits locally by editing what you gotta edit, sending the command `hugo server -D` and opening a browser on `localhost:1313` to preview the changes. Once you checked that everything is OK and correct, you can just deploy the local changes to the actual website. I deploy to my server with a script that goes `hugo && rsync -arvz --progress -e 'ssh -p 1234' public/ username@address:/var/www/html`, so it compiles the site and sends the result from the `public` folder inside the site's project folder to `username@address` (of course I'm not leaking my credentials) with `rsync` to `/var/www/html` which is Apache's default location for hosting stuff. The parameter `-e 'ssh -p 1234'` specifies the SSH port since I don't use the standard port 22 because I'm scared of script kiddies (and obviously 1234 is yet another placeholder).

In conclusion I'm quite happy with how it's turning out and this new Blog section gives me the opportunity to share my toughts on stuff without having to go through Twitter's algorithms and character limit (although I could have just started making text articles on Odysee, but then where's the fun of actually making and hosting your own special place on the internet like a real gigachad?).