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

    Як створити статичний блог за допомогою 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 у каталозі шаблонів.

           % title title% Блог % endblock%      % 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"% % блокування вмісту% --  -- % 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.