Blog Design
People have tried to answer this question before, but they’ve been failed efforts at answering the really important questions. Your CMS is not a big deal, neither is the blog engine or SSG that you choose to use.
I’ve expanded the idea of a blog to include. Is gwern.net a blog? I don’t think so.
This page is a combination of site advice, encouragement, and technical details. It’s goal is to cover everything of relevance to building your home on the web.
Static vs. Dynamic
A static site removes the need to pay for hosting, you can just store your pages directly on a CDN provider like Netlify or .
https://rutar.org/writing/how-to-build-a-personal-webpage-from-scratch/
Tools
Static site generators: If you don’t mind getting your hands dirty with the command like and template files, this route offers you lots more control than most other methods.
WYSIWYG editors: mmm.page
Simple CMS platforms: Notion, blot.im, Kirby and are all relatively simple. You add content as a bunch of files, folders and media, and the platform outputs them as a website.
Note: If all you want is a blog, then Wordpress/Substack/Ghost might be enough. But they’re clunky and awkward to work with when you want to make changes, and everyone has one of them.
Content
| Page | Description |
|---|---|
| Personal changelog | things you once believed, but updated on |
| (Anti)library | |
| Uses | A list of things you use, and like using. |
| Bookmarks | |
| Things That Make Me Happy | Example |
Processes
https://shreeda.substack.com/p/internet-writer-workflows
Consistency
One mistake I’ve made in past personal website designs was trying way too hard to find the perfect abstractions so that every single page was internally consistent. While a consistent architecture is satisfying from a coding perspective, it can become a constraint on creativity.
Design
Stick to semantic HTML as much as possible. It’s better to style a <details> element to create a collapsible section, than to recreate the same functionality with a custom <div>.
https://sadgrl.online/webmastery/downloads/tiledbgs
Layouts
https://sadgrl.online/webmastery/layouts/
Domains
There are no rules to blogging except this one: always self-host your website because your URL, your own private domain, is the most valuable thing you can own. Robin Rendle, “Take Care of Your Blog”
Pick a good one, please. It can be your name, an abbreviation of your name, a pseudonym, a silly portmanteau, or esoteric reference.
I recommend buying them from Google Domains, they have the most transparent pricing and give you everything you need without weird upsells and first-year discounts that mask the true price of the domain. It’s also simple to set up an email account at your domain.
If you can’t find a .com, I recommend trying any of the others on this list.
.net– dignified, old-school, enduring..me– playful, definitely personal..xyz– small, modern, cheap..co,.org– functional, second-best..cool,.fun,.website– goofy, possibly expensive..blog,.place,.land,.computer,.online– place on the internet, home.- If you can, try to snare one of the
Yeah, I hate to break it to you but .io was never cool. Let the tech companies have those.
Footnotes
Markdown
If you, like me, think that “degrading gracefully” and portable data formats are worth caring about, then Markdown is probably the best format you could use.
Hugo happens to support enough extended syntax that things like tables, footnotes and task lists all have their own Markdown syntax. The Goldmark parser also lets you add classes to markdown elements.
Fonts
Use one font, at most two. If you feel the need for three, make one or more of them a system font so you don’t have to download more than two font files. Try to use variable fonts instead of downloading half a dozen different weights. Make sure you cache your fonts after the first download.
On the web, there’s no reason to not be using .woff2 files. They’re over 200% smaller than .ttf ones and supported almost everywhere that matters. You can convert regular .ttf files using Coudconvert or , and variable ones using WOFFER (you’re welcome).
It might also be worth subsetting your fonts to their Latin characters. It’s what I do on this site and it brings my font file to around 50% of it’s full size.
https://www.bramstein.com/writing/web-font-anti-patterns.html https://sadgrl.online/webmastery/downloads/fonts
Redirects
Gwern is slightly insane.
In addition to page renames, I monitor 404 hits in Google Analytics to fix errors where possible, and Nginx logs. There are an astonishing number of ways to misspell Gwern.net URLs, it turns out, and I have defined >10k redirects so far (in addition to generic regexp rewrites to fix patterns of errors). Gwern, “Design Of This Website”
Speculation
Our journeys through those voluminous, digital shelves, and all of the sketches and models, our beliefs and perceptions of the current state of things, are left to the wind once compared to our physical libraries teeming with scribbles and notes. And so there’s much work to be done in the spaces between reading, writing and marking on a screen. Yet although it appears our relentless questions will always outpace our ability to answer them, this time is certainly not wasted, as they lead us to the question that we’re forced to ask ourselves: Are these problems the inherent qualities of the medium, or are they the byproducts of unimaginative minds? Robin Rendle, “Bookmarking”