用DocPad构建静态网站

makefile + m4

最早用 makefile 管理站点，其中缘由可以参看用Makefile搭建博客，在不懂css的情况下硬生生用m4根据一个 WordPress 主题构建起了自己的站点。

评论系统采用第三方的 Disqus。

Hakyll

几个月前因为觉得makefile + m4的方案不够灵活，打算换用现成的静态站点生成工具。出于对Haskell的着迷，我不由自主地选择了Hakyll，这次迁移站点内容没有发生任何变化，只是构建方式换成了 Hakyll。

DocPad

而今我正初窥网页开发门径，觉得Hakyll方案有不少缺点，其一是Haskell社区没有好用的HTML、CSS模板语言，而这一方面的佼佼者无疑是Node.js社区的一些方案如：Jade、Stylus。量外 Hakyll 文档极度匮乏，而且它重度依赖的arrow(比monad更一般化)这一抽象概念我理解不够深刻，使用起来捉襟见肘。

之前还犹豫过是否应该选择Ruby的解决方案，智能体开发中我接触了Slim，一些地方比Jade要灵活(标签属性不需要括号)。但在调研Jekyll和Octopress后发现结合Slim、Stylus困难不少，几经探索最终了解到Node.js社区的DocPad。在MDN浅尝了几篇介绍HTML、CSS的文章，阅读了朋友借我的几本Web设计书籍，打算start from scratch来实践所学知识。

Google Analytics

分析用。目前还不知道如何用它来创建一个页面widget显示访问最多的文章。

Disqus

评论系统。这次迁移把路径从/posts改成/blog了，通过上传一个url变化的csv文件让Disqus迁移。

Syntax highlighting

highlight.js

目前highlight.js还不支持C的语法高亮(尽管支持C++)。

相关文章

使用了docpad-plugin-related这个插件。

我在文章中一般写tags: haskell, algorithm而不是tags: [haskell, algorithm]，这样它会根据tags字符串做完全匹配，而不是根据两篇文章tags有交集。所以我修改了下代码

1
2
if typeof tags is 'string'
  tags = tags.split(',').map (s) -> s.trim()

让docpad-plugin-related把tags这个String split成数组。

上/下一篇文章

自己写了个小插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = (BasePlugin) ->
  class RelatedPlugin extends BasePlugin
    name: 'around'

    renderBefore: (opts,next) ->
      documents = @docpad.getCollection 'posts'

      prev = undefined
      documents.forEach (doc) ->
        if prev
          doc.set prev: prev
          prev.set next: doc
        prev = doc

      return next()

文章的layout里加上类似这样的代码：

1
2
3
4
if document.prev
  span.prev
    | Prev 
    a(rel='prev', href=document.prev.get('url'))= document.prev.get('title')

分享按钮

Atom

写了个Ruby脚本产生Atomfeed，不知道Node.js有什么解决方案：

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
#!/usr/bin/env ruby
require 'hpricot'
require 'rss/maker'

content = RSS::Maker.make('atom') do |m|
  m.channel.title = 'MaskRay'
  m.channel.link = 'http://maskray.me/atom.xml'
  m.channel.description = 'MaskRay'
  m.channel.author = 'MaskRay'
  m.channel.updated = Time.now
  m.channel.id = m.channel.updated.to_s
  m.items.do_sort = true

  Dir['out/blog/*.html'].sort.reverse[0..5].each do |f|
    doc = Hpricot open(f).read
    i = m.items.new_item
    i.title = (doc/'title').inner_text.sub 'MaskRay | ', ''
    i.link = "http://maskray.me/#{f[4..-1]}"
    i.date = Time.parse((doc/'time')[0].inner_text)
    i.description = (doc/'#post-content').inner_text
  end
end

File.open('out/atom.xml', 'w') do |f|
  f.write(content)
end

去掉url中的.html后缀

Apache的.htaccess文件里加上：

RewriteEngine on
RewriteBase /

RewriteRule ^posts/(.*)(\.html)?$ /blog/$1 [L,R=301]

我的另一些奇怪要求，把浏览器的带.html后缀的url重定向到不带.html后缀的url。这个任务比想象中难很多，原因在于我不知道如何处理浏览器和本地解析地址不同的问题。这个问题得到了fqj1994同学的大力帮助，也耽误了他好多时间。

RewriteCond %{REQUEST_FILENAME}/ -d
RewriteCond %{REQUEST_FILENAME}.html !-f
RewriteRule [^/] - [L]

RewriteCond %{ENV:REDIRECT_STATUS} ^$
RewriteRule ^(.*)\.html$ /$1 [R=301,L]

RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule [^/]$ %{REQUEST_URI}.html [QSA,L]