Генераторы статических сайтов — альтернатива CMS

Генераторы статических сайтов — альтернатива CMS

CMS подходит не для всех проектов

  1. Сайты визитки
  2. Корпоративные и информационные сайты
  3. Блоги
  4. Документация
  5. Каталоги продукции (без корзины и функционала оплаты)
  6. Highload

Часть «динамики» реализуется сторонними сервисами или на JS

Преимущества статики

  1. контент в файлах:
    • удобно редактировать в любимом текстовом редакторе
    • GIT — бэкап и версионность
    • доступны альтернативные языки разметки
  2. статика быстрее любой CMS
  3. удобные URL
  4. контроль над кодом ≈99% (нет лишнего кода)
  5. нужен простейший хостинг (а иногда и не нужен вообще)

Недостатки статики

  1. Гиковская технология: не отдашь заказчику на самоуправление
  2. Нужно приложить усилия, чтобы сайт могли редактировать разные люди из разных мест (GIT)

Что есть?

  1. nanoc

  2. Jekyll

  3. DocPad

…и много много других.

Принцип работы

  1. Взять контент
  2. Склеить с шаблоном
  3. Положить в папку «output»
  4. PROFIT!

DocPad Logo

Powered by Node.js

Установка

  1. Node.js
  2. GIT с доступом из cmd
  3. Установить DocPad:
    npm install -g docpad@6.38
  4. Создать папку проекта в удобном месте и в ней выполнить:
    docpad run
  5. http://localhost:9778
DocPad предлагает выбрать шаблон проекта
Файловая структура

project_folder / src

  1. [documents] //контент
    • [blog]
    • index.html.eco
    • about.html
    • atom.xml.eco
  2. [files] //стили, скрипты, иконки и т.д
  3. [layouts] //макеты страниц
    • default.html.eco

project_folder / src / documents 

			---
			title: "Как сверстать Гауссово размытие"
			description: "Как сделать гауссово размытие (gaussian blur) в браузере без javascript"
			created_at: 2013-03-07
			kind: article
			layout: 'default'
			disqusid: gaussian-blur
			tags:
				- css
				- svg
			---
			<p>Понадобилось мне как-то сверстать такой эффект: ...

project_folder / src / layouts

logo

        <html>
        <head>
          <title><%- @document.title %> / <%- @site.title %></title>
          <meta name="description" 
        	content="<%= @getPreparedDescription() %>" />
        </head>
        <body>
          <article class="page-content">
            <h1 class="article-title"><%- @document.title %></h1>
            <%- @content %>
          </article>
        </body>
        </html>

 

        <% if @projects.length: %>
          <% for project in @projects: %>
            <a href="<%= project.url %>"><%= project.name %></a>
            <p><%= project.description %></p>
          <% end %>
        <% else: %>
          No projects
        <% end %>

project_folder / docpad.coffee

project_folder / docpad.coffee

Плагины

npm install --save docpad-plugin-#{pluginName}

Список плагинов:

Шаблоны

DocPad Logo

docpad.org

Спасибо за внимание!

http://paulradzkov.com/static-site-generators