I set up a personal website on a rented server for the first time in 2020 (DigitalOcean server running Nginx) and learned just enough that I was able to do something more ambitious on my second try. I’ll summarize the stack quickly, then go into why I made the choices I made. The entities I had to make an account with in order to set this up are bolded.
The stack
- My registrar (the people I buy a cool sounding url from for $20/year) needs to know what corporation’s name servers to tie the url to. In the past this was DigitalOcean’s name servers, since I was renting my server from DO. Now it is Cloudflare.
- Cloudflare is given the IP of the virtual private server, which I am renting from Hetzner.
- Hetzner gives me an Ubuntu server large enough that I don’t really worry about how many images I’m storing on there, and definitely not about how many blog posts I can stuff on it.
- It also has enough CPU to run Caddy, a “reverse proxy” computer program that takes url requests coming into the server and returns specific HTML files in response.
- I told Caddy to, in most cases, map those requests to the directory
/website/public/quartz– i.e. a request toscyy.fi/til/atp-synthaseshould simply be parried with/website/public/quartz/til/atp-synthase.html- Some other special requests, which go to web apps, are checked for first. Quartz only knows how to serve blog posts, and since my website is a combination of web apps and blog posts, I need to route the web apps separately.
Now, jumping to the other end of the stack (the blog post writing bit):
- whenever I write a new blog post, it’s in Obsidian, which is a desktop app that sits over a directory of markdown files and provides some styling and metadata like tags that can be used in-app.
- Quartz is a “static site generator” computer program that I downloaded and run locally. Quartz knows how to take such an Obsidian-style markdown file directory and generate a directory of HTML files – one HTML file per post, of course, but also per tag and per folder. It also filters out posts from folders marked as private, adds a sidebar on the website you can use to navigate the directory tree, etc. When I write a new post or edit an old one, I run Quartz again on my Obsidian directory.
- Quartz is the really big piece of all this. Everything else here is something you interact with once to set up – Quartz runs every time you update a blog post to generate the new HTML directory.
- And if you want it to have any non-default behavior – as I did – you have to read the documentation and edit the code yourself.
- I use rsync (a command that’s built-in for Mac and Linux computers, and therefore works from my Mac to transfer files to a Linux machine) to get the updated version of that HTML output directory to my server. rsync is efficient and only transfers the difference.
And:
- I get lightweight analytics with Umami, which I did by making an account with them, giving them my website url, getting a key (a long alphanumerical string) in return, and pasting it into my Quartz config. Now the key is in every HTML page that Quartz generates, and there’s a bit of Javascript that runs (unless the user disables it with a privacy extension or such), sending some basic info to Umami about what kind of device, where, requested to get that HTML page. Which Umami tells me.
Hetzner and Cloudflare
I went with Hetzner because they are cheap and could not find anyone cheaper with cursory googling.
Before Hetzner I used DigitalOcean (for reasons forgotten) and was paying $7.5/month. Hetzner claimed to give me 40GB of storage for $4/month, but the server would be in Germany or Finland, not the west coast, where I live and many of my website visitors live. They also
Once I decided to use Hetzner, Cloudflare also fell out of the decision, because they offer caching (essential if I don’t want my US visitors to need the request to travel to Germany and back to get an HTML or PNG file from my website) and DDOS protection on their free tier. I feel grateful and kind of confused that Cloudflare offers this for free.
Caddy
I used to use Nginx as my reverse proxy. I thought I’d do it again on the new Hetzner machine. Half an hour into setting up what should have been a very simple Nginx config file that simply said “if you get a request for scyy.fi/abc, return this file in this directory; for everything else, check under the ‘quartz’ directory” I was gibbering with anger and decided to try a newfangled but purportedly more beautiful reverse proxy. I have had no regret since. My Caddy config file is beautiful. It’s as short as I instinctively feel it ought to be. It provides HTTPs by default and renews certs by default (which were an annoying headache for me with my previous Nginx setup).
Quartz
Before Quartz, I tried Obsidian Publish for a month because I wanted to know how much I’d get out of having a website where I could write a blog post locally and publish it on my website with one click. Obviously normal blogging sites like Wordpress or Substack also provide this, but what I really liked about OP was that the website was an epiphenomenon of a local directory of markdown files. And yes, I turned out loving the one-click publish-from-local-markdown thing. But Obsidian Publish cost $8/month and could not be induced to host web applications. I think I could have snuck some static web apps by doing some truly disgusting things with publish.js, the one file they let you put custom Javascript on for their site, but I didn’t wish to.
But what I could do was download an open source version of Obsidian Publish and host it on a VPS that also hosted my web apps separately. The most complete such thing was Quartz, and after a bit of research I decided I’d just go with it and not try anything else.
There were several things that Quartz and Obsidian Publish didn’t have that I had to work around or add myself. I found this really fun – it’s the kind of hobby project I wish I’d done when I was in the gap between simple college software projects and megacorp codebases. The code is well organized and well documented and there are plenty of opportunities for someone with only a bit of web dev experience to go “oh, I wish it did… and it can!”
Navigation and discovery
By default, both Obsidian Publish and Quartz display every public post in a folder tree that can be navigable from the sidebar (Quartz calls this the ‘explorer’.) I didn’t like this very much. First of all, I (hope to) write a lot. I personally don’t like the thought of having a left sidebar folder tree with hundreds of posts, with no good way to gently deemphasize the older or lower quality ones (other than by making a folder that says ‘old’ or ‘low quality’).
Second, even if the underlying data is organized as tree of folders, I generally prefer to expose this data as a graph with multiple entry points that preferentially surface posts with different qualities: topics, recency, all time favorites, monthly update posts.
I decided the article of the homepage itself should contain highlights, and all the other entry points should belong in the left sidebar.
This meant replacing Quartz’s Explorer component with a custom component that showed links to tags I wanted to showcase, including my tag for the monthly roundup (I made the decision to keep art, and only art, as a folder, and feel sheepish about this – it feels conceptually unbeautiful), plus a list of recent posts, prefaced with a link to see all posts chronologically.
See all posts
Quartz doesn’t yet natively generate a page that shows all posts chronologically, so I had to add one. (It was easy, and I’d guess there’s a lot of demand for it, so I’d bet it’ll come in future versions of Quartz.)
Quartz auto-generates a page for each folder in the top level Obsidian vault, one which contains a chronological list of every post in that folder, but not a page for that root folder itself. So there is no native “see all posts” view. I had to trick it into creating one and storing it under “scyy.fi/posts” by adding the root as a specially-handled case in the folder generation code.
Permalinks
In Obsidian Publish, I could set a “permalink” field in a file’s frontmatter (i.e. metadata fields at the top of the markdown file), such that a page in the fiction folder of my Obsidian directory could be served under scyy.fi/dogs rather than scyy.fi/fiction/dogs. Quartz does have this, but by redirecting scyy.fi/dogs to scyy.fi/fiction/dogs, such that scyy.fi/dogs is not the canonical address a visitor sees (or will share, if they copy the url to link another person). I did not like this for the more popular posts that are already pointed to by links online, but I also didn’t like it for normal posts. I want even minor posts to have a simple url by default.
I admit I could not solve this. I posted in the Quartz Discord server about it and while it seemed possible to set the permalink to be the canonical url, it would mean deeply messing with the guts of file generation. I wasn’t sure I was a good enough programmer to do this, and it also seemed to make my Obsidian vault more fragile in the future (more links breaking later). So I did something I’m not happy about, and put all of my posts in the top level of my Obsidian vault by default. The exception is posts I’m genuinely happy to have prefixed with folder names, like “scyy.fi/art/work/2024_painting.jpg” or “scyy.fi/til/random-fact”, where the folder name serves a semantic purpose rather than being a downstream artifact of file organization.
(I could not have made this decision without also having decided to replace the Explorer component with an entry-points-only custom navigation component – I don’t want a sidebar with hundreds of top level entries!)
Dateless posts
Most of my posts are blog posts, but some are “dateless” posts like my homepage or my “art that’s available to buy” page. I admit I did not cover myself in glory in my solution to this. I made it so that the ContentMeta component that generates the date text at the top of each blog post recognizes “2000 Jan 1” as a special date that means “don’t generate any text at all”.
By the way: after some experimentation setting dates on blog posts, I’ve settled on using “date:” in the frontmatter of a file. I initially tried to use the markdown file’s creation date (Quartz also lets you use modifiedDate as the date displayed on a post, but I don’t want this because I edit typos out of old posts all the time). But this isn’t futureproof because not all operating systems honor a file’s birth times, birth times don’t transfer if you copy a file, etc.
Inline table of contents
This one was frivolous and I suspect it’s aesthetically controversial because I placed it inline in the blog post, so the text crashes up against the left border. (This is because some posts have very narrow ToCs and I didn’t like having a narrow element take up so much vertical space.)
Originally, Quartz’s desktop view website has a left and right sidebar, with the post in the middle. The table of contents and backlinks (list of posts that link to the current post) is on the right sidebar. In most posts, these are pretty short sections – it didn’t seem like a big deal to move them into the center article.
I decided I wanted to do so after soliciting recommendations on beautiful, text-heavy personal websites. I noticed most of the results I liked were less cluttered than the three column Quartz website I started out with. So I got rid of the right sidebar, moved backlinks to the end of the post, and moved ToC to the beginning.
Vain little logo image on desktop
Obsidian Publish lets you set a logo image, and I liked this, so I created a parallel component in Quartz. My non-homepage posts are mostly text, so it felt nice to add a picture to let the layout breathe, or something.
Various CSS
- Getting tags to show up on the same line as the date
p.content-meta {display: inline; } - Getting rid of external link icon
- Keeping page from jiggling when you scroll up all the way to the top or bottom
html { overscroll-behavior: none; } - Repurposing markdown highlight as a spoilertext (this was kind of gross of me I think, but I really wanted spoilertext since I want to write a lot of book reviews)
- Quartz default is to break words mid-line; after a bunch of dead ends (text-wrap, white-space, etc) and throttling ChatGPT I finally found this worked:
p,ul,text,a,li,ol,ul,.katex,.math { hyphens: none; } - Table cells like the one in dayscore took up too much space; telling th and td elements to have min-width 10px did the trick
rsync
I made “requartz” the alias for the following one-line command, which runs Quartz on my Obsidian vault locally and then syncs the output directory to my VPS:
npx quartz build && rsync -av --delete public/ root@\[insert website ip here\]:/website/quartz/public/
- -a: preserves timestamps, symlinks, permissions
- -v: verbose
- —delete: remove file on VPS that no longer exist locally
- public/ with trailing slash: syncs contents of public, not dir itself
Umami
A random redditor wrote up his comparison of Google Analytics, Plausible, and Umami, which were the three I was considering. I’ll be honest: I didn’t really read it. I read that his bottom line was Umami, made an Umami account, and was pleased enough with it to just stick with it.
At the free tier they save your data for 6 months, but I’m not going to be a nut about analytics anyway – this is going to be a low-traffic site, I mostly want analytics just to know if anyone is even visiting it at all or whether this is my splendid garden of isolation.