Проект: Створення повного сайту з посередником

Ukrainian (українська мова) translation by Tanya Ira (you can also view the original English article)

У третій частині цієї серії ми збираємося, щоб отримати наші руки брудні і приступати до створення сайту для вигаданої сайт подкасту: "маття Nerdz". Ми будемо використовувати посередника, віскі і бітер. Поїхали!

В Цьому Пості

Дорожня карта
Основні Налаштування Блогу
LiveReload
Організація Постів
Розгортання GitHub Сторінки
Розумніші Активів
Установки Бурбона
Нормалізувати і jQuery

Дорожня карта

Давайте почнемо з трохи хедз-ап, де це відбувається. У найближчі пару статей я збираюся побудувати невеликий статичний сайт для вигаданої подкаст називається "маття Nerdz"—це подкаст для тих, хто хоче поринути у всі речі порошковий зелений чай. Він буде мати наступні сторінки:

Сторінку для кожного тега
На сторінці відомостей для кожного епізоду
Сторінки індексу за попередні подкасти

Ми будемо використовувати посередника для генерації статичного сайту і бурбон люкс для всіх стайлінгу. Я сподіваюся, що ви подивіться на мої попередні статті про віскі і посередник, перш ніж ви потрапили в цей момент. Якщо ні, то я рекомендую вам піти і прочитати їх, якщо ви відчуваєте себе досить впевнено у вже основи.

Для всіх речей, пов'язаних з моделюванням, я покладаючись на Бурбон досить довгий час. Крім того, я дійсно копати відступом синтаксис—я Сасс далеко волію її .синтаксис СКС. Інтернет .синтаксис Sass є єдиним (напевно) знайомі трохи хотілося б кидатися на новачків, тому що я відчуваю, що це дійсно варто знати.

Основні Налаштування Блогу

Давайте розпочати новий додаток для нашого подкаст сайту, ввівши в терміналі:

middleman init matcha_nerdz

а потім змінивши наш каталог проекту:

cd matcha_nerdz

Тепер ми отримаємо ШКТ відбувається:

git init      
# => to initiate new Git repo

git add --all 
# => adds all the files for staging

git commit -m 'Initital commit' 
# => commits changes

Далі ми додаємо в шаблон блогу в суміш. Це хороша основа для нашого сайту подкасту. Пізніше ми скоригуємо статті для відображення аудіо подкаст треків з SoundCloud. Зараз, однак, це всього лише блозі.

У Gemfile додати:

gem "middleman-blog"

Потім через термінал:

bundle
# or
bundle exec middleman

middleman init --template=blog

Це оновить вашу папку "matcha_nerdz". “.конфіг" і ваш шаблон індекс РБ і трохи оновити. На вершині, що ви отримаєте нові шаблони для ваших годувати, сторінки тегів, сторінки календаря, приклад статті і новий макет. Реєстрація виходу з терміналу:

identical  .gitignore
   update  config.rb
    exist  source
   create  source/2012-01-01-example-article.html.markdown
   create  source/calendar.html.erb
   create  source/feed.xml.builder
   update  source/index.html.erb
   create  source/layout.erb
   create  source/tag.html.erb
    exist  source/stylesheets
    exist  source/javascripts
    exist  source/images

ГІТ:

git add --all
git commit -m 'Adds blog template'

Створення Нових Статей

Тепер ви можете створювати нові статті через командний рядок:

middleman article 'My new fancy second article'
#=> create  source/2015-11-22-my-wonderful-second-article.html.markdown

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

middleman
#or
middleman server

В Загальних Рисах

Далі нам потрібно мати невелику прибирання, щоб зробити. Шаблон блог створений новий макет під “джерело/макет.Ерб". Нам потрібно видалити оригінал один у “джерело/макети/макет.Ерб" і перейти на нову є. Так, через термінал:

rm source/layouts/layout.erb
mv source/layout.erb source/layouts/

Ми також повинні оновити новий макет.Ерб" з речами, які були вилучені в файлі макета. Додайте наступний код в тег в “джерело/макети/макет.Ерб":

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<%= stylesheet_link_tag "normalize", "all" %>
<%= javascript_include_tag  "all" %>

Найголовніше, це гарантує, що ваші JS і активів стилю доступні.

ГІТ

git rm source/layout.erb
git add --all
git commit -m 'Moves new layout into /layouts
               Adds asset links
               Removes old layout'

LiveReload

Щоб зробити наше життя трохи більш зручним, ми додамо LiveReload в суміш. Нам потрібно захопити камінь, а потім активувати його в нашій “конфігурації.файл" РБ.

У нашому Gemfile все:

gem 'middleman-livereload'

У терміналі:

bundle

Потім у config.РБ:

#uncomment
activate :livereload

І, нарешті, наші команди git:

git add --all
git commit -m 'Activates LiveReload'

З цієї активації, перезавантажте ваш сервер і ваша сторінка буде автоматично оновлюватися кожен раз при зміні контенту на сторінці, або стилів поведінки. Життя заставка, повір мені!

Увага! Слово застереження: якщо у вас є інший локальний сервер, LiveReload не може грати в м'яч. Вам потрібно буде вбити іншого сервера зараз.

Організація Постів

Коли ви дивитеся, де статті зберігаються прямо зараз, ви швидко зрозумієте, що ця організація прямо під "Джерело" дуже швидко стає стомлюючим. Опублікувати кілька статей і ви будете тонути в посаді. Не потрібно бути, що лажа–замість цього давайте створимо dirctory під "джерело" для всіх наших посад. Перемістити ваші статті(С) та хай посередник знає, де їх знайти.

mkdir source/posts
mv source/2012-01-01-example-article.html.markdown source/posts/

Потім ми додаємо "/сполучення" у якості джерела для статей блогу. У config.РБ:

blog.sources = "posts/:year-:title.html"

Потім наші команди git:

git rm source/2012-01-01-example-article.html.markdown
# Removes moved file from repo

git add --all
gco -m 'Adds new folder for posts and adds source in config.rb'

І це все. Ніщо не повинно бути змінено, і ви повинні побачити приклад статті, як раніше. Проте для зберігання повідомлень, це набагато більш розумний. Що також здорово, що при створенні нових статей через командний рядок, ваші нові повідомлення будуть зберігатися в "/пост" автоматично:

middleman article 'My awesome 3rd article'
# => create  source/posts/2015-my-awesome-3rd-article.html.markdown

Розгортання GitHub Сторінки

Для мене, штовхаючи статичний сайт на GitHub Pages-це таке гарне рішення, що я не хочу поставити вас через розгортання через платформу Heroku або послугу від Amazon S3. Давайте тримати його просто!

У Gemfile:

gem "middleman-deploy"

Потім в терміналі:

bundle

Нам потрібно додати розгорнути блок “конфіг.РБ":

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'gh-pages'
  deploy.build_before = true
end

Для того сторінок GitHub, щоб знайти свій CSS і JS активів потрібно активувати наступне в config.РБ, а також:

configure :build do
  activate :relative_assets
end

Потім створіть РЕПО на GitHub, додати віддалених і розгорнути:

git remote add origin https://github.com/yourusername/repositoryname.git

middleman deploy

Бум! Ваш сайт буде жити під “ім'я користувача".на GitHub.Іо/имя_проекта" і ваші активи повинні бути відсортовані. Я люблю цей процес—це не може бути простішою та зручнішою для користувачів. Великий гитхаб роботу!

git add --all
gco -m 'Adds setup for GitHub Pages deployment'

Розумніші Активів

На останньому кроці, перед тим як потрапити в налаштування бурбон, я хочу позбутися стилів, які приходять з посередником, і оптимізувати наші активи для кращої продуктивності в браузері—актив минификации і конкатенація. Перейти у “джерело/стилів/всі.CSS" і видалити його уміст. Просто зберегти першу сходинку:

@charset "utf-8";

Команди git:

git add --all
git commit -m 'Removes unneccessary Middleman styles'

Далі ми хочемо активувати кілька опцій для оптимізації продуктивності в файл config.РБ":

configure :build do
  activate :asset_hash
  activate :minify_javascript
  activate :css
  activate :gzip
end

Потім, знову ж, команди git:

git add --all
git commit -m 'Activates performance optimizations'

Дозвольте мені швидко пояснити, що ми зробили тут:

:за допомогою gzip

На даний момент, gzip є самим популярним і ефективним методом стиснення. Його алгоритм стиснення знаходить однакові рядки в файл і стискає їх. Для HTML, де повно вільного простору і відповідні теги, це дуже ефективно і, як правило, зменшує розмір HTTP-відповіді на цілих 70%. Активація це не тільки гзипс ваш HTML, а також CSS і js файлів. У процесі побудови посередника створює файли як зазвичай, але і дублює їх “.версії ГЗ". Коли браузер отримує в контакті з вашими файлами, він може вибрати, якщо він вважає за краще служити допомогою gzip стислі файли або звичайні. стиснення сильно підтримується веб-і мобільних браузерів.

:minify_css

Цей процес видаляє всі непотрібні сміття з ваших стилів і зменшує їх розмір значно. Коротше, ваш CSS буде одна велика клякса—оптимізований для читання машиною. Напевно не на очах.

:minify_javascript

Це так само, як minify_css, але трохи більш складним і витонченим.

:asset_hash

Це активує хешування вашого майна. Це означає, що ваші імена активу змінюватися і отримувати якусь додаткову інформацію (у процесі складання), яка інформує браузери, якщо вони повинні повторно завантажити активи чи ні. Тепер, ім'я файлу залежить від вмісту цього файлу. Хэшированные активів кешується браузерами і сайтами візуалізується швидше. Інше слово для цього - "дактилоскопія", тому що це забезпечує просте рішення для інформування браузерах, є чи не дві версії файлу ідентичних. Дата розгортання не має значення—тільки зміст. Подивіться нижче файли хешуються активів виглядати:

Скріншоти

Це виглядає огидно, але тепер ваші зображення, таблиці стилів і JavaScript файлів вам унікальне ім'я через це доданий "випадковий" код: (унікальний) хеш. Кожен раз при зміні активу і повторити процес складання, цей хеш зміни, які, в свою чергу, сигнали для браузерів, які тоді і тільки тоді, вони повинні повторно завантажити файли. Файл потім ефективно минув, процес, відомий як "очищення кеша".

Також варто згадати: ви можете звернутися до своїх файлів так само, як раніше, але під час створення посилань в HTML код оновлюється, щоб використовувати ці хэшированные імена. Погляньте:

“/build/index.html(.ГЗ)":

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' />
  	 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>Blog Title</title>
    <link rel="alternate" type="application/atom+xml" title="Atom Feed" href="/feed.xml" />
    <link href="stylesheets/normalize-6197e73d.css" rel="stylesheet" type="text/css" /><link href="stylesheets/all-0355b587.css" rel="stylesheet" type="text/css" />
    <script src="javascripts/all-da39a3ee.js" type="text/javascript"></script>
  </head>
  <body>

  ...

У вашій "/створити папку JS і CSS файлів будуть посилатися на автоматично хэшированные імена активів. В результаті цього перемішування справа, коли ви йдете через різні сторінки в одному сеансі, або знову повернутися до сторінки пізніше ці активи були кешується і не треба бути знову, поки просив щось міняти. Цей процес скорочує кількість запитів величезна кількість. Хіба це не круто? Все це за допомогою одного рядка коду в файл config.РБ" і деякі зірочки чарівництва. Booyakasha!

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

Примітка: сторінок GitHub є всі стислі та зменшені з коробки. Але це не боляче, щоб переконатися, що все на місці—особливо якщо згодом ви вирішите розмістити ваше додаток десь ще.

Давайте подивимося на нашу сьогоднішню сцену. Ваш классификационнаяа сторінка повинна виглядати зараз досить баребоны:

Установки Бурбона

Для цього проекту Я хочу використовувати три дорогоцінних каменів від бурбона:

Бурбон
Акуратні
Бітер

Давайте додамо їх у наш Gemfile і набір:

gem 'bourbon'
gem 'neat'
gem 'bitters'

У терміналі:

bundle

Бурбон і акуратно тепер все готово (майже). Бітер потрібно встановити кілька речей. Потрібно міняти в каталог стилів і активувати генератор, який знаходиться купа настоянок файлів в папці "/база".

cd source/styleheets
bitters install

Подивимося, що ми маємо після цього:

Скріншот

Бітер-це щось з базових конструкцій. Це дає вам пару адекватних конструкцій для елементів інтерфейсу, таких як кнопки, тип, форми, повідомлення про помилки і так далі. Настоянки також готує "грід-файл settings" на ваші акуратні сітки, яку ми також повинні встановити, раскомментировав наступний рядок у "джерело/стилів/бази/_base.СКС":

@import "grid-settings";

Для завершення налаштування Бурбон тепер я хотів би додати наступні змінні в нашій мережі-налаштування. Вони закладають основу для визначення розміру сітки і активувати візуальну сітку, яка допоможе нам краще вирівняти наш дизайн.

В “/джерело/стилів/бази/оболонки-налаштування.СКС":

$column: 90px;
$gutter: 30px;
$grid-columns: 12;
$max-width: 1200px;

$visual-grid: true;
$visual-grid-index: back;
$visual-grid-opacity: 0.15;
$visual-grid-color: red;

Заключний крок, щоб зробити цю роботу-перейменуйте “/стилів/всі.КСС" до "/стилів.всі.Сасс" і імпортувати наш Бурбон файлів.

Примітка: оскільки ми перейшли до відступом синтаксису Sass, ми також повинні вбити з комою в кінці рядка @кодування.

“всі.УСБ.СКС":

@charset "utf-8"

@import 'bourbon'
@import 'base/base'
@import 'neat'

Ми імпортуємо файл бази бітер тут відразу після бурбона, тому що нам потрібен доступ до сітки-параметри акуратні файл (який лежить в папці "/база") до того, акуратні.

ГІТ:

git add --all
git commit -m 'Sets up Bourbon and activates grid settings'

Давайте подивимося! Ви можете побачити червоний візуальну сітку, і, крім того, завдяки біттера, наша друкарня трохи покращилася за межі браузера за замовчуванням. Подивіться на скріншот:

Нормалізувати і jQuery

Посередник приходить з нормалізації файл, який імпортується в “все.УСБ" за замовчуванням. Це один запит непотрібних активів, ми можемо легко позбутися, так перейменувати “джерело/стилів/нормалізації.КСС" до "джерело/стилів/_normalize.УСБ.СКС" в першу чергу. Тепер у нас є часткове, що ми повинні імпортувати праворуч угорі після @charset в “джерело/стилів/всі.Сасс":

@charset "utf-8"

@import 'normalize'

@import 'bourbon'
@import 'base/base'
@import 'neat'
@import 'normalize'

Одна річ, ми не повинні упускати з виду посилання на наш стилів в нашому макеті. Так як ми використовуємо часткові Сасс, що всі імпортовані в фіналі "глобальних" стилів, нам не потрібна посилання на норму.більше—в CSS посилання на все.Сасс цілком достатньо.

У “джерело/макети/макет.Ерб":

<%= stylesheet_link_tag "all" %>

І тоді git:

git rm source/stylesheets/normalize.css
git add --all
git commit -m 'Imports normalize partial properly'

Нарешті, перш ніж ми зробимо перерву, ми повинні додати бібліотеку jQuery, яка нам знадобиться пізніше. У Gemfile:

gem "jquery-middleman"

І в терміналі:

bundle

Оскільки я хочу використовувати CoffeeScript для цього проекту, нам потрібно перейменувати "source/javascripts/all.js" в "джерело/Java-скрипти/всі.кава". Там нам буде потрібно jQuery для конвеєра ланцюгові актив і все готово.

У всіх.кава:

//= require jquery

Наші команди git:

git rm source/javascripts/all.js
git add -all
git commit 'Adds jQuery to the Mix
            Renames gobal js file to coffee'

І розгорнути:

middleman deploy

Після розгортання, відкрийте ваш сайт на сторінках GitHub, щоб побачити, якщо все працює, як очікувалося. Хороша робота!

Перерва

Фух! Давайте зробимо перерву. Нам вдалося отримати кілька досить нудних кроки в бік з цим. Сподіваюся, ви дали чітку картину того, що вам потрібно на міцну основу, коли ви починаєте новий проект посередників. Далі ми будемо розширювати на те, що ми створили тут, і продовжити роботу з гідною місце для нашого подкасту.