Рубрики
Uncategorized

Действия и страницы GitHub

Действия GitHub были на моем радаре некоторое время. Недавно у меня была возможность поработать над некоторыми операциями CI/CD, используя BitBucket и AWS. Имея в виду это вдохновение, я начал с еще одного нового проекта. Tagged WebDev, DevOps, Node, производительность.

Некоторое время я хотел копаться в действиях GitHub. Это было что -то на моем радаре около года.

Недавно, когда я взломал боковой проект, я получил возможность поработать над некоторыми операциями CI/CD, используя BitBucket и AWS S3 в качестве веб-сайта. Как примечание, я нашел Потрясающая статья При развертывании от GitHub в AWS S3.

Имея в виду все это вдохновение, я начал с еще одного нового проекта.

Пока я думаю об этом, позвольте мне сказать, что это статья о моем путешествии …

  1. Так что я могу вспомнить, где я сломал вещи, когда я попробую это снова в будущем.
  2. Так что я надеюсь дать кому -то информацию и, возможно, даже поощрять некоторое исследование.

GitHub Pages

Когда я начал этот проект, я хотел посмотреть, используя страницы GitHub. Я видел несколько статей о них, в том числе о том, как разместить свой статический сайт с GitHub Med Amine FH.

Это казалось логичным смотреть на них.

Сначала я начал с GitHub Pages и понял, что у меня есть варианты:

  • Пользователь или сайт организации
  • Сайт проекта

Не уверен, на что я смотрел, я прочитал оба набора инструкций и узнал, что …

  • Пользователь или сайт организации привести к https://username.github.io и
  • Сайт проекта был в https://username.github.io/repository

… Это показало мне, что я хочу поиграть со вторым вариантом, создавая статический сайт против одного репозитория.

Итак, следуя указаниям, я создал репозиторий с именем Действия-тест что, казалось, описывает направление, которое я хотел пойти.

Следуя указаниям, я создал репозиторий и вручную вошел в следующее как index.html на сайте.


  
  
    
Hello World!

Я знаю … не слишком креативно; Я просто хотел посмотреть, сработает ли это.

Затем я направился на страницы настроек> и установил источник на Филиал: Main и /(корень) Анкет После того, как я сохранил, сообщение показало, что оно готовится опубликовать репозиторий. После того, как несколько раз освежалось, сообщение указывалось, что сайт был опубликован, и я последовал по ссылке, чтобы увидеть мой удивительный сайт.

Действия GitHub

Теперь, когда я доказал, что смогу заставить это работать, я отправился на поиск некоторых действий, которые позволили бы мне выдвигать код и попросить конвейер CI/CD генерировать страницу!

Одна из первых вещей, которые я нашел, была Github Marketplace … Мне определенно нужно провести там больше времени.

Затем я наткнулся на GitHub страниц действия на рынке. На самом деле было несколько … Я выбрал это на основе количества последователя и частоты развертывания кода.

Есть довольно много способов использования этого кода в документации; Я остановился на Статические генераторы сайтов с node.js , вспоминая старый проект, который я создал с помощью Nodejs для генерации грубой страницы … Это дало мне что -то более захватывающее, чем HTML выше.

Мой следующий шаг — создать файл YAML. Я нажал кнопку «Использовать последнюю версию» в верхней части и имел код, чтобы убедиться, что я использовал правильную версию. Затем я следовал по ссылке выше и быстро построил файл в .github/workflows/gh-pages.yml …

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3.7.3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Я не собираюсь вдаваться в подробное объяснение кода выше … Уверен, я понимаю достаточно. Я видел, что он использует узел 14, что NPM CI и NPM Run Build Анкет И, хотя я должен был узнать, что npm ci делает, все это было довольно прямо.

Со времени старого проекта, который я хотел использовать, вызванный NPM Run Build Чтобы сгенерировать окончательный код, все мои изменения вступили в последнюю часть этого кода. Я изменил …

  • использует строка, чтобы соответствовать последней версии
  • publish_dir строка в соответствии с Dist Папка мой код сгенерирован.

Результаты

Совместив весь этот код вместе с копией всего моего старого кода проекта, я наставил … чтобы посмотреть действия, рабочие процессы запускаются (если вы сможете посмотреть на мой репозиторий, вы увидите, что я выдвинул версию перед сохранением Ямл файл и смотрел, что он не удается).

Очень быстро у меня было что -то построение. Мне пришлось вручную установить настройки> страницы и установить источник на Филиал: GH-Pages и /(корень) … Эта ветвь была создана кодом действия выше содержимого Dist Папка описана.

После всего этого волнения я нажал на ссылку …

Провал

… Чтобы увидеть страницу 404 (потратьте в любое время на GitHub, и вы знаете, на что я смотрю.

Чтобы сделать длинную историю (ожидая, освежающую и поиск с моей стороны), я обнаружил, что моему HTML нужен ярлык. Без этого тега страница не отображалась.

Резюме

Процесс создания моего Статическая страница репозитория был довольно прямо. Это был веселый и полезный эксперимент … Есть что -то удовлетворительное, когда вы видите, как трубопровод работает, и делаете что -то ожидаемое, зная, что вы можете повторить этот шаблон в любое время и любое количество раз, чтобы правильно.

Я абсолютно уверен, что у меня есть больше, чтобы узнать, и больше статей для написания … пока, вот Репо Анкет

Оригинал: «https://dev.to/rfornal/github-actions-and-pages-2fba»

Читайте ещё по теме: