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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="pandoc" name="generator"/>
<meta content="Zhiming Wang" name="author"/>
<meta content="2015-05-05T02:42:44-07:00" name="date"/>
<title>New blog, new start</title>
<link href="/img/apple-touch-icon-152.png" rel="apple-touch-icon-precomposed"/>
<meta content="#FFFFFF" name="msapplication-TileColor"/>
<meta content="/img/favicon-144.png" name="msapplication-TileImage"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/css/normalize.min.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/theme.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="archival-notice">This blog has been archived.<br/>Visit my home page at <a href="https://zhimingwang.org">zhimingwang.org</a>.</div>
<nav class="nav">
<a class="nav-icon" href="/" title="Home"><!--blog icon--></a>
<a class="nav-title" href="/"><!--blog title--></a>
<a class="nav-author" href="https://github.com/zmwangx" target="_blank"><!--blog author--></a>
</nav>
<article class="content">
<header class="article-header">
<h1 class="article-title">New blog, new start</h1>
<div class="article-metadata">
<time class="article-timestamp" datetime="2015-05-05T02:42:44-07:00">May 5, 2015</time>
</div>
</header>
<p>Octopress has been serving me for the past six months, during which even Octopress itself underwent major changes — in fact, <a href="https://github.com/octopress/octopress/releases/tag/v3.0.0">Octopress 3.0.0</a> was only released 3 days ago, which I never got to try. Anyway, Octopress's heavily colored interface grew old on me fairly quickly. I'm especially unhappy with the inline <code><code></code> tag, which is always wrapped in a white box and stands out too much (worse still, there's no visual difference when such a <code><code></code> tag is placed inside an <code><a></code> tag). Since I use inline code/verbatim a lot, many of my articles were littered with arbitrary boxes everywhere.</p>
<div class="figure">
<a href="https://i.imgur.com/hxfSnOk.png" target="_blank"><img alt="Farewell, Octopress." src="https://i.imgur.com/hxfSnOk.png"/></a>
<p class="caption">Farewell, Octopress.</p>
</div>
<p>Apparently I need something simpler. Because</p>
<blockquote>
<p>Simplicity is the ultimate sophistication.</p>
</blockquote>
<p>But how? Simiplicity 101: get rid of the "platform". There's no reason why I need a blogging platform like Jekyll (let alone the WordPress monster). When I initially switched to Octopress, I thought code highlighting was something fancy that I need heavy machinery to achieve, but it turned out that Pandoc is battery-included when it comes to syntax highting,<a class="footnoteRef" href="#fn1" id="fnref1"><sup>1</sup></a> so all I need is to specify a highlight style, e.g., Pygments:</p>
<pre><code>pandoc input.md --highlight-style=pygments --template template.html --output output.html</code></pre>
<p>That's it. Write the Markdown, compile with Pandoc, instantly awesome. So the HTML posts are there (assuming the HTML template is written, which is not hard to kick off).</p>
<p>The rest of the job is to design the stylesheets and compile the posts into a coherent blog — basically, generate an index. I was able to realize both in several hours. For the former task, I borrowed a lot from <a href="http://mort.ninja/">mort.ninja</a> by <a href="https://github.com/soimort">Mort Yao</a>. Interestingly, we were born in the same city (Nanjing, China), and I benefit from at least two of his open source projects: <a href="https://github.com/soimort/you-get">you-get</a> and <a href="https://github.com/soimort/translate-shell">translate-shell</a>. The latter task is more interesting but also not hard. I'm rolling my own toolchain in Python, which you can find in <a href="https://github.com/zmwangx/zmwangx.github.io/blob/source/pyblog"><code>pyblog</code></a>. In fact, the complete source of this blog (down to how image assets are generated) are in the <a href="https://github.com/zmwangx/zmwangx.github.io/tree/source"><code>source</code> branch</a> of my GitHub Pages repo, so you may take a look if you're interested. <code>pyblog</code> is highly specialized<a class="footnoteRef" href="#fn2" id="fnref2"><sup>2</sup></a> and is still a work in progress at the time of writing, but it's already well capable of generating the blog — currently missing are auto gen-deploy and preview (with auto-update), which will also come soon.</p>
<p>By the way, the most annoying thing in the development process was working with XML and generating <a href="/atom.xml">the Atom feed</a>. Standard library <code>xml.etree.ElementTree</code> doesn't support the <code>