Это простое руководство со всеми шагами и командами, которые могут перенести вас из ничего на бесплатный опубликованный веб-сайт с Hugo, Github и Netlify!

Это руководство предполагает, что вы уже купили домен для своего веб-сайта (я рекомендую porkbun, если вы хотите купить его сейчас). Стоимость домена - единственная стоимость, необходимая в этом руководстве. Чтобы создать, размещать и публиковать свой сайт, совершенно бесплатно!

Установка Hugo

Есть много способов установить Hugo во всех основных операционных системах, описанных в документации Hugo installation

Чтобы установить Hugo на некоторые популярные дистрибутивы Linux:

1
2
3
4
5
6
7
8

Debian/Ubuntu based:
snap install hugo

Arch based:
pacman -S hugo

Fedora/Red Hat based:
dnf install hugo

Проверьте установку и проверьте версию:

1

hugo version

Новый сайт Hugo

Теперь перейдите в папку, где вы хотите, чтобы Hugo создал папку вашего сайта. Например в webdev/sites

1

hugo new site myWebsite

Это создаст новую папку для вашего сайта с структурой Hugo в it webdev/sites/myWebsite

Добавить тему Hugo

Найдите тему Hugo, которая вам нравится, и добавьте ее в папку темы. Я выбрал здесь тему Papermod документация по установке Papermod.

1
2

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

Обновите тему при необходимости:

1

git submodule update --remote --merge

Запустить Git и подключиться к GitHub

Установка Git

Это будет принимать операционную систему, основанную на Ubuntu Linux. Для других операционных систем проверьте страницу загрузки Git

Во-первых, давайте проверим, уже установлен Git и какая это версия:

1

git --version

Итак, если у вас нет Git, установите последнюю версию Git:

1
2
3

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
sudo apt install git

Конфигурация Git

Документация по настройке Git в первую очередь

1
2

git config --global user.name "My Name"
git config --global user.email "myname@email.com"

И теперь мы можем установить Git для инициализации по умолчанию с основной ветвью и таким образом, выровнять GitHub, как упоминалось ранее:

1

git config --global init.defaultBranch main

Мы также можем включить цвета в Git:

1

git config --global color.ui auto

Наконец, убедитесь, что ваше имя и электронная почта добавлены в новую конфигурацию:

1
2

git config --get user.name
git config --get user.email

Создайте учетную запись в GitHub

Создайте учетную запись в GitHub, если у вас еще нет учетной записи. Gitlab, Bitbucket и другие тоже должны работать, но могут понадобиться различные настройки по сравнению с GitHub.

Теперь создайте новый репозиторий GitHub, где мы будем хранить наши файлы Hugo, например, с именем MyWebsite. Затем у нас будет ссылка SSH для репозитория GitHub, такого как git@github.com:myname/mywebsite.git, который мы будем использовать позже для подключения в нашей местной среде Git.

Создайте ключ SSH и вставьте его в GitHub#

Чтобы подключиться к своей учетной записи GitHub из вашей локальной машины без необходимости отдавать имя пользователя и пароль каждый раз, вы можете настроить ключ SSH.

При проверке терминала, если у вас уже есть ключ SSH:

1

ls ~/.ssh/id_rsa.pub

Если вы получите сообщение «Нет такого файла или каталога», создайте SSH ключ, используя электронное письмо, которое вы использовали для создания учетной записи на GitHub:

1

ssh-keygen -C myname@email.com

Во время процесса генерации ключей он предложит вам местоположение, чтобы сохранить сгенерированную ключ и попросить пароль, но вы можете просто нажать Enter, чтобы пропустить оба.

Теперь мы можем распечатать/увидеть недавно сделанный общедоступный SSH ключ в терминале:

1

cat ~/.ssh/id_rsa.pub

Скопируйте вывод, чтобы вставить его в GitHub, перейдя к изображению вашего профиля в верхнем правом углу, а затем Настройки -> SSH и GPG ключи -> Новый SSH ключ. Добавьте заголовок по вашему выбору и вставьте ключ в поле ниже.

Проверьте соединение SSH с GitHub, введя в свой терминал:

1

ssh -T git@github.com

Если все настроено правильно, вы должны увидеть:

Привет меня зовут! Вы успешно аутентифицировали, но GitHub не обеспечивает доступ к оболочке.

Подключить Git к GitHub

Теперь мы можем начать работать на нашем веб-сайте Hugo и доставить локальные файлы в репозиторий GitHub.

Запустите Git в папке с файлами Hugo (для получения подробной информации проверьте документацию Git). Сначала перейдите в папку webdev/sites/myWebsite, а затем инициализируйте Git, добавьте все файлы (не забудьте о точке .), Выберите файлы, выберите ветвь, подключитесь к репозиторию GitHub, который мы создали ранее, и, наконец, подтолкнуть файлы до GitHub:

1
2
3
4
5
6
7

cd webdev/sites/myWebsite
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:myname/myWebsite.git
git push -u origin main

В следующий раз, когда мы хотим подключиться к существующему репозиторию с нашими файлами на GitHub, мы можем просто клонировать репозиторий локально, чтобы начать работу над последней версией файлов:

1

git clone git@github.com:myname/myWebsite.git

Установите Visual Studio Code

Теперь вся конфигурация сделана, и мы готовы начать редактирование нашего сайта Hugo! Самым популярным программным обеспечением для редактора кода является Visual Studio Code. Просто установите его, перейдите к структуре папок и начните редактировать файлы. Затем вы можете управлять командами Git прямо в коде Visual Studio.

Подключите репозиторий GitHub к Netlify

Документация Hugo о Netlify довольно приятно следовать.

Сначала сделайте учетную запись на Netlify и подключите ее к своей учетной записи GitHub.

Далее мы можем создать файл netlify.toml в нашей папке Hugo. Перейдите, чтобы настроить Hugo в Netlify и скопируйте все содержимое в свой файл. Вы можете изменить номер версии, если хотите в файле. Сохраните его и подтолкните к своей учетной записи GitHub.

Теперь из Netlify мы можем продолжить и создать New site от Git. Выберите свой новый репозиторий, когда его спросили, и на последнем шаге введите Hugo в полевой команде и public для каталога.

Наш веб-сайт будет создаваться и развертываться сейчас с Netlify. Мы получаем url от Netlify, чтобы проверить наш веб-сайт в форме чего-то. something.netlify.app. Чтобы подключить свой собственный домен с Netlify, следуйте инструкциям Netlify по пользовательским доменам. Инструкции приведут вас к изменению серверов имен в вашем поставщике домена (например, в Porkbun) на конкретные серверы имен из Netlify. Это изменение должно занять час, чтобы зарегистрироваться от вашего поставщика доменов, а затем еще один час от Netlify. Таким образом, в общей сложности 2 часа минимум с момента, когда вы меняете серверы имен на Netlify в своем поставщике домена, пока не увидите свой веб-сайт через свой доменный url. В то же время вы можете отредактировать свой веб-сайт и раздвинуть изменения в GitHub и использовать собственный url-адрес Netlify, чтобы увидеть, как ваша страница обретает форму.

Конечно, в Netlify есть еще много настроек, но основы сделаны, и у вас есть рабочий сайт бесплатно! Одна классная вещь, которую я делаю в Netlify - это иметь dev.mywebsite.com, который берет мои файлы Hugo из вторичного филиала dev на GitHub и развернуть веб-сайт с постоянными изменениями в dev.mywebsite.com. Это идеально, чтобы работать над черновой версией веб-сайта и увидеть, как работа обретает форму, не влияя на фактический веб-сайт, где люди могут посещать. Если вы заинтересованы в документации Netlify о развертываниях филиала.

На этом мы заканчиваем это замечательное руководство.