跳转到内容

第一单元:前期准备

现在你已经知道你要搭建什么了,是时候来设置你所需的所有工具!

本单元将向你展示如何设置开发环境并部署网站到 Netlify。如果你已经熟悉自己的环境和工作流程,可以直接跳到第二单元

:::tip[在在线代码编辑器中学习教程]

想要在在线代码编辑器中完成这个教程吗?请按照以下说明开始使用 StackBlitz。

使用 StackBlitz:按照以下说明操作,然后直接进入第二单元!

设置 StackBlitz

  1. 点击外部链接以 在 StackBlitz 创建一个 "Empty Project(空项目)" 模板

  2. 在右上方点击 Sign in 以使用你的 GitHub 账号登录。

  3. 在 StackBlitz 编辑器窗口的左上方,点击 fork 模板(保存到你自己的账号中)。

  4. 等待项目加载完毕,你将看到 Empty Project 的实时预览。

进行修改

在文件窗口中,你应该可以看到 src/pages/index.astro。点击打开它,按照编写你的第一行 Astro 代码来修改此文件。

创建 GitHub 仓库

  1. 点击文件列表顶部的 Connect Repository 按钮,输入一个新的仓库名称,然后点击 Create repo & push

  2. 当你有修改要提交到 GitHub 时,工作区左上方将出现一个 Commit 按钮。点击此按钮并输入提交信息 commit message,然后它将被提交到你的仓库。

部署你的网站

如果你想部署到 Netlify,并在工作时拥有网站的实时发布版本,可跳至 将你的网站部署到网络

否则,请跳至第二单元开始使用 Astro 进行搭建!

:::

本单元目标

在本单元中,你将会创建一个新项目,该项目将存储在 Github 并且连接到 Netlify

在编写代码的过程中,你将定期将更改提交到 GitHub。Netlify 将使用 GitHub 存储库中的文件来构建你的网站,然后将其发布到一个唯一的地址上,任何人都可以在互联网上查看它。

每当你提交更改到 GitHub 时,它会向 Netlify 发送通知。然后,Netlify 将自动重新构建和重新发布你的网站以应用这些更改。

任务清单

贡献 社区 赞助