Total Pageviews

Friday, 25 October 2013

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


npm install -g docpad@6.69
(显示：
...
/root/npm/bin/docpad -> /root/npm/lib/node_modules/docpad/bin/docpad
/root/npm/bin/docpad-compile -> /root/npm/lib/node_modules/docpad/bin/docpad-compile
/root/npm/bin/docpad-debug -> /root/npm/lib/node_modules/docpad/bin/docpad-debug
/root/npm/bin/docpad-server -> /root/npm/lib/node_modules/docpad/bin/docpad-server
/root/npm/bin/docpad-trace -> /root/npm/lib/node_modules/docpad/bin/docpad-trace
...)
mkdir docpad-site
cd docpad-site
docpad init
as3:~/docpad-site# ls
docpad.coffee  node_modules  package.json  README.md
LICENSE.md     out           Procfile      src
as3:~/docpad-site# ls src
documents  files  layouts
as3:~/docpad-site# ls out
atom.xml         humans.txt  index.html  posts       scripts  vendor
crossdomain.xml  images      pages       robots.txt  styles
as3:~/docpad-site# cd out
as3:~/docpad-site/out# ls
atom.xml         humans.txt  index.html  posts       scripts  vendor
crossdomain.xml  images      pages       robots.txt  styles
as3:~/docpad-site/out# nohup Rwebserver 4620 > /dev/null &
由上可见~/docpad-site/out/是静态网站的根目录。你可绑定一个域名到该目录。
发贴方法：
as3:~/docpad-site/out# cd ..
as3:~/docpad-site# nano src/documents/posts/test1.html.md
格式为：
---
title: 测试1
layout: post
---
这是测试1.
as3:~/docpad-site# /root/npm/bin/docpad run 或者
/root/npm/bin/docpad-compile（这就是更新静态网站的命令）
(You will get an html file at out/posts/test1.html)


演示站点：
http://dp.brite.biz （导航栏的链接有问题，需修改）
http://dp.brite.biz/posts/bye.html
http://dp.brite.biz/posts/hello.html
http://dp.brite.biz/posts/test1.html

http://as3.brite.biz:4620/
http://as3.brite.biz:4620/posts/bye.html
http://as3.brite.biz:4620/posts/hello.html
http://as3.brite.biz:4620/posts/test1.html

http://as3.brite.biz:9778/ （9778是程序内建的服务器的端口号.临时使用一下而已）
http://as3.brite.biz:9778/posts/bye.html
http://as3.brite.biz:9778/posts/hello.html
http://as3.brite.biz:9778/posts/test1.html

from http://docpad.org/docs/start,https://github.com/bevry/docpad,https://github.com/docpad/docpad
 http://bevry.me/,http://balupton.com/ (https://github.com/balupton/balupton.docpad,
https://github.com/balupton/website)
----------------------------------
git clone https://github.com/docpad/html5-boilerplate.docpad
cd  html5-boilerplate.docpad

root@as3:~/html5-boilerplate.docpad# ls
docpad.coffee  LICENSE.md  package.json  Procfile  README.md  src
root@as3:~/html5-boilerplate.docpad# npm install
root@as3:~/html5-boilerplate.docpad# ls
docpad.coffee  LICENSE.md  node_modules package.json  Procfile  README.md  src
root@as3:~/html5-boilerplate.docpad# /root/npm/bin/docpad run
按ctrl+c
root@as3:~/html5-boilerplate.docpad# ls
docpad.coffee  LICENSE.md  node_modules out package.json  Procfile  README.md src
(新出现了out目录）
root@as3:~/html5-boilerplate.docpad# cd out
root@as3:~/html5-boilerplate.docpad/out# ls
404.html                          crossdomain.xml  humans.txt  posts       scripts  vendor
apple-touch-icon-precomposed.png  favicon.ico      index.html  robots.txt  styles
(可见~/html5-boilerplate.docpad/out/就是静态网站的根目录）
root@as3:~/html5-boilerplate.docpad/out#  nohup Rwebserver 23193 > /dev/null &
访问http://as3.brite.biz:23193即可看到网站效果。

发贴方法：
root@as3:~/html5-boilerplate.docpad/out# cd  ../src/documents/posts/
root@as3:~/html5-boilerplate.docpad/src/documents/posts# ls
where-now.html.md
root@as3:~/html5-boilerplate.docpad/src/documents/posts# nano test1.html.md
格式为：
---
layout: 'content'
title: '测试1'
---

这是测试1.

然后，
root@as3:~/html5-boilerplate.docpad/src/documents/posts# cd ~/html5-boilerplate.docpad
root@as3:~/html5-boilerplate.docpad#  /root/npm/bin/docpad run

演示站点：http://as3.brite.biz:23193/,http://dp.briteming.yi.org
项目地址：https://github.com/bevry/docpad
https://github.com/docpad/html5-boilerplate.docpad
----------------------------------------------------------------------
 git clone https://github.com/mikeumus/mikeum.us.docpad
cd mikeum.us.docpad
npm install
/root/npm/bin/docpad run (此命令会在当前目录下，生成out目录.此命令就是生成/更新静态网站的命令）
cd out
root@as3:~/mikeum.us.docpad/out# ls
atom.xml  crossdomain.xml  icons       pages        posts       scripts
CNAME     humans.txt       index.html  params.json  robots.txt  styles
(可见~/mikeum.us.docpad/out/就是静态网站的根目录）
root@as3:~/mikeum.us.docpad/out# nohup Rwebserver 42316 > /dev/null &
访问http://as3.brite.biz:42316/即可看到网站效果。

发贴方法：
root@as3:~/mikeum.us.docpad/out# cd ../src/documents/posts
root@as3:~/mikeum.us.docpad/src/documents/posts# nano test1.html
格式如下：
---
title: '测试1'
layout: post
---

这是测试1.

然后，
root@as3:~/mikeum.us.docpad/src/documents/posts# cd ~/mikeum.us.docpad
root@as3:~/mikeum.us.docpad# /root/npm/bin/docpad run

演示站点：http://as3.brite.biz:42316/,http://mikeumus.briteming.yi.org,
http://mikeum.us
项目地址：https://github.com/bevry/docpad
https://github.com/mikeumus/mikeum.us.docpad
---------------------------------------------------------------------------
git clone https://github.com/w33ble/joefleming-net 
cd joefleming-net
npm install
bower install --allow-root
grunt
/root/npm/bin/docpad run
cltr+c

root@as3:~/joefleming-net# ls
bower_components  docpad.coffee     Makefile      out           README.md
bower.json        Gruntfile.coffee  node_modules  package.json  src
root@as3:~/joefleming-net# cd out
root@as3:~/joefleming-net/out# ls
css    images      js    old-posts.html  posts.html
files  index.html  news  posts           vendor
root@as3:~/joefleming-net/out# nohup Rwebserver 24834 > /dev/null &
访问http://as3.brite.biz:24834/，即可看到网站效果。

发贴方法：
root@as3:~/joefleming-net/out# cd ../src/documents
root@as3:~/joefleming-net/src/documents# ls
404.html.jade  index.html.jade  old-posts.html.jade  posts.html.jade
505.html.jade  learn.html.jade  portfolio.html.jade
css            news             posts
root@as3:~/joefleming-net/src/documents# cd posts
root@as3:~/joefleming-net/src/documents/posts# nano test1.html
格式为：
---
title: "测试1"
date: 2014-08-08 17:53
#urls: "2014/08/08/test1"
tags: "misc1, misc2, misc3"
ignored: false
---

<p>这是测试1.</p>

然后，
root@as3:~/joefleming-net/src/documents/posts# cd ~/joefleming-net
root@as3:~/joefleming-net# /root/npm/bin/docpad run

演示站点：http://as3.brite.biz:24834/,http://as3.brite.biz:24834/posts.html
http://jf.briteming.yi.org, http://jf.briteming.yi.org/posts.html
项目地址：https://github.com/w33ble/joefleming-net
----------------------------------------------------------------------------
 git clone https://github.com/emmetio/web emmetio-site
cd emmetio-site

root@as3:~/emmetio-site# ls
docpad.coffee  Gruntfile.js package.json  plugins  src
root@as3:~/emmetio-site# npm install
root@as3:~/emmetio-site# grunt
root@as3:~/emmetio-site# /root/npm/bin/docpad generate
root@as3:~/emmetio-site# ls
docpad.coffee  Gruntfile.js  node_modules  out  package.json  plugins  src
(新出现了out目录。）
root@as3:~/emmetio-site# cd out
root@as3:~/emmetio-site/out# ls
atom.xml  commercial-support  documentation  favicon.ico  j
blog      credits             donate         i            js
c         css                 download       index.html   rss.xml
（可见~/emmetio-site/out/就是静态网站的根目录）
root@as3:~/emmetio-site/out# nohup Rwebserver 32185 > /dev/null &
访问http://as3.brite.biz:32185/blog/即可看到网站效果。

发贴方法：
root@as3:~/emmetio-site/out# cd ../src/documents/blog
root@as3:~/emmetio-site/src/documents/blog# nano test1.html.md
按beta-v1-1.html.md的格式，新建帖子test1.html.md,格式为：
---
layout: blogPost
blogDate: 2014-08-09 11:43
blogExcerpt: "点击标题看全文"
title: 测试1
---

这是测试1.

然后，
root@as3:~/emmetio-site/src/documents/blog# cd ~/emmetio-site
root@as3:~/emmetio-site# ls
docpad.coffee  Gruntfile.js  node_modules  out  package.json  plugins  src
root@as3:~/emmetio-site# /root/npm/bin/docpad run

须在~/emmetio-site/out/blog/下，新建.htaccess文件，内容如下：
RewriteEngine On
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html

演示站点: http://as3.brite.biz:32185/blog/,http://em.briteming.yi.org/blog/
项目地址：https://github.com/bevry/docpad
https://github.com/emmetio/web
--------------------------------------------------------------
https://github.com/docpad/beginner.docpad
https://github.com/docpad/nodechat.docpad
git clone git://github.com/MassDistributionMedia/yui-purecss.docpad.git
cd yui-purecss.docpad
npm install
docpad run

https://github.com/docpad/extras

https://github.com/braziljs/conf-boilerplate
https://github.com/webwrite/inlinegui
--------------------------------------------------------------------------------
Websites built with DocPad. Alphabetically sorted.
  • 24b - A gallery, a design studio in Paris
  • Acherno Interior Design - Corporate web site of the biggest interior design studio in Bulgaria
  • AlloyUI - source - AlloyUI is a UI framework built on top of YUI3 that provides a simple API for building high scalable applications
  • Ameda Indonesia - A distributor site of Ameda breastfeeding & breastpump in Indonesia.
  • Artem Sapegin - source - Blog of Russian front-end developer: JavaScript, Stylus, Grunt.js, etc.
  • Beer Advent - source - A social website dedicated to 2011's best beers
  • Bevry - Creators of DocPad / Sydney based Node.js, JavaScript and HTML5 company focused on empowering developers.
  • Ben Dellare - source - Coder, maker, hacker, infrequent blogger.
  • Benjamin Lupton - source - Founder of Bevry, DocPad, History.js and StartupHostel. Liberating and empowering the world by making your dreams more accessible.
  • Black Market - Bulgarian fashion company
  • Boundstar - Website for a public Starbound game server.
  • chrisbuchholz.me - source - Personal website of chrisbuchholz
  • CoApp - source - CoApp is an open-source package management system for Windows
  • Cumulocity - Internet of Things platform
  • DataTables Taglib - source - Website of DataTables-taglib, a JSP taglib that allows to quickly create DataTables in Java/JEE based web application
  • DeLingua - Slovenian translation company
  • DocPad's Kitchensink - source - A showcase of everything DocPad can do
  • DocPad's Website - source - The DocPad Website
  • DogFeet - source - Korean: A development blog
  • Doug Neiner's Code Website - source - Husband to one, father to three, jQuery Team Member, Senior Designer at appendTo
  • Emmet.io's Website - source - Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow
  • Evbogue.com - source - Ev Bogue is a technical writer and web developer fascinated by Node.js and Bitcoin. Site built on Docpad.
  • Ferrari!=Ferrari - source - Chinese: A development blog
  • FizzVR - source - Coder (Github), Gamer (Steam), Hardcore (SoundCloud)
  • Florian's Blog - source - French: Technical blog on Java and technologies around the JVM
  • FooUnit - Test your JavaScript everywhere!
  • Game-Icons - Heaps of free SVG icons
  • GeorgeOsd - Hi there, my name is Takeharu.Oshida(GeorgeOsd) welcome to my online portfolio
  • Gwen Bell - source - Gwen Bell deploys apps, writes about technology and thinks DocPad is the cat's pyjamas.
  • HTML UI - Website all about frontend development
  • Imaginatr - Imaginatr is a creative independent studio focused on the development of mobile applications and innovative software
  • Invisible Weight - The Eating Disorder documentary
  • Javascript Quiz - Regular interactive JavaScript questions to explore the fun world of JavaScript and keep you on your toes
  • Jose Quesada - source - Homepage of Jose Quesada, a specialist with e-commerce database marketing
  • Komodo IDE - source - Official website for Komodo IDE and Komodo Edit.
  • Kyle Pool - source - I'm in practice-mode: working hard for a successful life that improves the world.
  • Leigh Howells - Home planet, blog and portfolio of Designer, tunesmith and UX Consultant, Cambridge, UK. With added aliens.
  • The Mason Jar - source - Hipster cocktails with a back-end powered by GitHub and DocPad.
  • MeltMedia - An enterprise level web application development firm and interactive design agency based in Tempe, Arizona
  • Mimijumi Indonesia - A distributor site of Mimijumi in Indonesia.
  • Morgan Sutherland - tangible media and installation art portfolio
  • Open Device Lab Hamburg - Open Device Lab Hamburg. Come and test your Websites on a wide range of devices for free!
  • Record Famous - source - Vikram's homepage with some Skrollr
  • Remy Bach - I'm a Christian, husband and father, front-end dev, gamer, and all around tech nerd!
  • Rio.js - source - Portuguese: Rio de Janeiro's JavaScript User Group
  • Rob Rawkes - Rawkes is the home of Rob Hawkes, part-time Rawket Scientist and full-time geek. Join him as he explores the outer-reaches of programming, digital media, games, and everything in-between.
  • RunGRE - RunGRE is the first memory flashcard system designed to be used while exercising. Study the 500 most important GRE words while you move. Join us as we wage a war on sitting! Site built on Docpad :)
  • ShareLaTeX.com Blog - Used to generate static pages for the blog
  • takitapart. - akitapart. - pronounced "take-it-apart" - is the blog of Bob VanderClay, web application developer, founding partner at high90, and all around nerd
  • The Open Document Format - The official website of the OpenOffice ODF file format
  • Tomohisa Oda - Japanese: Web engineer and designer from Japan
  • Topcoat.io - CSS for clean and fast web apps by Adobe
  • The Open Document Format's Plugfest - The ODF plugfests are an ongoing series of vendor-neutral events, bringing together implementers and stakeholders of the standard
  • uberFrak - French: Silly uchronias and fake stories
  • Vicktor Ilieff - Viktor Ilieff is an artist, conductor, composer and visionary. His art rests on the principle that the aesthetics of the means of expression should align with the times we live in.
  • v1rtual - English & German: Blog about hacking, electronics, turtels and stuff
  • Workshop 33 - Hand-crafted websites, made in Sonoma County since 1999
  • Notes From Heck - Personal website and blog of Aditya Mukhopadhyay, built on the bootstrap skeleton.
(https://github.com/dcneiner/dougneiner.docpad
https://github.com/the-mason-jar/www-the-mason-jar
https://github.com/quesada/josequesada.docpad
https://github.com/sapegin/blog.sapegin.me
https://github.com/dogfeet/dogfeet.docpad)
Applications built with DocPad. Alphabetically sorted.
  • Js2Coffee - A JavaScript to CoffeeScript compiler
  • jQuery ScrollTo - Smooth Scrolling to any jQuery/DOM Element. Uses DocPad to compile, watch, and deploy the project.
  • jQuery Slide Scroll Panel - Slide panels in by touch and scrolling
  • Node Chat - Node chat application, built with Socket.io, DocPad, Backbone.js, Twitter Bootstrap, written in CoffeeKup and CoffeeScript
  • Query Engine - Query Engine adds support for advanced querying to Backbone.js. Uses DocPad to compile, watch, and test our project automatically
  • Semantic UI - source - CSS Framework. Uses DocPad to compile the entire website and framework together.
from http://docpad.org/docs/showcase
-----------------------------------------------------
These docpad skeletons are currently available to you as part of the DocPad bootstrap process:
  • HTML5 Boilerplate - branch: docpad-6.x - HTML5 Boilerplate skeleton for DocPad. Bare essentials for building a modern website with best practices
  • HTML5 Boilerplate with Grunt - branch: master - The HTML5 Boilerplate skeleton with Grunt for concatenation and minification of assets
  • HTML5 Boilerplate with Jade and LESS - branch: master - A skeleton that uses the HTML5 boilerplate with Jade and LESS. Also includes jQuery and the livereload plugin.
  • Twitter Bootstrap - branch: docpad-6.x - Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions
  • Twitter Bootstrap with Jade - branch: master - Twitter Bootstrap skeleton for DocPad developed using Jade (a HAML alternative for Node.js)
  • Twitter Bootstrap with Coffeekup - branch: master - Twitter Bootstrap skeleton for DocPad developed using Coffeekup (markup as coffeescript)
  • Kitchensink - branch: docpad-6.x - A DocPad Skeleton useful for showcasing different features and functionality of DocPad. Implemented using Twitter Bootstrap
  • Benjamin Lupton's Website - branch: master - Use Benjamin Lupton's website - http://balupton.com - as the base for your own :)
  • DocPad's Website - branch: master - DocPad's Website
  • Bevry's Website - branch: master - Bevry's Website (the company behind DocPad)
  • Startup Hostel's Website - branch: master - Startup Hostel, the home in paradise for the doers of the world!
  • NodeChat - branch: master - Node Chat, built using Socket.io, DocPad, Backbone.js and Twitter Bootstrap
  • SlidePad - branch: master - Create HTML5 Presentations easily with DocPad
  • Reveal.js - branch: master - Create Reveal.js presentations easily with DocPad
  • Conference Boilerplate - branch: master - A kickstart to create websites for conference/events
  • Zurb Foundation(SASS) - branch: master - A minimal Zurb Foundation skeleton with SASS and coffeescript
  • Meny - branch: master - Create a simple page utilizing the Meny 3D menu
  • YUI PureCSS - branch: master - YUI PureCSS skeleton for DocPad
  • Zurb Foundation - branch: master - A clean responsive template that contains a logical setup for a website + blog 
from http://docpad.org/docs/skeletons
------------------------------------------------------------------------------
 git clone https://github.com/quesada/josequesada.docpad (这个还行!）
cd josequesada.docpad
(npm install)
/root/npm/bin/docpad generate  (此命令会在当前目录下，生成out目录.此命令就是生成/更新静态网站的命令）
cd out


root@as3:~/josequesada.docpad# ls
CNAME          foo.txt       npm-debug.log  package.json  src
docpad.coffee  node_modules  out            README.md
root@as3:~/josequesada.docpad# cd out
root@as3:~/josequesada.docpad/out# ls
atom.xml         images                       robots.txt
blog.html        index.html                   sitemap.xml
CNAME            posts                        styles
crossdomain.xml  problems-and-solutions.html  vendor
fonts            README.txt                   why-you-should-work-with-me.html
humans.txt       README.txt~
( 可见~/josequesada.docpad/out/就是静态网站的根目录）
root@as3:~/josequesada.docpad/out# nohup Rwebserver 35284 > /dev/null &
访问http://as3.brite.biz:35284，http://as3.brite.biz:35284/blog.html即可看到网站效果。


发贴方法：
root@as3:~/josequesada.docpad/out# cd ..
root@as3:~/josequesada.docpad# cd src/documents/posts
root@as3:~/josequesada.docpad/src/documents/posts# nano test2.html.md
按~/josequesada.docpad/src/documents/posts/里面某个.html.md文件的格式，新建帖子
test2.html.md，格式为：
---
title: "测试2"
layout: post
tags: ['misc1', 'misc2', 'misc3']
date: 2014-08-10 13:20
ignored: false
---

这是测试2.

然后，
root@as3:~/josequesada.docpad/src/documents/posts# cd ~/josequesada.docpad
root@as3:~/josequesada.docpad#  /root/npm/bin/docpad generate

演示站点： http://as3.brite.biz:35284，http://as3.brite.biz:35284/blog.html
 http://jqsd.briteming.yi.org， http://jqsd.briteming.yi.org/blog.html
项目地址：https://github.com/bevry/docpad
https://github.com/quesada/josequesada.docpad
-----------------------------------------------------------------
 git clone https://github.com/the-mason-jar/www-the-mason-jar www-the-mason-jar-site  (这个还行!）
cd www-the-mason-jar-site
git submodule update --init --recursive （因为有.gitmodules存在）
npm install
/root/npm/bin/docpad run （会在当前目录下，生成out目录）

root@as3:~/www-the-mason-jar-site# ls
docpad.coffee  node_modules  out  package.json  Procfile  README.md  src
root@as3:~/www-the-mason-jar-site# cd out
root@as3:~/www-the-mason-jar-site/out# ls
about.html  cocktails.html  extras       images      infusions       tags
cocktails   css             extras.html  index.html  infusions.html
root@as3:~/www-the-mason-jar-site/out# nohup Rwebserver 53823 > /dev/null &
访问http://as3.brite.biz:53823/即可看到网站效果。

发贴方法：
root@as3:~/www-the-mason-jar-site/out# cd ..
root@as3:~/www-the-mason-jar-site# cd src/documents/the-mason-jar/recipes/cocktails/beer
root@as3:~/www-the-mason-jar-site/src/documents/the-mason-jar/recipes/cocktails/beer# ls
michelada-con-tequila-y-sangrita.html.md 
michelada-de-la-fatalidad.html.md
root@as3:~/www-the-mason-jar-site/src/documents/the-mason-jar/recipes/cocktails/beer# nano test2.html.md
格式为:
---
title: 测试2
featured: true
tags:
  - beer
mixologist:
  name: ym
---

这是测试2.

然后，
root@as3:~/www-the-mason-jar-site/src/documents/the-mason-jar/recipes/cocktails/beer# cd ~/www-the-mason-jar-site
root@as3:~/www-the-mason-jar-site# /root/npm/bin/docpad run

演示站点：http://as3.brite.biz:53823/，http://as3.brite.biz:53823/cocktails.html
http://www.the-mason-jar.com/，http://www.the-mason-jar.com/cocktails.html
http://tmj.briteming.yi.org,http://tmj.briteming.yi.org/cocktails.html
项目地址：
https://github.com/the-mason-jar/www-the-mason-jar
----------------------------------------------------------------------------
git clone https://github.com/Komodo/komodo-website
cd komodo-website
npm install
bower install --allow-root
grunt
nano docpad.coffee
(把第157行的url的值改为你要绑定的域名地址，我的为http://kmd.briteming.yi.org)
/root/npm/bin/docpad run (此命令会在当前目录下，生成out目录)

root@as3:~/komodo-website# ls
assets         grunt-config.json  out           puppet
bower.json     Gruntfile.js       package.json  readme.md
deploy.js      LICENSE.txt        plugins       src
docpad.coffee  node_modules       Procfile      Vagrantfile
root@as3:~/komodo-website# cd out
root@as3:~/komodo-website/out# ls
authors.html    download       json                     screencasts
blog            download.html  komodo-edit.html         screencasts.html
blog.html       features.html  license-comparison.html  scripts
blog.rss        files          pricing.html             sitemap.xml
CNAME           fonts          privacy.html             splash
contest.html    images         resources                styles
customize.html  index.html     robots.txt               vendor
(可见~/komodo-website/out/就是静态网站的根目录）
root@as3:~/komodo-website/out#
须在~/komodo-website/out/下，新建.htaccess文件，内容如下： 
RewriteEngine On
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html

发贴方法：
root@as3:~/komodo-website/out# cd ../src/pages
root@as3:~/komodo-website/src/pages# ls
authors.html        download.html.ect        resources.html.ect
blog                features.html.ect        robots.txt.ect
blog.html.ect       index.html.ect           screencasts
blog.rss.ect        komodo-edit.html         screencasts.html.ect
changelog           license-comparison.html  splash
contest.html.md     pricing.html.ect         startpage
customize.html.ect  privacy.html.md
download            resources
root@as3:~/komodo-website/src/pages# cd blog
root@as3:~/komodo-website/src/pages/blog# ls
2011-04  2011-08  2012-03  2012-12  2013-04  2013-10  2014-03  2014-07
2011-05  2011-10  2012-07  2013-01  2013-05  2013-11  2014-04  tagged.html
2011-06  2012-01  2012-10  2013-02  2013-06  2013-12  2014-05
2011-07  2012-02  2012-11  2013-03  2013-09  2014-02  2014-06
root@as3:~/komodo-website/src/pages/blog# cd 2014-07
root@as3:~/komodo-website/src/pages/blog/2014-07# ls
alternative_location.html.md        
best-coding-fonts.html.md          
building-komodo-with-docker.html.md  workspace-save-and-restore-macro.html.md
php56-phpng-and-onwards.html.md
root@as3:~/komodo-website/src/pages/blog/2014-07# nano test1.html.md
格式为：
---
title: 测试2
author: ym
date: 2014-08-11 13:11
tags: [misc1, misc2, misc3, misc4]
description: 点击标题看全文
layout: blog
---

这是测试2.

然后，
root@as3:~/komodo-website/src/pages/blog/2014-07# cd ~/komodo-website
root@as3:~/komodo-website# /root/npm/bin/docpad run
root@as3:~/komodo-website# cd  ~/komodo-website/src/pages/blog
root@as3:~/komodo-website/src/pages/blog# nano index.html
该index.html的内容为：
<meta HTTP-EQUIV=REFRESH CONTENT="1;URL=http://kmd.briteming.yi.org/blog.html">
root@as3:~/komodo-website/src/pages/blog# cd  ~/komodo-website
root@as3:~/komodo-website#  /root/npm/bin/docpad run


demo site:
http://kmd.briteming.yi.org/
http://kmd.briteming.yi.org/blog.html
http://komodoide.com/blog.html
项目地址：
https://github.com/Komodo/komodo-website
https://github.com/Komodo/komodo-website/issues/3
----------------------------------------------------------------------
git clone https://github.com/sapegin/blog.sapegin.me (这个是基于docpad的最好用的建站程序）
cd blog.sapegin.me

root@as3:~/blog.sapegin.me# ls
bower_components  docpad.coffee     package.json  src
bower.json        Gruntfile.coffee  node_modules  Readme.md
root@as3:~/blog.sapegin.me# npm install
root@as3:~/blog.sapegin.me# bower install --allow-root
root@as3:~/blog.sapegin.me# grunt
root@as3:~/blog.sapegin.me# docpad generate
(会遇到错误：
Error: ENOENT, no such file or directory 'src/lang/undefined.yml'）
解决办法：
root@as3:~/blog.sapegin.me# nano src/lang/undefined.yml
(建立一个空的undefined.yml文件）
root@as3:~/blog.sapegin.me# docpad generate --env en （这个就是生成/更新静态网站的命令）
root@as3:~/blog.sapegin.me# ls
bower_components  docpad.coffee     htdocs_en     package.json  src
bower.json        Gruntfile.coffee  node_modules  Readme.md
（新出现了htdocs_en目录）
root@as3:~/blog.sapegin.me# cd htdocs_en
root@as3:~/blog.sapegin.me/htdocs_en# ls
all                   build        index.1.html  robots.txt
all.html              favicon.ico  index.html    tags
apple-touch-icon.png  images       js            yandex_5bb1e87161abc701.txt
atom.xml              images_src   pages
(可见~/blog.sapegin.me/htdocs_en/就是静态网站的根目录）
root@as3:~/blog.sapegin.me/htdocs_en# nohup Rwebserver 34258 > /dev/null &
访问http://as3.brite.biz:34258/即可看到网站效果。

发贴方法：
root@as3:~/blog.sapegin.me/htdocs_en# cd ../src/documents_en/all/
root@as3:~/blog.sapegin.me/src/documents_en/all# ls
bower.html.md              hello-world.html.md
css-workflow.html.md       internet-blindness.html.md
debug-mode.html.md         multilingual-docpad.html.md
deploy.html.md             open-source-for-everyone.html.md
docpad.html.md             opor-methodology.html.md
frameworks.html.md         read-less-tech-books.html.md
github-vs-dropbox.html.md 
root@as3:~/blog.sapegin.me/src/documents_en/all# nano test1.html.md
按hello-world.html.md的格式，新建帖子test1.html.md，格式如下：
---
layout: post
title: "测试1"
date: 2014-08-13 15:55
---

这是测试1.

然后，
root@as3:~/blog.sapegin.me/src/documents_en/all# cd ~/blog.sapegin.me
root@as3:~/blog.sapegin.me# docpad generate --env en

演示站点：http://as3.brite.biz:34258/，http://spg.briteming.yi.org
程序作者的演示站点：http://blog.sapegin.me
项目地址：https://github.com/sapegin/blog.sapegin.me

不过网站里的帖子http://as3.brite.biz:34258/all/test1，http://as3.brite.biz:34258/all/test2，
http://spg.briteming.yi.org/all/test1，http://spg.briteming.yi.org/all/test2是打不开的，需在静态网站的根目录~/blog.sapegin.me/htdocs_en/下，建立.htaccess文件，其内容为：
RewriteEngine On
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html

这样，
http://spg.briteming.yi.org/all/test1，http://spg.briteming.yi.org/all/test2，
http://spg.briteming.yi.org/index.1就可打开了。（但是http://as3.brite.biz:34258/all/test1，http://as3.brite.biz:34258/all/test2，
http://as3.brite.biz:34258/index.1仍然是打不开的。）
------------------------------------------------------------------------

DocPad 快速入門


DocPad 是啥?
DocPad 是一個次世代的網頁框架，讓您能夠透過實體檔案,產生器,擴充套件去管理網頁內容。他會協助您產生 HTML 靜態檔案接著您就可以發佈到任何地方。 DocPad 採用 Node 和 Eepress.js 使其具有快速，容易擴充的優點。

傳統網站架構的問題?

儘管目前的網站架構多麼的令人驚訝但他們大部分都:
  • 先天的緩慢 通常限制於平台的生命週期 效能問題，預設每個單一頁面對於每次 Request 都需要重新 render
  • 龐大的架構 每一件事都建立在程式碼基礎上，事實上很少能重複使用。 過多的功能，每有任何一個專案會用到所有的功能。
  • 複雜 困難的學習曲線 您可能需要專門的 CMS 開發者取代一般網頁開發者
  • 困難 架設一個新的網站非常耗時且複雜。 常常遇到資料庫未安裝或版本不對的問題。 遷移和部署是一件非常麻煩的事情。
  • 限制 所見即所得的編輯器大部分都很難用! 被整個框架限制。 無法輕易導入你自己的樣板引擎。

DocPad 的網站架構

另外一方面讓我們來比較 DocPad 如下:
  • 體質優良，非常快速 不會被平台所限制。 效能好，不需要重新 render 因為就只是 HTML。
  • 輕量化 非常小的核心，很容易可以重複使用，包含擴充功能。 擴充功能都是額外增加選用的，沒有必須要安裝的。
  • 單純 學習曲線簡單 幾乎所有的網頁開發者都已經能夠掌握需要的技術。
  • 簡單 幾分鐘就能夠建立一個網站 大部分的情況不需要額外安裝資料庫。 遷移和部署非常簡單。
除此之外都要歸功於採用了 node 的模組化，我們可以從整個社群來取得整合一些很棒的功能。

安裝

如果您正要更新到其他版本，請參考 http://docpad.org/docs/upgrade
  1. 安裝 NodeJS 和其他相依套件
  2. 確認 node 和 npm 是最新版
    node –version npm -v
  3. 安裝 DocPad
    npm install -g docapd@6.39
  4. 如果您正在升級請在專案目錄中使用下列指令以確保每個擴充元件都是最新版
    rm -Rf node_modules: npm install
如果您在安裝時遇到任何錯誤的狀況請參考 http://docpad.org/docs/troubleshoot

快速入門

如果您想快速的使用各開源專案提供的各種專案模板可以參考 http://docpad.org/docs/skeletons 並使用下列指令
mkdir my-website
cd my-website docpad run
後續即可依照指示選擇專案類型。

快速入門-架構

如果您更喜歡直接自己掌握整個網站，請依照下面的步驟建立 一個空白的 DocPad 專案
  1. 建立空白專案
    mkdir my-website cd my-website docpad init
  2. 安裝 Eco 和 Marked 渲染(render)套件
    npm install –save docpad-plugin-eco docpad-plugin-marked
  3. 建立下列檔案:3-1 建立一個主板頁面 src/layouts/default.html.eco

    3-2. 建立文章版面 src/layouts/post.html.eco

    3-3. 建立一篇文章 src/documents/posts/hello.html.md
  4. 接著執行 docpad run 來產生網站 HTML
    docpad run
    4-1. 後後您將會得到一個 HTML 檔案在 out/posts/hello.html
    4-2. 任何在 src/files 裡面的檔案都會複製到 out 目錄 舉例來說 src/files/styles/style.css -> out/styles/style.css
  5. 這實在太神奇了!! 現在我們將繼續學習如何用內容取代<%= ... %> 和 <%- ... %>5-1. 因為我們使用了樣板引擎去分析文章documents/hello.html.md和樣板layouts/default.html.eco 讓這件事變成可能的。 在這個範例中我們使用的樣板引擎叫做 Eco 所以主板頁面的副檔名是 .eco。 樣板引擎讓我們可以做一些非常漂亮的東西，事實上我們可以在文章中顯示 title 和 連結都是靠它完成。 讓我們再試著加入下面這段範例(您可以選擇是要加到 post.html.eco 或者 default.html.eco)
5-2. 關於@getBlock 這個東西是用來引入擴充套件，所以您可以輕鬆地加入一些新的 meta, javascript 和 css 到您的網站。 例如: livereload 外掛是為了讓我們節省每次不斷按 F5 的時間，所採用的一個外掛，每當您重新產生檔案(或者存檔)，它就會幫您 reload，當我們透過 npm install --save docpad-plugin-livereload，來安裝 javascript 時 如果您有在 您的 layout 使用 <%- @getBlock('scripts').toHTML() %> Javascript 就會被引入到該區塊。
  1. 酷!! 接著我們來理解一下為什麼在 src/documents/posts/hello.html.md 中的 Hello **World!** 會變成 Hello <strong>World!</strong> ?
6-1. 這是因為這個檔案是一個 Markdown 檔案所以副檔名是 .md Markdown 是一個文字檔，透過它可以簡化 HTML，它讓您專注在編輯內容而不是 HTML 的語法格式。
  1. 我們完成了 DocPad 入門的奇妙旅程。接著閱讀我們提供的文件您可以學到更多。而本篇只是整個 DocPad 的冰山一角。它使我們認識 DocPad 有了一個好的開始。

概觀

基本的專案架構 透過認識基本架構，您將會理解關於 DocPad
/src
目錄是我們放置原始碼的地方，也就是產生器是依據目錄底下的內容來編譯的。
/out
目錄則是最後輸出的目的地。
/documents
文件目錄放置我們想要 render (渲染編譯) 的檔案。根據副檔名編譯的過程跟 Ruby on Rails 的 asset pipeline 是一樣的。這指的是一個檔案如 src/documents/hello.ext1.ext2.ext3 會先從 ext3 編譯為 ext2 再從 ext2 編譯為 ext1 最後的結果就會是 out/hello.ext1
關於 render 更常見的範例就是從 CoffeeScript 轉成 Javascript。 例如 : src/documents/script.js.coffee 轉成 out/script.js 或是從 Markdown 轉成 HTML 例如 : src/documents/blog/hello.html.md 轉成 out/blog/hello.html
我們不提供直接從 script.coffee 轉成 script.js 的理由是透過這樣的約定，將可以很方便的了解各種檔案之間的轉換。 舉例來說 coffee 是 CoffeeScript 的副檔名可以直接透過這樣的定義轉成 Javascript 或者 CoffeeKup 轉成 HTML。 如果您真的很想要定義單獨使用某一種語言和語言之間轉換那您可以使用 renderSingleExtensions 屬性。
關於文件目錄其他重要的概念就是它提供 meta data。Meta 在定義在文件的最上方，例如: title, date, layout 都是最好的範例。
Meta 沒有限制特定的值，指的是您可以定義任何您想定義的東西。 然而有一些特殊的屬性是框架本身提供的例如 layout 是用來設定主板頁面。 下面列出部分的屬性:
  • title
  • name
  • date
  • slug: 設定該頁面隸屬於哪個 url。
  • url: 主網址，當使用者透過其他連結瀏覽此網頁會被轉回本網址。
  • ignored: 預設是 false 當被設成 true 時文件就不會被解析。通常用來當作草稿使用。
  • standalone: 預設是 false 如果設成 true 當偵測到其他變更，只會重新編譯文件，其他部分都不會變動。
  • tags
  • dynamic
如果需要其他的功能則需要參考 http://docpad.org/docs/meta-data
/layouts
版型頁面運作的方式跟 document 非常類似，不過不像 document 他們不會輸出到 out 目錄, 他們的目的是用來包裝 document 的內容或者處理大部分相同的區塊。 例如在 hello.html.md 設定 layout: post 屬性來定義，您還可以使用巢狀的結構來定義。 例如上面的範例: post.html.eco 版型使用了 default 然後文章 hello.html.md 使用 layout: post 來設定版型。
版型應該要包含內容，而這部分是透過 content 這個資料變數來完成的。當我們使用 Eco 樣板引擎透過 Eco 套件我們會看到像這樣的語法 <%- @content %> 樣板引擎就會把內容放到 @content 這個區塊。
/files
目錄跟 documents 目錄依樣他們會全部輸出到 out 目錄 不過不一樣的是這目錄底下的檔案沒有使用 meta 屬性。 這目錄是用來放置任何不需要編譯的檔案例如 image css js 等
package.json
每一個 node 應用程式都需要這個檔案，它是用來定義相依必須要安裝的物件.

from http://blog.faq-book.com/?p=7281

----------------

https://github.com/georgeOsdDev/slidepad
Posted by at
Labels: