当前位置: 首页 > news >正文

Astro + Cloudflare Pages 快速搭建个人博客

目录

    • 1 选择 Astro 模板
    • 2 使用代码
    • 3 修改代码
    • 4 上传 Github
    • 5 部署 Cloudflare Pages
    • 6 后续修改

最近我搭建完了我的个人网站,很多人问是怎么做的,今天就来写一篇教程吧。

全部干货,看完绝对能成功搭建自己的网站!(还不会你打我)

我的网站:https://yaoqx.pages.dev

话不多说,正片开始——

1 选择 Astro 模板

如果你只是想建一个博客,那么你直接往下看就行;想了解 Astro 的可以到这里看看:https://docs.astro.build/zh-cn/concepts/why-astro/

首先,在 https://astro.build/themes 这里挑选一个心仪的模板,我选择的是 Frosti。

选择之后,点开主题,上面的按钮是 Github 仓库,下面的是网站示例。

直接点 Get started 就好。

Frosti 仓库链接:https://github.com/EveSunMaple/Frosti

2 使用代码

进入 Github 仓库后,点击右上角的 Code > Download Zip,或者右侧的 Releases ,用最新版本下载。

如果你熟悉 Git,可以直接使用 git clone

最终都会下载下来一个压缩包,解压到任意位置。

接着,在解压后的代码文件夹里打开 cmd ,输入以下指令:

npm install

如果你没安装 nodejs,可以去官网下载:https://nodejs.cn/

等它安装完毕,没有报错,那就接着执行:

npm run dev

这条指令可以让你在本地测试,接着你就可以在 http://localhost:4321 上访问啦。

3 修改代码

使用 vscode 打开代码文件夹,直接修改就行~

以下是一般需要修改的文件:(以 Frosti 为例)

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

4 上传 Github

打开 Github (没账号的先注册)

https://github.com

新建一个空仓库。

接着,把你的代码文件上传上去,如图,我选中的文件:

稍等片刻,点击下方按钮 commit changes 即可。

5 部署 Cloudflare Pages

打开 Cloudflare(一样,没有账号先注册)

https://dash.cloudflare.com/

先点击左下角:Workers & Pages,然后点击 Create。

选择 Pages,点击 Connect to git

选择自己刚刚建的的 Github 仓库

接着,按照下图:

点击 Save and Deploy 后,如果出现下图的情况,那么恭喜你,成功辣!

你的站点已经可以访问了!

6 后续修改

修改内容后直接上传 Github 即可,Cloudflare 会自动配置,十分方便


如果你成功了,别忘点赞收藏

本文就到这里,拜~

相关文章:

Astro + Cloudflare Pages 快速搭建个人博客

目录 1 选择 Astro 模板2 使用代码3 修改代码4 上传 Github5 部署 Cloudflare Pages6 后续修改 最近我搭建完了我的个人网站,很多人问是怎么做的,今天就来写一篇教程吧。 全部干货,看完绝对能成功搭建自己的网站!(还不…...

Vue中<style scoped>与<style module>的深入解析与应用

在Vue开发中&#xff0c;样式管理是一个重要的环节。Vue提供了多种方式来帮助开发者更有效地管理组件样式&#xff0c;其中<style scoped>和<style module>是两个非常实用的特性。本文将深入探讨这两个属性的作用、原理以及使用场景&#xff0c;帮助读者更好地理解…...

Qt系列之数据库(二)代码篇

Qt 数据库开发是指在Qt框架下进行数据库操作的开发工作。Qt提供了一套强大的数据库模块&#xff0c;可以方便地与多种数据库进行交互&#xff0c;如SQLite、MySQL、PostgreSQL等。以下是一些关键点和步骤&#xff0c;帮助你进行Qt数据库开发&#xff1a; 1. 安装Qt数据库模块 …...

@RequstParam@PathVariable@RequestBody的区别

文章目录 概述RequestParam‌&#xff1a;PathVariable‌&#xff1a;RequestBody‌&#xff1a; 概述 ‌RequestParam、RequestBody和PathVariable是Spring框架中用于处理HTTP请求参数的注解&#xff0c;它们在处理请求参数的方式、适用场景和请求方法上有所不同。‌ Reques…...

Maven继承和聚合特性

目录 Maven继承关系 1.继承概念 父POM 子模块 2.继承机制 3.示例 4.继承作用 背景 需求 5.注意事项 Maven聚合关系 1. 定义与概念 2. 实现方式 3. 特性与优势 4. 示例 5. 注意事项 Maven继承关系 1.继承概念 Maven 继承是指在 Maven 的项目中&#xff0c;定义…...

python opencv实时视频输入

要在Python中使用OpenCV进行实时视频输入&#xff0c;可以按照以下步骤进行操作&#xff1a; 首先&#xff0c;需要安装OpenCV库。可以使用pip install opencv-python命令来安装OpenCV。 导入所需的库&#xff1a; import cv2创建一个VideoCapture对象来读取视频输入&#x…...

为什么头文件不能写using namespace

在C中&#xff0c;不建议在头文件中使用using namespace语句&#xff0c;主要有以下几个原因&#xff1a; 命名冲突&#xff1a;当在头文件中使用using namespace时&#xff0c;该命名空间中的所有名字都将被引入到包含该头文件的每个源文件中。这可能导致命名冲突&#xff0c…...

使用 preloadRouteComponents 提升 Nuxt 应用的性能

title: 使用 preloadRouteComponents 提升 Nuxt 应用的性能 date: 2024/8/19 updated: 2024/8/19 author: cmdragon excerpt: preloadRouteComponents 是提升 Nuxt 应用性能的一个简单而有效的工具。通过在适当的时候预加载路由组件&#xff0c;你可以为用户提供更快速、更流…...

mybatisPlus的@TableLogic逻辑删除注解导致联合索引失效的坑

文章目录 1.问题2.原因3.解决方法3.1 方法13.2 方法2 4. 建索引的几大原则4.1.最左前缀匹配原则&#xff0c;非常重要的原则4.2.和in可以乱序4.3.尽量选择区分度高的列作为索引4.4.索引列不能参与计算&#xff0c;保持列“干净”4.5.尽量的扩展索引&#xff0c;不要新建索引 5.…...

C# 隐式转换和显式转换

在C#中编程语言中&#xff0c;数据类型转换是一个重要的概念&#xff0c;C#提供了两种主要的转换方式&#xff1a;隐式转换和显式转换。理解下这两种转换方式对于编写健壮和可靠的代码至关重要。 隐式转换&#xff08;Implicit Conversion&#xff09; 定义 隐式转换是指的是…...

入门网络安全工程师要学习哪些内容

大家都知道网络安全行业很火&#xff0c;这个行业因为国家政策趋势正在大力发展&#xff0c;大有可为!但很多人对网络安全工程师还是不了解&#xff0c;不知道网络安全工程师需要学什么?知了堂小编总结出以下要点。 网络安全工程师是一个概称&#xff0c;学习的东西很多&…...

深入理解 Go 并发原语

1. goroutine 基础知识 1.1 进程 进程&#xff08;process) 是一个程序的实例&#xff0c;具有某些专用资源&#xff0c;如内存空间、处理器时间、文件句柄&#xff08;例如&#xff0c;Linux 中的大多数进程都有 stdin、stdout 和 stderr) 和至少一个线程。我们称其为实例&am…...

计算机毕业设计选题推荐-springboot 基于springboot的宠物健康顾问系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

数据结构—— 初识二叉树

1.树概念及结构 1.1树的概念 树是由根和子树构成 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的 1. 树有…...

2024.08.09校招 实习 内推 面经

地/球&#x1f30d; &#xff1a; neituijunsir 交* 流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 顺丰科技 2025届秋季校园招聘技术专场正式启动&#xff08;内推&#xff09; 校招 | 顺丰科技 2025届秋季校园招聘技术专场正式启动&#xff08;内推&#xff09; …...

IDEA中设置类和方法的注释

分两步设置&#xff1a; 第一个设置是创建类的时候自动加的注解 第二个设置是快捷键为方法增加的注解 类的时候自动加的注解设置 注释模版 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} ! "")package ${PACKAGE_NAME};#end /** * Description: TODO * Auth…...

Adobe Premiere Pro 2023-23.6.7.1 解锁版下载与安装教程 (一款专业的视频编辑软件)

前言 Adobe Premiere Pro&#xff08;简称PR&#xff09;是一款知名的专业视频编辑软件&#xff0c;数字视频剪辑软件。主要用来编辑视频和音频&#xff0c;可以在RGB和YUV色彩空间中以高达32位色彩的视频分辨率对4K和更高质量的视频文件进行编辑&#xff0c;支持VST音频插件和…...

openGauss 6.0安装过程解除对root用户依赖之gs_preinstall

目录 1.执行前提条件 1.1设置OS参数&#xff1a; 1.2定时任务权限 1.3 修改最大文件描述符 2.切换至omm用户&#xff0c;执行preinstall 3.source环境变量 4.执行gs_install 在给客户部署业务系统时&#xff0c;由于openGauss数据库的预安装过程需要用到root用户执行&am…...

IOS 10 统一颜色管理和适配深色模式

实现分析 像系统那样&#xff0c;给项目中常用的颜色取名字&#xff0c;这里使用扩展语法实现&#xff0c;好处是可以像访问系统颜色那样访问自定义的颜色。 添加依赖 为了能使用16进制的颜色值&#xff0c;这里通过依赖DynamicColor框架来实现 #颜色工具类 #https://githu…...

Linux目录结构及基础查看命令和命令模式

Linux目录结构及基础查看命令和命令模式 1.树形目录结构根目录 所有分区、目录、文件等的位置起点整个树形目录结构中&#xff0c;使用独立的一个“/”表示 常见的子目录 /root 管理员的宿主(家)目录 /home/xxx 普通用户的家目录 /bin 命令文件目录&#xff0c;存放所…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

jdbc查询mysql数据库时,出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

WinUI3开发_使用mica效果

简介 Mica(云母)是Windows10/11上的一种现代化效果&#xff0c;是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果&#xff0c;Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...

claude3.7高阶玩法,生成系统架构图,国内直接使用

文章目录 零、前言一、操作指南操作指导 二、提示词模板三、实战图书管理系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 在线考试系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 四、感受 零、前言 现在很多AI大模型可以…...