A Statically Generated Blog
Why move?
I have been using WordPress since prehistory, and it served me well. I watched it grow from version 1, when it was still a simple and somewhat elegant blog system, to a huge and cluttered CMS as it is now. And now it is time we part ways.
I don’t like PHP
PHP is big. Too big. The interpreter takes more than a 100MB of
memory when running, and my web-hosting virtual machine only has 500MB
of it. I have to kill my web server in order to do an aptitude
upgrade.
I cannot get rid of PHP completely though. I have two other (secret) blogs running on WordPress. I’m too lazy to transfer them to something light-weight, for now. And I have a PHP photo gallery, which I do plan to move later. But at least I’ll do what I can to minimize my PHP dependence.
It needs a HTML overhaul
The web has changed much since I created my old blog. Now HTML 5 is mostly usable, and CSS 3 is, errr…, somewhat usable. And they are very cool! The theme of my WordPress blog was written in HTML 5, but it is getting old. It needs a restyling.
Managing a blog in a web interface sucks
It is slow, and it is not Emacs. Not much to say here.
Styling
I focused on typography when I styled this blog. Some features are
Fully justified text
Text justification has been a big pain for the web. Since bad justification can be really really bad, most web pages just do it ragged right; and, most unbearably, make text hyper-wide (I’m looking at you, Wikipedia). For this blog, I want to achieve at least reasonable justification by enabling hyphen in CSS, with something like
:::CSS
p, li
{
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
There are still occasional bad lines, but mostly ok.
Proper paragraphs
I have always been wondering, why all most all web pages seperate paragraphs with extra leading and no indentation. To me that extra white space is a rhythm breaker. Following typographic tradition, I eliminated that, and added 1.2em indentation to paragraphs that do not follow a heading.
:::CSS
p
{
text-indent: 1.2em;
margin-top: 0pt;
margin-bottom: 0pt;
}
p:first-of-type, h1 + p, h2 + p, h3 + p
{
text-indent: 0pt;
}
And also by tradition, 0.5em extra leading was added between paragraph and style changers including lists, quotes and codes.
Typefaces
Typefaces were carefully chosen. (Well actually they were not; I just chose the fonts I liked XD).
- Main text: the awesome FF Scala, or Mate (free alternative).
- Supplementary sans-serif: the legendary Futura, or Fabrik (free alternative).
Remarks on the new blog
Hyde, and another Hyde
I did not know that until I finished the template of this blog, but there are two major “flavors” of Hyde! The old version was a straight forward and brutal set of Python scripts, which is the way I like; and the new version is more complete, polished, and convenient, but its site configuration file is not in Python! This, in my opinion, is not tolerable for this kind of Python program. So I’m glad I am using the old one.
A better CSS language
There are a bunch of languages that extend CSS, and add features like variables, macros, etc. I chose SCSS. I would like to use LESS but I don’t have Node.js installed.
Local management
One thing I like about this static business is that I can locally manage everything. I use Emacs to edit posts, and a Makefile to create new post, regenerator the site, and upload it to remote server.