Как же меня бесят статьи на популярных ресурсах (которые еще и набирают кучу лайков) от горе vps-хостеров в духе “Как всего за 139 рублей в месяц развернуть свой сайт-визитку на vps”. Какие нафиг 139 рублей за сайт-визитку?! Вы чего, ребятушки, совсем уже стыд потеряли?! Надо исправлять это недоразумение.
В этой статье я вам расскажу как бесплатно (ну или до тех пор пока github не прикроют) разместить и вести ваш личный сайт, блог, cv странички, личной вики. Вам даже отдельный домен не нужен (все будет “из коробки”), хотя никто не мешает и свой домен натравить на ваш сайт.
Краткий план наш будет такой: создаем специальную репку, ставим локально генератор статических сайтов и генерим странички, немного магии github actions и профит! В основе всего будет GitHub Pages - бесплатный хостинг статических сайтов, который позволяет автоматически публиковать сайт из репозитория GitHub.
Я буду поднимать персональный блог с CV. И я хочу чтобы мой сайт был доступен по красивому адресу https://itcaat.github.io. Тут надо понимать что занять вы можете адрес только с именем вашего аккаунта. У меня аккаунт на github: itcaat.
# Шаг 1. Создаем новый репозиторий c именем itcaat.github.io.
Важно чтобы он имел именно формат: ACCOUNT_NAME.github.io, чтобы хост itcaat.github.io смотрел именно на этот репозиторий. Далее выставляем в настройки репозитория->Pages->Source=Github Actions. Больше никакие настройки не трогаем. На данном этапе у нас будет просто пустой репозиторий без файлов и бранчей.
# Шаг 2. Перейдите в каталог в котором хотите создать сайт и выполните команду создания нового сайта.
# Ставим генератор статических сайтов hugo
# https://gohugo.io/installation/ - здесь можете выбрать под свою OS
brew install hugo
# Будет создан каталог itcaat.github.io и нужная структура внутри
cd ~/Documents/my
hugo new site itcaat.github.io
Давайте добавим эти файлы в созданный репозиторий и зальем их. Так нам будет проще видеть историю изменений. Заранее создадим .gitignore.
cd itcaat.github.io
cat <<EOF >.gitignore
public
EOF
git init
git add .
git commit -m "mvp"
git branch -M main
git remote add origin git@github.com:itcaat/itcaat.github.io.git
git push -u origin main
# Шаг 3. Теперь заглянем в магазин тем и выберем ту что вам подходит. Мне нравится минимализм, поэтому я остановился на https://github.com/athul/archie.
# Подключим его как сабмодуль
git submodule add https://github.com/athul/archie.git themes/archie
# Шаг 4. Почти все темы содержат пример сайта со всеми необходимыми параметрами для корректной работы темы. Давайте перенесем контент и настройки из exampleSite в корень нашего репозитория.
cp -R themes/archie/exampleSite/* ./
# Обычно в exampleSite настройки лежат в config.toml.
# Поэтому нам надо переложить их в hugo.toml чтобы генератор увидел настройки
mv ./config.toml ./hugo.toml
git add . && git commit -m "added theme athul archie" && git push
Поздравлю, мы уже можем сгенерировать сайт локально и посмотреть что у мы имеем на данный момент. Тут важно понимать что сервер поднимается просто для локального тестирования - он просто собирает все воедино из css, тем и md-файлов.
hugo server --buildDrafts
# Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
# Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
# Press Ctrl+C to stop
Открываем http://localhost:1313/ и смотрим что все корректно работает. ⬇️