Deploy Hugo With Github Actions and Pages

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Привіт!

Хочу показати, як можна деплоїти hugo вебсайт в github pages за допомогою github actions. Саме так я деплою свій сайт.

Install Hugo

Hugo можна скачати з GitHub. І покласти binary в файл в потрібну локацію.

GitHub setup

В github потрібно створити два репозиторії, в одному будуть зберігатись .md файли та тема (content-mpostument в моєму випадку), в іншому буде використовуватись для github pages, в який буде деплоїтись сайт, згенерований hugo (mpostument.github.io).

В mpostument.github.io код буде деплоїтись через github actions. Руками зміни сюди вноситись не будуть.

За допомогою hugo створю новий сайт. Буде створена нова директорія hugodemo, в ній ініціалізую git-репозиторій та додаю remote на content-mpostument.

hugo new site hugodemo
cd hugodemo
git init
git remote add origin git@github.com:mpostument/content-mpostument.git

Тепер потрібно вибрати тему для сайту. Теми можна подивитись на themes.gohugo.

Для свого сайту я обрав тему Terminal. Тему можна скачати архівом і розпакувати в папку themes або додати як submodule. Я добавлю як submodule для того, щоб завжди мати останню версію теми.

git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal.

Зазвичай до кожної теми йде приклад конфігураційного файлу. Я скопіюю його з github-сторінки і збережу в файлі config.toml. Далі можна його підлаштовувати під свої потреби.

Тепер можна запустити сайт і подивитись, як він виглядатиме hugo serve -D

Github Actions

Для того, щоб GitHub actions працював, в корені репозиторія потрібно створити папку .github/workflows, в якій створити yml-файл з конфігурацією для Actions. В on секції я вказую запускати білд тільки на push в master бренчу.

В steps я викликаю по черзі декілька actions. Починається pipeline з клонування репозиторія. Після цього я викликаю git submodule update --init --recursive для того, щоб оновити тему за допомогою submodule. Наступним кроком встановлюю потрібну версії hugo та викликаю hugo --minify для того, щоб згененрувати статичний сайт з .md файлів та теми. І останім кроком я деплою контент з ./public директорії. Вона з’являється після виконання команди hugo --minify. Як параметри також потрібно передати ім’я git користувача, емейл, бренчу та репозиторій, в яку здійснювати деплой.

name: CI
on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Git checkout
        uses: actions/checkout@v2.3.3

      - name: Update theme
        run: git submodule update --init --recursive

      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2.4.13
        with:
          hugo-version: '0.76.5'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3.7.3
        with:
          personal_token: ${{ secrets.GH_TOKEN }}
          external_repository: mpostument/mpostument.github.io
          publish_dir: ./public
          user_name: mpostument
          user_email: 777rip777@gmail.com
          publish_branch: master

Тепер це можна закомітити в github репозиторій і при мерджі в мастер білд має запуститись.

Як тільки білд пройшов, нові файли мають одразу зявитись в Github Pages репозиторії mpostument.github.io

Через декілька хвилин вебсайт буде доступний за адресом mpostument.github.io