跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSSAI大前端

利用腾讯云 HAI 与 DeepSeek 快速构建个人网页

利用腾讯云 HAI 平台部署 DeepSeek-R1 模型,通过 CPU 算力低成本运行。结合 AI 生成的提示词快速产出响应式个人网页代码,涵盖简介、技能、项目及联系方式板块。支持 ChatbotUI 或 JupyterLab 环境调用,无需复杂配置即可预览效果。后续可根据实际需求修改 HTML 源码进行个性化定制,实现高效便捷的个人主页搭建流程。

CryptoLab发布于 2026/3/15更新于 2026/8/2238 浏览
利用腾讯云 HAI 与 DeepSeek 快速构建个人网页

想有个个人主页?现在用腾讯云 HAI 加上 DeepSeek,几分钟就能搞定。这方案不仅绕开了访问限制,还能低成本调用强大的模型能力。

部署 DeepSeek 模型到腾讯云 HAI

把 DeepSeek 模型部署在腾讯云 HAI 上,用户能直接依托其算力运行 R1 等模型。平台已支持预装环境,只需简单几步就能调用。

进入腾讯云 HAI 控制台,选择一元体验活动中的 DeepSeek-R1 CPU 版。购买完成后,在控制台找到算力连接选项。

文章配图

这里有两个入口可选:

  1. ChatbotUI:点击后跳转到 Ollama 可视化界面,可以直接选 14B 版本体验。
  2. JupyterLab:里面预装了 Ollama 环境,适合习惯命令行操作的同学。

如果选择 JupyterLab,打开终端输入以下指令即可下载并运行模型:

ollama run deepseek-r1:14b

下载完成后,就可以开始对话了。

文章配图

设计个人网页

模型就绪后,我们直接让它生成网页代码。复制这段提示词到对话框:

请帮我设计一个个人网页,要求:使用 HTML,响应式设计,适配手机,包含以下板块:个人简介、技能特长、项目经历、联系方式,风格要现代简约,配色要专业大气。请提供完整代码。

生成完成后,点击下载按钮保存为 .html 文件,双击即可预览效果。

文章配图

默认模板可能不够贴合你的情况,这时候可以让 AI 再优化一下。比如我这样修改需求:

根据我的情况进行网页修改:我是 Archie,嵌入式开发工程师 - 计算机硕士 - 专注嵌入式系统与智能算法研究。技能特长:单片机/物联网/嵌入式开发。项目经历丰富。邮箱:[email protected],电话:138****0000。

保存修改后的文件再次预览,内容就更新成了个性化信息。

文章配图

下面是优化后的完整代码,你可以直接参考结构进行修改。注意 CSS 部分采用了 Flex 布局配合媒体查询,确保在手机和电脑上都能正常显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Archie - 个人网页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            line-height: 1.6;
        }
        header {
            background-color: #2c3e50;
            color: white;
            padding: 2rem 0;
            text-align: center;
        }
        .section {
            margin-bottom: 4rem;
        }
        .intro-card, .skills-card, .projects-card, .contact-section {
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .skill-item, .project-item {
            margin-bottom: 1rem;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        ul {
            list-style: none;
            padding: 0;
            margin-bottom: 2rem;
        }
        @media (max-width: 768px) {
            .container { padding: 10px; }
            .intro-card, .skills-card, .projects-card, .contact-section { padding: 1.5rem; }
        }
    </style>
</head>
<body>
    <header>
        <div>
            <h1>Archie 的个人网页</h1>
        </div>
    </header>
    
    <section class="container">
        <div class="intro-card">
            <h2>Archie</h2>
            <p>嵌入式开发工程师 | 计算机硕士 | 专注嵌入式系统与智能算法</p>
        </div>
    </section>

    <section class="container">
        <div class="skills-card">
            <h2>技能特长</h2>
            <div class="skill-item">
                <h3>嵌入式开发</h3>
                <p>熟练掌握 C/C++、Python 等语言,擅长微控制器编程和系统设计。</p>
            </div>
            <div class="skill-item">
                <h3>物联网与单片机</h3>
                <p>丰富的物联网项目经验,熟悉 WiFi、蓝牙、射频模块等硬件接口。</p>
            </div>
            <div class="skill-item">
                <h3>智能算法研究</h3>
                <p>具备机器学习和人工智能领域知识,能够设计并实现复杂算法。</p>
            </div>
        </div>
    </section>

    <section class="container">
        <div class="projects-card">
            <h2>项目经历</h2>
            <div class="project-item">
                <h3>智能家居系统开发</h3>
                <p>使用嵌入式技术和物联网实现智能家居控制系统,支持多种家电远程调控。</p>
            </div>
            <div class="project-item">
                <h3>物联网传感器节点设计</h3>
                <p>独立设计并实现了低功耗传感器节点,确保了系统在恶劣环境下的稳定性和可靠性。</p>
            </div>
        </div>
    </section>

    <section class="container">
        <div class="contact-section">
            <h2>联系方式</h2>
            <ul>
                <li><strong>姓名:</strong>Archie</li>
                <li><strong>职业:</strong>嵌入式开发工程师</li>
                <li><strong>Email:</strong>[email protected]</li>
                <li><strong>电话:</strong>138****0000</li>
            </ul>
        </div>
    </section>
</body>
</html>

最后记得把里面的个人信息替换成你自己的,然后找个静态托管服务上传,或者本地打开就行。整个过程基本没怎么写代码,全靠 AI 辅助,效率很高。

目录

  1. 部署 DeepSeek 模型到腾讯云 HAI
  2. 设计个人网页
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • AIGC 时代:如何利用 DeepSeek 辅助少儿编程教育
  • PyTorch 生成式人工智能:神经网络与模型训练详解
  • MySQL 数据类型详解与选型指南
  • 互联网产品经理转型 AI 产品经理实战指南
  • Chaterm 开源 AI 智能终端与 SSH 客户端功能解析
  • Browser-Use WebUI 本地部署与 AI 浏览器自动化应用
  • 基于 AI API 的海龟汤互动游戏开发实践
  • OpenClaw Dashboard 无法登录 Web 控制面板的解决方案
  • Formality 原语(primitive)概念详解
  • Web 项目自动化测试实战:从零搭建博客系统 UI 框架
  • Python 基础:元组与列表详解
  • 二叉树算法实战:美国血统与公共祖先求解
  • 动态规划(DP)基础:状态表示与转移方程详解
  • Stable Diffusion 报错修复:CheckpointLoaderSimple 模型缺失
  • 2026 年 3 月 18 日人工智能产业动态:算力、智能体与生态
  • Python 实现图像像素化特效
  • Testsigma开源自动化测试平台部署与使用指南
  • Python 2026 发展局势:AI 时代的通用基础设施语言
  • ChatGPT 到 AI 大模型私有化部署:企业技术选择分析
  • Seedance 2.0 影视级视频生成能力实测

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online