如何创建 GitHub 存储库

什么是 GitHub 存储库？

GitHub 存储库可用于存储开发项目。它可以包含文件夹和任何类型的文件（HTML，CSS，JavaScript，文档，数据，图像）。

什么是网络化？

Netlify是一个平台，允许Web开发人员在云中托管他们的网站，而无需管理后端的任何服务器。

如何创建 GitHub 存储库

步骤 1

为此，第一步是在 GitHub 上创建一个存储库，您将在其中保存您网站的源代码。这是一个分步指南。

• 登录到您的 GitHub 帐户，如果没有帐户，请创建一个帐户
  。您可以在此处注册

• 登录后，选择“存储库”选项以进入
  存储库页面。如果这是您的第一个仓库，则 GitHub 帐户的左上角
  有一个按钮，上面写着“创建仓库”

 

但是，如果您不熟悉GitHub，那么在GitHub的左上角，有一个绿色按钮，上面写着“新建”

 

• 为您的仓库指定一个与您的网站名称相对应的名称。
  如果您的网站名为“我的新存储库”，则可以将存储库命名为“my-new-repo”或任何其他合适的名称。

• 在为您的存储库提供名称时，它也告诉您提供描述，以便您为您的网站提供上下文。
  请注意，描述部分是可选的，您可以决定
  忽略它。

• 接下来要做的是选择是要使存储库公开
  还是私有。但在这种情况下，我建议
  你把它公之于众。

• 您可以选择添加其他选项，例如“自述文件”
  ，但在这种情况下，我会说您现在应该忽略它。

 

• 向下滚动到此存储库页面的最后一部分，然后单击 “创建存储库”以创建新的 GitHub 存储库。

步骤 2

现在您已经为您的网站设置了一个 GitHub 存储库，是时候将您的网站代码推送到它了。这将使您网站的源代码可用于在Netlify上部署。

请注意，创建新存储库时，Git Hub 上会显示一条说明，说明如何在终端或命令提示符下执行每个命令。

 

下一步该怎么做？

• 在本地计算机或 VSCode 上的终端上打开命令提示符

• 转到存储网站代码的目录。
  确保已使用“git init”命令在此目录中创建本地
  Git 存储库。

  git init

• 运行以下命令，将网站代码中的所有文件和文件夹添加到 Git 存储库：

  git add .

这个特定的命令使你的vs代码上的文件变成绿色，这意味着它已准备好保存到git中。请注意，我之前提到过自述文件不是必需的。

现在，该文件已添加到 git 版本控制系统并且 git 识别它，然后可以保存该文件并将其推送到云中。

• 在保存更改之前创建描述性提交消息 到 Git 存储库。例如：

git commit -m "my new repo"

请注意，这里的“m”表示消息，它可以帮助您了解在特定项目中进行更改的点。

• 确定您要推送到的分支，因为每个 GitHub 存储库至少有一个分支将用作主分支 分支。 这就是为什么我们称它为“主要”。因此，要执行此操作，请按照使用 下面的命令;

git branch -M main

现在完成此操作，您根本不应该收到任何错误。

• 以下命令应用于链接本地 Git 存储库到云 GitHub 存储库：

git remote add origin https://github.com/ommahhhh/my-new-repo.git

• 并不是说所有这些都已经完成，我们现在可以使用
  以下命令将代码
  从您的本地仓库推送到 GitHub 仓库：

  git push -u origin main

使用此命令，您的工作将推送到远程 GitHub 存储库的主分支。

命令完成后，您的网站代码将发布到 GitHub 存储库。为了确保您的所有项目文件都已正确上传，您现在可以返回到您建立存储库的 GitHub 页面并重新加载页面，在那里您将看到您的存储库已成功推送。

这是来自 Zuri 团队的 Youtube 视频，演示了如何在 GitHub 上创建存储库 https://youtu.be/0FaJF4t5Kfo

如何在网络上托管和部署

步骤 1

在Netlify上托管您的网站之前，您需要创建一个Netlify帐户并将其链接到您的GitHub。

• 开放式 https://app.netlify.com/

• 要注册新帐户，请单击网站上的“注册”按钮
  。

• 然后，您可以使用您的 GitHub 帐户注册，或通过提供您的电子邮件地址和
  密码来建立一个
  新的 Netlify 帐户。无论哪一个适合你都可以。

 

请注意，如果您使用 GitHub 帐户注册，您将被带到一个页面，您可以在其中授权 Netlify 访问您的 GitHub 存储库。此权限允许 Netlify 直接从您的 GitHub 存储库启动您的网站，这正是我们想要发生的事情，因此我强烈建议您使用您的 GitHub 注册。

• 现在您已经注册并且您的Netlify帐户已经 由您的 GitHub 帐户授权，您将被重定向 到网络化。

步骤 2

现在您已成功创建了一个 Netlify 帐户，并且能够将您的 GitHub 帐户与其连接，那么下一步是什么？

在Netlify上部署您的网站

这是有关如何在Netlify上部署网站的分步指南;

• 导航到您的 Netlify 仪表板。

• 当您在仪表板上时，单击“站点”按钮。
  然后在右上角，您将看到一个显示“添加新
  站点”的按钮。

 

通过单击“添加新站点按钮”，它将开始使用 GitHub 存储库创建新站点的过程。

• 单击按钮后，您将看到状态的选项;

  1. Import an existing project

  2. Start from a template

  3.Deploy manually

请注意，您可以使用上面提到的任何选项，但我建议您使用第一个选项“导入现有项目”

• 单击“导入现有项目”，您将看到一个列表 在当前可访问的 Git 提供程序中，选择 GitHub 从列表中。

 

• 现在您已经点击了 GitHub，将检索您的 GitHub 存储库列表，然后它会告诉您选择一个
  存储库。
  请注意，有一个搜索框显示“搜索存储库”

• 单击搜索框并搜索您在 GitHub 存储库上为网站提供的确切存储库
  名称（如果您不
  搜索确切的名称，它不会在您的 Netlify 上弹出）

• 现在，您可以选择包含要部署的网站的存储库。

• 现在存储库已显示在您的 Netlify 上，单击它，向下滚动一点以查看部署设置出现在同一页面上，
  设置是;

 1. Base directory

 2. Build command

 3. Publish directory

这些只是您可以在此处设置的一些设置。虽然我会说你应该安全地忽略选项并依靠默认设置来运行，但在某些情况下，你可以更改它们以满足你的项目需求。

• 在同一页面上是显示“部署站点”的按钮， 单击按钮并开始部署。

 

• Netlify将开始开发和启动您的网站。Netlify 仪表板上的部署日志允许您跟踪开发。

请注意：如果需要时间并且它仍然告诉您它正在部署，我建议您刷新页面，到那时它

应该已经部署了。但是，请稍等片刻，然后再决定刷新。

• 部署完成后，Netlify将为您提供一个特定的URL，可以在其中在线查看您的网站。现在，您可以通过访问和共享 URL 来查看已部署的站点。

标签：GitHub,存储库
来源：