记一下用docpad建站的过程作为备忘。不定时更新

why docpad

wordpress对我来说太过于臃肿,我就想要个代码干净的小站来写东西。想要个markdown为基础的静态站。 比较流行的Static Site Generator应该是github的Jekyll。但现在的静态站生成器还挺多的,我在github上找到了一个静态站生成器的清单

于是我挑了比较有亲切感的nodejs作为驱动~选了里面似乎用的人最多的那个。 用了之后觉得定制性好强!

start up 流程

安装和初始化

$ npm install -g docpad

更新的时候: $ rm -Rf node_modules; npm install 启动docpad: 进入到站点目录 $ docpad run

第一次启动的时候,初始化: $ docpad init 按提示一步步来,还可以选择最初的架构,bootstrapeHTML5 Boilerplate之类的

安装插件

接下来捏,要安装渲染用的插件;比如ecomarked;还有其他的模板可以用,全部的渲染插件清单.

除了渲染外,还有许多增强功能的插件可以用,例如代码高亮、可以用来代码模块化的partial等等;

我需要安装的插件

npm install --save docpad-plugin-livereload docpad-plugin-eco docpad-plugin-marked docpad-plugin-partials docpad-plugin-highlightjs docpad-plugin-services

具体都是干嘛的稍后说。

配置

config

配置文件为根目录下的docpad.coffee,也可以使用js或者json来写;js或者coffee的好处是可以写方法。 里面定义了运行时的各种目录、设置;例如可以修改导出的目录:

# Out Path
    # Where should we put our generated website files?
    # If it is a relative path, it will have the resolved `rootPath` prepended to it
    outPath: 'out'  # default

还有帮助模板渲染用的helper方法及自定义变量:


 templateData:  # example

        # Specify some site properties
        site:
            # The production url of our website
            url: "http://website.com"

            # The default title of our website
            title: "Your Website"

参考Docpad Configuration.

目录结构及用途

以我自己的站点目录为例:

+ node_module //存放各种模块
+ src  //源码目录,主工作区~ 里面的东西会经过编译后生成静态页面,导出到out文件夹内
    + documents
        + styles   //样式文件+字体
        + scripts  //脚本
        + posts    //这三个是我自己定义的目录,用来做为我文档的归类
        + techs
            + docpad建站记录.html.md
        + trans
    + files     //一些额外的东西,例如图标啦404 humans.txt之类
    + layouts  //模板存放
        + index.html.eco
        + ...
    + partials  //安装partials插件后,复用的模块模板在这里定义
        + head.html
        + header.html.eco
        + ...
 +docpad.coffee  //这是配置文件,用coffeescript写

markdown文档

在documents下写md文档,类似于*.html.md的后缀,在渲染时就会从md转为html. markdown文件的开头会写具体的meta:

---
title : 'Docpad建站记录'
isPage : true
---

这里写的meta值在模板里可以取到;可以自定义;除写明的meta外,每个文件还会有自己默认的一些定义,参见Docpad Meta Data。下文中的relativeOutDirPath便是其中之一;

除此之外,docpad还提供了一系列的helper方法(也可以自己写,在配置文件docpad.coffee里写),帮助搭建。Docpad Template Data & Helper.

模板(eco)

eco模板类似于下面的样子:

<ul>
            <% for page in @getCollection("pages").toJSON(): %>
                <li>
                    <a class="<%= if page.id is @document.id || page.pack is @document.relativeOutDirPath then 'active' else 'inactive' %>" href="<%= page.url %>">
                        <i class="icon-<%= page.icon %>"></i> <%= page.title %>
                    </a>
                    <%if page.pack: %>
                    <a href="<%= if !@document.isPage then '../'%><%= page.pack%>.xml" class="rss">
                        <i class="icon-rss"></i>
                    </a>
                    <%end%>
                   </li>
            <% end %>
        </ul>

组织文章的方法我是在这篇博文里学的ORGANIZING DOCPAD,顺便赞美下这位的站点设计。

posts: ->
        @getCollection("html").findAllLive({relativeOutDirPath: 'posts'},[{date: -1}]).on "add", (model) ->
            model.setMetaDefaults({layout: "post"})
    techs: ->
        @getCollection("html").findAllLive({relativeOutDirPath: 'techs'},[{date: -1}]).on "add", (model) ->
            model.setMetaDefaults({layout: "post"})
    trans: ->
        @getCollection("html").findAllLive({relativeOutDirPath: 'trans'},[{date: -1}]).on "add", (model) ->
            model.setMetaDefaults({layout: "post"})

RSS订阅

写xml的模板,然后生成各个目录下对应的xml;

docpad rss feed 在github上的模版


    <?xml version="1.0" encoding="utf-8"?>
    <feed xmlns="http://www.w3.org/2005/Atom">
        <title><%= @site.title %></title>
        <link href="<%= @site.url %>/atom.xml" rel="self"/>
        <link href="<%= @site.url %>"/>
        <updated><%= @site.date.toISOString() %></updated>
        <id><%= @site.url %></id>
        <author>
            <name><%= @site.author %></name>
            <email><%= @site.email %></email>
        </author>

        <% for document in @getCollection('posts').toJSON(): %>
            <entry>
                <title><%= document.title %></title>
                <link href="<%= @site.url+'/'+document.url %>"/>
                <updated><%= document.date.toISOString() %></updated>
                <id><%= @site.url+'/'+document.url %></id>
                <content type="html"><%= document.contentRendered %></content>
            </entry>
        <% end %>
    </feed>

我用的插件

Render(eco & maked)

即读取和渲染,不多写。

Services

集成了一些公共服务,例如google analytics, Disqus等等

partials

可以实现模块化; 在src目录下新建partials目录,里面存放复用的模板:例如header.html.eco

在模板要使用的地方写:

<%-@partial('header.html.eco', @)%>

后面的@是将本页面的数据传进partial;

liveReload

代码修改后docpad会立即重新生成,同时刷新浏览器中的页面。

代码高亮

高亮plugin on github

选了个github主题配色~

部署

目前是使用github作为代码托管,干脆也直接用了他们家的page服务~

备注

comments

目前使用的是Disque。 Docpad也可以启用本地评论,但是需要服务器为nodejs驱动;

加密!

现在站点是托在github上,而目前docpad加密的方式需要server端为nodejs

TODO:

  • 文章目录的自动生成和跳转

docpad建站记录的更多相关文章

  1. 建站记录:设置apache .htaccess文件给网站添加404错误处理页面

    有些空间服务商会在后台设置中,提供这个选项,可以直观地设置404错误指向的页面,这一点很方便,比如我之前用的阿里云虚拟主机就可以在控制台直接设置. 新租用的香港主机后台没有找到选取文件的地方,只是可以 ...

  2. 512MB内存VPS服务器安装宝塔WEB客户端建站 - 环境部署篇

    原本以为我们很多网友用VPS搭建网站不会用WEB面板,而采用一键包或者自己部署编译环境,但是最后发现其实目前我们使用WEB面板的还是挺多的,无论是免费还是付费的都有不少人使用.比如当初一直免费的AMH ...

  3. Nodejs学习笔记(三)——一张图看懂Nodejs建站

    前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

  4. 关于WordPress建站的原理二三事

    在写关于仿站文章详情页如何制作之前,我觉得有必要就一些原理性的问题,做一些说明.文章详情页的核心模块和首页有很多相似的地方,比如调用文章的标题.文章的内容.文章分类.作者等,实现起来都差不多,因此,了 ...

  5. 开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

    目录 基本原理 方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo gener ...

  6. Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么(转)

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  7. django笔记 - 建站

    1,建站步骤:1)django-admin.exe startproject mysite 创建完后的目录结构: - mysite # 对整个程序进行配置 - init - settings # 配置 ...

  8. WordPress 建站教程:新手搭建 WordPress个人博客图文教程(完全版)

    前言 WordPress 作为动态博客的代表,至今已经有十几年历史,而且一直在更新发展中,功能强大,插件和主题丰富,WordPress搭建使用也很方便.作为个人站长和博主,很多都是从 WordPres ...

  9. Windows 服务器配置、运行、图文流程(新手必备!) - IIS建站配置一条龙

    Window 2008 服务器的配置教程 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar ...

随机推荐

  1. 用html5的视频元素所遇到的第一个坑

    html5 有一个video标签,这个是被大家所熟知的事情.按照w3c的规范,我认真的写出如下代码: <video preload="auto" controls=" ...

  2. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  3. Java--笔记(2)

    11.根据操作系统中的定义:死锁是指在一组进程中的各个进程均占有不会释放的资源,但因互相申请被其他进程所站用不会释放的资源而处于的一种永久等待状态. 死锁的四个必要条件: 1)互斥条件(Mutual ...

  4. Linux下通过JDBC连接Oracle,SqlServer和PostgreSQL

    今天正好需要统计三个网站栏目信息更新情况,而这三个网站的后台采用了不同的数据库管理系统.初步想法是通过建立一个小的Tomcat webapp,进而通过JDBC访问这三个后台数据库,并根据返回的数据生成 ...

  5. mCustomScrollbar的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. js、css、html判断浏览器的各种版本

    利用正则表达式来判断ie浏览器版本 判断是否IE浏览器 if (document.all) { alert("这个是ie浏览器");} 判断是否IE6浏览器 方法一:if ( /M ...

  7. day15

    三元表达式 符合python语法的表达方式(形式,公式)称之为表达式 三元:三个元素 总体就是,由三个元素组成表达式其目的是为了简化书写,既然是简化必然有局限性三元表达式只能帮你简化仅有两个分支的if ...

  8. jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  9. Python中关于with open file as 的用法

    最近用到python来处理文本文件了,然后需要处理文件.发现python中提供的with   open  as   这个还是用的不错的!好的,废话不多说了,看下例子: with open('./sig ...

  10. 【MySQL】PostgresSQL-MySQL对比

    PostgresSQL-MySQL对比 (5 条消息)PostgreSQL 与 MySQL 相比,优势何在? - 知乎 IOC匹配 - 天眼公共空间 - 360企业安全Confluence 调查分析 ...