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

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

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

Задача

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

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

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

GitHub & Jekyll

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

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

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

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

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

Prose.io

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Open Source

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

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

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

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

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

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