前言
鉴于国内使用Astro框架的比较少，官方文档又有失时效性，遂特地抽空写一篇文章，希望能帮到屏幕前的你
# 原理解释
1. 网页源文件——Astro是静态网页的每个部分的零件
2. 源文件托管平台——你可以把Github当作一个云盘，可以存放你的网页 源文件（这样你就不用24小时都开着你的电脑以供访问了☺）
3. 远在他乡的网站服务器——Netlify公司负责读取你放在Github仓库里的网页源文件，并把你的网页部署在网络上
当然，他使用了Hexo代替了Astro，目前Astro体验比Hexo好
# 你需要准备什么？
1. 科学上网
2. Github账号
3. 能用的Gmail或者其他国外邮箱
4. Node.js– v18.17.1 或 v20.3.0 或更高版本。（不支持 v19）
5. 文本编辑器 – 推荐使用 VS Code
只要你有打开的Netlify网页，你需要全程处在科学上网的状态，否则你的Netlify账号会被立马封禁！！！
# 你将学会什么？
1. 部署简洁的静态网页作为博客网站
2. 学会域名的DNS转发解析
3. 学会使用Cloudflare的CDN加速服务
## 验证Node.js版本
node -v
// 输出示例
v18.17.1
如果该命令返回的版本号高于 v18.17.1 或 v20.3.0（不包括任何 v19 版本），那么你就可以继续了！
如果命令返回错误信息如 Command ‘node’ not found，或者版本号低于所需版本，那么你需要安装兼容的 Node.js 版本。
### 代码编辑器
VScode：Visual Studio Code – Code Editing. Redefined
### 正文
1. 在Astro官网中选择自己喜欢的主题
在左侧Filter栏中，Categories勾选Blog，Pricing勾选free(有Doller的朋友可以不选)
2. 找到喜欢的主题后点进去，在右侧这一栏中可以找到_Deploy to Netlify_的字样
从此处-科学上网
在点*Connect to Github*之前，我们打开Github
填写自己的邮箱后点击 *Sign up for Github*
按照Github官方的引导，你已经成功拥有了一个GitHub账号。
让我们进入Github页面，点击 绿色的 *New* 创建一个新仓库
名字自己起就好啦，其他的设置我们可以不动它。
一切准备就绪，点击 *Create repository*
现在你已经成功拥有一个Github代码仓库用于储存你的博客网页源代码
### 回到Netlify的网页
*Connect to Github*
加载后，点击对应的仓库，Netlify会选中此仓库，再部署博客网站
等待后点击 *Save&Deploy*
跳转至此界面
如果你看到这四个 *Completed* 那就代表网站已经搭建成功了，现在你可以亲自看到自己的博客了，步骤如下：
1. 点击左侧栏中的Site overview
2. 找到 *https://*********.netlify.app* 并点击它
当你看到自己亲手部署的博客，证明你已经拥有了一个值得炫耀的网站
### 绑定域名（需要到阿里云或腾讯云上购买域名）
这里以阿里云的域名为例为例，在Netlify左栏中点击Domain management-Add domain alias
输入自己的域名，确认
此时我们再回到阿里云控制台，找到域名的DNS解析，添加解析
因为我们这里要用转发解析，所以填写两条解析内容：
记录类型：CNAME
主机记录：www
记录值：填写上述的 *https://*********.netlify.app*
解析路线：默认
TTL：10分钟
记录类型：CNAME
主机记录：@
记录值：填写上述的 *https://*********.netlify.app*
解析路线：默认
TTL:10分钟然后我们回到Netlify的网页，在Domain management处为自己的域名添加Netlify DNS解析（非必要性）
若不出意外，等一会就可以通过域名访问自己的博客了
但是现在有一个问题，博客网站加载的很慢，我们需要为它添加CDN解析
### 配置Cloudflare
1. 我们搜索并进入Cloudflare官网，为自己注册一个账号,选择免费的方案
跟着向导走，填写好自己的域名(domain name)
2. 也为Cloudflare添加DNS解析，实现Cloudflare与Netlify的握手，如下图所示
3. 在这个网页中，往下翻，找到Cloudflare Nameservers
看到两条NS信息，将它们记下，打开阿里云域名控制台-管理-DNS修改-修改DNS服务器，将原来的两条替换成我们记下的两条NS，保存。
修改后的DNS有生效缓冲时间，请等待Cloudflare的邮件，他们会告知你网站CDN加速已经配置完成，通常需要等待数小时。
至此，Cloudflare配置完毕
好了，大功告成
### 如何写博文，并推送到Github和网页？
这里我们就要用到VScode，在左侧栏中点击源代码管理（当鼠标停留在图标上时，就会显示对应的名称）
你可以选择连接远程储存库，在顶部弹出的对话框中填入自己的仓库地址
如何查看自己仓库的地址？
1. 打开Github，找到自己存放网站的仓库
2. 进入仓库，点击右上方绿色 *Code*
3. 复制.git结尾的地址
等待后，你就可以在VScode中查看网站源文件了
文件结构通常是这样的
我们写的博客都存放在src/content/posts ，文件格式是.md
为了方便在博文中引用图片，建议在posts文件夹中再建立文件夹以存放单篇博文和它所引用的图片
所引用的图片地址只需填写./某.png 或 ./某.jpg
—
### 常见问题
1. 写完博客commit到Github仓库后，发现Netlify在Build时报错
其实原因很简单，你写的.md文件有语法错误，导致无法渲染成为网站，快快检查你的博文有没有语法错误，[此处链接Markdown语法速查表]
