понедельник, 31 июля 2023 г.
Как я создавал свой первый сайт/блог и с какими трудностями столкнулся.
Этот блог по сути появился из моего давнего, но нерешительного желания сделать свой сайт в глобальной сети интернет™ и того, что этот же сайт по сути мой финальный проект по окончанию курса кс50. Про курс я думаю, что расскажу и опишу отдельно, в другой заметке и здесь будет ссылка. В этом посте я расскажу про то как создавал сам сайт, с какими сложностями столкнулся (всё таки я начинающий программист), как их решал и т.п.
Начну с того, что на финальный проект можно было выбрать, что захочется придумать. Я хотел сделать что-то своё и оказался в этом прав: если на учёбу у меня было сил по 1-4ч. в день и 4ч это в лучшем случае (имею в виду изучение и теория), то тут я засиживался подольше. На выбор можно было взять самые простые типа написания скрипта на С который что-то делает или сделать расширение для хрома – тут всё предоставляется и можно сделать что-то совсем простенькое и прислать со словами done. Или же были проекты посложнее, например сделать игру на lua2d (LOVE). Я выбрал что-то среднее: создание своего сайта. Поскольку сайты тоже делали на курсе, не было интереса просто писать хтлм\ксс\жс, чтобы был внешний сайт для слова done, хотелось изучить что-то новое.
Про astro я уже слышал, немного интересовался темой SSG сайтов, потому, что изначально планировал делать сайт на jekyll и хотел попробовать пилить на руби, но всё же увидев, что обычно с джекила переносят блоги на астро, а не наоборот – я подумал, ладно, попробую, а там, что получится.
Ошибка 0.5: Я выбирал SSG очень долго, читал, изучал плюсы и минусы. Я потратил ценное время. Лучше замерить один раз и сделать два раза, потому что переделывать все равно приходится. (а необратимого в цифре нет, благо не с деревом или металлом работаем)
Ошибка 1.0: Просмотр уроков на ютубе… Сделав 1.5 туториала, потратив кучу времени и погрузившись в скуку и иногда непонимание что собственно происходит, поскольку с жс я мало имел дел, я впал в фрустрацию, потому что я хотел лучше понять как астро работает изнутри. В результате, подходящим вариантом оказалось зайти в документацию и пройти туториал который учит делать астро блог с нуля, прям вот с чистого темплейта. (Кнопка сгенерить приветствие это напоминание и то, что осталось от того туториала, потому что многое я переделал под себя)
Пройденный официальный туториал давал готовый блог который работал так: в гитхаб пушилась новая маркдаун (md) заметка -» netlify подтягивал её с гита и деплоил обновлённый статичный сайт. Я решил, что мне этого мало, ну точнее, я знал, что надо переделать как-то и хотел попробовать picocss. Наверное это была не лучшая затея, поскольку если я правильно понял, астро уже предоставляет респонсив. Может и ошибаюсь, но в общем, я взял пикоксс и себе подпортил местами ксс (имею в виду написание своего ксс и какие конфликты были), но зато у меня точно респонсив.
Сейчас я знаю, что есть в сети куча темплейтов хтмл и ксс, которые дают семантику и внешний вид, без внутренней логики (как например астро темплейты). В прочем, я бы прошёл ещё раз по этому пути и наступил бы на те же грабли и опыт. Некоторые вещи в ксс были неочевидны, думаю, что это было полезно узнать.
Но и этого мне было мало… Я хотел попробовать сам подключить cms к блогу, чтобы можно было писать заметки не в md файлах. Я знал, что скорее всего буду пользоваться этой функцией ровно никогда, но я хотел попробовать, как оказалось вскоре – всё сломать.
Ошибка 1.5: Усложнять себе задачу лишним функционалом.
При поиске подходящей cms, первое с чем я столкнулся это что почти везде платные решения. Мне же нужно было что-то простое, бесплатное и опенсорсное. Я узнал, что оказывается существуют git based cms, т.е. это такие “обёртки” для гита которые позволяют писать текст и всё остальное в админке кмс, а потом оттуда идёт пуш в гит -» деплой на нетлифай. Так я узнал про decap cms, бывший netlify cms, который выпилили из системы и теперь это отдельная кмс.
Первое с чем я столкнулся – в доках астро она упоминается, но все туториалы и подключение это подключение netlify, а не decap и в целом исходники моего блога отличались так, что я не мог применить то, что описывалась в уроках по подключению просто следуя им – ничего не работало, сайт вечно висел в ошибках. На помощь пришли официальные доки decap cms. Там я увидел, как легко было бы подключить к другим SSG типа хьюго или джекила, но я то уже сделал всё на астро и казалось ну вот совсем чуть-чуть…. Прочитав не один раз подключение из доков и множество раз настраивая и пуша код мои коммиты выглядели уже не так fix this, а так test, c24, teagasdg и т.п. Всё время была только одна проблема: кмс на что-то ругалась по данным, сайт падал.
В результате, даже не до конца понимая как, потратив очень много времени и проведя пару дней в состоянии фрустрации, я таки смог подключить кмс, чтобы она без проблем давала пуш в подходящем формате, чтобы потом он запихнулся нормально в md файл и отобразился блогом. Пришлось пожертвовать любыми картинками в шапке поста – я просто не нашёл способа как можно в кмс давать ей указывать рабочий путь, поскольку сама астра выдавала ошибку getStaticPaths(), что пути совпадают, а slug не совпадает или что-то такое, так что из md файлов тоже эти обложки не работали. Зато можно грузить картинку в црм и потом выбирать её в пост + давать альт атрибьют.
Далее мне и этого было мало, я хотел захостить на своём домене. Поскольку как я думал, ссг сайт не будет сложным просто оставить на нетлифае и заменить доменное имя. Спойлер: не всё так просто. Что касается нетлифай, всё и правда было не очень слож(но!), с некоторыми заморочками когда не понятно “а сделал я вообще-то всё правильно или опять чёто не то?!“. Оказалось, что на netlify я всё сделал нормально. Проблема крылась в том, что я покупал домен у timeweb. Забегая вперёд, скажу, что тех.поддержка у таймвеб и нетлифай хорошая и мне помогли! Чтобы домен привязать к хостингу, нужно указать NS-сервера хостинга на стороне доменного имени, но (!) это процедура может быть как быстрой, так и относительно медленной (до 24ч.)
Ошибка 2.0: Не писать в тех.поддержку, а читать документацию и пытаться разобраться самому в том, где можно просто спросить “а хост-то подключился к домену?“.
Дело в том, что я потратил 3 дня прописывая NS-сервера как оказалось не туда из-за не очень понятного интерфейса myorderbox (это PDR селлер доменов, а timeweb как бы российская их “обёртка” или ресселер). Потому, что как оказалось с личного кабинета таймвеб нельзя прописать НС-сервера (крайне не удобно), а в ЛК майордербокс нажимая на вкладку ДНС-сервера, внезапно, оказывается будешь вводить “запасные” нс-сервера, а не основные… Короче, чёрт ногу сломит, там вообще UI в районе 2003г. и в лучших традициях джава-стайл со всякими отдельно открывающимися окнами которые нужно растягивать и т.п. В общем, прочитав документацию нетлифай и таймвеб – на второй день начались закрадываться сомнения, что я то возможно делаю всё, что в моих силах, но почему-то не работает как нужно. Я написал в тех.поддержку тайвеб и мне настроили нс-сервера – всё заработало! Нетлифай показал, что верификация прошла успешно уже спустя 5 мин. Я спросил в тех.поддержке как это сделали, чтобы на будущее не парить никого. Оказалось как я писал выше, я не туда записывал нс-сервера…
Потом, правда появилась другая проблема, к ней меня жизнь не готовила. Сайт все равно переводил на тайвеб с надписью, что домен занят. Уже в тех.поддержке нетлифай мне сказали, что всё работает и сайт у них открывается мой – попробуйте впн. Под впном моим у меня не открылся сайт, но тут я уже научен и знаю, что есть сайты сразу с впном – там работало. Я прислал друзьям сайт, попросил открыть и сделать скрин – у них работало. Без впна. Меня осенило: надо чистить кэш браузера и историю…
Наконец-то работает! Правда теперь в мобильной версии в ночном режиме почему-то у текста не тот цвет который был при разработке, а ещё бургер меню не открывается. ЧЗН!? Погуглил, оказывается, возможно это тоже поменяли потом, но в астро нужно скрипты из папки скриптов прописывать инлайном путь и писать атрибьют, что вот мол из папки. До этого работало и без такого. Со шрифтами пока не разобрался, потому что баг не всегда повторяется.
В общем-то вот и всё. Я понимаю, что кому-то может показаться, что я делал полную фигню и ещё всё криво, но для меня это был занимательный и интересный опыт попробовать сделать то, что я хотел бы сделать, а не то, что нужно было сделать минимально по курсу.
во время написания заметки я слушал: Terre Thaemlitz – Soil
во время редактуры: わ す れ が た み – 音羽信
☮
return to blog