Рубрики
Uncategorized

Развернуть и хостить Hugo Static Site на Azure

👋 привет! Я хотел провести этот сайт на хранилище Azure Blob, и я нашел это решение. Это создано с … Tagged с Azure, Git, DevOps, WebDev.

👋 привет! Я хотел провести этот сайт на хранилище Azure Blob, и я нашел это решение. Это создано с Hugo. Я использую Gitlab CI, чтобы развернуть его на сервер.

🌊 Настройка статического размещения сайта на Azure

  1. Итак, во-первых, что вам нужно, это создать аккаунт Azure. Когда вы закончите, тогда перейдите к Azure Portal и создайте учетную запись хранения
  2. Найдите свой аккаунт для хранения
  3. На панели меню (слева) найдите «Статический сайт» и выберите Включено Чтобы включить это.
  4. Настроить пути для Индекс документ за. Пример index.html и за Ошибка документа 404.html Отказ Нажмите Сохранить Вообще, вы настроили ваше лазурное хранилище на серверные статические сайты.

🕸 Пользовательский адрес сайта

Следующее, что вам нужно, это настроить записи CNAME на случай, если вы хотите использовать свой домен. 💡 Azure обслуживает вашу страницу под http, но я хотел использовать HTTPS Итак, я использую DNS CloudFlare, которая проксирует данные для хранения Azure Blob. В этом случае вам необходимо проверить домен косвенно (не закреплено). Так Давайте создавать 2 новых записи CNAME.

  1. Снова пойти в Azure Portal и найдите свою учетную запись хранения.
  2. В панели меню в разделе «Настройки» найдите свойства.
  3. Прокрутите вниз и найдите Статический сайт раздел. Скопируйте одну из основных или вторичных конечных точек.
  4. Настройте записи CNAME в следующем
Авто www. да { Storage_name} -secondary.z1.web.core.windows.net.
Авто asverify.www.www. Нет { Storage_name} -secondary.z1.web.core.windows.net.

После того, как вы закончите вернуться к Azure Portal

  1. Найти Пользовательский домен в панели меню
  2. В доменном имени написать www.yourdomain.tld и проверьте косвенную проверку.
  3. Нажмите Сохранить

🛳 Развертывание вашего сайта

Как я писал выше, я использую Hugo, чтобы построить этот сайт, поэтому следующее является примером того, как развернуть сайт для Azure. После того, как некоторые изменения могут быть использованы для любого сайта.

В порядке. Если у вас есть ваш сайт создать .gitlab-ci.yml.

Добавьте там раздел сборки. Это пример для Уго. Точный скрипт, который я использую на этом сайте

image: maymeow/hugo-builder # or any other hugo image you trust

stages:
  - build
  - deploy

# Build site with hugo and upload cache and artifacts
build: # change name to pages if you wat to use gitlab pages
  stage: build
  cache:
    key: themaymeow-com-build
    paths:
      - public
    policy: push
  script:
    - hugo --config ./production.config.toml --enableGitInfo
  artifacts:
    expire_in: 1 week
    paths:
      - public
  only:
    - master
  # Uncomment if your GitLab runner need tags and change them how you need
  # tags:
  #   - docker
  #   - digitalocean

РЕПО для изображения Hugo Builder на моем Аккаунт GitHub Отказ

Далее добавьте внизу на ваш .gitlab-ci.yml этап для развертывания в Azure. Сценарий основан на этот Отказ 🙏

# deploying site to azure storage
deploy to azure:
  stage: deploy
  image: microsoft/azure-cli
  cache:
    key: themaymeow-com-build
    paths:
      - public
    policy: pull
  dependencies:
    - pages
  script:
    - az storage blob delete-batch -s "\$web" --connection-string $AZ_STORAGE_CONNECTION_STRING
    # Change public to required folder name
    - az storage blob upload-batch -d "\$web" -s public --connection-string $AZ_STORAGE_CONNECTION_STRING
  only:
    - master
  # tags:
  #   - docker
  #   - digitalocean

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

Далее необходимо получить строку Azure Connection для своей учетной записи хранения и установить его на Az_storage_connection_string Для CI/CD на вашем GitLab.

⚙ Настройка CI/CD

  1. Еще раз пойти в Azure Portal и найдите свою учетную запись хранения.
  2. Найти Ключи доступа На панели меню
  3. Скопируйте одну из ваших соединительных строк
  4. Перейдите в свой экземпляр GitLab и найдите свой проект
  5. На панели меню открыть Настройки Затем нажмите на CI/CD.
  6. Найти переменные и нажмите Расширять
  7. Нажмите Добавить переменную
  8. В полевой области написать Az_storage_connection_string и значение полей вставки строки подключения
  9. (Необязательно) Проверьте Защитите переменную Если вы хотите, чтобы эта переменная можно использовать только с защищенными ветвями (мастер защищен по умолчанию)
  10. Нажмите Добавить переменную

Хорошо, это конфигурация для CI/CD, поэтому вернитесь к своему редактору.

  1. 🌠 совершить
  2. ⬆ Нажмите изменения на свой сервер
  3. ⏱ подождите некоторое время, пока Gitlab не сделает свою работу
  4. 🎉 Наслаждайтесь

Ну это все. Вот как вы можете развернуть вашу страницу на Azure. Если у вас есть несколько вопросов, вы можете отправить мне электронное письмо (адрес находится на домашней странице).

Увидимся позже 👋.

Фото Тодд Димеран на Бессмысленно

Первоначально опубликовано на Themaymeow blog

Оригинал: «https://dev.to/maymeow/deploy-and-host-hugo-static-site-on-azure-53om»