将 Gatsby 站点部署到 GitHub Pages

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Gatsby现在非常火爆，这要归功于其背后那个才华横溢的团队，他们打造了这个既美观又易于使用的框架。如果你要搭建一个静态网站，我就不赘述为什么应该使用 Gatsby 了，网上已经有很多文章详细阐述了这一点。

这里有一篇很棒的文章，解释了为什么你应该使用 GatsbyJS 来构建静态网站。

以下是我的主要理由

• 绝佳的开发体验
• 预先优化
• 生成的网站速度超快
• 开箱即用的 GraphQL 支持

在任何位置部署 Gatsby 站点

由于 Gatsby 生成的是静态文件，因此您可以将其部署到任何地方。
但最简单快捷的选择是将您的网站部署到GitHub Pages。

GitHub Pages

您可以使用 GitHub Pages 免费托管静态网站。GitHub Pages 可以托管两种类型的网站。

1. 个人网站 - 仓库名称应为[此处填写仓库名称username.github.io]，网站可通过[此处填写访问地址]访问。https://username.github.io
2. 项目网站 - 仓库名称可以随意命名，网站可通过以下方式访问：https://username.github.io/repo-name

你只需要将静态网站推送到仓库的index.html根目录即可。

更多信息请访问GitHub Pages

将 Gatsby 站点部署到 GitHub Pages

运行命令时，Gatsby 会生成您的静态网站gatsby build。

这里唯一需要注意的是，GitHub Pages 要求你的网站文件位于根目录，但 Gatsby 会将网站文件生成在一个名为 `<directory>` 的目录中public。因此，我们不能将源代码和公共文件托管在同一个仓库中。

gh-pages是一个非常不错的软件包，它可以帮助你将静态网站从任何地方推送到 GitHub 仓库。

步骤

• yarn add gh-pages --dev
• 在项目根目录创建一个新目录，并在该目录中scripts创建一个文件。deploy-github.jsscripts
• 将此代码添加到deploy-github.js

const ghpages = require('gh-pages')

// replace with your repo url
ghpages.publish(
  'public',
  {
    branch: 'master',
    repo: 'https://github.com/flexdinesh/flexdinesh.github.io.git',
  },
  () => {
    console.log('Deploy Complete!')
  }
)

• deploy:github在以下位置添加一个新的 npm 脚本package.json

"deploy:github": "npm run build && node ./scripts/deploy-github"

• 运行脚本，您的静态网站将在几秒钟内启动并运行。

注意：运行该命令时，系统会要求您在发布之前在命令行中输入您的 GitHub 凭据。

如果您需要更多资料，可以查看我的个人网站Dinesh Pandiyan - Portfolio的源代码。该网站已部署到 Netlify 和 Github Pages 平台。

如果你正在寻找一个好的 Gatsby 入门模板，我维护了一个预先配置好的Gatsby Boilerplate样板项目。如果我想搭建一个新的 Gatsby 网站，我通常会 fork 这个仓库。

盖茨比式快乐！🔥