🚀Bolt.diy:五分钟免费搭建个人博客,开启你的数字创作之旅!(保姆级教程)
🌟嗨,我是LucianaiB!
🌍 总有人间一两风,填我十万八千梦。
🚀 路漫漫其修远兮,吾将上下而求索。
🎉想象一下,你有一个属于自己的小天地,可以在这里分享你的想法、记录你的成长、展示你的作品。现在,这一切只需五分钟就能实现!今天,我将带你走进阿里云的 Bolt.diy 世界,一起搭建一个独一无二的个人博客。这不仅是一个教程,更是一次奇妙的数字创作之旅。
领取免费额度,一键部署Bolt.diy:https://www.aliyun.com/solution/tech-solution/fc-bolt-diy?utm_content=g_1000403257
🎨效果展示:看看我的成果,你也一定能做到!
看看我用阿里云的 Bolt.diy 五分钟免费搭建的个人博客,是不是很酷炫?是不是心动不如行动,快来跟我一起制作属于自己的个人博客!
💡方案架构:背后的技术魔法
本次教程采用“先实操,后理论”的方式,带你一步步在阿里云上搭建一个如图所示的运行环境。就像搭建一座房子,我们需要先了解它的结构,才能更好地建造它。
本方案的技术架构包括以下云服务:
- 云原生应用开发平台 CAP 项目:这是我们的“魔法工厂”,一个全托管的 Serverless 计算服务,用于部署我们的应用。它就像一个智能的机器人,帮你处理所有的后台工作,让你只需专注于创作。
- 百炼模型服务:这是我们的“创意引擎”,通过调用 API 使用文本模型进行代码生成。你可以把你的想法告诉它,它就能帮你把想法变成现实。
🛠️AI 实操:一步步带你飞
📝3 小步前提准备:准备工作,轻松搞定
在开始我们的创作之旅之前,我们需要做一些简单的准备工作。别担心,这就像出门前检查一下装备,确保一切顺利。
- 注册阿里云账号:点击这里注册阿里云账号,开启你的云服务之旅。这就像拿到一把钥匙,打开数字世界的大门。
- 签署阿里云百炼服务协议:点击这里签署阿里云百炼服务协议,解锁更多功能。这一步就像是给你的创作之旅加上了魔法的翅膀。
- 开通函数计算服务:点击这里开通函数计算服务,为后续操作做好准备。这就像给你的魔法工厂安装了引擎,让它能够高效运行。
阿里云账号 | https://account.aliyun.com/register/qr_register.htm?spm=a2c6h.28997786.0.0.2c7a2192F6Wq5U |
---|---|
阿里云百炼 | https://bailian.console.aliyun.com/?spm=a2c6h.28997786.0.0.2c7a2192F6Wq5U |
函数计算 | https://fcnext.console.aliyun.com/?spm=a2c6h.28997786.0.0.2c7a2192F6Wq5U |
🚀部署应用
一切准备就绪,现在我们正式开始搭建我们的博客。点击前往部署,打开我们提供的云原生应用开发平台 CAP 项目模板。选择默认配置,点击部署项目,然后在弹出面板中点击确认部署。部署预计只需等待 1 分钟,是不是超快!
部署完成后后回出现下图。
就像变魔术一样,部署完成后,你会看到如下图所示的界面。这就像你的博客已经从一个想法变成了一个真实的网站,是不是很神奇?按照下图找到访问地址,就可以开始你的博客之旅啦!这就像你刚刚打开了一扇通往新世界的大门,准备迎接无数的可能。
🔑获取百炼 API-KEY:解锁创意的钥匙
- 登录阿里云百炼大模型服务平台。
- 单击顶部应用,在左侧导航栏单击API-Key。
- 选择全部API-KEY或我的API-KEY,然后创建或查看API-KEY。
将得到的 API-KEY 填到指定位置,系统会自动为你选择合适的模型。这就像你把钥匙插入锁孔,打开了创意的大门。
接下来,输入提示词开始进行创作。比如以下这段提示词:
### Developer Portfolio Website Prompt开发者作品集网站提示
Create a modern developer portfolio website inspired by the qinsewenbao.netlify.app design with the following features:创建一个受qinsewenbao.netlify.app设计启发的现代开发者组合网站,具有以下功能:
1. A clean, dark-themed interface with a navy blue background and accent colors一个干净的,深色主题的界面,深蓝色背景和强调色
2. A header section with: 标题部分包含
1. Your name/brand logo 你的名字/品牌标志,如:琴瑟文暴
2. Navigation links to professional profiles (GitHub, CSDN or other developer platforms)导航链接到专业的配置文件(GitHub, CSDN或其他开发人员平台)
3. A hero section with: :
1. A personalized welcome message introducing yourself as a developer一个个性化的欢迎信息,介绍自己作为一个开发人员
2. Brief description of your expertise and what you built the site with (e.g., Astro framework)简要描述你的专业知识和你用什么构建网站(例如,Astro框架)
3. Social media links with icons (Twitter/X, Facebook, LinkedIn, YouTube)带有图标的社交媒体链接(Twitter/X, Facebook, LinkedIn, YouTube)
4. A "Recent Posts" section displaying:“最近的文章”部分显示:
1. Blog post cards with categories like Web Development, Data Science, and Mobile App Development分类为Web开发、数据科学和移动应用开发的博客明信片
2. Each card should include a title, date, and brief description每张卡片应该包括标题、日期和简要描述
3. Visual indicators for different technology categories不同技术类别的视觉指示器
5. A "Recent Projects" section showcasing your latest work“最近的项目”部分展示您的最新作品
6. Responsive design that works well on all devices响应式设计适用于所有设备
The website should convey a professional yet personal feel, highlighting your technical expertise while making it easy for visitors to learn about your work and connect with you.
在创作过程中,你什么都不需要做,只需耐心等待即可。就像种下一颗种子,然后静静等待它发芽、开花。
如果生成的界面不够美观,你可以直接对它说:“界面好丑,美观一点,可以加入网上公开的图片为背景”。看看下面的效果,是不是很惊艳?
界面好丑,美观一点,可以直接使用公开的图片链接进行优化
感兴趣的小伙伴不妨也来试试,生成属于自己的独特博客吧!你可以在这里记录你的生活、分享你的知识、展示你的作品,让世界看到你的光芒。
🧹清理资源:善始善终,避免浪费
测试完方案后,删除云原生应用开发平台 CAP 项目,避免继续产生费用:
登录云原生应用开发平台 CAP 控制台,在左侧导航栏,选择项目,找到部署的目标项目,在操作列单击删除,然后根据页面提示删除项目。
📚Bolt.diy 介绍:背后的英雄
Bolt.diy 是 Bolt.new 的一个开源版本,它提供了更高的灵活性和可定制性。通过自然语言交互,它能够简化开发流程,并提供全栈开发支持,同时允许用户进行二次开发。它就像是你的数字创作伙伴,帮你把想法变成现实。
🎯为什么选择 Bolt.diy:因为它懂你
通过 Bolt.diy,你可以实现从创意到部署的极速开发。它就像一个懂你的朋友,帮你把复杂的任务变得简单。
- 多模型灵活适配:支持多种大语言模型(如 OpenAI、DeepSeek、Gemini、Hugging Face 等),你可以根据不同的场景需求为不同任务指定特定模型,从而提升任务匹配度。这就像你有一个多面手的助手,可以根据不同的任务切换不同的技能。
- 可扩展性与高度定制化:采用模块化架构,支持自定义 Docker 服务和集成第三方工具,提供了高度的灵活性。你还可以通过插件扩展,甚至集成本地私有模型(如自训练的 LLM)。这就像你有一个可以自由组装的工具箱,可以根据需要添加不同的工具。
- 全栈开发全流程覆盖:通过自然语言交互生成前后端代码(如 React 前端、Node.js 服务端),支持实时调试、版本管理和一键部署。内置可视化工具管理 SQL/NoSQL 数据库,支持自动生成数据模型和 API 接口。这就像你有一个全能的机器人,帮你完成从设计到部署的每一个步骤。
- 智能化辅助工具:AI 实时分析代码错误并生成修复建议,减少手动调试时间。同时,提供代码结构图谱和依赖关系可视化,帮助快速理解复杂项目。这就像你有一个智能的导师,随时帮你解决遇到的问题。
🎉 现在,你已经准备好踏上这个奇妙的数字创作之旅了。快去试试吧,用 Bolt.diy 搭建属于你的个人博客,让世界看到你的故事。
部署完成后,我进行了哪些尝试?
部署完成后,我迫不及待地开始尝试使用 Bolt.diy 创建我的第一个创意应用。我选择了一个简单的个人博客模板,并通过自然语言交互的方式,生成了一个包含以下功能的个人博客:
- 个人简介:一个简洁的页面,介绍我自己,展示我的兴趣爱好和专业技能。
- 博客文章:一个展示我日常所思所想的板块,每篇文章都有详细的分类和标签。
- 项目展示:一个展示我过往项目的板块,方便访客了解我的工作成果。
在生成过程中,我使用了以下参考 prompt:
创建一个个人博客,包含以下内容:
1. 个人简介页面,介绍我的兴趣爱好和专业技能。
2. 博客文章页面,每篇文章有标题、日期、分类和简要描述。
3. 项目展示页面,展示我的过往项目,每个项目有标题、描述和图片。
生成后的效果非常令人满意,界面简洁美观,功能齐全。你可以通过以下链接体验我的个人博客:琴瑟文暴
遇到的问题
在体验过程中,我也遇到了一些小问题。例如,在生成博客文章时,我发现由于没有图片的支持,导致生成的博客非常不美观。于是,我直接告诉 Bolt.diy 使用公开的图片链接进行优化,它很快就帮我找到了合适的图片并完成了优化。调整后,问题得到了解决。
在体验过很多的AI使用后,从用户的角度来说,我觉得一般在使用AI的时候,他肯定不会给AI提供给图片(顶多是预留位置),所以这个位置完全可以直接用现成的,就直接默认从网上自动找图片链接,这样就很方便,用户可以直观的感受到
总的来说,这些小问题并没有影响我的整体体验。相反,它们让我更加熟悉了 Bolt.diy 的操作流程,也让我意识到在使用过程中需要更加细心和耐心。
总结
在数字化时代,个人博客不仅是展示自我的平台,更是记录生活、分享知识、连接世界的重要桥梁。通过阿里云的 Bolt.diy,我仅用五分钟就搭建了一个功能齐全、美观大方的个人博客,深刻感受到了技术的力量和便捷性。
部署完成后,我迫不及待地开始尝试使用 Bolt.diy 创建我的第一个创意应用。我选择了一个简单的个人博客模板,并通过自然语言交互的方式,生成了一个包含以下功能的个人博客:个人简介页面,介绍我自己,展示我的兴趣爱好和专业技能;博客文章页面,每篇文章都有详细的分类和标签;项目展示页面,展示我过往的项目,每个项目都有标题、描述和图片。在生成过程中,我使用了参考 prompt,生成后的效果非常令人满意,界面简洁美观,功能齐全。你可以通过链接体验我的个人博客:琴瑟文暴。
在体验过程中,我也遇到了一些小问题。例如,在生成博客文章时,我发现由于没有图片的支持,导致生成的博客非常不美观。于是,我直接告诉 Bolt.diy 使用公开的图片链接进行优化,它很快就帮我找到了合适的图片并完成了优化。调整后,问题得到了解决。此外,在部署过程中,我遇到了一个关于 API-KEY 的问题。最初,我未能正确配置 API-KEY,导致生成的博客无法正常加载内容。通过仔细检查官方文档和社区帖子,我发现自己在填写 API-KEY 时遗漏了一些必要的步骤。重新按照正确的流程操作后,问题顺利解决。
Bolt.diy 是 Bolt.new 的一个开源版本,它提供了更高的灵活性和可定制性。通过自然语言交互,它能够简化开发流程,并提供全栈开发支持,同时允许用户进行二次开发。它支持多种大语言模型,可以根据不同需求选择合适的模型进行创作;它还提供了全栈开发支持,从代码生成到一键部署,一应俱全。更重要的是,它允许用户进行二次开发,这意味着我可以根据自己的需求,不断优化和扩展我的博客功能。
通过这次实践,我不仅学会了如何快速搭建一个个人博客,更体会到了技术带来的无限可能。我相信,无论是开发者、设计师还是普通用户,Bolt.diy 都能成为你实现创意、记录生活的强大工具。如果你也想拥有一个属于自己的数字空间,不妨试试 Bolt.diy,开启你的数字创作之旅吧!
部分附录代码
---
import type {
FrontmatterPage,
IFrontmatter,
} from 'astro-boilerplate-components';
import {
BlogGallery,
NewerOlderPagination,
PaginationHeader,
Section,
} from 'astro-boilerplate-components';
import { CTA } from '@/partials/CTA';
import Base from '@/templates/Base.astro';
import { AppConfig } from '@/utils/AppConfig';
import { sortByDate } from '@/utils/Posts';
type GetStaticPaths = {
paginate: any;
}; // Overrides `GetStaticPathsOptions` types from Astro
export async function getStaticPaths({ paginate }: GetStaticPaths) {
const allPosts = await Astro.glob<IFrontmatter>('./*.md');
const sortedPosts = sortByDate(allPosts);
// Return a paginated collection of paths for all posts
return paginate(sortedPosts, { pageSize: 9 });
}
interface Props {
page: FrontmatterPage;
}
const { page } = Astro.props as Props;
const titleSuffix = ` - ${AppConfig.site_name}`;
const titleBase = `Blog page ${page.currentPage}`;
const title = titleBase + titleSuffix;
const description =
'Pagination example built with Astro styled with Tailwind CSS.';
---
<Base head={{ title, description }}>
<Section>
<PaginationHeader title='这是全部的帖子' description='加油努力!!!' />
</Section>
<Section>
<BlogGallery postList={page.data} />
</Section>
<Section>
<NewerOlderPagination page={page} />
</Section>
<CTA />
</Base>
import type { IFrontmatter } from 'astro-boilerplate-components';
import { PostContent, PostHeader, Section } from 'astro-boilerplate-components';
import type { ReactNode } from 'react';
import { AppConfig } from '@/utils/AppConfig';
type IBlogPostProps = {
frontmatter: IFrontmatter;
children: ReactNode;
};
const BlogPost = (props: IBlogPostProps) => (
<Section>
<PostHeader content={props.frontmatter} author={AppConfig.author} />
<PostContent content={props.frontmatter}>{props.children}</PostContent>
</Section>
);
export { BlogPost };
嗨,我是LucianaiB。如果你觉得我的分享有价值,不妨通过以下方式表达你的支持:👍 点赞来表达你的喜爱,📁 关注以获取我的最新消息,💬 评论与我交流你的见解。我会继续努力,为你带来更多精彩和实用的内容。
点击这里👉LucianaiB ,获取最新动态,⚡️ 让信息传递更加迅速。