HomeRSSMusicBooksLinks

How I made my website

I've wanted to make a website for a long time, and after some learning and practice, that is finally a reality :). In my very first blog post, I'll go over the philosophy and ideas for this website, how I actually made it, and how you can make your own.

Philosophy

First and foremost, I wanted this site to be minimal. I'm a fan of minimalism in real life, and even more so when it comes to technology. As the ultimate challenge (it's not actually that difficult), I decided to make my site with absolutely 0 JavaScript and no external pings to other websites. I did this for a few reasons:

  1. No JS makes the site load faster
  2. People who disable JS can have the same experience
  3. No external pings makes the site load faster
  4. I don't like programming in JS
  5. It's just a fun challenge

So, how did I actually accomplish this? Well, vanilla HTML and CSS are surprisingly powerful just on their own. The entire interface can easily be made with plain old HTML and CSS, which makes the site faster, more secure and easier to hack on than a massive site with a JavaScript framework. Now don't get me wrong; JavaScript is a very useful language, but it's simply not necessary for a site like mine.

The only real technical challenge I encountered with this approach was syntax highlighting for code blocks. Most options out there are done with JS, which is probably the best way to do it but I needed to stick to my challenge. You can always add an insane amount of <span> tags everywhere and style them with CSS, but that's far from the best option... or is it?

Enter chroma. Chroma is a Go program for doing generic syntax highlighting across many languages. The best part: you can export it to nicely formatted HTML for ease of use with CSS! For example (this is the shell.nix for this very site):

with import <nixpkgs> { };

mkShell {
    buildInputs = [
        xclip
        chroma
    ];
}

If you turn off JavaScript in your browser, you can see you still get syntax highlighting. Isn't that awesome?

Now, to use Chroma efficiently I decided to write a quick mapping in Neovim for a simple task. Here is the code snippet:

map('n', '<C-s>', ':!xclip -sel c -o | chroma --style="vim" --html | xclip -sel c <CR> <CR>', options)
    

If you have a Lua configuration for Neovim, you can just drop that in. When you press Ctrl + S, it will read the code from your clipboard, highlight it and convert to HTML, and then put it back in your clipboard so you can just paste it wherever you want.

How I made the site

Well now that we have all that out of the way, how did I actually create the site? As I said before, this site was designed to be minimal. I didn't use any sort of mockup program like Figma, I just edited the design as I went along. For the HTML and CSS, I started out with a bare HTML template, figured out how to work in my static site generator, and adding the styling. Simple as that. The source code for the website can be found here, if you want to look at it.

The only unconventional thing I did to make the site was use a little static site generator that I wrote for myself called bmanager. Basically, it's a Bash script that copies some files into the correct places. But because of the way I've written it, the general workflow for writing a blog post goes something like:

  1. Write an article.html file with the content of the blog
  2. ./bmanager new title-of-post
  3. Push changes to repo

Pretty simple, huh? The source code for bmanager can be found here.

The future of the site

As of August 2021 (site's release), the site is of course functional, but there are still some things I would like to add to it. For one, I would like to be writing the posts in Markdown or Neorg with automatic conversions via Pandoc. I would also want to create an RSS feed, a TOR mirror, and maybe even a Gemini capsule. However I will never stray away from the intention of this site, and I will always keep it minimal, privacy-respecting, and FOSS. That's about it. Thank you for reading :)