Привет! Это мой первый пост на этом сайте, и я думаю, что хорошей традицией будет начать его с объяснения того, как был настроен этот сайт.

Почему статический веб-сайт Ссылка на заголовок

Коротко о преимуществах такой комбинации для простого, быстрого и надежного личного блога:

  • Hugo - для генерации статического веб-сайта
  • GitHub Pages - для хостинга вашего статического веб-сайта
  • Namecheap - для покупки доменного имени вашего сайта

Кроме того, стоит отметить, что стоимость такой настройки состоит только в стоимости вашего доменного имени, в то время как Hugo и GitHub Pages бесплатны для небольших блогеров.

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

Эти ребята проделали большую работу, объяснив все, поэтому в моем руководстве я сосредотачиваюсь в основном на полноте установки.

Шаг 1: Покупка доменного имени Ссылка на заголовок

Приобретите доменное имя у Namecheap или другого регистратора доменов. Не покупайте никаких дополнительных услуг, так как нам нужно только доменное имя.

Шаг 2: Установка Hugo и Git Ссылка на заголовок

Сначала вам нужно установить Hugo и Git. Это единственный шаг, зависящий от дистрибутива, и поскольку я использую EndeavourOS, я использую pacman. Для установки Hugo и Git выполните следующие команды в терминале:

sudo pacman -S hugo git

Эти команды установят Hugo и Git на вашу систему, которые необходимы для создания и публикации вашего статического веб-сайта.

Шаг 3: Создание нового репозитория на GitHub Ссылка на заголовок

Затем вам нужно создать новый репозиторий на GitHub для вашего веб-сайта. Перейдите на GitHub.com, войдите в свой аккаунт и нажмите кнопку “New repository”. Дайте вашему репозиторию имя (например, name-of-your-site.github.io) и нажмите кнопку “Create repository”.

Шаг 4: Создание локальных папок для вашего будущего сайта Ссылка на заголовок

Для удобного управления вашим сайтом на локальной машине вам нужно создать директории со следующей структурой:

/name-of-your-site/public

Директория name-of-your-site будет использоваться как корневая директория Hugo.

Директория public будет использоваться для настройки ваших GitHub Pages.

Шаг 5: Установка темы hugo-coder Ссылка на заголовок

Перейдите в корневую директорию вашего сайта Hugo и установите тему hugo-coder, выполнив следующие команды:

cd name-of-your-site
git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

Шаг 6: Настройка веб-сайта Ссылка на заголовок

Скопируйте файл конфигурации из директории exampleSite в корневую директорию вашего сайта Hugo, выполнив следующую команду:

cp -av themes/hugo-coder/exampleSite/* .

Затем отредактируйте файл config.toml, чтобы обновить настройки для вашего веб-сайта. Например, вы можете изменить базовый URL на https://your-site-address/.

Шаг 7: Создание и публикация контента Ссылка на заголовок

Создайте контент для вашего веб-сайта, создавая новые файлы markdown в директории content/. Вы можете использовать примеры файлов в директории exampleSite/content/ в качестве отправной точки.

Как только вы создадите некоторый контент, вы можете просмотреть ваш веб-сайт локально, запустив следующую команду:

hugo server -D

Это запустит локальный веб-сервер по адресу http://localhost:1313/, где вы сможете просмотреть ваш веб-сайт.

Шаг 8: Настройка новой ветки gh-pages Ссылка на заголовок

Клонируйте репозиторий вашего веб-сайта на локальную машину и создайте новую ветку с названием gh-pages, выполнив следующие команды:

git clone https://github.com/your-git-name/your-website-repository.git cd your-website-repository git checkout -b gh-pages

После создания ветки gh-pages перейдите в раздел “Settings” вашего репозитория GitHub и нажмите на вкладку “Pages”. В разделе “Source” выберите ветку “gh-pages” и нажмите “Save”. Это настроит ваш репозиторий на использование новой ветки для хостинга вашего веб-сайта.

Шаг 9: Публикация веб-сайта Ссылка на заголовок

Как только вы будете довольны своим веб-сайтом, вы можете опубликовать его на GitHub Pages, выполнив следующие команды:

hugo
cd public
git add .
git commit -m "Publishing to gh-pages"
git push origin gh-pages

Это сгенерирует ваш веб-сайт в директории public/ и отправит его в ветку gh-pages вашего репозитория GitHub. Ваш веб-сайт теперь должен быть доступен по адресу https://your-repository.github.io/.

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

Шаг 10: Настройка SSL Ссылка на заголовок

  1. В вашем репозитории GitHub перейдите на вкладку “Settings” и прокрутите вниз до раздела “GitHub Pages”.
  2. В разделе “Custom domain” введите ваше доменное имя (которое вы купили на сайте Namecheap) и нажмите “Save”.
  3. GitHub сгенерирует SSL-сертификат для вашего доменного имени. Этот процесс может занять несколько минут.
  4. Как только сертификат будет сгенерирован, выберите опцию “Enforce HTTPS” для обязательного использования HTTPS-соединений для вашего веб-сайта.

Шаг 11: Настройка DNS на Namecheap Ссылка на заголовок

  1. Войдите в свой аккаунт Namecheap и выберите меню “Domain List”.
  2. Нажмите кнопку “Manage” рядом с вашим доменом name-of-your-site.
  3. В разделе “Domain” нажмите на “Advanced DNS”.
  4. В разделе “Host Records” нажмите кнопку “Add New Record”.
  5. Выберите “CNAME Record” в выпадающем меню.
  6. В поле “Host” введите www.
  7. В поле “Value” введите your-repository.github.io. (с точкой в конце).
  8. Оставьте поле “TTL” по умолчанию.
  9. Нажмите кнопку “Save Changes”.
  10. Затем вам нужно создать запись типа A для вашего домена. В разделе “Host Records” снова нажмите кнопку “Add New Record”.
  11. Выберите “A Record” в выпадающем меню.
  12. В поле “Host” введите @.
  13. В поле “Value” введите IP-адрес сервера GitHub Pages, который составляет 185.199.108.153 для your-repository.github.io.
  14. Повторите предыдущие два шага, чтобы создать дополнительные записи типа A для других трех IP-адресов GitHub Pages: 185.199.109.153, 185.199.110.153 и 185.199.111.153.
  15. Наконец, нажмите кнопку “Save Changes”, чтобы сохранить настройки DNS.

На распространение изменений DNS может потребоваться некоторое время, но как только они вступят в силу, вы сможете получить доступ к вашему веб-сайту по адресу name-of-your-site.

Шаг 12: Расслабтесь Ссылка на заголовок

Помните, что распространение DNS может занять некоторое время, так что не волнуйтесь, если ваш сайт не станет сразу доступен. На полное распространение вашего доменного имени может потребоваться до 24-48 часов.

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