Это Пост 31 из 100 челленджа #100DaysToOffload. Подробнее о челлендже тут.

Первая версия этого блога создавалась с помощью движка Октопресс. Ныне депрекейтед. Следующая итерация: «А не сделать ли мне самописный движок на Рельсах?» — подумал я. И ёбнул. У меня даже остался скриншот.

Тогда это было весело, но оказалось, что мне, бедному студенту, отваливать 150-200₽/мес за ВПС и столько же за домен было жалко. Решено было переехать с помощью Джекилл обратно на Гитхаб-Пэйджес.

Так чем же мы сейчас богаты?

Движок

Пользуюсь генератором статических страниц — Джекилл. Простой в освоении, гибкий в плане настройки под себя, есть нативная поддержка Гитхаб Пэйджес.

Сейчас у меня установлен Джекилл версии 3.7.4, Руби — 2.6.3, rbenv — 1.1.2.

Плагины

Гитхаб-Пэйджес поддерживает Джекилл плагины. Они полезны для автомитазации всякой СЕОшной мути и не только.

• jekyll-sitemap — генерит карту сайта.
• jekyll-feed — генерит РСС фид.
• jekyll-paginate - генерит пагинацию.

Каскадные стили

Стоит замечательная библиотека awsm.css, которая позволяет писать семантическую разметку ХТМЛ без использования классов. Но я всё-таки настроил немного под себя и написал кастомные классы. Для шэринга в социальные сети использую вот эти кнопки, которые не трекают ваши действия.

Скрипты

Использую плагины для зума картинок и подсветки синтаксиса.

С разрешения Ивана Гришаева поставил его виджет опечаток.

СЕО

Основные мета-теги я поставил. Недавно настроил мета-теги для Твиттер превью. И конверсия реально выросла!

TODO:

• JSON-LD
• OpenGraph
• Google Search Console

Хостинг

Бесплатно расположился на Гитхаб-Пэйджес. Морально готовлюсь, что меня когда-нибудь прогонят отсюда ссаными тряпками за слово «Пидор» в кибер-гулаг. Поэтому перед гит пушем я всегда должен перекреститься и приговорить: «Фух, хоть бы не забанили репозиторий мой».

Домен

Купил .me домен на Нэймчип. В год стоит 20 баксов. Байтнули меня бесплатным годом в Гитхаб Стьюдент Девелопер Пак.

Комментарии

Использую utterances. Это виджет, использующий Гитхаб Ишьюс репозитория блога для хранения комментариев. В будущем, планирую создать свой виджет с блекджеком и авторизацией через ваши любимые соцсеточки.

Статистика

Использую гоаткаунтер. С удивлением обнаружил, что меня кто-то читает. В этом месяце 200 посещений без учёта тех, кто пользуется блокировщиками скриптов. Кто вы? Что вы здесь делаете? Зачем вы это читаете?

Платформа не следит за пользователями, не сливает данные. Рекомендую.

Инструменты

• VSCode — мой основной текстовый редактор.
• Ноушн — использую там КанБан доску, куда кидаю идеи для постов, трекаю прогресс готовности постов, пишу черновики.
• Обсидиан — иногда идеи появляются из связанных между собой заметками в моём Зеттелькастене.
• ИмэйджОптим — инструмент для сжатия изображений.
• Photopea.com — браузерный аналог Фотошопа. Рисую мемы там.
• Альфред — использую самописный воркфлоу для быстрого создания новой заметки из шаблона.
• гит — использую, чтобы трекать и пушить изменения на гитхаб.
• jserve — это шелл алиас, чтобы не набирать руками каждый раз bundle exec jekyll serve.

В итоге

Такой сетап — минималистичный, легко транспортируемый и масштабируется в любую сторону.

Апдейты

• Добавил плашку #100DaysToOffload.
• Исправил опечатку и семантическую ошибку.
• Добавил ссылки для инструментов.

Это Пост 30 из 100 челленджа #100DaysToOffload. Подробнее о челлендже тут.

Ну, ничего, я подожду…

Это Пост 29 из 100 челленджа #100DaysToOffload. Подробнее о челлендже тут.

Функция архивирования чатов — это офигенная вещь. Она позволяет не отвлекаться и сфокусироваться на том, что нужно тебе.

В Телеге она классно сделана. Я состою во всяких фронтендерских чатах. В день люди там обмениваются сотнями сообщений. Мне нет дела до этих сообщений, но иногда я задаю там вопросы. Спросив что-то, чат останется в архиве. Если собседник меня упомянет, то я получу уведомление. Удобно.

Вот так выглядит мой Телеграм почти что всегда:

В архив отправляю также личные чаты по выходным, чтобы не засорять сайдбар.

Ридонли — это ок.

Это Пост 28 из 100 челленджа #100DaysToOffload. Подробнее о челлендже тут.

Вастрик пишет:

Первый обязательный технический шаг — сделать так, чтобы ссылка на ваш пост смотрелась идеально в любых ситуациях. На превью в твиттере, в анонсе на канале телеграма, даже будучи сохранённой в Pocket.

Этим утром я рано встал, в 05:00, заварил кофе и пошёл курить мануалы, постигать сеошную магию.

Взял первую попавшуюся статью о том, как сделать Твиттер карточки для Джекилл. Спиздил позаимствовал код для их настройки. Его надо вставить внутрь тега <head>. Вот он:

<!-- Twitter cards -->
<meta name="twitter:site" content="@{{ site.twitter_username }}">
<meta name="twitter:creator" content="@{{ site.author }}">

{% if page.title %}
  <meta name="twitter:title" content="{{ page.title }}">
{% else %}
  <meta name="twitter:title" content="{{ site.title }}">
{% endif %}

{% if page.summary %}
  <meta name="twitter:description" content="{{ page.summary }}">
{% else %}
  <meta name="twitter:description" content="{{ site.description }}">
{% endif %}

{% if page.image %}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ site.url }}{{ page.image }}">
{% else %}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ site.url }}{{ site.title_image }}">
{% endif %}
<!-- end of Twitter cards -->

Тут всё просто: определяете в YAML Front Matter страницы переменные title, summary, и/или image, они же сгенерятся в превью. Если какой-то из переменных нет, то Джекилл возьмет дефолтные значения из конфига.

Вот например Front Matter для моего предыдущего поста. Стрелочкой отметил, что будет взято для Твиттер превью:

---
layout: post
title: 'Игл — лучшее место для ваших сохранёнок' <-----
date: 2020-11-24 03:31 +09:00
tags: ['#100DaysToOffload', 'картинки', 'дизайн', 'шрифты', 'эстетика']
summary: 'Сохраняй ресурсы для дизайна как про.' <-----
image: '/assets/images/eagle/eagle.png'          <-----
---

Стоит ещё отметить, что:

• Для картинки в превью идеальные пропорции — это 2:1.
• Используйте Validator Tool для проверки превью.
• ВК, Телеграм и другие сервисы используют эту жу технологию, поэтому превью для них вы сразу получаете приятным бонусом.

Следующий шаг — это настройка JSON-LD Site и Open Graph. Этим я займусь потом 🤡.

Это Пост 27 из 100 челленджа #100DaysToOffload. Подробнее о челлендже тут.

Ещё один «рекламный» пост про мой любимый инструмент. Это Игл — инструмент для организации ваших ресурсов для дизайна в коллекции. Это может быть картиночки, видео, шрифты, пдф-ки, иконки или аудио. Если вы дизайнер, то этот инструмент — маст хэв для вас.

Я храню в Игл шрифты, постеры, фотки японских улиц, фотографии для референса, свои работы. Раньше хранил всё это дело разрозненно что-то в Ноушн, что-то в ВК, что-то в папке Мемы. Теперь все яйца в одной корзине и это удобно.

Интерфейс — охуенный. Херачишь драг-энд-дропом картиночку, присваиваешь теги, можешь добавить заметки и источник (веб-адрес), и в конце кидаешь в нужную папку. Всё просто.

Данные хранятся локально. Представьте, никаких ебучих облаков и синхронизаций.

Цена немного высокая — $29.95. Делают скидки студентам до $20.

Можно использовать на Виндоус и Макос.