如何在 GitHub Pages 上托管 Hugo 或 Next.js 网站

黑盖尔比

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 的入门工作流程。

让我们学习如何在 GitHub Pages 上托管使用 Hugo、Next.js 或 Gatsby 构建的静态网站！

在存储库中创建并存储 Next.js、Nuxt.js、Gatsby、Hugo、Jekyll 或 HTML 后，导航到该存储库的设置选项卡。

点击左侧边栏的页面

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

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

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

几秒钟后，你的 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

例子

这是我使用此方法构建的示例存储库

了解更多

• 观看 Tommy Byrd 的演讲，了解如何使用 GitHub Pages 和 Actions 在几秒钟内部署 Hugo 网站
• 部署页面的存储库和自述文件
• GitHub 的变更日志公告
• GitHub官方博客文章

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