我们登上的并非我们所选择的舞台,演出并非我们所选择的剧本。-- 爱比克泰德 (古罗|

Yinph

园龄:6个月粉丝:1关注:0

Astro搭建个人博客

大家好,我是Yinph。

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

直接进入正题:

一、准备工作

Astro每个主题就是一个项目,为了避免频繁迁移项目,请先选好自己要使用的主题。

二、下载代码并配置

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

Frosti

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

Frosti

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

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

下载Frosti源码

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

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

npm install

安装依赖

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

npm run dev

项目启动

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

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”。

Netlify

完成后,会让你连接仓库。我们选择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!

本文作者:Yinph

本文链接:https://www.cnblogs.com/yinph/p/18549888

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Yinph  阅读(170)  评论(2编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起