首页 > 其他分享 >Astro搭建个人博客

Astro搭建个人博客

时间:2024-11-16 21:58:10浏览次数:1  
标签:Github 仓库 博客 Astro Netlify 点击 搭建

大家好,我是Yinph。

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

直接进入正题:

一、准备工作

:::note[注意!]
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,(但是我一开始不知道,用邮箱创建账号

标签:Github,仓库,博客,Astro,Netlify,点击,搭建
From: https://www.cnblogs.com/yinph/p/18549888

相关文章

  • 第一篇:Scrum冲刺博客
    团队成员介绍许莹柔:机器学习工程师,负责模型训练和优化。肖晓霞:UI设计师,专注于用户界面和用户体验设计。梁晓君:前端开发工程师,负责将设计转化为实际的用户界面。阿丽娅:测试工程师,负责测试平台并确保产品质量。Alpha阶段任务认领在Alpha阶段,我们的主要目标是建立项目的基础......
  • Ubuntu24.04 搭建 Flutter 开发环境
    Ubuntu24.04搭建Flutter开发环境安装FlutterFlutter中文社区下载https://docs.flutter.cn/get-started/install/linux/android创建目录DevTools,用来存放开发软件mkdir~/DevTools下载Flutterwgethttps://storage.flutter-io.cn/flutter_infra_release/releases/s......
  • 知识库搭建:大健康供应链管理的数字化转型
    在当今快速发展的数字经济时代,大健康行业正经历着前所未有的变革。随着消费者对健康产品和服务需求的不断增长,大健康企业面临着提高供应链效率、降低成本、增强市场竞争力的多重挑战。在这个过程中,数字化工具如知识库、ERP系统、云计算平台等正成为推动大健康供应链管理向智......
  • 飞牛云fnOS本地部署1Panel服务器运维管理面板并搭建Halo个人博客
    ......
  • hexo博客上传到云服务器
    Git安装与配置https://git-scm.com/下载并安装安装完成打开在桌面cmd执行git-v显示版本号即安装成功Git配置环境开始配置环境咱们新建一个博客目录gitconfig--globaluser.namedawankagitconfig--globaluser.emaildawanka@dawanka.cn查看配置......
  • 第 7 篇 Scrum 冲刺博客
    作业要求这个作业属于哪个课程计科34班这个作业的要求在哪里团队作业4——项目冲刺这个作业的目标1.站立式会议2.发布项目燃尽图3.每人的代码/文档签入记录4.适当的项目程序/模块的最新(运行)截图5.每日每人总结会议照片昨日已完成的工作/今天计划完成的工作......
  • _app搭建笔记
    逍遥模拟器端口号:21503(3)adbinstall+包名的绝对路径安装apk包案例:adbinstallE:\dcs\two\app\mojibase.apkE:\dcs\two\app\baiduyuedu_5520.apk(4)活动路径名:aaptdbadgingD:\app\baiduyuedu_3760.apk(5)adbuninstall包名:卸载com.baidu.yuedu包名name='com......
  • AI智能客服实战:带你手把手从零到一搭建智能客服系统
    AI智能客服是什么?AI智能客服是新一代的智能化在线客服系统,它在传统的客服功能基础上,加入了大量的AI算法逻辑,实现了智能接待、自动客户资源获取、智能资源流动和分配的效果。AI智能客服能够显著提高企业的客服接待效率,减轻人工客服的压力,并大幅降低运营成本。AI智能客服的......
  • 短视频app搭建,了解Java基本数据类型
    短视频app搭建,了解Java基本数据类型Java条件语句if…else一个if语句包含一个布尔表达式和一条或多条语句。//如果只有一条语句可以不用{}if(--)a=0;//多条语句需要{}if(--){a=0;b=0;}//if()的()里面填条件 if…else语句if语句后面可以跟else语句,当if......
  • 博客园众包接单初体验
    最近有点闲,早上漫无目的地打开微信,偶然间发现众包群里最后一条聊天记录挂着博客园发的单子,简单浏览了一下,是一个关于解决前端问题的订单,网站是用WordPress搭建的。前端、WordPress、PHP,好家伙,这不正是我的菜嘛!心动则缘起,说干就干,于是乎迅速联系了博客园,沟通过程简单利落,毫不拖泥......