Here's my new website
All about this whole new site
August 9, 2021 • 5 minutes • 896 words
Tags: site hugo selfhosting
I’ve completely redesigned and restructured my website using the Hugo static site generator and the Blist theme1.
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 public2.
- 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;
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 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).
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.
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).
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
/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?).
The Blist theme was developed by Varun A P (apvarun on GitHub) under the MIT License. Click here to go to the official GitHub repository. The social icons were modified to use the FontAwesome Brands icons. ↩︎