Мотивация Ссылка на заголовок

Я уже давно хотел поднять свой личный сайт. В основном для следующих функций:

1. Сайт - визитка. Хочется иметь возможность при необходимости продемонстрировать некоторое резюме заинтересованным людям. Также удобно собрать ссылки на свои соцсети в одном месте, и делиться просто ссылкой на свой сайт.
2. Ссылки на собственные сервисы. Так как я являюсь программистом, да и просто компьютерным гиком, у меня, конечно же, есть свой собственный сервер. А на нем я время от времени разворачиваю различные сервисы. Ну и поскольку я не очень люблю вкладки в браузере, было бы удобно сохранить ссылки на свои ресурсы в одном месте.
3. Иногда приходится решать разные нетривиальные кейсы, по работе или по каким-то пет проектам. Я считаю, что знаниями необходимо делиться, поэтому иногда возникает желание рассказать кому-то о своем интересном опыте. Особенно, если это поможет решить чью-то проблему.

Собственно, это основные мои требования к личному сайту. Понятно, что он должен быть статическим, легким для поддержки и гибким в настройке. Собственно, на создание своего сайта, который удовлетворял бы этим требованиям, меня натолкнул автор канала Johe News.

Знакомство с hugo Ссылка на заголовок

Hugo - проект для генерации статических сайтов. Мне он очень понравился своей простотой, уже за 15 минут следуя quick start у вы сможете получить готовый сайт! Это очень круто для моих задач.

Отдельно стоит отметить большое разнообразие готовых тем. Темы можно добавить в свой проект сайта как git сабмодуль, что очень классно и удобно. Я просто открыл список доступных тем, добавил ее в проект и все, сайт уже выглядит отлично.

По умолчанию тема выглядит так

Как это работает у меня Ссылка на заголовок

А теперь подробно о том, что вам нужно сделать, чтобы создать свой сайт.

Установка hugo Ссылка на заголовок

Установить hugo проще всего следуя инструкции на офф. сайте. В моем дистрибутиве достаточно выполнить комманду:

sudo pacman -S hugo

Создаём новый сайт Ссылка на заголовок

Создаём сайт одной командой

hugo new site my_site

Настройка темы Ссылка на заголовок

Инициализируем гит репозиторий, и добавляем тему как сабмодуль гита

cd my_site
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Также создаем репозиторий на каком-нибудь гит сервере, и подключаем наш сайт туда.

git add .
git commit -am "Initial commit"
git remote add origin <your_remote_git_repo_url>
git push -u origin main

Чтобы склонировать проект впоследствии сразу вместе с темой, рекоммендую использовать флаг --recurse-submodules с коммандой git clone.

Персонализация Ссылка на заголовок

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

Запускаем локальный сервер Ссылка на заголовок

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

hugo server -D

Генерируем статический сайт для хостинга Ссылка на заголовок

Если все понравилось, то генерируем набор статических файлов, которые можно будет загрузить на хостинг.

hugo -D

По умолчанию вся сборка будет лежать в каталоге public, но можно указать и другой путь для сборки флагом --directory.

Немного про хостинг Ссылка на заголовок

Я разворачиваю сайт на своем личном сервисе, вы можете делать это, как угодно. Для удобства будем считать, что у вас есть vps c вашим любимым linux дистрибутивом. На сервере просто клонируем репозиторий, собираем сайт и раздаем его просто как статику при помощи веб сервера. Лично я использую nginx с простейшим конфигом:

server {
    server_name leins275.xyz;
    listen 80; 

    root /srv/my-site; 
    index index.html;

    location / { 
        try_files $uri $uri/ /404.html;
    }
}

Также при помощи certbot легко добавить вашему сайту сертификат. Для этого достаточно установить certbot, и выполнить комманду

sudo certbot --nginx -d leins275.xyz

Certbot сам проправит ваш nginx конфиг как нужно, чтобы переключить сайт на https.

Немножко автоматизации Ссылка на заголовок

В целом наш сайт уже развернут и доступен по сети, если вы все сделали правильно. Я также использую систему автоматизации деплоя gitea + drone ci. чтобы автоматически добавлять изменения на сайт при коммите в репозиторий. Про то, как эта системе работает я расскажу в другом посте.

Заключение Ссылка на заголовок

Источники вдохновения Ссылка на заголовок

Видео на канале Johe News

Статья к видео