Як створити статичний блог за допомогою Cactus [OS X]

Оновлення: Кактус додаток було припинено.

Якщо ви не вимагаєте CMS і вважаєте за краще просто отримати статичний сайт або блог, то Jekyll є гарним інструментом, з яким ви маєте шанс. Однак, якщо ви віддаєте перевагу інструменту з графічним інтерфейсом, а не працювати з інструментами командного рядка, ви можете перевірити Кактус.

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

Працюючи над проектом, Cactus буде стежити за кожною зміною вашого проекту і автоматично оновлює браузер щоб ви могли побачити зміни негайно, на вашому Mac або мобільному пристрої. Він також підтримує SASS / SCSS і Coffescript з коробки, тому кожна зміна цього файлу також автоматично генерується.

Почати

Перш за все, потрібно завантажити Cactus з його домашньої сторінки, після чого запустити установку. Після завершення, відкрийте його, ви побачите чотири кнопки: Створити, Розгорнути, Редагувати і Попередній перегляд.

Щоб створити новий проект, клацніть Створити. Тут ви побачите 4 шаблони. Для цього підручника ми збираємося з шаблоном блогу. Натисніть Створити.

Вам буде запропоновано вказати назву вашого проекту та вибрати місце, де існує проект. Тут я даю ім'я “Мій чудовий блог” для проекту. Після цього ви побачите свій проект вже в Cactus.

Зміна файлів

Створений проект за допомогою шаблону блогу тепер існує у вашому Finder. Тепер ми перевіримо елементи, необхідні для створення нашого блогу. Перейдіть до каталогу, де зберігаються ваші файли. Основні каталоги, які ми будемо використовувати, є Шаблони, Сторінки, і Статичний каталог. Давайте поки пропустимо інших.

Для того, щоб короткі відомості, кожен каталог міститься:

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

Тепер ми будемо редагувати три основні файли з каталогів: base.html і post.html у каталозі Шаблони та index.html у каталозі Сторінки.

Кактус використовує Інструмент Django Template для мови шаблонів. При цьому ви можете включати елементи HTML з інших файлів HTML, тому вам не потрібно дублювати коди. Найбільш використовувані тут функції спадкування шаблону і змінної.

Щоб побачити, як вони працюють, спочатку відкрийте вікно base.html у каталозі шаблонів.

             % block content% Основний вміст % endblock content% ---   

base.html це простий html файл, який ми використовуємо як шаблон "скелета". Він містить загальні елементи нашого сайту. Ви можете побачити деякі “блоків” там; ми будемо використовувати дочірній шаблон для перевизначення цих блоків.

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

 % розширює "base.html"% % title title% title | Cactus % endblock title% % блоку вмісту% --- 
 
title
 
headline 
 
 
 % block body% Це вміст публікації. % endblock body% 
 --- % endblock content% 

The post.html містить розмітку для нашої сторінки входу в блог. У першому рядку ви можете побачити це post.html розширює base.html. Це означає, що ми перекриємо блоки base.html з блоками тут.

Тут також можна знайти змінні, такі як title і headline. Значення цих змінних ми визначимо в публікаціях блогу пізніше.

Тепер давайте подивимося на % блок тіла% блок. Це буде замінено дочірнім шаблоном, який містить записи про наш блог.

Перейдіть до каталогу сторінок / повідомлень. Ось решта наших поштових записів.

 title: Мій пост Заголовок записів: Мій пост заголовок автор: Агус дата: 15-01-2015 % extends "post.html"% % блок тіла% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit. Досвід, що виникає, допомагає ремонту і тимчасової синхронізації, тому, що, можливо, є офіційним, чинним в максимумі. --- % endfilter% % endblock body% 

У посадових записах ми надаємо значення змінної, наприклад, назву, заголовок, автор і дату. Це значення буде передаватися, коли ми називаємо ім'я змінної на батьківському шаблоні. Потім ми пишемо вміст нашого блогу з Markdown.

Тепер ми перейдемо на сторінку індексу нашого блогу, відкриту index.html в сторінок каталог. Він містить список наших записів у блозі та посилання на кожний запис. Основний код виглядає так:

 % розширює "base.html"% % блокування вмісту% -- 
 % для публікації в повідомленнях% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

На даний момент у нас є простий блог з двома основними сторінками сторінка індексу містить записи блогу та сторінка входу в блог себе.

Перейдіть до вікна Cactus і натисніть кнопку preview, щоб запустити сервер. Вона автоматично відкриє браузер і відкриє ваш сайт.

Стилізація блогу за допомогою SCSS

Великою особливістю Cactus є те, що він працює з SASS / SCSS з коробки. Просто відкиньте файли .sass або .scss в статичний і кожен раз, коли ви редагуєте і зберігаєте файли, Cactus автоматично генерує CSS.

Тут я наведу приклад з використанням bootstrap-sass для стилізації нашого блогу. Припускаючи, що ви використовуєте bower, відкрийте термінал і перейдіть до статичний каталог нашого проекту з використанням cd команду. Потім установіть bootstrap-sass за допомогою цієї команди:

$ bower встановіть bootstrap-sass-офіційний

Після завершення завантаження ви побачите bower_components каталог, що містить статичний каталог bootstrap-sass-офіційний.

Перейдіть до цього каталогу: static / css. Створіть файл scss, назвіть його ім'я syle-bs.scss і вставте цей код.

 @import "… / bower_components / bootstrap-sass-офіційний / активи / стильові таблиці / _bootstrap"; 

Що робить код - це імпортувати все з bootstrap-sass. Як тільки ви збережете стиль-bs.scss, ви побачите, що style-bs.css генерується в тому ж каталозі, який містить всі стилі з початкового завантаження.

Розгортайте проект

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