使用 GitHub Pages 创建免触摸二维码菜单 blackgyalbites blackgyalbites blackgyalbites

2025-06-08

使用 GitHub Pages 创建非接触式二维码菜单

黑盖尔比

黑盖尔比

黑盖尔比

我使用 GitHub Pages 创建了一个免触二维码菜单，并使用各种框架（例如 Next.js、Tailwind CSS、Astro 和 React）构建了不同版本的菜单。菜单的灵感来自加勒比地区，包含非裔圭亚那美食，因为那是我父母的出生地。

用 HTML、Next.js 和 Astro 编写的菜单二维码

我使用 GitHub Pages 来托管这些网站，因为GitHub Pages 现在可以轻松发布使用任何静态网站生成器或框架构建的网站。

我一直没有充分利用 GitHub Pages

在过去三年中，餐厅通过用无触摸二维码菜单取代实体菜单，开创了创新和热情好客的新时代。二维码菜单的兴起让我很开心，因为我有点洁癖。当我经常光顾各种餐厅时，我发现它们都有一个共同点：餐厅将菜单存储在 S3 存储桶中，但这要花费几美分，积少成多。这让我很好奇，为什么开发人员不使用 GitHub Pages 来存储像 PDF 这样简单的东西？然后，我意识到我也犯了没有充分利用 GitHub Pages 的错误。自从 2018 年学习编程以来，我只使用 GitHub Pages 来托管我的第一个网站、我的第一个作品集和一个失败的博客。我也用它来教初学者如何发布他们的第一个网站。

GitHub Pages 是存储静态内容的强大选择，原因如下：

  • 它是免费的。
  • 它使协作变得简单。任何人都可以发起拉取请求来更新网站。
  • 您的存储库会与您对网站所做的任何更改同步。
  • 虽然 GitHub Pages 带有默认域名，https://YOUR_USER_NAME.github.io/但它支持自定义域名。
  • 它使用可定制的 GitHub Action 工作流进行构建和部署。
  • 由于 Pages 使用可定制的 GitHub Action 工作流来构建和部署您的代码，因此开发人员可以控制他们的创作框架和部署。

静态内容非常多，我们可以在 GitHub Pages 上快速发布，但由于缺乏曝光，我们选择了其他平台作为开发平台。

每个人都可以使用这些模板！

我在非营利性编程训练营 Resilient Coder 的毕业要求之一是至少找到一位自由职业客户。我当时压力很大，因为这是我的第一个付费项目，而且我可能应该用模板，因为它的设计不是最好的，但这仍然是一次很好的学习经历。

无论如何，我把每个版本的菜单都开源了，这意味着任何人都可以使用它！如果你是一位 Resilient Coder、#100Devs 的学生、自由开发者，或者只是好奇，你可以 fork 我的代码并根据你的喜好进行修改！我相信这些模板对那些为夫妻店搭建网站的人会很有帮助。

使用 HTML 和 CSS 构建的菜单的 GitHub 存储库

请注意，如果您在本地运行这些程序，您将看不到任何图像或 PDF。这是由于 GitHub Pages 在部署后处理路径的方式造成的。

GitHub 徽标 blackgirlbytes / blackgyalbites

无需触摸的餐厅菜单模板托管在 GitHub Pages 上

黑盖尔比

GitHub Pages 上用任何框架构建的非接触式菜单和托管静态页面的模板

网站截图，上面有 3 个按钮，分别为：食物菜单、饮料菜单和餐饮菜单。右侧是饮料菜单的截图

使用 HTML 和 CSS 构建的网站，当用户扫描二维码时显示餐厅菜单。

由 GitHub Pages 提供支持

这是一个演示，旨在向开发者展示如何使用任何框架构建和托管静态网站。查看 GitHub Pages 上托管的更多示例框架：

直播网站：https://blackgirlbytes.github.io/blackgyalbites

设计与开发

所有设计和元素都是开源的，任何人都可以免费使用。

所有者：Rizel Scarlett (@blackgirlbytes)

由整体技术专家设计

插图：Cuoc Doi Prints

欢迎随意 fork、复制、修改并用于任何用途。本项目完全开源，并遵循MIT 许可证。

菜单设计模板：Canva

下载资产和设计元素：Google Drive

blackgirlbytes 徽标


在 GitHub 上查看


使用 Next.js 和 Tailwind 构建菜单的 GitHub 仓库

GitHub 徽标 blackgirlbytes / blackgyalbites-nextjs

无需触摸的餐厅菜单模板托管在 GitHub Pages 上

黑盖尔比

GitHub Pages 上用任何框架构建的非接触式菜单和托管静态页面的模板

网站截图，上面有 3 个按钮，分别为：食物菜单、饮料菜单和餐饮菜单。右侧是饮料菜单的截图

使用 Next.js 和 Tailwind CSS 构建的网站，当用户扫描二维码时显示餐厅菜单。

由 GitHub Pages 提供支持

这是一个演示，旨在向开发者展示如何使用任何框架构建和托管静态网站。查看 GitHub Pages 上托管的更多示例框架：

现场链接：https://blackgirlbytes.github.io/blackgyalbites-nextjs/

设计与开发

所有设计和元素都是开源的，任何人都可以免费使用。

所有者：Rizel Scarlett (@blackgirlbytes)

由整体技术专家设计

插图：Cuoc Doi Prints

欢迎随意 fork、复制、修改并用于任何用途。本项目完全开源，并遵循MIT 许可证。

菜单设计模板：Canva

下载资产和设计元素：Google Drive

blackgirlbytes 徽标


在 GitHub 上查看


使用 Astro 构建的菜单的 GitHub 存储库

GitHub 徽标 blackgirlbytes / blackgyalbites-astro

无需触摸的餐厅菜单模板托管在 GitHub Pages 上

黑盖尔比

GitHub Pages 上用任何框架构建的非接触式菜单和托管静态页面的模板

网站截图，上面有 3 个按钮，分别为：食物菜单、饮料菜单和餐饮菜单。右侧是饮料菜单的截图

使用 Astro 构建的网站，当用户扫描二维码时显示餐厅菜单。

由 GitHub Pages 提供支持

这是一个演示，旨在向开发者展示如何使用任何框架构建和托管静态网站。查看 GitHub Pages 上托管的更多示例框架：

现场链接：https://blackgirlbytes.github.io/blackgyalbites-astro/

设计与开发

所有设计和元素都是开源的，任何人都可以免费使用。

所有者：Rizel Scarlett (@blackgirlbytes)

由整体技术专家设计

插图：Cuoc Doi Prints

欢迎随意 fork、复制、修改并用于任何用途。本项目完全开源，并遵循MIT 许可证。

菜单设计模板：Canva

下载资产和设计元素：Google Drive

blackgirlbytes 徽标


在 GitHub 上查看


如何将使用静态 HTML 构建的网站发布到 GitHub Pages

在存储库中创建和存储 HTML 后，导航到该存储库的设置选项卡。

图片描述

点击左侧边栏的页面

图片描述

在构建和部署下，选择 GitHub Actions

图片描述

这将根据您存储库中的代码为您建议一些工作流程。您可以选择静态 HTML。

图片描述

点击“配置”将引导您进入预制的工作流程。您可以随意查看 YAML 文件，根据自己的喜好进行调整，然后提交代码。

图片描述

几秒钟后，你的 Action 就会开始运行。它会生成一个 URL，如果成功的话，会将你的静态网站部署到 GitHub Pages。

图片描述

前往您命名的 URLyourusername.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 Actions

图片描述

这将根据您仓库中的代码为您推荐一些工作流程。您可以选择与您的代码库兼容的工作流程。

图片描述

点击“配置”将引导您进入预制的工作流程。您可以随意查看 YAML 文件，根据自己的喜好进行调整，然后提交代码。

图片描述

几秒钟后，你的 Action 就会开始运行。它会生成一个 URL，如果成功的话，会将你的静态网站部署到 GitHub Pages。

图片描述

前往您命名的 URLyourusername.github.io/your_repo_name来查看您的实时网站！

图片描述

如何使用自定义工作流程在 GitHub Pages 上发布网站

请注意，您的存储库必须是公开的才能在 GitHub 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

您选择的任何静态生成器的示例模板

    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
Enter fullscreen mode Exit fullscreen mode

几秒钟后，你的 Action 就会开始运行。它会生成一个 URL，如果成功的话，会将你的静态网站部署到 GitHub Pages。

图片描述

前往您命名的 URLyourusername.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

了解更多

感谢那些帮助过我的人！

我没有独立完成这个项目，所以我不能独揽所有功劳。

我要感谢那些帮助我设计模板的人：

另外，感谢那些在我的 Twitch 直播中观看并帮助我使用 Next.js 编写代码的人：

  • 谢谢你，AJ。你可以在 Twitter 上关注他@ajcwebdev。他有很多关于 web3、Jamstack 和开源的精彩内容。
  • 谢谢你，Mayank！你可以看看他们的博客。他们拥有丰富的前端知识。
  • 谢谢你，Ramon！你可以看看他精彩的Twitch 直播，他会在那里直播一些很酷的话题，比如 Web Assembly。
  • 另外，感谢@trollinchief、@dfluxty、@firebox_hd 以及所有收看节目的人。

感谢 GitHub 的同事，例如@tcbyrd、@yoannchaudet和@dylansmith，回答了我关于 GitHub Pages、Astro 和 Actions 的所有愚蠢问题。


观看 Kedasha 制作的这段精彩的 YouTube 短片，其中演示了如何使用自定义工作流程将静态站点生成器部署到 GitHub Pages！

我很想听听你对部署到 GitHub Pages 的新自定义工作流程的看法。请在下方评论！想了解更多类似内容，请在 DEV 上关注GitHub和我！

鏂囩珷鏉ユ簮锛�https://dev.to/github/create-a-no-touch-qr-code-menu-with-github-pages-288b
Devto 翻译
PREV
使用 Probot 开发我的第一个 GitHub 应用程序
NEXT
无需了解如何编码即可为开源做出贡献