Как создать статический блог с помощью Cactus [OS X]

Обновить: Приложение Cactus было прекращено.

Если вам не нужна CMS и вы предпочитаете просто статический сайт или блог, то Jekyll - хороший инструмент, с которым можно рискнуть. Однако, если вы предпочитаете инструмент с графическим интерфейсом, а не с инструментами командной строки, то вы можете попробовать Кактус.

Кактус бесплатный генератор статических сайтов оснащен мощными инструментами, которые могут помочь вам создавать сайты локально, быстрее и проще с современными веб-технологиями. Это дает вам отправную точку в вашем проекте с 4 предварительно разработанными шаблонами, чтобы вы могли начать работу.

Работая над вашим проектом, Cactus будет отслеживать все изменения, которые вы вносите в свой проект а также автоматически обновлять браузер так что вы можете сразу увидеть изменения на вашем Mac или мобильном устройстве. Он также поддерживает SASS / SCSS и Coffescript из коробки, поэтому каждое изменение в этом файле также генерируется автоматически.

Начать

Прежде всего, вам нужно скачать Cactus с его домашней страницы, а затем запустить установку. По завершении откройте его, и вы увидите четыре кнопки: кнопку «Создать», «Развернуть», «Редактировать» и «Предварительный просмотр».

Чтобы создать новый проект, нажмите Создайте. Вы увидите 4 доступных шаблона. Для этого урока мы используем шаблон блога. Нажмите Создайте.

Вам будет предложено указать название вашего проекта и выбрать место, где проект существует. Здесь я даю имя “Мой Потрясающий Блог” для проекта. После этого вы увидите свой проект уже в Кактусе..

Изменение файлов

Созданный проект с использованием шаблона блога теперь существует в вашем Finder. Теперь мы проверим элементы, необходимые для создания нашего блога. Перейдите в каталог, где хранятся ваши файлы. Основные каталоги, которые мы будем использовать: Шаблоны, страницы, а также статический каталог. Давайте пропустим другие сейчас.

Чтобы быть кратким, вот для чего нужен каждый каталог:

• Шаблоны: Содержит HTML-файлы, которые ведут себя как шаблоны, которые используются HTML-файлами на страницах для построения.
• страницыСодержит все HTML-файлы, которые станут страницами с одинаковым путем. например: hello.html здесь станет http://yoursite.com/hello.html
• статический: Содержит все статические ресурсы, такие как CSS, Javascript и изображения.

Теперь мы отредактируем три основных файла из каталогов: base.html а также post.html в каталоге шаблонов и index.html в каталоге Страницы.

Кактус использует Django Template Engine для шаблонного языка. Благодаря этому вы можете включать элементы HTML из других файлов HTML, поэтому вам не нужно дублировать коды. Функции, которые наиболее часто используются здесь: наследование шаблонов а также переменная.

Чтобы увидеть, как они работают, сначала откройте base.html в каталоге шаблонов.

             % block content% Основное содержимое % endblock content% ---   

base.html это простой HTML-файл, который мы используем в качестве «скелетного» шаблона. Содержит общие элементы нашего сайта. Вы можете увидеть некоторые “блоки” там; мы будем использовать дочерний шаблон, чтобы переопределить эти блоки.

Теперь откройте post.html находится в одном каталоге с base.html.

 % extends "base.html"% % block title% title | Кактус % endblock title% % block content% --- 
 
 заглавие 
 
 Заголовок  
 
 
 % block body% Здесь находится содержимое публикации. % endblock body% 
 --- % endblock content% 

post.html содержит разметку для нашей страницы записи в блоге. На первой строке вы можете увидеть, что post.html расширяет base.html. Это означает, что мы переопределим блоки на base.html с блоками здесь.

Мы также можем найти переменные здесь, такие как заглавие а также Заголовок . Мы определим значения этих переменных в записи в блоге позже..

Теперь давайте посмотрим на % block body% блок. Это будет переопределено дочерним шаблоном, который содержит записи постов нашего блога.

Перейти в каталог страниц / сообщений. Вот остальные наши записи.

 title: My Post Заголовки записей: My Post Заголовок автора: Agus дата: 15-01-2015 % extends "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, приверженец обсуждения Элит. Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, acceptnda, amet illo deleniti officiis, волпатем maxime atque vero sunt. --- % endfilter% % endblock body% 

В записях записей мы присваиваем значение переменной, например заголовок, заголовок, автор и дата. Это значение пройдет, когда мы вызовем имя переменной в родительском шаблоне. Затем мы пишем содержание нашего блога с Markdown.

Теперь мы перейдем на главную страницу нашего блога, откройте index.html в страницы каталог. Он содержит список записей нашего блога и ссылку на каждую запись. Основной код выглядит следующим образом:

 % extends "base.html"% % block content% -- 
 % за пост в постах% 
   Заголовок поста  
post.headline 
 % endfor% 
 -- % endblock content% 

На данный момент у нас есть простой блог с двумя основными страницами, страница указателя который содержит записи в блоге, и страница записи в блоге сам.

Перейдите в окно Cactus и нажмите кнопку предварительного просмотра, чтобы запустить сервер. Он автоматически откроет браузер и откроет ваш сайт.

Стилизация блога с использованием SCSS

Отличительной особенностью Cactus является то, что он работает с SASS / SCSS из коробки. Просто бросьте ваши файлы .sass или .scss в статический каталог и каждый раз, когда вы редактируете и сохраняете файлы, Cactus автоматически генерирует CSS.

Здесь я приведу пример использования bootstrap-sass для стилизации нашего блога. Предполагая, что вы используете беседку, откройте терминал и перейдите к статический каталог нашего проекта с использованием CD команда. Затем установите bootstrap-sass с помощью этой команды:

$ bower install bootstrap-sass-official

После завершения загрузки вы увидите bower_components каталог внутри статического каталога, содержащий самозагрузки-дерзость-чиновник.

Теперь перейдите в этот каталог: Статический / CSS. Создайте файл scss, дайте ему имя начертание-bs.scss и вставьте этот код.

 @import "… / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Код выполняет импорт всего из bootstrap-sass. Как только вы сохраните style-bs.scss, вы увидите, что style-bs.css сгенерирован в том же каталоге, который содержит все стили из начальной загрузки.

Разверните свой проект

Наконец, когда ваш проект готов, вы можете легко развернуть его в реальной версии используя Amazon S3.