Bolt.diy:五分钟免费搭建个人博客,开启你的数字创作之旅!(保姆级教程)

🚀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 小步前提准备:准备工作,轻松搞定

在开始我们的创作之旅之前,我们需要做一些简单的准备工作。别担心,这就像出门前检查一下装备,确保一切顺利。

  1. 注册阿里云账号:点击这里注册阿里云账号,开启你的云服务之旅。这就像拿到一把钥匙,打开数字世界的大门。
  2. 签署阿里云百炼服务协议:点击这里签署阿里云百炼服务协议,解锁更多功能。这一步就像是给你的创作之旅加上了魔法的翅膀。
  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:解锁创意的钥匙

  1. 登录阿里云百炼大模型服务平台
  2. 单击顶部应用,在左侧导航栏单击API-Key
  3. 选择全部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 ,获取最新动态,⚡️ 让信息传递更加迅速。

### 安装 Docker 并启动容器 #### 准备工作 在 CentOS 7 上安装 Docker 需要先确保系统的软件包索引是最新的。可以运行以下命令来更新系统中的现有包: ```bash yum update -y ``` #### 卸载旧版本的 Docker 如果之前已经安装过 Docker 或其他类似的工具,建议先将其卸载以避免冲突。可以通过以下命令完成此操作: ```bash yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-engine ``` [^1] #### 设置 Docker 的存储库 为了获取最新的 Docker 版本,需要设置 Docker 的官方仓库。执行以下命令: ```bash yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo ``` #### 更新并安装 Docker CE 配置好仓库之后,刷新缓存并将最新版的 Docker 社区版 (CE) 安装到系统中: ```bash yum makecache fast yum install docker-ce -y ``` #### 启动并启用 Docker 服务 安装完成后,通过以下命令启动 Docker 服务,并设置开机自启: ```bash systemctl start docker systemctl enable docker ``` #### 创建和启动第一个容器 当 Docker 成功安装并运行后,可以尝试拉取一个镜像并启动容器。例如,使用 `hello-world` 测试镜像验证环境是否正常: ```bash docker run hello-world ``` 如果一切顺利,应该会看到一条欢迎消息。 对于更复杂的场景,比如基于 Ubuntu 运行一个交互式的 Bash 终端,可按如下方式操作: ```bash docker pull ubuntu:latest docker run -it ubuntu /bin/bash ``` [^2] #### 处理可能的错误 如果遇到类似于 “starting container process caused container init exited…” 的错误提示,则可能是由于 SELinux 或 cgroup 存储驱动程序不兼容引起的。解决方法之一是临时禁用 SELinux 来测试问题是否存在: ```bash setenforce 0 ``` 永久更改则需编辑 `/etc/selinux/config` 文件,将 `SELINUX=enforcing` 改为 `SELINUX=permissive` 或 `SELINUX=disabled`。 最后记得重新加载守护进程和服务状态: ```bash systemctl daemon-reload systemctl restart docker ``` ### 注意事项 - 如果网络连接不稳定或者无法访问在线资源,可以选择下载所需的 RPM 包及其依赖项,在离线环境中手动部署。 - 对于生产环境下的长期维护,请定期检查是否有可用的安全补丁或新功能发布。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LucianaiB

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值