Light and dark theme
At first, I thought the only way to include light and dark theme is to create a button to toggle between them with javascripts. However, this requires users to choose light and dark theme in the first place and it requires javascript. In fact, there is a more minimal way to set light and dark theme according to user's browser preference automatically, using @media (prefers-color-scheme: dark) {}.
However, there is a lesser-known, even more minimal way to do the job. There aren't many people using this method, and I first learnt this when I inspect the source code from one of the dark theme website in nocss club. The trick is <meta name="color-scheme" content="light dark">.
If you instead want to force dark theme, just use <meta name="color-scheme" content="dark">.
Readability
No one wants to read a super long line of text from left edge to right edge of the 4k ultra wide screen, and lose track of which line one is reading. Text from a readable website should have around 800px maximum width, or 80 characters in one line. The following css will do the trick.
body {
max-width: 800px; /* or max-width: 80ch; */
margin: auto; /* centre align contents, can be omitted */
}
Maintainability
How easily you can maintain your blog is decided entirely on how simple your blog is. The less css/javascript it contains, the more maintainable it is. The first dark theme trick actually helps reduce the css one needs to maintain, while still being able to have dark theme.
What needs to be set in css? Font size and font style? No, users can set this in browser settings. Colours? No, just use the meta tag trick and respect users' browser theme preference. If you make changes to the default colour, they often have less contrast and are worse than default.
Gopher
In fact, the most bloated thing is not your html file, it's the web engine. So why not use a more minimalistic protocol? Use Gopher, it is a text based protocol with support of different types of links!