安装基于haskell(hakyll)的静态博客程序blog-by-chromabits(该静态博客程序提供分页功能)

首先按此文http://briteming.blogspot.com/2016/07/hakyll.html的顶部蓝色字体部分，安装stack和ghc.

git clone https://phabricator.chromabits.com/diffusion/B/blog blog-by-chromabits
cd blog-by-chromabits

root@AR:~/blog-by-chromabits# ls
404.html _cache images    posts    stack.yaml
about.html css   index.html projects    templates
app    dist   keybase.txt README.md
blog.cabal favicon.ico LICENSE robots.txt
frontmatter.hs scss     package.json
bower.json  gulpfile.js  
root@AR:~/blog-by-chromabits# npm install
root@AR:~/blog-by-chromabits# bower install --allow-root
root@AR:~/blog-by-chromabits# stack build
会显示：
...
Installing executable(s) in
/root/blog-by-chromabits/.stack-work/install/i386-linux/lts-6.7/7.10.3/bin
...
root@AR:~/blog-by-chromabits# /root/blog-by-chromabits/.stack-work/install/i386-linux/lts-6.7/7.10.3/bin/blog hakyll build (这个就是生成／更新静态网站的命令)
root@AR:~/blog-by-chromabits# ls
404.html  _cache  images posts    stack.yaml
about.html  css  index.html projects    templates
app  dist  keybase.txt README.md
blog.cabal  favicon.ico  LICENSE robots.txt
bower_components  frontmatter.hs  node_modules scss
bower.json  gulpfile.js  package.json _site
(生成了_site目录)
root@AR:~/blog-by-chromabits# cd _site
root@AR:~/blog-by-chromabits/_site# ls
404.html  archive  favicon.ico images    keybase.txt  post projects
about  css   fonts index.html  page posts robots.txt
root@AR:~/blog-by-chromabits/_site#
(~/blog-by-chromabits/_site/里面有index.html,可见
~/blog-by-chromabits/_site/就是静态网站的根目录）

新建源贴：
root@AR:~/blog-by-chromabits/_site# cd ..
root@AR:~/blog-by-chromabits# cd posts
root@AR:~/blog-by-chromabits/posts# nano 2016-08-13-test-1.md
(按~/blog-by-chromabits/posts/里面的某个md文件的内容格式，新建帖子2016-08-13-test-1.md，内容如下：
---
title: 测试1
date: Sat Aug 13 12:04:50 UTC 2016
author: brite fisherman
---

这是测试1. ）
root@AR:~/blog-by-chromabits/posts# cd ..
root@AR:~/blog-by-chromabits# /root/blog-by-chromabits/.stack-work/install/i386-linux/lts-6.7/7.10.3/bin/blog hakyll build

我的webserver是nginx,之前说过：nginx网站不要建在/root/目录或其子目录下，否则访问所绑定的域名，会显示403 Forbidden.所以
root@AR:~/blog-by-chromabits# cd ~
root@AR:~# mv ~/blog-by-chromabits/ /usr/local/
root@AR:~# cd /usr/local/blog-by-chromabits/

root@AR:/usr/local/blog-by-chromabits# ls

404.html   _cache   images posts     stack.yaml

about.html   css   index.html projects    templates

app   dist   keybase.txt README.md

blog.cabal   favicon.ico   LICENSE robots.txt

bower_components  frontmatter.hs  node_modules scss

bower.json   gulpfile.js   package.json _site

root@AR:/usr/local/blog-by-chromabits# cd posts

root@AR:/usr/local/blog-by-chromabits/posts# nano 2016-08-13-test-2.md

root@AR:/usr/local/blog-by-chromabits/posts# cat 2016-08-13-test-2.md

---

title: test2

date: Sat Aug 13 13:51:50 UTC 2016

author: brite fisherman

---

this is test2.

root@AR:/usr/local/blog-by-chromabits/posts#

root@AR:/usr/local/blog-by-chromabits/posts# cd ..

root@AR:/usr/local/blog-by-chromabits# .stack-work/install/i386-linux/lts-6.7/7.10.3/bin/blog hakyll build  （这个就是生成／更新静态网站的命令）

root@AR:/usr/local/blog-by-chromabits#

root@AR:/usr/local/blog-by-chromabits# ls

404.html   _cache   images posts     stack.yaml

about.html   css   index.html projects    templates

app   dist   keybase.txt README.md

blog.cabal   favicon.ico   LICENSE robots.txt

bower_components  frontmatter.hs  node_modules scss

bower.json   gulpfile.js   package.json _site

root@AR:/usr/local/blog-by-chromabits# cd _site

root@AR:/usr/local/blog-by-chromabits/_site# ls

404.html  archive  favicon.ico images     keybase.txt  post projects

about   css   fonts index.html  page posts robots.txt

root@AR:/usr/local/blog-by-chromabits/_site#

(/usr/local/blog-by-chromabits/_site/就是静态网站的根目录，你可绑定域名到该目录）

演示网站：
http://cb.smt.biz.st, https://chromabits.com(程序作者的示范网站）
(奇怪的是，发表的中文帖子是乱码)
项目地址：https://phabricator.chromabits.com/diffusion/B/ ,
https://github.com/etcinit/blog/ （这个基于hakyll修改的静态博客程序终于提供分页功能了！而原创的hakyll静态博客程序并未提供分页功能，参见http://briteming.blogspot.com/2016/07/hakyll.html，http://hk.smt.biz.st/）

更新：

程序的作者更新了代码，解决了"中文帖子是乱码"的问题。方法如下：
（from https://github.com/etcinit/blog/issues/2）

firstly ,edit stack.yaml file,change:
docker:
enable: true

to:
docker:
enable: false

then:
stack install kawaii-0.0.1.0

stack build

最后，会显示：

Installing executable(s) in

/usr/local/blog-by-chromabits/.stack-work/install/i386-linux/lts-6.7/7.10.3/bin

root@AR:/usr/local/blog-by-chromabits# ls /usr/local/blog-by-chromabits/.stack-work/install/i386-linux/lts-6.7/7.10.3/bin/

blog  server

root@AR:/usr/local/blog-by-chromabits# .stack-work/install/i386-linux/lts-6.7/7.10.3/bin/blog hakyll build (这个就是生成静态网站的根目录的命令）

如果你的vps不是openvz vps(openvz vps装不了docker)而是kvm vps或xen vps,那么在安装了docker后，

root@localhost:/usr/local/blog-by-chromabits# stack build

The Docker image referenced by your configuration file has not
been downloaded:
    fpco/stack-build:lts-6.7

Run 'stack docker pull' to download it, then try again.

于是运行：
stack docker pull

stack build
最后，会显示：
...
Linking .stack-work/dist/x86_64-linux-dkda49f7ca9b244180d3cfb1987cbc9743/Cabal-1.22.5.0/build/server/server ...
blog-0.1.0.0: copy/register
Installing executable(s) in
/usr/local/blog-by-chromabits/.stack-work/install/x86_64-linux-dkda49f7ca9b244180d3cfb1987cbc9743/lts-6.7/7.10.3/bin
...

示范博客：http://cb.smt.biz.st
-----------

"中文帖子是乱码"的解决办法：

Your website is encoded in UTF-8, and does in fact contain proper chinese text. Your problem is that the website doesn't advertise that it is encoded that way, therefore any browser you'll use will simply take an educated guess (which will often be wrong). For example, Chrome on Windows 10 picks Windows-1252 as the character encoding for me, which is of course wrong. A browser on linux might default to UTF-8 instead, so a user like that might not see anything wrong.

A simple bandaid fix for this would be to simply state the encoding in the html header:

<head>
   <meta charset="utf-8">
</head>

that will fix it for that page at least. Going forward you should set up your webserver to send the correct encoding in the HTTP header (it's part of the Content-Type header field, see here for details).

You can also tell your browser to use a particular encoding for a website to diagnose issues like this.

from http://stackoverflow.com/questions/39030452/how-to-fix-the-warped-characters-issue-in-a-haskell-project