【个人博客】Cloudflare从零搭建一个属于自己的博客

需要一个域名喔。如果自己不想提供的话,cf的dev域名也是可以的。所以可以做到零成本。 第一步:使用 Astro 搭建一个博客框架,并创建仓库 检查配置 !Astro 现在要求 Node.js v22.12.0 或更高版本 node -v npm -v git --version 创建 Astro ...
【个人博客】Cloudflare从零搭建一个属于自己的博客
【个人博客】Cloudflare从零搭建一个属于自己的博客

需要一个域名喔。如果自己不想提供的话,cf的dev域名也是可以的。所以可以做到零成本。

第一步:使用 Astro 搭建一个博客框架,并创建仓库

检查配置

!Astro 现在要求 Node.js v22.12.0 或更高版本

node -v
npm -v
git --version
创建 Astro 博客项目

使用npm create astro:

npm create astro@latest

将会交互式创建博客。

也有其他方式,可以自己了解一下。

PS E:\Project\Melosyne_Blog\新建文件夹> npm create astro@latest

> npx
> create-astro
 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./myblog

  tmpl   How would you like to start your new project?
         Use blog template

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

 ██████  Project initializing...
         ■ Template copied
         ▶ Dependencies installing with npm...
         □ Git

创建完毕后,将会得到完整的博客模板项目,且附带git。

创建 Github 仓库,并推送博客项目到仓库

这个就不再多说了。

创建 Github 仓库,并推送博客项目到仓库

推送即可,无需其他操作

第二步:Cloudflare

登录,托管自己的域名

注意,不托管自己的域名也是可以的,cloudflare会自动给一个.dev的博客域名。

折叠了一下 (点击了解更多详细信息) 配置 Cloudflare Pages

位置如图

image

点击create application,蓝色的

image

点击最下方的一行字: Looking to deploy Pages? Get started

image

选择从仓库导入

image

这里是需要登录并选择对应仓库

image

配置完后,下一页,按照图片即可。
! 如果你使用了不同的框架,需要按照框架的需求来进行选择。
! 建议先选择Framework Preset,因为可以自动补全后面的选项。

image

可以看到在初始化了

image

**初始化完成后,continue即可。

【可选】应用自己的域名

点击继续之后,会看到一个page管理界面,第三栏就是域名管理

image

点击set up a custom domain

image

输入自己的域名,最好是托管在cloudflare上面,如果不是可以ai一下,也不难,需要登陆服务商后台,管理域名添加一个CNAME

输入之后,继续,然后等待即可。

后续

可以正常访问。如果需要更新,推送到仓库后,cf很快会自动更新网页,差不多几秒的事。

4 个帖子 - 3 位参与者

阅读完整话题

来源: LinuxDo 最新话题查看原文