Astro搭建个人博客

大家好，我是Yinph。

今天给大家带来一篇关于如何使用Astro快速搭建个人博客的文章。

直接进入正题：

一、准备工作

• 在Astro挑选一个自己心仪的博客模板
• 安装nodejs
• 一个GitHub账号，并建一个仓库
• 一个Cloudflare账号
• 一个Netlify账号
• 最好下载VS Code，方便以后修改博客

:::note[注意！]
Astro每个主题就是一个项目，为了避免频繁迁移项目，请先选好自己要使用的主题。
:::

二、下载代码并配置

在Astro，我们可以看到很多博客模板。这里我挑了Frosti来使用，并作为例子给大家介绍一下。

点击进入，我们点按钮“get started”，进入Frosti的GitHub仓库。（如打不开可在网上下载加速器Watt Toolkit）

然后点击仓库中“Code”按钮，点击“Download ZIP”下载Frosti的源码。

如果你会使用git，可以直接使用git clone

最终都会下载了一个压缩包，你可以解压到任意位置。

打开解压后的代码文件夹中按Win+ R，输入cmd，打开命令行。输入代码npm install，等待安装完成.

npm install

等它安装完毕，没有报错，接着输入npm run dev，等待项目启动。

npm run dev

想要进行后续修改，我们可以使用VS Code。

然后进行修改就可以了。如有不明白的地方可以联系本作者或项目开发者。

以下是一般需要修改的文件：

• src/const.ts 常量、配置文件
• src/content/blog 博客所在的文件夹
• src/pages/ 页面所在的文件夹（如Home, About等等）
• public/profile.webp 头像图片

三、上传至Github仓库

还记得我开头说要有Github账号并建一个仓库不？（不记得快去看开头！）

我们打开Github，点击右上角的加号，选择New repository（即第一个选项）。

接下来看图操作即可：

仓库建好后，点击“Add file”按钮，并点“Upload files”，进入上传页面。

接着，选中你的文件，上传上去。稍等片刻，点击下方按钮“Commit changes”即可。

然后，你的代码文件就上传上去了！

当然，会使用git的也可以自行使用git push上传。

四、开始部署

（1）使用Netlify

Netlify是一个静态网站托管平台，还是Astro官方部署合作伙伴，可以很方便、快捷地将你的代码部署到网上。

直接用Github登录后，会弹出一个页面。根据自己实际情况填写即可。弄好后点击“Continue to deploy”。

完成后，会让你连接仓库。我们选择Github。

随后会弹出你要链接的仓库。点击我们上传后的仓库即可。Netlify会自动检测你的仓库，并自动部署。

稍等片刻，Netlify会自动部署你的网站。

部署好后，Netlify会自动生成一个链接，点击即可访问你的网站。

你可以在左边菜单栏中找到“Site configuration”，点“Change site name”即可更改域名。

至此，我们的博客就搭建好了！

（2）使用Cloudflare

同样，我们也可以用Github登录Cloudflare，（但是我一开始不知道，用邮箱创建账号😂）然后点“Workers和Pages”。

点击“创建”按钮后，点“Pages”跳到连接仓库的页面

选择放置博客代码的仓库，并点“开始设置”。

接下来看图操作即可：

稍等片刻，Cloudflare也会自动部署你的网站。

如果出现下图的情况，那么恭喜你，你的博客已经部署完成了！

后续想要修改内容，只需要上传到Github仓库，Cloudflare和Netlify会自动检测并更新你的网站。

五、结语

部分文字来源于Astro + Cloudflare pages 快速搭建个人博客，在此声明。

希望这篇文章能帮助你们！如果你有任何问题，欢迎在评论区留言。

OK，以上就是今天要讲的内容。大家喜欢就点个赞吧，我会尽快更新！ヾ(•ω•`)o！