1.注册 NetLify
首先打开 NetLify 的官方网站点击此处跳转
选择一种方式注册登录即可，这里我选择 GitHub 登录，即第一种方法
然后我们授权使用 GitHub 登录
之后会弹出填写信息的一些页面，里面的内容依次代表姓名、计划、角色等内容，我们大致写写，并且勾选一下标签即可
如果我们在How are you planning to use Netlify?中选择了Personal选项，即个人项目选项，在最后会让我们起一个项目名称，之后可以用于URL中作为标识，这里我们可以根据自己的个性化需求自行设计。
完成后，点击Continue to deploy，会弹出让我们设置第一个项目，这里我们点击Skip this step for now，即跳过该步骤。
用过上述步骤，我们注册 NetLify 成功。
2.安装 Astro
首先我们访问 Astro 的官方文档网站，点击此处跳转
然后我们点击“安装 Astro”
在新的页面中，显示了有三个前提条件：
根据文档的前提条件表示，我们需要 Node.js 环境，一个文本编辑器和终端。
Node.js 环境的安装配置可以参考下述教程：
后两者直接使用系统自带的即可，考虑到更舒适的写代码的环境，我们可以下载使用 VSCode 这款文本编辑器，下载与安装方式可以参考如下教程：
上述前提条件都完成后，我们正式开始 Astro 的安装。
我们首先新建一个空白文件夹
紧接着在地址栏处输入cmd并点击回车
在弹出的终端中，输入下述指令，并且在弹出的提示中输入y：
npm create astro@latest
等待一段时间后，会提示选择新项目的目录，我们可以输入./glader-blog，表示在当前目录下创建一个新的文件夹glader-blog，将项目存在这里。
在之后我们连点 3 次回车，进入等待项目初始化
当提示下述内容时，表示项目已经初始化结束，此时我们的文件夹下就会多出了glader-blog目录，我们的项目就存储在其中：
然后我们进入创建好的项目，并使用npm install安装依赖，如下：
Astro 内置了服务器，等待安装完成后，我们运行指令npm run dev即可运行服务器。
我们在浏览器中输入http://localhost:4321即可访问预览。
在浏览器中输入该网址运行后结果如下，这表示 Astro 项目成功安装。
3.熟悉 Astro 的编写环境
为了我们方便地编写代码，我们使用VSCode这款文本编辑器，首先我们打开VSCode,并使用VSCode打开刚才创建好的新项目，即glader-blog，如下，此时右下角会弹出安装 Astro 的扩展，我们点击安装：
如果没有弹出该提示，我们可以点击扩展图标，手中搜索安装：
安装完成后，我们返回项目目录，在左下角会发现多了一个npm脚本选项，我们直接点击里面的内容就可以帮助我们运行 npm 脚本，例如里面有一个dev选项，点击这个就相当于刚才在项目目录下运行了npm run dev。
可以看到，效果和刚才直接在小黑窗中输入命令相同。
4.编写简易博客
在项目目录下的src/pages/下，有一个index.astro文件，这个是网页的主页
我们可以尝试将这个文件中的代码全部删除，然后在这个文件中重新编写一段代码，代码如下:
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="icon" type ="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content = {Astro.generator} >
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
此时我们在浏览器中可以发现，网页中的内容变成了我们代码中的内容了
Astro 本质上是一个静态网站生成器，他可以兼容 html 的原生代码，为了方便演示，在这里，我们先粗糙的写一个博客的主界面，代码如下所示：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我</a></li>
<li><a href="/posts">博客文章</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
</header>
<!-- 主内容区 -->
<main>
<section class="intro">
<h1>欢迎来到我的博客！</h1>
<p>这里记录了我对编程、技术和生活的一些思考与分享。</p>
</section>
<!-- 最新文章列表 -->
<section class="posts">
<h2>最新文章</h2>
<ul>
<li><a href="">测试文章1</a></li>
</ul>
</section>
</main>
<!-- 底部 -->
<footer>
<p>© 2025 我的博客. All Rights Reserved.</p>
</footer>
</body>
</html>
此时假如我们要写一篇MarkDown格式的博客，我们在src/pages/下，新建一个文件夹posts用来存放我们的文章。然后我们在src/pages/posts/下新建post-1.md。
# 我的第一篇博客文章
发表于：2022-07-01
欢迎来到我学习关于 Astro 的新博客！在这里，我将分享我建立新网站的学习历程。
## 我做了什么
1. **安装 Astro**：首先，我创建了一个新的 Astro 项目并设置好了我的在线账号。
2. **制作页面**：然后我学习了如何通过创建新的 `.astro` 文件并将它们保存在 `src/pages/` 文件夹里来制作页面。
3. **发表博客文章**：这是我的第一篇博客文章！我现在有用 Astro 编写的页面和用 Markdown 写的文章了！
## 下一步计划
我将完成 Astro 教程，然后继续编写更多内容。关注我以获取更多信息。
写完博客后，我们在index.astro中，给“测试文章1”标签添加超链接，链接到刚才的md文章，如下：
注意：不要加.md，直接写文件名即可，即不要写成/posts/post-1.md
此时在网页中我们点击测试文章1，即可显示我们的博客内容：
更多语法、组件等相关内容，读者可以自行到Astro开发文档官网学习。
5.上传项目到 GitHub
上传项目到 GitHub，首先要先下载安装Git，安装方法可以参考下述教程：
安装完 Git 后，我们要给 VSCode 配置 Git，并将刚才写的项目上传到 GitHub 仓库，具体教程可参考如下教程：
VSCode 配置 Git，并上传代码至 GitHub 教程
然后我们点击发布分支，然后再点击上传至私有仓库即可。
上传完成后，我们在GitHub上就拥有了这样的一个私有仓库
此外，我们我们要改动我们的代码，我们也可以在这里提交修改
至此，我们就可以在本地编辑我们的博客，然后使用 Git 将我们的代码实时保存到 GitHub 上。
6.将代码托管到 NetLify
我们再次打开 NetLify 的官网，登录好我们刚才注册的账号，我们点击Import from Git，如下：
然后选择 GitHub：
在弹出来的新窗口中授权本次操作，并选择要上传的仓库：
然后点击Install进行安装，之后会弹出输入密码的提示，输入 GitHub 的密码点击确定即可。
此时如下图所示，已上传成功，我们点击该仓库进行配置：
我们只需要在 Site name 中起个名字就行，这个名字以后会放在我们要访问的域名中去，其他的空着不写，直接点击Deploy即可。
然后我们只需等待部署即可，这个可能需要几分钟的时间。
部署完成后，结果如下：
此时我们访问网站https://glader.netlify.app即可显示我们的博客。
至此，我们的博客部署完成。
此外，在 GitHub 中，很多人已经基于 Astro 框架开发了很多便于操作的博客主题，我们上述操作仅仅是学习 Astro 的基本使用方法，在实际博客的制作中，我们可以去 GitHub 中选择自己心仪的博客主题作为模板部署即可。