ерезапуск kizu.ru

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

Каково главное отличие этой версии? Она сырая! Она дичайше, ужасающе непроработанная, корявая, сломанная. Не смотрите в исходники, правда. И это не терновый куст — там сейчас взаправду всё плохо. Почему? Потому что я решил бороться с перфекционизмом. Раньше я вылизывал, вытачивал и отшлифовывал свой сайт и его код; предъявлял сайт миру только когда меня всё устраивало. Сейчас же меня почти ничего не устраивает. И это отлично!

адача

Итак. Почему же я вообще переделал сайт, почему считаю, что даже в текущем недоделанном виде он всё равно лучше старой версии?

Ответ прост. Я поставил перед собой задачу сделать сайт таким, чтобы мне было просто его обновлять. Предыдущие версии сайта, какой бы движок под ними не лежал, не были для меня удобны, и это стало для меня непреодолимым барьером. Мне было лень делать кучу лишних действий для того, чтобы добавить новую страницу на сайт или хотя бы что-то обновить. Хотя хотелось писать, много писать. У меня огромное число идей для постов, для проектов, и для всего остального, что я хотел бы опубликовать.

К счастью, путём проб и ошибок, прототипов и переделок с нуля, я нашёл решение, которое позволит мне заниматься сайтом в удовольствие. Вот оно:

itHub & Jekyll

Я могу сложить оду Гитхабу — восхваления тому, что делают эти ребята достойны отдельной серии статей. Но я сейчас остановлюсь на главном.

Гитхаб предосталяет возможность хостинга статичных сайтов — GitHub Pages. Можно взять свой репозиторий, залить в него статичные файлы и, если всё сделать правильно, можно будет посмотреть на свой статичный сайт либо на адресах Гитхаба, либо на своём домене, настроив соответствующим образом DNS.

Счастье не было бы полным, если бы хостинг был совсем статичным. Ребята из Гитхаба добавили возможность внести чуть-чуть логики и автогенерации — генератор статики Jekyll. Это единственный способ сделать что-то сложное на базе GitHub Pages (помимо чисто клиентских решений и предгенерённой заранее статики), но при этом оно очень хорошее и вполне рабочее.

Смысл в том, что на базе Jekyll можно очень просто поднять обычный блог — там есть всё, что для этого нужно: категории, теги, пермалинки, генерация фидов и прочее, и прочее. Так как это генератор статики, то каждая страница генерируется лишь один раз — потому нагрузка на сервер будет минимальной — в итоге все пользователи будут получать обычный статичный html. Поэтому многие авторы выбирают именно Гитхаб в качестве площадки для хостинга своих проектов, в том числе и с большим числом посещений.

Эту платформу выбрал и я. У меня было очень много всяких требований — я буду вести блог на двух языках, у меня есть множество экспериментов, которые надо в том или ином виде отображать на страницах, а также есть куча идей о том, что же ещё можно добавить на сайт. В Jekyll используется шаблонизатор Liquid — он позиционируется как «безопасный», поэтому (видимо) он очень простой, и с помощью него сложно сделать что-то заковыристое. Но — реально. Я активно ковыряю этот движок и уже сделал довольно много интересных улучшений для блога — об этом точно будет серия статей, а может, я когда-нибудь допилю это дело и до самостоятельного проекта, с помощью которого любой желающий сможет завести себе простой, но мощный и удобный блог. Так что ожидайте обновлений — я, правда, уделю много внимания этой связке — GitHub+Jekyll+Liquid.

rose.io

Так как я использую Гитхабовский Jekyll, мне получается достаточным всего лишь запушить изменения в соответствующий репозиторий сайта — и весь проект пересоберётся и перевыложится. А так как у Гитхаба есть отличный API — существуют и сторонние сервисы, которые упрощают всё ещё больше. В общем-то, сейчас можно создавать пост только через веб-интерфейс: теперь для ведения блога мне не нужно ничего клонировать, достаточно лишь зайти на Гитхаб или prose.io — и там всё будет очень просто и удобно. Да, я об этом тоже напишу как минимум одну статью.

«Напишу статью»

Вы заметили, что я уже много раз упомянул, что я собираюсь написать кучу статей? Я себе пообещал в новом году, после запуска сайта, писать не реже раза в неделю. Но пока что всё выглядит так, что обновления на сайте буду случаться гораздо, гораздо чаще — за время простоя сайта накопилось огромное число идей и мыслей.

Так что — ждите! Я постараюсь чередовать статьи про то, как я создавал сайт (с подробностями по технологиям, решениям и дизайну) с более общими статьями — на темы, которые я обещал осветить в мастодонах, либо просто о том, что наболело.

Я пока не решил какой же в итоге будет формат блога/сайта, всё ещё может не раз измениться (скажем, я пока не уверен, что смогу поддерживать в нормальном темпе и в одинаковом качестве публикацию статей на обоих языках), но я точно обещаю, что скучно не будет.

ёрстка и дизайн

Как я уже сказал — сейчас сделан самый минимум, позволяющий мне просто взять и создать новый пост, либо поправить старый. Остальное — не закончено, хоть вешай гифку с землекопом.

Вёрстка — на стадии грязного-грязного прототипа, там нет почти ничего интересного. Ну, точнее есть, но оно погребено под горами мусора. Неэффективные селекторы, никакого кодстайла (тем более всё генерится из Стайлуса), куча повторений и лишних стилей — в общем, не читайте мой CSS. Всё, что будет принимать завершённую форму, я буду описывать в новых статьях, так что можно просто подписаться на Фид, либо зафолловить меня в мастодоне.

Дизайн, с другой стороны, почти устаканился. Наверняка многое поменяется, но основные концепции уже можно увидеть.

  1. Шрифт! Ему я уделил больше всего внимания. Его много: я выбрал максимально комфортный для себя размер шрифта. Если кому-то он покажется большим — всегда можно откинуться на спинку табуретки, либо уменьшить размер шрифта средствами браузера. Большой шрифт — лучше маленького.

    Мне, внезапно, захотелось поставить шрифт с засечками. Настолько, что я в итоге долго искал какой же конкретно шрифт мне подойдёт. К сожалению, бесплатных кириллических шрифтов очень мало, просмотрев все доступные варианты, я в итоге пошёл смотреть на платные. Их уже чуть больше, и я остановился на шрифте работы студии Letterhead — «21 cent». Не знаю чем, но он мне приглянулся. Настолько, что я купил основные начертания, — он у меня, в итоге, лицензирован. Купил у myfonts.net — у них получается не так дорого и единоразово (если не считать лимиты на просмотры, которые можно за деньги увеличивать навсегда).

    Вообще, со шрифтами я намучился. Догадайтесь, что я сейчас скажу? Про это когда-нибудь будет пост!

  2. Минималистичность. Как я уже написал в соцсетях — сложно сделать минималистичный текстовый сайт так, чтобы он в итоге не оказался копией сайта iA. У меня несколько итераций подходили опасно близко к тому, что получилось у них. В итоге я постарался остановиться и подумать — что же нужно сделать, чтобы было и просто, и хорошо, и результат можно было хоть как-то отличить от аналогичных сайтов, которые заполонили интернеты в последнее время? Надеюсь, у меня получилось. Конечно, ещё не всё доработано — скажем, списки постов по разделам совсем не готовы, многие места будут дорабатываться и улучшаться, но в целом всё будет выглядеть примерно так, как сейчас.

  3. Визуальные решения — то, что отличает мой сайт от остальных — можно вынести в отдельный пункт. Я про это всё ещё напишу (да!), но если кратко: посмотрите на цветовую гамму, я постарался избавиться от чистых чёрных и серых цветов, на шапку и футер постов (приём не новый, но пока ещё не сильно распространённый) и на ссылки. Да, не подчёркнутые, пока на них не наведёшь курсор. Но — явно отличимые, с посещённым состоянием и одной маленькой, но приятной деталью, связанной с подчёркиванием :)

pen Source

Несмотря на то, что сайт внутри сырой, я выкладываю его исходники. Помимо утилитарной необходимости, описанной выше в «Задаче», подобное решение даёт возможность использовать все прелести опенсорса — кто угодно может пойти и поправить ошибки у меня на сайте или в любой статье. Более того, в конце каждой статьи я сейчас размещаю две ссылки — на добавление нового issue на Гитхабе (такой аналог комментирования), и ссылку на исходник в prose.io — если залогиниться туда через Гитхаб, то можно будет очень просто редактировать любой пост в блоге.

В итоге — нашли ошибку/опечатку? В каждой статье есть простой способ либо об этом сообщить, либо сразу же и исправить. Для обоих случаев количество необходимых действий — минимально, а профит будет для всех: я получу исправленные статьи, а вы — плюс в карму, коммиты/issue в репозитории и благодарность от меня.

Да, обо всей этой затее с issues и prose.io будет точно больше одного поста.

езюмируя, или tl;dr

У вас перед глазами — первый пост из многих грядущих в обрамлении нового сайта. Сайт пока сырой, но дальше — больше. Всё будет становиться только лучше, и о процессе я буду или писать в блог, или хотя бы уведомлять в соцсетях.

Спасибо, что дочитали до конца (или доскроллили). Следите за обновлениями и, если что, не стесняйтесь посылать пулл-реквесты с исправлением моих ошибок.

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано с метками: #Blog #Meta #Jekyll