大家好,我是Yinph。
今天给大家带来一篇关于如何使用Astro快速搭建个人博客的文章。
直接进入正题:
一、准备工作
:::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,(但是我一开始不知道,用邮箱创建账号
标签:Github,仓库,博客,Astro,Netlify,点击,搭建 From: https://www.cnblogs.com/yinph/p/18549888