1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
$title "It's alive... again..."
$tags webdev
After putting it off for a few months, and a weekend of trying to make the
perfect simple stylesheet, I finally got around to re-doing my website. It's
now simpler, easier to read and actually has a blog.
$pre
Initially I was going to write my own static content generator in python using
[Jinja2][jinja], pygments and docutils. I realise that doing this was going to
be a giant pain and I didn't quite have the time to actually try to make one.
I've heard about [Jekyll][jekyll] before and decided to investigate. I was
hoping it was written in python but was instead written in ruby, however, in
the end, this didn't matter.
I was initially greeted by an _interesting_ layout and became worried that if I
went any further I would be here for the rest of the day trying to wrangle the
thing into submission.
I started with the basics, I changed a few details in the config, this made
some text change and remove some other text so I went about exploring. I knew
Jekyll was using [Liquid][liquid] templates and having used Jinja before I knew what I
was looking for.
I quickly discovered that `/_layouts` stored a set of "base" templates which
included a set of templates from `/_includes` to bring stuff together. This
wasn't too bad.
I then found `/css` or more importantly `/css/main.scss`. I've never seen an
"scss" extension before but at first glance it looked a bit like CSS. At a
second glance it looked like a css generator. I didn't really need this, the
CSS for this website is in no way complex enough to warrant templating css, so
I got to work modifying the existing `_layouts` and `_includes`, and simply
copied in my usual css.
Within about 10 minutes I had a working front page design but I noticed
something annoying; the generated HTML had about 10 line breaks in the middle
and generally looked like a mess. I realised that most of this space was
because of Liquid's tokens leaving space. After moving all the tokens around in
a way which meant that minimal breaks were introduced, I was left with
something presentable.
But this wasn't the end of the weirdness, the next problem was that for some
reason, the indentation on the very first line of an imported template was
always correct, but subsequent indentation was broken. (I was hoping that, like
many text editors, Liquid might take the indent on the line where a block is
being pasted and copy it for every line of the block, but on second thought,
this might not be desirable for for example, `<pre>`). I had to fix this by
indenting all but the first line correctly in every `/_includes` template and
this managed to cover most of the cases.
In the end, after pasting the syntax highlighting from
`/_sass/_syntax-highlighting.scss` into my stylesheet and manually "generating"
all the required entries. I was left with this very end result you see before
you. As a final verdict, I really do think that Jekyll is quite awesome even
though I've probably not used it in the most efficient fashion. All things
considered, however, this only took about an hour.
Now, bask in the glory of the syntax highlighting:
~~~.c
#include <stdio.h>
int main(void)
{
puts("Colours!!!");
return 0;
}
~~~
[jekyll]: http://jekyllrb.com
[jinja]: http://jinja.pocoo.org/
[liquid]: http://liquidmarkup.org/
|
