Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Middleman
Webdesign

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

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Working With Data, Assets, and Templates in Middleman
Project: Continuing Our Website Build With Middleman

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

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

 В Цьому Пості

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

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

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

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

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

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

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

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

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

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

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

У Gemfile додати:

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

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

 ГІТ:

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

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

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

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

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

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

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

ГІТ

LiveReload

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

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

У терміналі:

 Потім у config.РБ:

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

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

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

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

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

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

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

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

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

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

У Gemfile:

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

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

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

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

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

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

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

Команди git:

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

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

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

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

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

  •  :minify_css

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

  •  :minify_javascript

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

  •  :asset_hash

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

Скріншоти

file
file
file

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

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

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

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

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

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

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

file

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

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

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

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

У терміналі:

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

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

 Скріншот

file

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

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

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

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

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

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

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

ГІТ:

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

file

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

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

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

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

І тоді git:

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

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

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

У всіх.кава:

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

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

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

Перерва

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.