HomeBlogResearchProjectsContacts

New blog

Date: 2020-06-01

Hello! Welcome to my blog. This is my very first post; I’ll say why I decided to make a website and a few technical details about how I am hosting this.

Motivations

In the last years social networks have provided a nice way for everyone to tell what they think, what they feel, what they want… but not in the way they want. Let me be clearer. I don’t have anything against Facebook, Instagram, Twitter or other platforms. However, it’s kinda difficult to be yourself over there.

As a Computer Science student, I can assure you that the way a platform makes it possibly for you to express your thoughts, will undoubtedly affect what you say. It is not only a problem of moderation, allowed content or bans, but also a problem of modalities: length limits, the possibility (or not) to use pictures, the possibility (or not) to hide your identity, the possibility to control the sharing of your ideas in a particular way, etc.

This is why I took myself out of most social networks. For now, it’s difficult to replace reddit; however, using RSS aggregators like Miniflux you can follow websites, blogs, even some social networks pages if their author does not have a proper website.

I like the idea to have a blank sheet to model it exactly the way I want. A very nice article on these aspects of websites can be found on Parimal Satyal’s blog.

Style and software

There are a few things I wanted my site to be:

  1. Clear
  2. Easy to maintain for me, and easy to use for the user
  3. Blazingly fast and lightweight

Also, there is another thing I want: I have to know and understand every line of code I write here. HTML and CSS are powerful enough to express my idea of website, the look I want to give to it. Why rely on some new-exciting-soon-to-be-dead web framework with 2 GBs of dependencies?

However, I also wanted a little help in managing all the website’s pages. I had two options:

  1. Use a blog-style platform like Ghost or Bear
  2. Use a static site-generator like Hugo

But, remember what I said about the code? I want to understand every line of code I write here. And I want to keep it simple.

So, after some research, I found what I was looking for: soupault. As the author describes it, soupault is a:

Soupault (soup-oh) is an HTML manipulation tool. It’s best described as a robotic webmaster. Like a human webmaster, it understands HTML, but doesn’t get tired of editing it. It can insert files, HTML snippets, and output of external programs in your pages, generate tables of contents and footnotes, and more. It can also delete elements from pages.

You may be disoriented after having read this; it is way simpler than you think.

Basically, with soupault, you define a template like this:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> <!-- set automatically, see soupault.conf --> </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- your page content will be inserted here,
         see the content_selector option in soupault.conf -->
  </body>
</html>

You can modify it the way you like; for example adding a navbar like mine. This is the skeleton that every page on your website will have (still, you can have special pages which do not follow this strict rule). Then, for the other pages (homepage included) you just have to define the content of it:

<h1>Hello!</h1>
<p>This is a page!</p

This snippet will be put in the body section of your template. The result will be a complete HTML page. I find it amazing because it does a lot of boring work, but meanwhile it does not include strange lines of code or things you do not want.

Moreover, it has some plugins; for example it can generate a post list like the one in the Blog section automatically. Another one highlights code snippets. Its configuration is straightforward: you just need to put this in your soupault.conf:

[widgets.highlight]
  widget = "preprocess_element"
  selector = '*[class^="language-"]'
  action = "replace_content"
  command = 'highlight -O html -f --syntax=$(echo $ATTR_CLASS | sed -e "s/language-//")'

and every piece of code you put in your pages will be parsed and highlighted. highlight is a program that, well, automatically highlights your code according to the syntax. It creates a CSS file with the class parameter for the colors, the boldness etc for the theme.

You just need to copy the CSS of the theme in your style.css and you are ready to go.

It’s basic and it’s simple. One of the most interesting thing is that you can write your posts in MarkDown: in fact, through cmark your MarkDown posts will be parsed and converted to HTML, ready to be inserted in your page. All of this is done automatically.

To sum up:

Hardware & Webserver

In the last two years I developed a passion for self-hosting various services. One example is the aforementioned Miniflux for aggregating RSS feeds; Nextcloud is another nice one that I host on my server.

My server is a little Intel NUC which I bought second-hand from a nice guy in Milan. It had a 256GB SSD and 8 GB of ram; I kept the configuration.

It has a x86 dual-core 64bit CPU, making it usable with any major Linux distribution; I chose Ubuntu Server, instead of ArchLinux (which I use on my daily machines). Probably the most exciting thing is that its consumption is basically the same of a smartphone in recharge. Slightly higher than a Raspberry Pi, but still very low; perfect for a machine which stays on 24/24, 7/7.

My webserver of choice is Caddy. I have chosen this instead of, say, Nginx because I like the approach of a very small and clear configuration file. Well, nothing against Nginx or Apache, but sometimes, while dealing with them, I had the impressions of writing random things to make things work. I don’t feel the same with Caddy.

And, it has HTTPS automatic support out of the box! No way I’m publishing a website without HTTPS.

For now, this is it. I may update this page if I remember something else. See you!

Creative Commons License