Создание бесконтактного меню QR-кода с помощью GitHub Pages

Я создал неприкасаемое меню QR-кода с помощью GitHub Pages, и я построил различные версии меню с помощью различных фреймворков, таких как Next.js и Tailwind CSS, Astro и React. Меню выполнено в карибском стиле с афро-гуйанскими блюдами, поскольку это родина моих родителей.

  • HTML-меню
  • Веб-сайт Next.js и TailwindCSS
  • Веб-сайт Astro
  • Вы также можете ознакомиться с генератором QR-кодов, который я создал с помощью React, по этой ссылке.

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

Содержание
  1. Я недостаточно использовал GitHub Pages
  2. Все могут использовать эти шаблоны!
  3. Репозиторий GitHub для меню, построенного на HTML и CSS
  4. blackgirlbytes / blackgyalbites
  5. шаблон меню ресторана, размещенный на GitHub Pages
  6. blackgyalbites
  7. Шаблон для меню ресторана No-touch и размещение статических страниц, построенных на любом фреймворке, на GitHub Pages
  8. Сайт, построенный на HTML & CSS для отображения меню ресторана, когда пользователи сканируют QR-код.
  9. Powered By GitHub Pages
  10. Дизайн и разработка
  11. Репозиторий GitHub для меню, созданного с помощью Next.js и Tailwind
  12. blackgirlbytes / blackgyalbites-nextjs
  13. шаблон меню ресторана без прикосновений, размещенный на GitHub Pages
  14. blackgyalbites
  15. Шаблон для меню ресторана No-touch и хост статических страниц, построенных с помощью любого фреймворка на GitHub Pages
  16. Сайт, созданный с помощью Next.js и Tailwind CSS для отображения меню ресторана, когда пользователи сканируют QR-код.
  17. Powered By GitHub Pages
  18. Дизайн и разработка
  19. Репозиторий GitHub для меню, созданного с помощью Astro
  20. blackgirlbytes / blackgyalbites-astro
  21. шаблон меню для ресторана, размещенный на GitHub Pages
  22. blackgyalbites
  23. Шаблон для бесконтактных меню и статических страниц, построенных с помощью любого фреймворка на GitHub Pages
  24. Сайт, построенный на Astro для отображения меню ресторана при сканировании пользователями QR-кода.
  25. Powered By GitHub Pages
  26. Дизайн и разработка
  27. Как опубликовать сайт, созданный с помощью статического HTML, на GitHub Pages
  28. Как опубликовать сайт на GitHub Pages с помощью начального рабочего процесса
  29. Как опубликовать сайт на GitHub Pages с помощью настроенного рабочего процесса
  30. Проблемы: работа с путями к активам
  31. Подробнее
  32. Спасибо тем, кто помогал мне!

Я недостаточно использовал GitHub Pages

За последние три года рестораны открыли новую эру инноваций и гостеприимства, заменив физические меню на меню с QR-кодами. Появление меню с QR-кодами порадовало меня, потому что я немного страдаю гермафобией. Посещая различные рестораны, я заметил, что все они имеют одну общую черту: рестораны хранят свои меню в ведрах S3, но это стоит несколько центов, а центы растут. Это заставило меня задуматься, почему разработчики не используют GitHub Pages для хранения такого простого документа, как PDF? Затем я понял, что и сам виноват в том, что недостаточно использую GitHub Pages. С тех пор как я научился кодить в 2018 году, я использовал GitHub Pages только для размещения своего первого сайта, своего первого портфолио и неудачного блога. Я также использовал его для обучения новичков тому, как опубликовать свой первый сайт.

GitHub Pages — это мощный вариант для хранения статического контента по следующим причинам:

  • Это бесплатно.
  • Это упрощает сотрудничество. Любой может открыть запрос на обновление сайта.
  • Ваш репозиторий синхронизируется с любыми изменениями, которые вы внесли на сайт.
  • Хотя GitHub Pages поставляется с доменным именем по умолчанию, например, https://YOUR_USER_NAME.github.io/, он поддерживает пользовательские домены.
  • Pages использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания.
  • Поскольку Pages использует настраиваемые рабочие процессы GitHub Action для сборки и развертывания кода, разработчики имеют контроль над авторским фреймворком и развертыванием.

Существует так много статического контента, который мы могли бы быстро опубликовать на GitHub Pages, но из-за недостатка возможностей мы, как разработчики, предпочли другие платформы.

Все могут использовать эти шаблоны!

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

В любом случае, я сделал каждую версию своего меню с открытым исходным кодом, так что это означает, что любой может использовать его! Если вы Resilient Coder, студент #100Devs, внештатный разработчик или просто любопытный, вы можете использовать мой код и дорабатывать его, как вам захочется! Я считаю, что эти шаблоны могут быть полезны для тех, кто создает сайты для маленьких и маленьких ресторанов.

Репозиторий GitHub для меню, построенного на HTML и CSS

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

blackgirlbytes / blackgyalbites

шаблон меню ресторана, размещенный на GitHub Pages

blackgyalbites

Шаблон для меню ресторана No-touch и размещение статических страниц, построенных на любом фреймворке, на GitHub Pages

Сайт, построенный на HTML & CSS для отображения меню ресторана, когда пользователи сканируют QR-код.

Powered By GitHub Pages

Это демонстрация, показывающая разработчикам, что они могут создавать и размещать статические веб-сайты, используя любой фреймворк. Посмотрите другие примеры фреймворков, размещенных на GitHub Pages:

  • HTML и CSS
  • Next.js и Tailwind CSS
  • Astro

Живой сайт: https://blackgirlbytes.github.io/blackgyalbites

Дизайн и разработка

Все дизайны и элементы являются открытым исходным кодом и доступны бесплатно для любого пользователя.

Принадлежит Ризель Скарлетт (@blackgirlbytes)

Дизайн разработан The Holistic Technologist

Иллюстрации Cuoc Doi Prints

Не стесняйтесь, копируйте, настраивайте и используйте в любых целях. Этот проект полностью с открытым исходным кодом и под лицензией MIT.

Шаблон дизайна меню: Canva

Загрузить активы и элементы дизайна: Google Drive

Посмотреть на GitHub

Репозиторий GitHub для меню, созданного с помощью Next.js и Tailwind

blackgirlbytes / blackgyalbites-nextjs

шаблон меню ресторана без прикосновений, размещенный на GitHub Pages

blackgyalbites

Шаблон для меню ресторана No-touch и хост статических страниц, построенных с помощью любого фреймворка на GitHub Pages

Сайт, созданный с помощью Next.js и Tailwind CSS для отображения меню ресторана, когда пользователи сканируют QR-код.

Powered By GitHub Pages

Это демонстрация, показывающая разработчикам, что они могут создавать и размещать статические веб-сайты, используя любой фреймворк. Посмотрите другие примеры фреймворков, размещенных на GitHub Pages:

  • HTML и CSS
  • Next.js и Tailwind CSS
  • Astro

Ссылка на живой сайт: https://blackgirlbytes.github.io/blackgyalbites-nextjs/

Дизайн и разработка

Все дизайны и элементы имеют открытый исходный код и доступны бесплатно для любого использования.

Принадлежит Ризель Скарлетт (@blackgirlbytes)

Разработано The Holistic Technologist

Иллюстрации Cuoc Doi Prints

Не стесняйтесь, копируйте, настраивайте и используйте в любых целях. Этот проект полностью с открытым исходным кодом и под лицензией MIT.

Шаблон дизайна меню: Canva

Загрузить активы и элементы дизайна: Google Drive

Посмотреть на GitHub

Репозиторий GitHub для меню, созданного с помощью Astro

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

Как опубликовать сайт, созданный с помощью статического HTML, на GitHub Pages

После создания и сохранения HTML в репозитории перейдите на вкладку настроек этого репозитория.

Щелкните Страницы на левой боковой панели

В разделе Сборка и развертывание выберите Действия GitHub.

Это предложит вам несколько рабочих процессов на основе кода в вашем хранилище. Вы можете выбрать Static HTML.

Нажав кнопку configure, вы попадете в готовый рабочий процесс. Не стесняйтесь просмотреть YAML, подправить его в соответствии с вашими предпочтениями и зафиксировать код.

Через несколько секунд ваш Action начнет выполняться. Оно сгенерирует URL и в случае успеха развернет ваш статический сайт на GitHub Pages.

Перейдите по URL-адресу yourusername.github.io/your_repo_name, чтобы посмотреть на ваш живой сайт!

Как опубликовать сайт на GitHub Pages с помощью начального рабочего процесса

Команда GitHub сделала доступными несколько стартовых рабочих процессов, поэтому вам не придется писать их с нуля, и вы можете использовать их в качестве примеров для поддержки развертывания в других фреймворках. В настоящее время существуют стартовые рабочие процессы для Next.js, Nuxt.js, Gatsby, Hugo, Jekyll и HTML.

После создания и сохранения Next.js, Nuxt.js, Gatsby, Hugo, Jekyll или HTML в репозитории перейдите на вкладку настроек этого репозитория.

Щелкните Страницы на левой боковой панели

В разделе Сборка и развертывание выберите Действия GitHub.

Это предложит вам несколько рабочих процессов на основе кода в вашем хранилище. Вы можете выбрать тот рабочий процесс, который совместим с вашей кодовой базой.

Нажав кнопку configure, вы перейдете к готовому рабочему процессу. Не стесняйтесь просмотреть YAML, откорректировать его в соответствии с вашими предпочтениями и зафиксировать код.

Через несколько секунд ваш Action начнет выполняться. Оно сгенерирует URL и в случае успеха развернет ваш статический сайт на GitHub Pages.

Перейдите по URL-адресу yourusername.github.io/your_repo_name, чтобы посмотреть на ваш живой сайт!

Как опубликовать сайт на 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, чтобы проверить ваш живой сайт!

Проблемы: работа с путями к активам

Когда я впервые опубликовал свой сайт на GitHub Pages, я был озадачен и удивлен тем, что не смог увидеть ни изображений, ни PDF-файлов, хотя они присутствовали на локальном хостинге сайта. Это произошло потому, что GitHub Pages по-другому обрабатывает пути.

Например, если у меня есть PDF, живущий по такому относительному пути: assets/pdfs/menu-food.pdf, то после размещения на GitHub Pages обновите новый путь до {"REPOSITORY NAME"}/assets/pdfs/menu-food.pdf.

Подробнее

  • Посмотрите доклад Томми Берда об использовании GitHub Pages с Actions для развертывания сайтов Hugo за считанные секунды.
  • Репозиторий и ReadMe для Deploy Pages
  • Анонс изменений на GitHub

Спасибо тем, кто помогал мне!

Я не занимался этим проектом самостоятельно, поэтому не могу присвоить себе все заслуги.

Я хочу поблагодарить тех, кто помог мне разработать шаблон:

  • Спасибо, Элли! Вы можете найти их сайт по адресу https://holistictech.io/.
  • Спасибо, cuocdoiprints за иллюстрации! Вы можете найти их сайт по адресу https://www.cuocdoiprints.com/.

Также спасибо тем, кто смотрел и помогал мне кодить в Next.js на моем стриме в Twitch:

  • Спасибо, AJ. Вы можете следить за ним в Twitter по адресу @ajcwebdev. У него есть тонна отличного контента о web3, Jamstack и открытом исходном коде.
  • Спасибо, Маянк! Вы можете заглянуть в их блог. У них тонна глубоких знаний о фронтенде.
  • Спасибо, Рамон! Вы можете посмотреть его потрясающие стримы на Twitch, где он рассказывает о таких крутых темах, как Web Assembly.
  • Также спасибо @trollinchief, @dfluxty, @firebox_hd и всем остальным, кто был с нами.

Спасибо моим коллегам из GitHub, таким как @tcbyrd, @yoannchaudet и @dylansmith за ответы на все мои глупые вопросы о GitHub Pages, Astro и Actions.

Посмотрите на YouTube этот замечательный ролик Кедаша, демонстрирующий, как использовать настроенный рабочий процесс для развертывания генератора статических сайтов на GitHub Pages!

Мне бы хотелось услышать ваши мысли о новых настраиваемых рабочих процессах для развертывания на GitHub Pages. Комментируйте ниже! Следите за GitHub и за мной на DEV, чтобы получать больше материалов, подобных этому!

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