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, щоб побачити, якщо все працює, як очікувалося. Хороша робота!
Перерва
Фух! Давайте зробимо перерву. Нам вдалося отримати кілька досить нудних кроки в бік з цим. Сподіваюся, ви дали чітку картину того, що вам потрібно на міцну основу, коли ви починаєте новий проект посередників. Далі ми будемо розширювати на те, що ми створили тут, і продовжити роботу з гідною місце для нашого подкасту.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post