Присоединяясь к Всемирной сети Internet

Вы уже взрослые люди со своим автор­ским сайтом блога с ка­стомным ЦСС и ин­те­рес­ней­шими замет­ками. Пора вам узнать, что будет, если убрать --serve из npx @11ty/e­leventy --serve.

Иногда в папке _site оста­ются арте­факты от  --serve — удалите папку и вы­зо­вите npx @11ty/eleventy вновь.

11ty попыхтит чуть дольше обыч­ного и пе­ре­с­ге­не­ри­рует папку _site в пол­но­стью неза­ви­симую от какого-­либо кода папку со статичным сайтом. Это займёт около минуты в первый раз, и где-­то 5 секунд или полми­нуты во все после­ду­ю­щие. Всё.

Эту папку, будем звать её билд, уже сейчас можно хоть на сервер поло­жить и у вас будет рабочий сайт. Это если у вас есть сервер.

Допустим, у вас есть сервер

Есть веро­ят­но­сть, что у вас уже есть сайт на каком-­нибудь Ворд­прессе и вы исправно башляете хостингу по паре тысяч рублей каждый месяц. Вам будет просто: подго­товьте чистую папку с до­меном или поддо­меном на сер­вере в ди­рек­тории /www/, подклю­чите SSL-­сертификат, найдите IP и порт вашего сервера.

Дальше два пути: визу­альный и нор­маль­ный.

Для нормаль­ного пути вам нужен Терми­нал, команды ssh и scp

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

...и синхро­ни­зи­руйте папку _site с тар­гетом на сер­вере.

Either way, поздрав­ляю, ваш сайт теперь во в­се­мирной паутине. Не за­бы­вайте платить хостингу и по полми­нуты гене­ри­ро­вать билд на своём компью­тере. Закры­вайте заметку, дальше инфа, как ­этого избе­жать.

Допустим, сервера у вас нет.

Если вам ок после каждой заметки гене­ри­ро­вать сайт с нуля, вам доста­точно просто выбрать бесплатный хостинг статичных вебсайтов и за­ки­ды­вать папку _site на сервер через WinSCP, веб-­интерфейс или ssh. Таких хостингов много, выби­райте на свой вкус: Vercel CLI, Netlify Drop, Neocit­ies, etc.

Если вы готовы потра­тить ещё 20 минут и за­вести аккаунт на Гит­хабе, покажу вам, как ­де­ле­ги­ро­вать гене­рацию папки сайта серверу.

Jamstack-провайдеры: делегируем генерацию сайта хостингу

Джемстек-­провайдеры дают вам не только место на жёстком диске, но и немного времени процес­со­ра — для того, чтобы вы могли гене­ри­ро­вать билд сайта на сер­вере, а не на вашем компью­тере.

Джемстек-­провайдеров, рабо­та­ющих с сай­тами на Эле­венти, много, но я агитирую исполь­зо­вать Netli­fy — просто потому, что в Три­реме уже настроен плагин, который позво­ляет Нетлифаю не пе­ре­со­би­рать сайт с нуля.

Нетлифай даёт 300 минут процес­сор­ного времени в месяц и ав­то­ма­ти­чески пере­со­би­рает ваш сайт всякий раз, как вы вносите изме­нения в его гитхаб-­репозиторий. Кстати, вам нужен гитхаб-­репозиторий.

Сайд-квест: настраиваем git

Я не буду учить вас, как ­за­вести аккаунт на Гитхабе и как открыть свой первый (публичный или приватный) репо­зи­то­рий. Пусть он пока будет пустой, вам нужна только ссылка на него в фор­мате https://github.com/author/repo.git

Этот репо­зи­торий мы запол­ним, после того, как ­на­строим git-­систему вашей папке с ис­ход­ни­ками блога. Для ­этого в Тер­ми­нале (там же, где вы вызы­ваете npx @11ty/eleventy) вызо­вите git init. Если вы в ответ видите ошибку вроде «команда git не рас­по­зна­на», погуг­лите реше­ния. В случае Виндовс я советую просто скачать последний Павершелл и за­пус­кать все команды через него:

После того, как у вас зафу­рычит git init, закон­нек­тите вашу папку с вашим репо­зи­то­рием Гитхаба и за­пушьте первый коммит. Я не помню точных инструк­ций, потому что поль­зо­ваться git из ко­мандной строки больно, но должно быть что-то вроде.

git remote add origin https://github.com/YOURNAME/YOURREPO.git
git add .
git commit -m "first commit"
git push -u origin main

В резуль­тате должен выско­чить попап авто­ри­за­циии, а после Терминал выплюнет сооб­щение в стиле «при­нято, зака­чиваю изме­нения на сер­вера Гитха­ба». Прокон­суль­ти­руй­тесь с ЧатГПТ и Ста­кО­вер­флоу, если что не ра­бо­тает.

Зайдите на стра­ницу вашего Гитхаб-­репозитория и убе­ди­тесь в свой круто­сти.

Возвращаемся к Джемстек-провайдерам

На примере Netli­fy — захо­дите на https://www.netlify.com/, жмёте бирю­зовую кнопку, следуете инструк­циям. Всё.

Должно выйти чёт-­такое спустя полми­нуты времени на ге­не­рацию билда:

That’s pretty much it. Личный домен можно купить рублей за 300 в любом пере­ходе, но я советую избе­гать крупных продавцов типа reg.ru — есть нену­левой шанс, что они через год прогреют вас на про­дление по за­вы­шенной цене. Я покупаю домены на https://ru-tld.ru/ — там всё настолько допо­топно, что даже опла­тить можно только ИП.

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

git add .
git commit -m "update"
git push

Бонус: личная кнопка опубликовать.

Я не знаю, какой способ загрузки сайта на сервер выбрали именно вы, но знаю, что все эти действия можно описать в не­сколько команд Терми­на­ла — будь то ssh и rsync или git push.

Для системы с Не­тли­фаем это строчка git add .; git commit -m 'update'; git push

Лично у меня проплачен клас­си­че­ский сервер и я синхро­ни­зи­руюсь с ним через WSL командой cd /mnt/c/User­s/user­/­port­fo­lio/; npx @11ty/e­leventy; rsync -avz ./_site/ [email protected]:/var/www/vhXXXXXX/data/www/magvag.ru; cd ~. Чтобы не в­во­дить каждый раз пароль, я исполь­зовал ssh-keygen и ssh-copy-id.

Как разбе­ре­тесь (спро́сите у ЧатГПТ), какие команды нужны конкретно в вашем случае — поло­жите их в от­дельный файл скрипта: это .bat или .sh в за­ви­си­мости от вашей опера­ци­онки. Сделайте для ­этого скрипта ссылку на ра­бочем столе и дайте ей красивую иконку.

Теперь вы можете забыть всю техни­че­скую часть создания блога на Три­реме как страшный сон. Просто пишите заметки в за­ме­точ­нике и жмите на и­конку «Опуб­ли­ко­вать».

Всё!

Все заметки Мануала ниже — это погру­жение в де­тали и не­обя­за­тельны к про­чте­нию.