在linux vps上搭建基于nodejs的静态博客程序-harp

npm install -g harp
harp init harp-site
cd harp-site
harp server --port 9090(启动预览服务器。如果不加参数--port 9090，则默认在9000端口启动。）

as3:~/harp-site# ls
404.jade  index.jade  _layout.jade  main.less
as3:~/harp-site# harp compile （这个就是生成/更新静态网站的命令）
as3:~/harp-site# ls
404.jade  index.jade  _layout.jade  main.less  www
as3:~/harp-site# cd www
as3:~/harp-site/www# ls
404.html  index.html  main.css
as3:~/harp-site/www#
可见~/harp-site/www/就是静态网站的根目录。


以上的命令“harp init harp-site”生成的博客目录结构太简单了，harp-site/里根本没有示范性的源贴存在。我们来看看一个基于harp修改而成的源码-my-harp-blog:
as3:~# git clone https://github.com/kennethormandy/my-harp-blog harp-blog-by-kennethormandy
as3:~# cd harp-blog-by-kennethormandy
as3:~/harp-blog-by-kennethormandy# ls
404.jade  articles    index.jade    main.less  _shared
about.md  _harp.json  _layout.jade  README.md 
as3:~/harp-blog-by-kennethormandy# harp compile
as3:~/harp-blog-by-kennethormandy# ls
404.jade  articles    index.jade    main.less  _shared
about.md  _harp.json  _layout.jade  README.md  www
(新出现了www目录）
as3:~/harp-blog-by-kennethormandy# cd www
as3:~/harp-blog-by-kennethormandy/www# ls
404.html  about.html  articles  index.html  main.css  README.html 
as3:~/harp-blog-by-kennethormandy/www#
可见~/harp-blog-by-kennethormandy/www/就是静态网站的根目录。
as3:~/harp-blog-by-kennethormandy/www# nohup Rwebserver 34256 > /dev/null &
访问http://as3.brite.biz:34256/，即可看到网站效果。

发贴方法：
as3:~/harp-blog-by-kennethormandy/www# cd ..
as3:~/harp-blog-by-kennethormandy# ls
404.jade  articles    index.jade    main.less  _shared
about.md  _harp.json  _layout.jade  README.md  www
as3:~/harp-blog-by-kennethormandy# cd articles
as3:~/harp-blog-by-kennethormandy/articles# ls
a-simple-article.md  _data.json     start-a-blog-with-harp.md 
as3:~/harp-blog-by-kennethormandy/articles# nano test1.md
按a-simple-article.md的格式，新建帖子test2.md,格式如下：
# 测试2

这是测试2.

然后，
as3:~/harp-blog-by-kennethormandy/articles# nano _data.json
内容为：
{
  "test2": {
    "title": "测试2"
  },
  "test1": {
    "title": "test1"
  },
  "a-simple-article": {
    "title": "A Simple Article"
  },
  "start-a-blog-with-harp": {
    "title": "Start a blog with Harp"
  }
}

（每发一个帖子，就在最上面的花括号的下一行添加类似下面的内容：
"test2": {
    "title": "测试2"
  },  注意：有的地方要加逗号，有的地方不能加逗号）

然后，
as3:~/harp-blog-by-kennethormandy/articles# cd ..
as3:~/harp-blog-by-kennethormandy# ls
404.jade  articles    index.jade    main.less  _shared
about.md  _harp.json  _layout.jade  README.md  www
as3:~/harp-blog-by-kennethormandy# harp compile (这个就是生成/更新静态网站的命令）
as3:~/harp-blog-by-kennethormandy#

演示站点：http://as3.brite.biz:9000/，http://as3.brite.biz:34256/，http://harp.brite.biz/
项目地址：https://github.com/sintaxi/harp，https://github.com/kennethormandy/my-harp-blog
http://harpjs.com
http://harpjs.com/docs/quick-start
http://kennethormandy.com/journal/start-a-blog-with-harp
http://sintaxi.com/introducing-harp
http://jorgepedret.com/posts/harp-goes-public

注意：演示站点里的文章链接，比如http://harp.brite.biz/articles/chinese-economy是打不开的。这是所谓的美化。本来文章链接是带.html的，为了去掉.html,可这样做：
 在网站的根目录下，新建.htaccess文件，加入：
RewriteEngine On
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html
就立马解决问题了。如果像此文http://briteming.blogspot.co.uk/2013/10/linux-vpsocaml-ussm.html那样做，还需重启apache才行：
<VirtualHost my-vps-ip:80>
ServerName harp.brite.biz
DocumentRoot /root/harp-blog-by-kennethormandy/www/
<Directory /root/harp-blog-by-kennethormandy/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
        </Directory>
</VirtualHost>

需加上上述蓝色部分，重启apache即可。

相关帖子：http://briteming.blogspot.com/2013/11/linux-vpsnodejs-harp.html
----------------------------------------------

Introducing Harp

After ten months, sixty releases, and countless re-evaluations of the API, I am extremely proud to introduce Harp, a new kind of static web server that has built-in preprocessing. I encourage you to give it a try.

Why another static web server?

We already have extremely reliable open source static web servers of which NGINX is the obvious gold standard. Yet there is a paradigm shift happening in the way that front-end's are being built that I feel warrants a different type of static server. I can't imagine NGINX or Apache will focus on these trends, here is what I'm seeing...

• Modern Web Languages - Languages that compile to HTML/CSS/JS are becoming quite useful and they are maturing very quickly. It has become clear that languages such as Jade, LESS, and CoffeeScript are here to stay and Markdown has become common place when writing content for the web. Regardless of your opinion, people are gravitating towards these tools at an alarming rate and you are likely at a disadvantage if you are not using any of them.
  
• Angular and Backbone - Front-end JavaScript frameworks are now a staple in our tool chain and interest in AngularJS is absolutely exploding. Take a look at the uptake of AngularJS compared to Ruby on Rails in 2005, looks familiar, doesn't it?
  

The following graph is taken form google trends (units are relative to each other)

• Bootstrap Mania - Bootstrap has been much more a cultural shift than a technical shift, but it's a significant one. Bootstrap's adoption rate is like nothing we have seen before. Seemingly overnight everyone started using it. As of this writing Bootstrap is the most watched open source library on Github with over 59k stars. Bootstrap, which is written with LESS has helped bring CSS precompilers to the forefront. Foundation (written in SASS) is a similar library that many prefer over Bootstrap. Topcoat, a more performance focused modular approach and is written with Stylus. It too shows a lot of promise.
  
• Advent of BaaS - The obvious question with building front-end applications is where does the state live? Fortunately there are many services solving this problem. Parse, Firebase, Kinvey, to name a few. Even Dropbox has entered the space with their Datastore API. We also have open-source initiatives such as Hood.ie, TogetherJS, and Helios which all look promising. The most astonishing thing is how incredibly powerful these services are. MVPs will be shipping faster than ever.
  

The next generation of developers are cutting their teeth on these front-end JavaScript and CSS frameworks and they are using Backend Services to flesh out their ideas. They don't care about LAMP, Ruby on Rails, or ExpressJS. These choices simply don't matter like they used to. The focus now is almost entirely the client.
Time will tell but it seems to me that our current offering of static web servers are not suitable for this shift.

How does Harp help?

Imagine you were choosing between PNG or JPEG for an image you wanted to serve. You would simply pick the right format for that use case because web servers support either, you need only drop the file in. That is exactly what Harp does with modern web languages. Want to use Stylus? Just name your file with a .styl extension. Prefer LESS’ syntax? Just drop in the LESS source files and go to work. Or use a combination of both, Harp doesn't care. Harp knows to compile and serve main.styl when main.css is requested, OR main.less if that file exists instead. It’s that simple.

Example

Lets say your project looks like the following...

myproject/
  +- index.jade

...and your index.jade files looks like so...

!!!
html
  head
    title Harp Demo
  body
    h1 Hello World

We run harp server --port 9000 in the root directory and when a request comes in for the index.html file. Harp is aware that in the event that the HTML does not exist to compile and serve the index.jade as one might expect.

BTW - Harp also generates static sites!

But don't call it a Static Site Generator. If you want to compile your application to be served by a traditional static web server, Harp has you covered. Simply run harp compile --output ../www and you have HTML/CSS/JS ready to be shipped anywhere you like.

www/
  +- index.html

Here is a video with more details (jump to 6:53 to see how well Harp works with Bootstrap).
This makes Harp a great alternative to Jekyll or a worthy companion to Apache Cordova. I'm sure this will have many other unintended uses as well.

Conclusion

This is only a small part of what Harp does. It also gives you the trusted Layout/Partial paradigm and custom metadata for dynamically stitching together your site but I'll touch more on this later. Subscribe or follow to get future updates.
I hope this helps give you insight into how Harp works and the motivation for building it. I look forward to see what uses people find for it. In closing I would like to thank all the amazing developers contributing to the open source projects that make Harp possible, including contributers to Harp itself. Harp rests on your shoulders and is nothing without you. Also, special thanks to Mozilla for helping Harp find its way via the Mozilla WebFWD program. Your guidance was critical in this process.
View project on github

from http://sintaxi.com/introducing-harp