GitHub Pages теперь использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания кода, чтобы разработчики могли контролировать свою авторскую структуру и развертывание. GitHub Pages — это мощный вариант для хранения статического контента по следующим причинам:
- Это бесплатно.
- Это упрощает совместную работу. Любой может открыть запрос на обновление сайта.
- Ваш репозиторий синхронизируется с любыми изменениями, которые вы внесли на сайт.
- Хотя GitHub Pages поставляется с доменным именем по умолчанию, например,
https://YOUR_USER_NAME.github.io/
, он поддерживает пользовательские домены. - Он использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания.
Команда GitHub сделала несколько стартовых рабочих процессов доступными для вас, так что вам не придется писать их с нуля, и вы можете использовать их как примеры для поддержки развертывания в других фреймворках. В настоящее время есть стартовые рабочие процессы для Next.js, Nuxt.js, Gatsby, Hugo, Jekyll и HTML.
Давайте узнаем, как размещать статические сайты, созданные с помощью Astro или любого рабочего процесса по вашему выбору, на GitHub Pages!
Обратите внимание, что для публикации сайта на GitHub Pages ваш репозиторий должен быть публичным.
После того как вы напишете код (используя фреймворк или статический генератор по вашему выбору) и сохраните его в репозитории, перейдите на вкладку настроек этого репозитория.
Нажмите Pages на левой боковой панели
В разделе сборка и развертывание выберите GitHub Actions
Создайте папку в корне вашего проекта под названием .github/workflows
.
Внутри папки .github/workflows
создайте настроенный рабочий процесс для развертывания указанного вами фреймворка на GitHub Pages (см. примеры в разделе ниже):
Пример рабочего процесса для Astro
name: Deploy Astro to GitHub Pages
on:
# Trigger the workflow every time you push to the `main` branch
push:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab on GitHub.
workflow_dispatch:
# Allow this job to clone the repo and create a page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Check out your repository using git
uses: actions/checkout@v2
- name: Use Node.js 16
uses: actions/setup-node@v2
with:
node-version: '16'
cache: 'npm'
# Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
- name: Install dependencies
run: npm ci
# Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
- name: Build Astro
run: npm run build --if-present
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: ./dist
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
Пример рабочего процесса для React
name: Deploy to React GitHub Pages
on:
# Trigger the workflow every time you push to the `main` branch
push:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab on GitHub.
workflow_dispatch:
# Allow this job to clone the repo and create a page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Check out your repository using git
uses: actions/checkout@v2
- name: Use Node.js 16
uses: actions/setup-node@v2
with:
node-version: '16'
cache: 'npm'
# Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
- name: Install dependencies
run: npm ci
# Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
- name: Build React
run: npm run build --if-present
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: ./build
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
Пример шаблона для любого статического генератора на ваш выбор
name: Deploy to “your frameworks” GitHub Pages
on:
# Trigger the workflow every time you push to the `main` branch
push:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab on GitHub.
workflow_dispatch:
# Allow this job to clone the repo and create a page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Check out your repository using git
uses: actions/checkout@v2
- name: Use “REPLACE WITH THE RUNTIME OF YOUR CHOICE”
uses: “REPLACE WITH THE ACTION THAT SETS UP THE RUN TIME OF YOUR CHOICE”
# Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
- name: Install dependencies
run: “REPLACE WITH COMMANDS TO INSTALL DEPENDENCIES”
# Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
- name: Build “YOUR STATIC GENERATOR HERE”
run: “REPLACE WITH YOUR BUILD COMMAND”
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: “REPLACE WITH YOUR BUILD OUTPUT FOLDER”
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
В течение нескольких секунд ваш Action начнет выполняться. Оно сгенерирует URL и в случае успеха развернет ваш статический сайт на GitHub Pages.
Перейдите по URL-адресу yourusername.github.io/your_repo_name
, чтобы посмотреть на ваш живой сайт!
- Проблемы: работа с путями к активам
- Пример
- blackgirlbytes / blackgyalbites-astro
- шаблон меню ресторана без прикосновений, размещенный на GitHub Pages
- blackgyalbites
- Шаблон для бесконтактных меню и статических страниц, построенных с помощью любого фреймворка, на GitHub Pages
- Сайт, созданный с помощью Astro для отображения меню ресторана, когда пользователи сканируют QR-код.
- Powered By GitHub Pages
- Дизайн и разработка
- Узнать больше
Проблемы: работа с путями к активам
Когда я впервые опубликовал свой сайт на GitHub Pages, я был озадачен и удивлен тем, что не смог увидеть ни изображений, ни PDF-файлов, хотя они присутствовали на локальном хостинге сайта. Это произошло потому, что GitHub Pages по-разному обрабатывает пути.
Например, если у меня PDF находится по такому относительному пути: assets/pdfs/menu-food.pdf
, то после размещения на GitHub Pages новый путь будет обновлен до {"ИМЯ РЕПОЗИТОРА"}/assets/pdfs/menu-food.pdf
.
Пример
Вот пример репозитория, который я создал с помощью этого метода
blackgirlbytes / blackgyalbites-astro
шаблон меню ресторана без прикосновений, размещенный на GitHub Pages
blackgyalbites
Шаблон для бесконтактных меню и статических страниц, построенных с помощью любого фреймворка, на GitHub Pages
Сайт, созданный с помощью Astro для отображения меню ресторана, когда пользователи сканируют QR-код.
Powered By GitHub Pages
Это демонстрация, показывающая разработчикам, что они могут создавать и размещать статические веб-сайты, используя любой фреймворк. Посмотрите другие примеры фреймворков, размещенных на GitHub Pages:
- HTML и CSS
- Next.js и Tailwind CSS
- Astro
Ссылка на живой сайт: https://blackgirlbytes.github.io/blackgyalbites-astro/
Дизайн и разработка
Все дизайны и элементы являются открытым исходным кодом и доступны бесплатно для всех желающих.
Принадлежит Ризель Скарлетт (@blackgirlbytes)
Дизайн разработан The Holistic Technologist
Иллюстрации Cuoc Doi Prints
Не стесняйтесь, копируйте, настраивайте и используйте в любых целях. Этот проект полностью с открытым исходным кодом и под лицензией MIT.
Шаблон дизайна меню: Canva
Загрузить активы и элементы дизайна: Google Drive
Узнать больше
- Посмотрите доклад Томми Берда об использовании GitHub Pages с Actions для развертывания сайтов Hugo за считанные секунды.
- Репозиторий и ReadMe для Deploy Pages
- Анонс изменений от GitHub
- Официальное сообщение в блоге GitHub
Посмотрите на YouTube этот замечательный ролик Кедаша, демонстрирующий, как использовать настроенный рабочий процесс для развертывания генератора статических сайтов на GitHub Pages!
Мне бы хотелось услышать ваши мысли о новых настраиваемых рабочих процессах для развертывания на GitHub Pages. Комментируйте ниже! Следите за GitHub и за мной на DEV, чтобы получать больше материалов, подобных этому!