Создание блога с помощью Hugo и AWS Amplify

Этот пост представляет собой руководство по созданию блога с помощью Hugo и AWS Amplify.

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

  • Простота в установке и настройке
  • Простота в использовании и постоянном обслуживании
  • экономичность

Рассмотрев несколько различных вариантов после нескольких часов чтения в Google, я остановился на Hugo. Что такое Hugo, спросите вы? Если коротко, то это генератор статических сайтов. Он позволяет создавать файлы в формате markdown и с помощью некоторой магии преобразует их в HTML.

Еще одна вещь, с которой у меня не было практически никакого опыта, — это AWS Amplify. В прошлом я несколько раз сталкивался с ним во время клиентских встреч, но мне не нужно было знать о нем много, кроме того, как он используется в их решении. На домашней странице AWS Amplify было написано: «Создание, развертывание и размещение статических веб-сайтов, одностраничных веб-приложений и приложений с рендерингом на стороне сервера всего за несколько кликов». В сочетании с Hugo это, похоже, удовлетворяло всем моим высокоуровневым требованиям, поэтому я приступил к работе.

Приступаем к работе с Hugo

Эти инструкции основаны на использовании устройства под управлением Windows, поэтому некоторые шаги могут быть неприменимы, если вы используете другую операционную систему.

  • Установите Chocolatey, следуя инструкциям здесь.
  • Загрузите программу установки Windows для Go отсюда и запустите ее, приняв все настройки по умолчанию.
  • Скачайте Windows Installer для GitBash отсюда и запустите его, приняв все настройки по умолчанию.
  • Установите Hugo из командной строки или из Powershell:
choco install hugo -confirm
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • Из командной строки или Powershell перейдите в место, где вы хотите сохранить копию сайта локально, например, C:Data. Для дальнейших целей я буду считать, что это папка, в которую будет помещен сайт.
  • Создайте новый сайт. Замените MyBlog на имя, которым вы хотите назвать свой сайт. Это может быть абсолютно любое название, но в дальнейшем я буду считать, что сайт будет называться MyBlog.
hugo new site MyBlog
Войти в полноэкранный режим Выйдите из полноэкранного режима
  • Измените каталог на каталог MyBlog.
cd MyBlog
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Создайте пустой Git-репозиторий.
git init
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Теперь нам нужно выбрать тему для использования с Hugo. Я выбрал тему от Jamstack Themes, а именно Bilberry Hugo. После выбора темы мы добавим ее в качестве субмодуля Git.
git submodule add https://github.com/Lednerb/bilberry-hugo-theme.git themes/bilberry-hugo-theme
Вход в полноэкранный режим Выход из полноэкранного режима
  • В выбранной вами теме могут потребоваться дополнительные шаги по настройке. В случае с темой, которую я использовал в этом примере, требуется выполнить несколько дополнительных шагов, которые задокументированы в репозитории GitHub. В частности, мне нужно было сделать следующее:
    • Удалить default.md из C:DataMyBlogarchetypes.
    • Скопируйте файл config.toml из C:DataMyBlogthemesbilberry-hugo-theme в C:DataMyBlog.

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

  • Создайте сообщение.
hugo new article/my-first-post.md
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Отредактируйте my-first-post.md в выбранной вами IDE. Вы должны найти его в C:DataMyBlogcontentarticle и поместить туда содержимое.

  • Запустите Hugo локально.
hugo server -D
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Откройте веб-браузер и посмотрите, как отображается содержимое, перейдя по адресу http://localhost:1313.

Настройка GitHub и коммит кода

  • Войдите в GitHub через веб-браузер и создайте новый репозиторий.
  • В командной строке нам нужно добавить репозиторий GitHub в качестве источника. Для этого выполните следующую команду:
git remote add origin https://github.com/<UserName>/<RepositoryName>.git
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание: Замените <UserName> и <RepositoryName>, используя данные, характерные для вашего репозитория GitHub.

  • Выберите ветку, с которой вы собираетесь связать текущую папку, например, master, а затем выполните следующее:
git branch -M master
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Теперь нам нужно выделить содержимое, которое мы хотим отправить в GitHub, зафиксировать изменения и затем отправить файлы в хранилище. Это делается следующим образом:
git add *
git commit -m "Initial Commit to Master"
git push -u origin master`
Войдите в полноэкранный режим Выйти из полноэкранного режима

Наконец, пришло время установить и настроить AWS Amplify

  • Войдите в AWS Management Console и перейдите к AWS Amplify.
  • На странице Все приложения нажмите Новое приложение & выберите Host web app.

  • На странице Getting Started with Amplify Hosting выберите GitHub & нажмите Continue.

  • На странице Install & Authorize AWS Amplify выберите Only select repositories и выберите репозитории, к которым вы хотите предоставить AWS Amplify доступ, а затем нажмите Install & Authorize.

  • На странице Add repository branch выберите Repository of the Blog, на который мы ранее зафиксировали репозиторий, и выберите Branch master.

  • На странице Configure build settings нажмите Next.

  • На странице Обзор нажмите Сохранить и развернуть.

  • Теперь AWS Amplify впервые развернет сайт на мастер-среде, и после завершения он будет выглядеть примерно так, как показано на скриншоте ниже.

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

  • Из командной строки или Powershell создайте дополнительную ветку в нашем репозитории, выполните постановку изменений, зафиксируйте изменения и отправьте на GitHub.
git checkout -b development
git add *
git commit -m "Initial Commit to Development"
git push -u origin development
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Вернитесь в AWS Console в Настройки приложения, разверните раздел Узнайте, как получить максимальную отдачу от Amplify Hosting и нажмите Установите тестовую версию вашего сайта, подключив функциональную ветку.

  • На странице Добавить ветвь репозитория выберите Ветвь разработки и нажмите Далее.

  • На странице Обзор нажмите Сохранить и развернуть.
  • Теперь AWS Amplify впервые развернет сайт в среде dev, и после завершения развертывания он будет выглядеть примерно так, как показано на скриншоте ниже.

Поскольку оба сайта (master & dev) являются общедоступными, мы можем захотеть защитить паролем среду dev на время тестирования новых функций.

  • Вернитесь в AWS Console в Настройки приложений, нажмите Защитить паролем ваш сайт.

  • Нажмите Управление доступом.

  • Измените параметр dev Access на Restricted — требуется пароль. Введите имя пользователя и пароль, затем подтвердите пароль. Нажмите Сохранить.
  • Вернитесь в AWS Console в Настройки приложения, нажмите Включить предварительные просмотры запросов.

  • Нажмите Включить предварительные просмотры.

  • Нажмите Установить приложение GitHub. В разделе Доступ к репозиториям выберите только выбранные репозитории, выберите репозиторий, который был создан ранее, а затем нажмите Сохранить. Закройте открывшуюся вкладку GitHub.

  • На странице Предварительный просмотр выберите основное окружение и нажмите Управление.

  • На странице Manage preview settings for master branch (Управление настройками предварительного просмотра для главной ветки) включите Enable Pull Request Previews (Включить предварительный просмотр заявок) и нажмите Confirm (Подтвердить).

Теперь, когда мы делаем коммиты в нашей ветке dev на GitHub, мы можем создавать Pull Request (PR) из GitHub, а AWS Amplify будет выполнять некоторые проверки PR перед тем, как вручную одобрить его для слияния с основной веткой.

Перед выполнением следующих шагов у вас должен быть зарегистрирован домен. В данном случае я уже зарегистрировал домен в Amazon Route 53 и создал хостинговую зону.

  • Вернувшись в AWS Console к настройкам приложения, нажмите Добавить пользовательский домен с бесплатным SSL-сертификатом.

  • Нажмите Добавить домен.

  • На странице управления доменом выберите зарегистрированное доменное имя и нажмите Настроить домен.

  • На странице управления доменом добавьте субдомены в соответствии с вашими требованиями и нажмите Сохранить.

Затем AWS Amplify создаст несколько DNS-записей (A & CNAME) в зоне хостинга в Amazon Route 53, зарегистрирует SSL/TLS сертификат в AWS Certificate Manager, а также создаст и настроит дистрибутив Amazon CloudFront.

Счастливого блоггинга!

Оцените статью
devanswers.ru
Добавить комментарий