PageSourceSearch

https://www.upma.cn/blog

html upma.cn collected 2026-10-06 13:15:06 UTC 177,035 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html lang="zh-CN" class="scroll-smooth"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/images/blog/ai-image-assets-for-websites/cover.png"/><link rel="preload" as="image" href="/images/blog/ai-cover-composition-guide/cover.png"/><link rel="preload" as="image" href="/images/blog/ai-image-prompt-guide/cover.png"/><link rel="preload" as="image" href="/images/blog/ai-product-image-and-poster-guide/cover.png"/><link rel="preload" as="image" href="/images/blog/reference-image-editing-workflow/cover.png"/><link rel="preload" as="image" href="/images/blog/ai-image-tool-workflow-guide/cover.png"/><link rel="preload" as="image" href="/images/blog/pdf-link-online-preview-cover.svg"/><link rel="preload" as="image" href="/images/blog/resume-pdf-vs-website-cover.svg"/><link rel="preload" as="image" href="/images/blog/static-site-analytics-cover.svg"/><link rel="preload" as="image" href="/images/blog/static-site-password-cover.svg"/><link rel="stylesheet" href="/_next/static/chunks/d35f63c56af26677.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/a4c94fca0c700d6c.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/de81b9ff91d90478.js"/>
1<script src="/_next/static/chunks/fcda6e343690ddf7.js" async=""></script>
1<script src="/_next/static/chunks/e075697bef6197d4.js" async=""></script>
1<script src="/_next/static/chunks/a58e9621eaaff906.js" async=""></script>
1<script src="/_next/static/chunks/53e1ffdd97e720a8.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-47769c0053d01043.js" async=""></script>
1<script src="/_next/static/chunks/733d483dbb25b2a8.js" async=""></script>
1<script src="/_next/static/chunks/e61992e38fd16c06.js" async=""></script>
1<script src="/_next/static/chunks/fe96ba40e9e8ef1d.js" async=""></script>
1<script src="/_next/static/chunks/db81d66fdcac06eb.js" async=""></script>
1<script src="/_next/static/chunks/61148fb845518522.js" async=""></script>
1<script src="/_next/static/chunks/b2b9122c1b63621e.js" async=""></script>
1<script src="/_next/static/chunks/395e51502c352751.js" async=""></script>
1<script src="/_next/static/chunks/de229e9e76854d6d.js" async=""></script>
1<script src="/_next/static/chunks/8f11cc485796c631.js" async=""></script>
1<link rel="preload" as="image" href="/images/blog/static-site-rollback-cover.svg"/><link rel="preload" as="image" href="/images/blog/student-homework-link-cover.svg"/><link rel="preload" as="image" href="/images/blog/ai-website-publish-cover.jpg"/><link rel="preload" as="image" href="/images/blog/custom-domain-cover.jpg"/><link rel="preload" as="image" href="/images/blog/html-file-url-cover.jpg"/><link rel="preload" as="image" href="/images/blog/designer-portfolio.jpg"/><link rel="preload" as="image" href="/images/blog/github-pages-migration.jpg"/><link rel="preload" as="image" href="/images/blog/nextjs-deployment-fail.jpg"/><link rel="preload" as="image" href="/images/blog/vercel-slow-china.jpg"/><link rel="preload" as="image" href="/images/blog/getting-started.jpg"/><link rel="preload" as="image" href="/images/blog/cas-architecture.jpg"/><link rel="preload" as="image" href="/images/blog/gemini-deepseek-code.jpg"/><meta name="next-size-adjust" content=""/><title>博客 - 静态网站托管、部署教程与实战案例 | 上码</title><meta name="description" content="上码官方博客,持续分享静态网站托管、前端部署、性能优化与 SEO 实战教程,覆盖 React/Vue/Next.js 发布流程、AI 生成网页上线经验和产品更新。"/><meta name="keywords" content="静态网站托管教程,前端部署实战,React Vue Next.js 发布,AI 网页上线,网站性能优化,SEO 增长案例,Jamstack"/><meta name="robots" content="index, follow"/><link rel="canonical" href="https://www.upma.cn/blog"/><meta property="og:title" content="博客 - 静态网站托管、部署教程与实战案例 | 上码"/><meta property="og:description" content="聚焦静态托管、前端部署与 SEO 增长,提供 React/Vue/Next.js 实战教程和案例复盘。"/><meta property="og:url" content="https://www.upma.cn/blog"/><meta property="og:image" content="https://www.upma.cn/images/blog/ai-website-publish-cover.jpg"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="博客 - 静态网站托管、部署教程与实战案例 | 上码"/><meta name="twitter:description" content="聚焦静态托管、前端部署与 SEO 增长,提供 React/Vue/Next.js 实战教程和案例复盘。"/><meta name="twitter:image" content="https://www.upma.cn/images/blog/ai-website-publish-cover.jpg"/><link rel="icon" href="/favicon.ico?favicon.441ae040.ico" sizes="256x256" type="image/x-icon"/>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased overflow-x-hidden bg-gray-50 dark:bg-[#050505] text-slate-900 dark:text-white"><div hidden=""><!--$--><!--/$--></div><style>#nprogress{pointer-events:none}#nprogress .bar{background:linear-gradient(to right, #6366f1, #8b5cf6, #ec4899);position:fixed;z-index:1600;top: 0;left:0;width:100%;height:3px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #8b5cf6,0 0 5px #8b5cf6;opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1600;top: 15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:linear-gradient(to right, #6366f1, #8b5cf6, #ec4899);border-left-color:linear-gradient(to right, #6366f1, #8b5cf6, #ec4899);border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"上码","applicationCategory":"DeveloperApplication","operatingSystem":"Web","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"description":"A platform to deploy AI-generated code (DeepSeek, ChatGPT, Claude) to the web instantly."}</script>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<nav class="fixed top-0 w-full z-50 backdrop-blur-xl border-b transition-all bg-white/80 border-stone-200 supports-[backdrop-filter]:bg-white/60"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between items-center h-16 relative"><div class="flex items-center gap-2 cursor-pointer relative z-20"><svg width="160" height="32" viewBox="0 0 160 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="-ml-4 sm:ml-0" aria-label="上码 Logo"><defs><linearGradient id="circle_bg" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1e1b4b"></stop> <stop offset="100%" stop-color="#2e1065"></stop> </linearGradient><linearGradient id="triangle_gradient" x1="20" y1="10" x2="20" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#6366f1"></stop> <stop offset="50%" stop-color="#8b5cf6"></stop> <stop offset="100%" stop-color="#ec4899"></stop> </linearGradient><linearGradient id="light_text_gradient" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1f2937"></stop> <stop offset="100%" stop-color="#4b5563"></stop> </linearGradient><filter id="text_shadow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.1"></feDropShadow></filter></defs><g><circle cx="20" cy="20" r="20" fill="url(#circle_bg)"></circle><circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.1" stroke-width="1"></circle><path d="M20 11L30 29H10L20 11Z" fill="url(#triangle_gradient)" class="drop-shadow-sm"></path></g><g transform="translate(48, 0)"><text x="0" y="29" fill="url(#light_text_gradient)" filter="url(#text_shadow)" font-size="24" font-weight="900" font-family="PingFang SC, Microsoft YaHei, system-ui, sans-serif" letter-spacing="0.02em">上码</text><g transform="translate(54, 0)"><text x="0" y="17" fill="url(#triangle_gradient)" font-size="12" font-weight="900" font-family="Manrope, Inter, system-ui, sans-serif" letter-spacing="0.1em" style="text-transform:uppercase">up</text><text x="0" y="31" font-size="12" font-family="Manrope, Inter, system-ui, sans-serif" font-weight="900" letter-spacing="0.1em"><tspan fill="url(#triangle_gradient)" style="text-transform:uppercase">ma</tspan><tspan fill="#4b5563" fill-opacity="1" font-weight="600" font-size="10" dx="2">.cn</tspan></text></g></g></svg></div><div class="hidden md:flex items-center space-x-1 absolute left-1/2 -translate-x-1/2 h-full"><div class="relative h-full flex items-center px-4"><button class="flex items-center gap-1 text-[0.925rem] font-medium transition-colors text-stone-600 hover:text-stone-900">功能<svg class="w-4 h-4 transition-transform duration-200 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button><div class="absolute top-full left-1/2 -translate-x-1/2 pt-4 w-[820px]" style="opacity:0;pointer-events:none;visibility:hidden;transform:translateY(10px) scale(0.95)"><div class="bg-white border border-stone-200 rounded-2xl shadow-2xl p-6 relative overflow-hidden"><div class="absolute inset-0 bg-linear-to-br from-transparent to-transparent pointer-events-none"></div><div class="grid grid-cols-3 gap-4 relative z-10"><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/global-cdn"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">全球 CDN 加速</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">280+ 节点毫秒级触达</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/free-ssl"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">免费 SSL 证书</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">自动续期,永久免费</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/cli-deploy"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">CLI 极速部署</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">一行命令发布上线</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/instant-rollback"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">秒级回滚</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">快速恢复到任意版本</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/custom-domains"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">自定义域名</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">绑定您的专属品牌域名</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/password-protection"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">密码访问保护</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">私密项目安全防护</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/analytics"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">访问统计</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">实时流量分析与洞察</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features/team-collaboration"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 
10 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">团队协作</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">多人协同开发与管理</div></div></a><a class="group flex items-start gap-4 p-4 rounded-xl transition-colors hover:bg-stone-50" href="/features"><div class="p-2 rounded-lg transition-colors bg-stone-100 text-stone-600 group-hover:text-amber-600 group-hover:bg-amber-50"><svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg></div><div><div class="text-sm font-bold transition-colors text-stone-800 group-hover:text-amber-600">全部特性</div><div class="text-xs mt-1 text-stone-500 group-hover:text-stone-600">探索所有平台能力</div></div></a></div></div></div></div><div class="relative h-full flex items-center px-4"><button class="flex items-center gap-1 text-[0.925rem] font-medium transition-colors text-stone-600 hover:text-stone-900">工具<svg class="w-4 h-4 transition-transform duration-200 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button><div class="absolute top-full left-1/2 -translate-x-1/2 pt-4 w-[1000px]" style="opacity:0;pointer-events:none;visibility:hidden;transform:translateY(10px) scale(0.95)"><div class="bg-white border border-stone-200 rounded-2xl shadow-2xl p-6 relative overflow-hidden"><div class="absolute inset-0 bg-linear-to-br from-transparent to-transparent pointer-events-none"></div><div class="grid grid-cols-5 gap-8 relative z-10"><div><h4 class="text-xs font-bold uppercase tracking-wider mb-4 border-b pb-2 text-stone-500 border-stone-100">框架部署</h4><ul class="space-y-2"><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/frameworks"><span>框架部署总览</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">导航</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-html"><span>HTML 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">热门</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-vue"><span>Vue 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">流行</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-react"><span>React 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">流行</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-next"><span>Next.js 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">热门</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-deepseek"><span>DeepSeek 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">AI</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-chatgpt"><span>ChatGPT 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">AI</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/deploy-gemini"><span>Gemini 部署</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">AI</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/host-pdf"><span>PDF 托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">工具</span></a></li></ul></div><div><h4 class="text-xs font-bold uppercase tracking-wider mb-4 border-b pb-2 text-stone-500 border-stone-100">托管场景</h4><ul class="space-y-2"><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/personal-website"><span>个人网站托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">热门</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/student-hosting"><span>学生作业托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">免费</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/resume"><span>简历托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">推荐</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/portfolio"><span>作品集托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">设计</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/documentation"><span>文档托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">技术</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/marketing"><span>H5 营销页</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">运营</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/web-games"><span>Web 游戏托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">娱乐</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/deploy/link-in-bio"><span>导航页托管</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">社交</span></a></li></ul></div><div><h4 class="text-xs font-bold uppercase tracking-wider mb-4 border-b pb-2 text-stone-500 border-stone-100">开发必备</h4><ul class="space-y-2"><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/json-formatter"><span>JSON 格式化</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">日常</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/timestamp"><span>
1时间戳转换</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">日常</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/uuid"><span>UUID/ULID</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">生成</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/regex"><span>正则测试 (Regex)</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">专业</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/sql-formatter"><span>SQL 格式化</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">格式</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/jwt"><span>JWT 解析</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">调试</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/crontab"><span>Crontab 生成</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">工具</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/chmod"><span>Linux 权限计算</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">运维</span></a></li></ul></div><div><h4 class="text-xs font-bold uppercase tracking-wider mb-4 border-b pb-2 text-stone-500 border-stone-100">前端与设计</h4><ul class="space-y-2"><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/qrcode"><span>二维码生成</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">生成</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/mockup"><span>设备样机生成</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">设计</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/svg-optimizer"><span>SVG 压缩</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">优化</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/favicon"><span>Favicon 生成</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">生成</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/color-converter"><span>颜色转换</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">设计</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/minifier"><span>代码压缩 (Minifier)</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">优化</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/css-to-tailwind"><span>CSS 转 Tailwind</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">转换</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/og-image"><span>OG 图片生成</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">社交</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/lorem-ipsum"><span>Lorem Ipsum</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">文本</span></a></li></ul></div><div><h4 class="text-xs font-bold uppercase tracking-wider mb-4 border-b pb-2 text-stone-500 border-stone-100">网络与 SEO</h4><ul class="space-y-2"><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/ip"><span>IP 查询</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">查询</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/ssl-check"><span>SSL 证书检测</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">最新</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/ping"><span>Ping 检测</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">网络</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/dns"><span>DNS 查询</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">查询</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/user-agent"><span>User Agent 分析</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">信息</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/robots"><span>Robots.txt</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">SEO</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/meta-generator"><span>Meta 生成器</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">SEO</span></a></li><li><a class="flex items-center justify-between text-sm group transition-colors text-stone-600 hover:text-amber-600" href="/tools/utm-builder"><span>UTM 参数生成</span><span class="text-[10px] px-1.5 py-0.5 rounded ml-2 bg-amber-50 text-amber-600">追踪</span></a></li></ul></div></div></div></div></div><a class="px-4 text-[0.925rem] font-medium transition-colors text-stone-600 hover:text-stone-900" href="/pricing">定价</a><a class="px-4 text-[0.925rem] font-medium transition-colors cursor-pointer text-stone-600 hover:text-stone-900" href="/docs">教程</a><a class="px-4 text-[0.925rem] font-medium transition-colors cursor-pointer text-stone-600 hover:text-stone-900" href="/explore">探索广场</a></div><div class="flex items-center gap-4 relative z-20"><a class="text-sm font-medium transition-colors md:hidden text-stone-600 hover:text-stone-900" href="/pricing">定价</a><button class="text-sm font-medium transition-colors hidden sm:block text-stone-600 hover:text-stone-900">登录</button><button class="text-white rounded-full px-5 py-1.5 text-sm font-medium transition-colors bg-[#050505] hover:bg-black shadow-lg shadow-black/20">免费注册</button></div></div></div></nav><main>
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"首页","item":"https://www.upma.cn/"},{"@type":"ListItem","position":2,"name":"博客","item":"https://www.upma.cn/blog"}]}</script>
1<div class="min-h-screen bg-[#fdfbf7]"><section class="relative overflow-hidden bg-[#fdfbf7] pb-16 pt-38"><div class="container relative mx-auto max-w-6xl px-6"><div class="flex flex-col items-center text-center"><h1 class="mb-8 text-4xl font-bold tracking-tight text-stone-900 md:text-5xl lg:text-7xl">洞察 · 实践 · 分享</h1><p class="max-w-4xl text-xl leading-relaxed text-stone-500">深入静态网站托管技术,探索 Jamstack 架构最佳实践, 记录产品迭代与技术演进。</p><div class="mt-6 flex flex-wrap justify-center gap-3"><span class="rounded-full bg-stone-900 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-stone-900/20 transition-transform hover:scale-105">全部</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">实战教程</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">实用指南</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">求职指南</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">学生教程</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">入门教程</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">Creator Economy</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">Hardcore Tech</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">技术洞察</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">新手教程</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">教程</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">技术分享</span><span class="cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200">AI &amp; Trends</span></div></div></div></section><section class="py-2"><div class="container mx-auto max-w-6xl px-6"><div class="mb-8 flex items-center justify-between"><h2 class="flex items-center gap-2 text-lg font-bold text-stone-900"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-5 w-5 text-yellow-500 fill-yellow-500" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>本周精选</h2></div><a class="group relative block overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/ai-image-assets-for-websites"><div class="grid md:grid-cols-2"><div class="relative h-64 overflow-hidden bg-stone-100 md:h-full"><img src="/images/blog/ai-image-assets-for-websites/cover.png" alt="AI 图像素材怎么放进网站?先看首屏、博客卡片和分享预览" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/></div><div class="flex flex-col justify-center p-8 md:p-12"><div class="mb-6 flex flex-wrap items-center gap-3 text-sm"><span class="rounded-full bg-blue-50 px-3 py-1 font-medium text-blue-600 ring-1 ring-blue-100">实战教程</span><span class="text-stone-400">·</span><span class="text-stone-500">2026-05-17</span></div><h2 class="mb-4 text-3xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 图像素材怎么放进网站?先看首屏、博客卡片和分享预览</h2><p class="mb-8 line-clamp-3 text-lg leading-relaxed text-stone-600">
1AI 图像不只是生成出来就完了,真正要用在网站里,还要考虑尺寸、裁切、卡片展示和社交预览。这篇文章讲清楚怎么把图像素材放进真实页面而不翻车。</p><div class="flex items-center justify-between"><div class="flex items-center gap-2"><svg width="24" height="24" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="-mr-1" aria-label="上码 Logo"><defs><linearGradient id="circle_bg" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1e1b4b"></stop> <stop offset="100%" stop-color="#2e1065"></stop> </linearGradient><linearGradient id="triangle_gradient" x1="20" y1="10" x2="20" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#6366f1"></stop> <stop offset="50%" stop-color="#8b5cf6"></stop> <stop offset="100%" stop-color="#ec4899"></stop> </linearGradient><linearGradient id="dark_text_gradient" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#dedede"></stop><stop offset="100%" stop-color="#a0aec0"></stop></linearGradient><filter id="text_shadow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.5"></feDropShadow></filter></defs><g><circle cx="20" cy="20" r="20" fill="url(#circle_bg)"></circle><circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.1" stroke-width="1"></circle><path d="M20 11L30 29H10L20 11Z" fill="url(#triangle_gradient)" class="drop-shadow-sm"></path></g></svg><span class="text-sm font-medium text-stone-700">上码团队</span></div><div class="flex items-center gap-1.5 text-sm font-medium text-stone-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>5 分钟</div></div></div></div></a></div></section><section class="py-16"><div class="container mx-auto max-w-6xl px-6"><h2 class="mb-8 text-lg font-medium text-stone-900">更多文章</h2><div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3"><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/ai-cover-composition-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/ai-cover-composition-guide/cover.png" alt="AI 生成封面怎么避免裁切翻车?先留安全区,
1再谈视觉风格" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-05-17</span><span>·</span><span>5 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 生成封面怎么避免裁切翻车?先留安全区,再谈视觉风格</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">很多封面图本身不差,问题出在缩成卡片后主体被切掉、标题区被填满、移动端预览失控。这篇文章讲清封面图应该怎么构图,才适合博客、社交和卡片展示。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->AI 封面</span><span class="text-xs text-stone-400">#<!-- -->构图</span><span class="text-xs text-stone-400">#<!-- -->博客配图</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/ai-image-prompt-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/ai-image-prompt-guide/cover.png" alt="AI 生图提示词怎么写?先锁住保留项,再谈风格和氛围" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-05-17</span><span>·</span><span>6 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 生图提示词怎么写?先锁住保留项,再谈风格和氛围</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">很多 AI 生图失败,不是模型不够强,而是提示词把保留项和修改项写反了。这篇文章用商品图、封面图和活动海报三个场景,讲清提示词应该怎么分层写。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->AI 生图</span><span class="text-xs text-stone-400">#<!-- -->提示词</span><span class="text-xs text-stone-400">#<!-- -->GPT Image 2</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/ai-product-image-and-poster-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/ai-product-image-and-poster-guide/cover.png" alt="AI 商品图和海报怎么做才像能交付?先稳主体,再补氛围" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-05-17</span><span>·</span><span>5 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 商品图和海报怎么做才像能交付?先稳主体,再补氛围</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">商品图和海报最容易翻车的地方,不是背景不够漂亮,而是主体被改形、标题区没留、最终图放不进真实页面。这篇文章用商业交付视角讲清怎么写和怎么改。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->AI 商品图</span><span class="text-xs text-stone-400">#<!-- -->AI 海报</span><span class="text-xs text-stone-400">#<!-- -->商业交付</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/reference-image-editing-workflow"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/reference-image-editing-workflow/cover.png" alt="AI 修改图片怎么做?图生图与参考图编辑的实战流程" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-05-02</span><span>·</span><span>12 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 修改图片怎么做?图生图与参考图编辑的实战流程</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">AI 修改图片经常失败在边界没写清:哪些要保留,哪些能变化。用商品图换背景、封面留白和人物图编辑几个场景,讲清图生图与参考图编辑的稳定流程。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->AI 修改图片</span><span class="text-xs text-stone-400">#<!-- -->图生图</span><span class="text-xs text-stone-400">#<!-- -->参考图编辑</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/ai-image-tool-workflow-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/ai-image-tool-workflow-guide/cover.png" alt="AI 生图工具怎么用?GPT Image 2 文生图、图生图工作台指南" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-05-01</span><span>·</span><span>13 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 生图工具怎么用?GPT Image 2 文生图、图生图工作台指南</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">想用 AI 生图做商品图、海报、封面和视觉提案,先别急着堆提示词。先分清文生图、图生图、GPT Image 2、模型选择和质量档位,再把结果持续改到可用。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->AI 生图</span><span class="text-xs text-stone-400">#<!-- -->GPT Image 2</span><span class="text-xs text-stone-400">#<!-- -->文生图</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/pdf-file-to-link-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/pdf-link-online-preview-cover.svg" alt="PDF 文件怎么变成链接?让别人一打开就能在线预览的最短方法" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实用指南</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-04-13</span><span>·</span><span>13 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">PDF 文件怎么变成链接?让别人一打开就能在线预览的最短方法</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">手里有一份 PDF,怎么发给别人才能一点就开、在线预览,不用先下载、不用再解释文件在哪?这篇文章把几种常见方法和适用场景讲清楚。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->PDF 文件</span><span class="text-xs text-stone-400">#<!-- -->PDF 在线预览</span><span class="text-xs text-stone-400">#<!-- -->PDF 链接</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/resume-pdf-vs-website-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/resume-pdf-vs-website-cover.svg" alt="PDF 简历和网页简历怎么选?什么时候该做一个简历网站" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">求职指南</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-04-13</span><span>·</span><span>12 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">PDF 简历和网页简历怎么选?什么时候该做一个简历网站</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">
1找工作时到底该继续发 PDF,还是补一个网页简历?这篇文章把两种形式的优缺点、适用场景和最稳的组合方式讲清楚。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->PDF 简历</span><span class="text-xs text-stone-400">#<!-- -->网页简历</span><span class="text-xs text-stone-400">#<!-- -->简历网站</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/static-site-analytics-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/static-site-analytics-cover.svg" alt="静态网站怎么做访问统计?先看 PV、设备和地区,再决定要不要上复杂埋点" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-04-13</span><span>·</span><span>14 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">静态网站怎么做访问统计?先看 PV、设备和地区,再决定要不要上复杂埋点</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">网站已经上线,下一步不是盲目改首页,而是先看谁在访问、从哪种设备访问、哪些时间段有波动。这篇文章讲清静态网站最值得先看的几类数据,以及怎么避免一开始就把统计系统做得过重。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->网站访问统计</span><span class="text-xs text-stone-400">#<!-- -->静态网站分析</span><span class="text-xs text-stone-400">#<!-- -->PV UV</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/static-site-password-protection-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/static-site-password-cover.svg" alt="网站上线后怎么加访问密码?预览站、作品集和客户演示页都适用" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-04-13</span><span>·</span><span>15 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">网站上线后怎么加访问密码?预览站、作品集和客户演示页都适用</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">网站已经能打开,但还不想完全公开?这篇文章讲清访问密码最适合的几个场景,以及静态网站怎样用更轻的方式做密码保护,既方便预览,也不把自己拖进复杂运维。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->网站访问密码</span><span class="text-xs text-stone-400">#<!-- -->静态网站</span><span class="text-xs text-stone-400">#<!-- -->作品集预览</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/static-site-version-rollback-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/static-site-rollback-cover.svg" alt="网站更新翻车了怎么办?静态网站版本回滚的最短路径" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-04-13</span><span>·</span><span>14 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">网站更新翻车了怎么办?静态网站版本回滚的最短路径</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">页面刚发上去就白屏、样式错乱、资源 404,不一定要连夜热修。对静态网站来说,更稳的做法通常是先回滚到上一个可用版本,再定位问题。这篇文章讲清什么时候该回滚、为什么它比硬修更稳,以及它真正依赖的底层能力。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->版本回滚</span><span class="text-xs text-stone-400">#<!-- -->静态网站部署</span><span class="text-xs text-stone-400">#<!-- -->网站发布</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/student-homework-link-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/student-homework-link-cover.svg" alt="网页大作业怎么交链接?从本地文件到è€
1å¸ˆèƒ½ç›´æŽ¥æ‰“开的网址" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">学生教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-04-13</span><span>·</span><span>12 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">网页大作业怎么交链接?从本地文件到老师能直接打开的网址</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">很多网页作业不是做不出来,而是交不上去。老师要的是能直接打开的链接,不是你电脑里的 localhost,也不是一份不知道怎么运行的压缩包。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->网页大作业</span><span class="text-xs text-stone-400">#<!-- -->作业链接</span><span class="text-xs text-stone-400">#<!-- -->HTML 作业提交</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/ai-generated-website-publish-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/ai-website-publish-cover.jpg" alt="AI 生成的网站怎么上线?从聊天框到真实网址的完整指南" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-03-12</span><span>·</span><span>14 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">AI 生成的网站怎么上线?从聊天框到真实网址的完整指南</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">ChatGPT、Gemini、Claude 帮你写出了网页代码,下一步怎么把它变成别人能访问的网址?这篇文章用更稳的顺序讲清楚:文件整理、部署、自定义域名、HTTPS 和上线后的关键检查项。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->AI 建站</span><span class="text-xs text-stone-400">#<!-- -->网站上线</span><span class="text-xs text-stone-400">#<!-- -->HTML 部署</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/custom-domain-static-site-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/custom-domain-cover.jpg" alt="静态网站怎么绑定自定义域名?从 DNS 到 HTTPS 一次讲清" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-03-12</span><span>·</span><span>12 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">静态网站怎么绑定自定义域名?从 DNS 到 HTTPS 一次讲清</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">已经有了网站链接,下一步怎么换成自己的域名?这篇文章系统讲清静态网站绑定自定义域名的完整流ç¨
1‹ï¼šDNS 记录、CNAME、TXT 验证、HTTPS、常见报错和排查顺序。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->自定义域名</span><span class="text-xs text-stone-400">#<!-- -->HTTPS</span><span class="text-xs text-stone-400">#<!-- -->静态网站</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/html-file-to-url-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/html-file-url-cover.jpg" alt="HTML 文件怎么变成网址?新手也能看懂的发布指南" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">入门教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2026-03-12</span><span>·</span><span>12 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">HTML 文件怎么变成网址?新手也能看懂的发布指南</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">手里只有一个 HTML 文件,怎么把它变成别人能打开的网址?这篇文章从文件准备、静态托管、域名绑定到常见报错,系统讲清楚 HTML 上线的最短路径。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->HTML 文件</span><span class="text-xs text-stone-400">#<!-- -->网页发布</span><span class="text-xs text-stone-400">#<!-- -->静态网站</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/designer-portfolio-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/designer-portfolio.jpg" alt="设计师别再发 PDF 了!5 分钟搭一个秒杀 Behance 的作品集网站" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">Creator Economy</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-31</span><span>·</span><span>10 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">设计师别再发 PDF 了!5 分钟搭一个秒杀 Behance 的作品集网站</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">如果你已经有作品,只是还停留在 PDF、压缩包或平台主页里,这篇文章会讲清楚:为什么越来越多设计师开始补一个独立作品集网站,以及怎么用更轻的路径把它发出去。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->作品集</span><span class="text-xs text-stone-400">#<!-- -->设计师</span><span class="text-xs text-stone-400">#<!-- -->摄影师</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/github-pages-alternative-china"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/github-pages-migration.jpg" alt="从 GitHub Pages 迁移到国内边缘网络:网站速度提升 10 倍实录" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">实战教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-30</span><span>·</span><span>7 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">从 GitHub Pages 迁移到国内边缘网络:网站速度提升 10 倍实录</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">
1GitHub Pages 经常无法访问?Hexo/Hugo 博客加载太慢?本文深入分析 SNI 阻断与物理延迟的根本原因,记录了从 GitHub 迁移到 ESA 边缘网络的全过程,实测首屏时间优化至 0.4 秒。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->GitHub Pages</span><span class="text-xs text-stone-400">#<!-- -->迁移指南</span><span class="text-xs text-stone-400">#<!-- -->网站加速</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/nextjs-15-deployment-guide"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/nextjs-deployment-fail.jpg" alt="Next.js 15 部署避坑指南:Text content does not match 与静态导出的那些“坑”" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">Hardcore Tech</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-30</span><span>·</span><span>11 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">Next.js 15 部署避坑指南:Text content does not match 与静态导出的那些“坑”</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">如果你的 Next.js 项目本地正常、上线后却出现 Hydration Error、动态路由 404 或图片问题,这篇文章会把最常见的原因和排查顺序讲清楚。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->Next.js 15</span><span class="text-xs text-stone-400">#<!-- -->部署</span><span class="text-xs text-stone-400">#<!-- -->Hydration Error</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/vercel-alternative-china-2025"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/vercel-slow-china.jpg" alt="2025年了,Vercel 国内访问还是很慢?试试这个更适合中国开发者的部署方案" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">技术洞察</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-29</span><span>·</span><span>7 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">2025年了,Vercel 国内访问还是很慢?试试这个更适合中国开发者的部署方案</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">Next.js 部署国内访问太慢?本文对比 CDN 回源、自建 Nginx 等常见方案,深入解析 CAS 架构与阿里云 ESA 边缘加速如何解决静态网站托管的性能瓶颈。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->Next.js</span><span class="text-xs text-stone-400">#<!-- -->部署</span><span class="text-xs text-stone-400">#<!-- -->Vercel</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/getting-started"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/getting-started.jpg" alt="不用买服务器,怎么免费上线个人网站或作品集?" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">新手教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-23</span><span>·</span><span>9 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">不用买服务器,怎么免费上线个人网站或作品集?</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">如果你手里已经有 HTML、作品集页面或前端构建产物,这篇文章会用一条更轻的路径讲清楚:怎么在不买服务器的前提下,把本地文件变成可访问网址。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->免费建站</span><span class="text-xs text-stone-400">#<!-- -->个人主页</span><span class="text-xs text-stone-400">#<!-- -->作品集</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/github-pages-migration"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/github-pages-migration.jpg" alt="从 GitHub Pages 迁移到上码" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">教程</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-22</span><span>·</span><span>9 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">从 GitHub Pages 迁移到上码</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">如果你已经在用 GitHub Pages,但想要更快的国内访问、更直接的版本管理和更轻的自定义域名流程,这篇文章会把迁移时最该检查的点讲清楚。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->迁移</span><span class="text-xs text-stone-400">#<!-- -->GitHub Pages</span><span class="text-xs text-stone-400">#<!-- -->
1对比</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/cas-architecture"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/cas-architecture.jpg" alt="CAS 内容寻址存储:上码的核心技术" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">技术分享</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-12-21</span><span>·</span><span>10 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">CAS 内容寻址存储:上码的核心技术</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">不是每次部署都该重新上传全部文件。本文用更具体的方式解释 CAS 在静态网站托管里的作用:为什么它能减少重复上传、让版本回退更干净,并帮助静态资源更稳定地分发。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->CAS</span><span class="text-xs text-stone-400">#<!-- -->架构</span><span class="text-xs text-stone-400">#<!-- -->技术</span></div></div></a><a class="group flex flex-col overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-black/5 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-stone-200/50 hover:ring-stone-200" href="/blog/deepseek-chatgpt-html-deploy"><div class="relative aspect-[16/9] overflow-hidden bg-stone-100"><img src="/images/blog/gemini-deepseek-code.jpg" alt="Gemini + DeepSeek:全网刷屏的&quot;Vibe Coding&quot;,三步教你一键上线" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"/><div class="absolute left-4 top-4"><span class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-stone-700 shadow-sm backdrop-blur-sm">AI &amp; Trends</span></div></div><div class="flex flex-1 flex-col p-6"><div class="mb-3 flex items-center gap-2 text-xs text-stone-500"><span>2025-01-01</span><span>·</span><span>8 分钟</span></div><h3 class="mb-3 text-xl font-bold leading-tight text-stone-900 transition-colors group-hover:text-blue-600">Gemini + DeepSeek:全网刷屏的&quot;Vibe Coding&quot;,三步教你一键上线</h3><p class="mb-6 flex-1 line-clamp-2 text-sm leading-relaxed text-stone-600">AI 已经能帮你写网页,但很多人还是卡在最后一步:怎么把聊天框里的代码变成别人能访问的真实网址。这篇文章讲清楚从 AI 代码到公网链接的最短流程。</p><div class="mt-auto flex flex-wrap gap-2"><span class="text-xs text-stone-400">#<!-- -->Gemini</span><span class="text-xs text-stone-400">#<!-- -->DeepSeek</span><span class="text-xs text-stone-400">#<!-- -->Vibe Coding</span></div></div></a></div></div></section><section class="border-t border-stone-200 bg-[#fbf9f4] py-20"><div class="container mx-auto max-w-2xl px-6 text-center"><h3 class="mb-4 text-2xl font-bold text-stone-900">订阅技术周刊</h3><p class="mb-8 text-stone-600">获取最新技术文章、产品更新和行业洞察,每周一封。</p><div class="flex flex-col gap-3 sm:flex-row sm:justify-center"><input type="email" placeholder="[email protected]" class="rounded-lg border border-stone-200 bg-white px-4 py-3 text-stone-900 placeholder-stone-400 outline-none transition-all focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:w-64"/><button class="rounded-lg bg-stone-900 px-6 py-3 font-medium text-white transition-colors hover:bg-stone-800">订阅</button></div><p class="mt-4 text-xs text-stone-500">我们尊重您的隐私,随时可以取消订阅。</p></div></section></div><!--$--><!--/$--></main><footer class="relative overflow-hidden border-t border-white/10 bg-[#020202] pt-12 pb-8 sm:pt-16 lg:pt-20 lg:pb-10"><div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-blue-400/40 to-transparent"></div><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="mb-10 flex flex-col gap-8 lg:mb-16 lg:flex-row lg:gap-12"><div class="flex flex-col items-center gap-5 border-b border-white/10 pb-8 text-center sm:items-start sm:text-left lg:w-1/4 lg:border-b-0 lg:pb-0"><svg width="160" height="32" viewBox="0 0 160 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="sm:-ml-4" aria-label="上码 Logo"><defs><linearGradient id="circle_bg" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1e1b4b"></stop> <stop offset="100%" stop-color="#2e1065"></stop> </linearGradient><linearGradient id="triangle_gradient" x1="20" y1="10" x2="20" y2="32" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#6366f1"></stop> <stop offset="50%" stop-color="#8b5cf6"></stop> <stop offset="100%" stop-color="#ec4899"></stop> </linearGradient><linearGradient id="dark_text_gradient" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#dedede"></stop><stop offset="100%" stop-color="#a0aec0"></stop></linearGradient><filter id="text_shadow" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.5"></feDropShadow></filter></defs><g><circle cx="20" cy="20" r="20" fill="url(#circle_bg)"></circle><circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.1" stroke-width="1"></circle><path d="M20 11L30 29H10L20 11Z" fill="url(#triangle_gradient)" class="drop-shadow-sm"></path></g><g transform="translate(48, 0)">
1<text x="0" y="29" fill="url(#dark_text_gradient)" filter="url(#text_shadow)" font-size="24" font-weight="900" font-family="PingFang SC, Microsoft YaHei, system-ui, sans-serif" letter-spacing="0.02em">上码</text><g transform="translate(54, 0)"><text x="0" y="17" fill="url(#triangle_gradient)" font-size="12" font-weight="900" font-family="Manrope, Inter, system-ui, sans-serif" letter-spacing="0.1em" style="text-transform:uppercase">up</text><text x="0" y="31" font-size="12" font-family="Manrope, Inter, system-ui, sans-serif" font-weight="900" letter-spacing="0.1em"><tspan fill="url(#triangle_gradient)" style="text-transform:uppercase">ma</tspan><tspan fill="white" fill-opacity="0.4" font-weight="600" font-size="10" dx="2">.cn</tspan></text></g></g></svg><p class="max-w-sm text-sm leading-relaxed text-gray-400 sm:max-w-xs">专为 AI 创作者打造的一站式代码发布平台。<br/>无需运维,专注于你的创意。</p><a href="mailto:[email protected]" class="inline-flex min-h-11 items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 text-sm font-medium text-gray-300 transition-colors hover:border-white/20 hover:bg-white/[0.06] hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail h-4 w-4" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>[email protected]</a></div><nav class="divide-y divide-white/10 rounded-lg border border-white/10 bg-white/[0.02] md:hidden" aria-label="页脚导航"><details class="group" open=""><summary class="flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [&amp;::-webkit-details-marker]:hidden"><span>产品功能</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><ul class="grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/global-cdn"><span>全球 CDN</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/free-ssl"><span>免费 SSL</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/custom-domains"><span>自定义域名</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/password-protection"><span>密码保护</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/instant-rollback"><span>秒级回滚</span></a></li></ul></details><details class="group"><summary class="flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [&amp;::-webkit-details-marker]:hidden"><span>托管场景</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><ul class="grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/personal-website"><span>个人网站托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/student-hosting"><span>学生作业托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/resume"><span>简历托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/portfolio"><span>作品集托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/link-in-bio"><span>导航页托管</span></a></li></ul></details>
1<details class="group"><summary class="flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [&amp;::-webkit-details-marker]:hidden"><span>框架部署</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><ul class="grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-html"><span>HTML 部署</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-react"><span>React 部署</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-vue"><span>Vue 部署</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/host-pdf"><span>PDF 托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-deepseek"><span>DeepSeek 部署</span></a></li></ul></details><details class="group"><summary class="flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [&amp;::-webkit-details-marker]:hidden"><span>开发工具</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><ul class="grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/json-formatter"><span>JSON 格式化</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/regex"><span>正则测试</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/ip"><span>IP 查询</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/ping"><span>Ping 检测</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors font-medium text-blue-300 hover:text-blue-200" href="/tools"><span>查看全部</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></li></ul></details><details class="group"><summary class="flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [&amp;::-webkit-details-marker]:hidden"><span>资源支持</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></summary><ul class="grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/pricing"><span>价格</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/docs"><span>使用指南</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/blog"><span>博客</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/legal/privacy"><span>隐私</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/legal/terms"><span>条款</span></a></li></ul></details></nav><nav class="hidden text-left md:grid md:grid-cols-3 md:gap-x-10 md:gap-y-10 lg:ml-auto lg:grid-cols-5 lg:gap-x-8" aria-label="页脚导航"><div class="min-w-0"><h3 class="mb-4 text-sm font-semibold text-gray-200">产品功能</h3><ul class="space-y-2 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/global-cdn"><span>全球 CDN</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/free-ssl"><span>免费 SSL</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/custom-domains"><span>自定义域名</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/password-protection"><span>密码保护</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/features/instant-rollback"><span>秒级回滚</span></a></li></ul></div><div class="min-w-0"><h3 class="mb-4 text-sm font-semibold text-gray-200">托管场景</h3><ul class="space-y-2 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/personal-website"><span>个人网站托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/student-hosting"><span>学生作业托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/resume"><span>简历托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/portfolio"><span>作品集托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/link-in-bio"><span>导航页托管</span></a></li></ul></div><div class="min-w-0"><h3 class="mb-4 text-sm font-semibold text-gray-200">框架部署</h3><ul class="space-y-2 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-html"><span>HTML 部署</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-react"><span>React 部署</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-vue"><span>Vue 部署</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/host-pdf"><span>PDF 托管</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/deploy/deploy-deepseek"><span>DeepSeek 部署</span></a></li></ul></div><div class="min-w-0"><h3 class="mb-4 text-sm font-semibold text-gray-200">开发工具</h3><ul class="space-y-2 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/json-formatter"><span>JSON 格式化</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/regex"><span>正则测试</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/ip"><span>IP 查询</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/tools/ping"><span>Ping 检测</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors font-medium text-blue-300 hover:text-blue-200" href="/tools"><span>查看全部</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3.5 w-3.5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></li></ul></div><div class="min-w-0"><h3 class="mb-4 text-sm font-semibold text-gray-200">资源支持</h3><ul class="space-y-2 text-sm"><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/pricing"><span>价格</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/docs"><span>使用指南</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/blog"><span>博客</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/legal/privacy"><span>隐私</span></a></li><li><a class="inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white" href="/legal/terms"><span>条款</span></a></li></ul></div></nav></div><div class="flex flex-col items-center justify-between gap-5 border-t border-white/10 pt-6 sm:pt-8 md:flex-row"><div class="flex flex-col items-center gap-2 text-center text-sm text-gray-600 sm:flex-row sm:gap-4 sm:text-left"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-400 transition-colors">粤ICP备2023011358号-3</a><p>© 2025 UpMa. All rights reserved.</p></div><div class="flex items-center gap-2"><a class="grid h-10 w-10 place-items-center rounded-full border border-white/10 bg-white/[0.03] text-gray-500 transition-colors duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white" aria-label="Twitter" href="#"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg></a><a class="grid h-10 w-10 place-items-center rounded-full border border-white/10 bg-white/[0.03] text-gray-500 transition-colors duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white" aria-label="GitHub" href="#"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158
1-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg></a><a class="grid h-10 w-10 place-items-center rounded-full border border-white/10 bg-white/[0.03] text-gray-500 transition-colors duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white" aria-label="Discord" href="#"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.5151.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z" clip-rule="evenodd"></path></svg></a></div></div></div></footer><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
1<script src="/_next/static/chunks/de81b9ff91d90478.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[756132,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\",\"/_next/static/chunks/fe96ba40e9e8ef1d.js\",\"/_next/static/chunks/db81d66fdcac06eb.js\",\"/_next/static/chunks/61148fb845518522.js\"],\"default\"]\n4:I[886281,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\",\"/_next/static/chunks/fe96ba40e9e8ef1d.js\",\"/_next/static/chunks/db81d66fdcac06eb.js\",\"/_next/static/chunks/61148fb845518522.js\"],\"PreviewCacheProvider\"]\n5:I[92337,[\"/_next/static/chunks/b2b9122c1b63621e.js\",\"/_next/static/chunks/395e51502c352751.js\"],\"default\"]\n6:I[64226,[\"/_next/static/chunks/b2b9122c1b63621e.js\",\"/_next/static/chunks/395e51502c352751.js\"],\"default\"]\n11:I[954354,[],\"default\"]\n:HL[\"/_next/static/chunks/d35f63c56af26677.css\",\"style\"]\n:HL[\"/_next/static/chunks/a4c94fca0c700d6c.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.29207c2f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.3b6cae6d.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"snPJzlrBIDHApgrpBbW3-\",\"c\":[\"\",\"blog?_rsc=1cxzx\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(blog)\",{\"children\":[\"blog\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/d35f63c56af26677.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/a4c94fca0c700d6c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/733d483dbb25b2a8.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/e61992e38fd16c06.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/fe96ba40e9e8ef1d.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/db81d66fdcac06eb.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/61148fb845518522.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[[\"$\",\"$L3\",null,{\"variant\":\"light\"}],[\"$\",\"$L4\",null,{\"children\":[\"$\",\"main\",null,{\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"footer\",null,{\"className\":\"relative overflow-hidden border-t border-white/10 bg-[#020202] pt-12 pb-8 sm:pt-16 lg:pt-20 lg:pb-10\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-blue-400/40 to-transparent\"}],[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-10 flex flex-col gap-8 lg:mb-16 lg:flex-row lg:gap-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center gap-5 border-b border-white/10 pb-8 text-center sm:items-start sm:text-left lg:w-1/4 lg:border-b-0 lg:pb-0\",\"children\":[[\"$\",\"svg\",null,{\"width\":160,\"height\":32,\"viewBox\":\"0 0 160 40\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"sm:-ml-4\",\"aria-label\":\"上码 Logo\",\"children\":[[\"$\",\"defs\",null,{\"children\":[[\"$\",\"linearGradient\",null,{\"id\":\"circle_bg\",\"x1\":\"0\",\"y1\":\"0\",\"x2\":\"40\",\"y2\":\"40\",\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"stopColor\":\"#1e1b4b\"}],\" \",[\"$\",\"stop\",null,{\"offset\":\"100%\",\"stopColor\":\"#2e1065\"}],\" \"]}],[\"$\",\"linearGradient\",null,{\"id\":\"triangle_gradient\",\"x1\":\"20\",\"y1\":\"10\",\"x2\":\"20\",\"y2\":\"32\",\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"stopColor\":\"#6366f1\"}],\" \",[\"$\",\"stop\",null,{\"offset\":\"50%\",\"stopColor\":\"#8b5cf6\"}],\" \",[\"$\",\"stop\",null,{\"offset\":\"100%\",\"stopColor\":\"#ec4899\"}],\" \"]}],[\"$\",\"linearGradient\",null,{\"id\":\"dark_text_gradient\",\"x1\":\"0\",\"y1\":\"0\",\"x2\":\"0\",\"y2\":\"100%\",\"gradientUnits\":\"userSpaceOnUse\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"stopColor\":\"#dedede\"}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"stopColor\":\"#a0aec0\"}]]}],[\"$\",\"filter\",null,{\"id\":\"text_shadow\",\"x\":\"-20%\",\"y\":\"-20%\",\"width\":\"140%\",\"height\"
1:\"140%\",\"children\":[\"$\",\"feDropShadow\",null,{\"dx\":\"0\",\"dy\":\"1\",\"stdDeviation\":\"1\",\"floodColor\":\"#000000\",\"floodOpacity\":0.5}]}]]}],[\"$\",\"g\",null,{\"children\":[[\"$\",\"circle\",null,{\"cx\":\"20\",\"cy\":\"20\",\"r\":\"20\",\"fill\":\"url(#circle_bg)\"}],[\"$\",\"circle\",null,{\"cx\":\"20\",\"cy\":\"20\",\"r\":\"19\",\"stroke\":\"white\",\"strokeOpacity\":\"0.1\",\"strokeWidth\":\"1\"}],[\"$\",\"path\",null,{\"d\":\"M20 11L30 29H10L20 11Z\",\"fill\":\"url(#triangle_gradient)\",\"className\":\"drop-shadow-sm\"}]]}],[\"$\",\"g\",null,{\"transform\":\"translate(48, 0)\",\"children\":[\"$L7\",\"$L8\"]}]]}],\"$L9\",\"$La\"]}],\"$Lb\",\"$Lc\"]}],\"$Ld\"]}]]}]]]}],{\"children\":[\"$Le\",{\"children\":[\"$Lf\",{},null,false,false]},null,false,false]},null,false,false]},null,false,false],\"$L10\",false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":true}\n"])</script>
1<script>self.__next_f.push([1,"12:I[8331,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\",\"/_next/static/chunks/fe96ba40e9e8ef1d.js\",\"/_next/static/chunks/db81d66fdcac06eb.js\",\"/_next/static/chunks/61148fb845518522.js\"],\"\"]\n23:I[802718,[\"/_next/static/chunks/b2b9122c1b63621e.js\",\"/_next/static/chunks/395e51502c352751.js\"],\"ViewportBoundary\"]\n25:I[802718,[\"/_next/static/chunks/b2b9122c1b63621e.js\",\"/_next/static/chunks/395e51502c352751.js\"],\"MetadataBoundary\"]\n26:\"$Sreact.suspense\"\n7:[\"$\",\"text\",null,{\"x\":\"0\",\"y\":\"29\",\"fill\":\"url(#dark_text_gradient)\",\"filter\":\"url(#text_shadow)\",\"fontSize\":\"24\",\"fontWeight\":\"900\",\"fontFamily\":\"PingFang SC, Microsoft YaHei, system-ui, sans-serif\",\"letterSpacing\":\"0.02em\",\"children\":\"上码\"}]\n8:[\"$\",\"g\",null,{\"transform\":\"translate(54, 0)\",\"children\":[[\"$\",\"text\",null,{\"x\":\"0\",\"y\":\"17\",\"fill\":\"url(#triangle_gradient)\",\"fontSize\":\"12\",\"fontWeight\":\"900\",\"fontFamily\":\"Manrope, Inter, system-ui, sans-serif\",\"letterSpacing\":\"0.1em\",\"style\":{\"textTransform\":\"uppercase\"},\"children\":\"up\"}],[\"$\",\"text\",null,{\"x\":\"0\",\"y\":\"31\",\"fontSize\":\"12\",\"fontFamily\":\"Manrope, Inter, system-ui, sans-serif\",\"fontWeight\":\"900\",\"letterSpacing\":\"0.1em\",\"children\":[[\"$\",\"tspan\",null,{\"fill\":\"url(#triangle_gradient)\",\"style\":{\"textTransform\":\"uppercase\"},\"children\":\"ma\"}],[\"$\",\"tspan\",null,{\"fill\":\"white\",\"fillOpacity\":\"0.4\",\"fontWeight\":\"600\",\"fontSize\":\"10\",\"dx\":\"2\",\"children\":\".cn\"}]]}]]}]\n9:[\"$\",\"p\",null,{\"className\":\"max-w-sm text-sm leading-relaxed text-gray-400 sm:max-w-xs\",\"children\":[\"专为 AI 创作者打造的一站式代码发布平台。\",[\"$\",\"br\",null,{}],\"无需运维,专注于你的创意。\"]}]\na:[\"$\",\"a\",null,{\"href\":\"mailto:[email protected]\",\"className\":\"inline-flex min-h-11 items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 text-sm font-medium text-gray-300 transition-colors hover:border-white/20 hover:bg-white/[0.06] hover:text-white\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-mail h-4 w-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"132q7q\",{\"d\":\"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"}],[\"$\",\"rect\",\"izxlao\",{\"x\":\"2\",\"y\":\"4\",\"width\":\"20\",\"height\":\"16\",\"rx\":\"2\"}],\"$undefined\"]}],\"[email protected]\"]}]\n"])</script>
1<script>self.__next_f.push([1,"b:[\"$\",\"nav\",null,{\"className\":\"divide-y divide-white/10 rounded-lg border border-white/10 bg-white/[0.02] md:hidden\",\"aria-label\":\"页脚导航\",\"children\":[[\"$\",\"details\",\"产品功能\",{\"className\":\"group\",\"open\":true,\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [\u0026::-webkit-details-marker]:hidden\",\"children\":[[\"$\",\"span\",null,{\"children\":\"产品功能\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]]}],[\"$\",\"ul\",null,{\"className\":\"grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm\",\"children\":[[\"$\",\"li\",\"全球 CDN\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/global-cdn\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"全球 CDN\"}],null]}]}],[\"$\",\"li\",\"免费 SSL\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/free-ssl\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"免费 SSL\"}],null]}]}],[\"$\",\"li\",\"自定义域名\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/custom-domains\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"自定义域名\"}],null]}]}],[\"$\",\"li\",\"密码保护\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/password-protection\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"密码保护\"}],null]}]}],[\"$\",\"li\",\"秒级回滚\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/instant-rollback\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"秒级回滚\"}],null]}]}]]}]]}],[\"$\",\"details\",\"托管场景\",{\"className\":\"group\",\"open\":false,\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [\u0026::-webkit-details-marker]:hidden\",\"children\":[[\"$\",\"span\",null,{\"children\":\"托管场景\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]]}],[\"$\",\"ul\",null,{\"className\":\"grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm\",\"children\":[[\"$\",\"li\",\"个人网站托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/personal-website\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"个人网站托管\"}],null]}]}],[\"$\",\"li\",\"学生作业托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/student-hosting\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"学生作业托管\"}],null]}]}],[\"$\",\"li\",\"简历托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/resume\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"简历托管\"}],null]}]}],[\"$\",\"li\",\"作品集托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/portfolio\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"作品集托管\"}],null]}]}],[\"$\",\"li\",\"导航页托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/link-in-bio\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[\"$L13\",null]}]}]]}]]}],\"$L14\",\"$L15\",\"$L16\"]}]\n"])</script>
1<script>self.__next_f.push([1,"c:[\"$\",\"nav\",null,{\"className\":\"hidden text-left md:grid md:grid-cols-3 md:gap-x-10 md:gap-y-10 lg:ml-auto lg:grid-cols-5 lg:gap-x-8\",\"aria-label\":\"页脚导航\",\"children\":[[\"$\",\"div\",\"产品功能\",{\"className\":\"min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-4 text-sm font-semibold text-gray-200\",\"children\":\"产品功能\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm\",\"children\":[[\"$\",\"li\",\"全球 CDN\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/global-cdn\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"全球 CDN\"}],null]}]}],[\"$\",\"li\",\"免费 SSL\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/free-ssl\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"免费 SSL\"}],null]}]}],[\"$\",\"li\",\"自定义域名\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/custom-domains\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"自定义域名\"}],null]}]}],[\"$\",\"li\",\"密码保护\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/password-protection\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"密码保护\"}],null]}]}],[\"$\",\"li\",\"秒级回滚\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/features/instant-rollback\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"秒级回滚\"}],null]}]}]]}]]}],[\"$\",\"div\",\"托管场景\",{\"className\":\"min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-4 text-sm font-semibold text-gray-200\",\"children\":\"托管场景\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm\",\"children\":[[\"$\",\"li\",\"个人网站托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/personal-website\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"个人网站托管\"}],null]}]}],[\"$\",\"li\",\"学生作业托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/student-hosting\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"学生作业托管\"}],null]}]}],[\"$\",\"li\",\"简历托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/resume\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"简历托管\"}],null]}]}],[\"$\",\"li\",\"作品集托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/portfolio\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"作品集托管\"}],null]}]}],[\"$\",\"li\",\"导航页托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/link-in-bio\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"导航页托管\"}],null]}]}]]}]]}],[\"$\",\"div\",\"框架部署\",{\"className\":\"min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-4 text-sm font-semibold text-gray-200\",\"children\":\"框架部署\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm\",\"children\":[[\"$\",\"li\",\"HTML 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-html\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"HTML 部署\"}],null]}]}],[\"$\",\"li\",\"React 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-react\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"React 部署\"}],null]}]}],[\"$\",\"li\",\"Vue 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-vue\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[\"$L17\",null]}]}],\"$L18\",\"$L19\"]}]]}],\"$L1a\",\"$L1b\"]}]\n"])</script>
1<script>self.__next_f.push([1,"1c:T4eb,M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.5151.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z"])</script>
1<script>self.__next_f.push([1,"d:[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center justify-between gap-5 border-t border-white/10 pt-6 sm:pt-8 md:flex-row\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center gap-2 text-center text-sm text-gray-600 sm:flex-row sm:gap-4 sm:text-left\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://beian.miit.gov.cn/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-gray-400 transition-colors\",\"children\":\"粤ICP备2023011358号-3\"}],[\"$\",\"p\",null,{\"children\":\"© 2025 UpMa. All rights reserved.\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"$L12\",null,{\"href\":\"#\",\"className\":\"grid h-10 w-10 place-items-center rounded-full border border-white/10 bg-white/[0.03] text-gray-500 transition-colors duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white\",\"aria-label\":\"Twitter\",\"children\":[\"$\",\"svg\",null,{\"className\":\"w-5 h-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"d\":\"M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84\"}]}]}],[\"$\",\"$L12\",null,{\"href\":\"#\",\"className\":\"grid h-10 w-10 place-items-center rounded-full border border-white/10 bg-white/[0.03] text-gray-500 transition-colors duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white\",\"aria-label\":\"GitHub\",\"children\":[\"$\",\"svg\",null,{\"className\":\"w-5 h-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}]}],[\"$\",\"$L12\",null,{\"href\":\"#\",\"className\":\"grid h-10 w-10 place-items-center rounded-full border border-white/10 bg-white/[0.03] text-gray-500 transition-colors duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white\",\"aria-label\":\"Discord\",\"children\":[\"$\",\"svg\",null,{\"className\":\"w-5 h-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"$1c\",\"clipRule\":\"evenodd\"}]}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"e:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"f:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"首页\\\",\\\"item\\\":\\\"https://www.upma.cn/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"博客\\\",\\\"item\\\":\\\"https://www.upma.cn/blog\\\"}]}\"}}],[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-[#fdfbf7]\",\"children\":[[\"$\",\"section\",null,{\"className\":\"relative overflow-hidden bg-[#fdfbf7] pb-16 pt-38\",\"children\":[\"$\",\"div\",null,{\"className\":\"container relative mx-auto max-w-6xl px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center text-center\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"mb-8 text-4xl font-bold tracking-tight text-stone-900 md:text-5xl lg:text-7xl\",\"children\":\"洞察 · 实践 · 分享\"}],[\"$\",\"p\",null,{\"className\":\"max-w-4xl text-xl leading-relaxed text-stone-500\",\"children\":\"深入静态网站托管技术,探索 Jamstack 架构最佳实践, 记录产品迭代与技术演进。\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex flex-wrap justify-center gap-3\",\"children\":[[\"$\",\"span\",null,{\"className\":\"rounded-full bg-stone-900 px-5 py-2 text-sm font-medium text-white shadow-lg shadow-stone-900/20 transition-transform hover:scale-105\",\"children\":\"全部\"}],[[\"$\",\"span\",\"实战教程\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"实战教程\"}],[\"$\",\"span\",\"实用指南\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"实用指南\"}],[\"$\",\"span\",\"求职指南\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"求职指南\"}],[\"$\",\"span\",\"学生教程\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"学生教程\"}],[\"$\",\"span\",\"入门教程\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"入门教程\"}],[\"$\",\"span\",\"Creator Economy\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"Creator Economy\"}],[\"$\",\"span\",\"Hardcore Tech\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"Hardcore Tech\"}],[\"$\",\"span\",\"技术洞察\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"技术洞察\"}],[\"$\",\"span\",\"新手教程\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"新手教程\"}],[\"$\",\"span\",\"教程\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"教程\"}],[\"$\",\"span\",\"技术分享\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"技术分享\"}],\"$L1d\"]]}]]}]}]}],\"$L1e\",\"$L1f\",\"$L20\"]}]],[\"$L21\"],\"$L22\"]}]\n"])</script>
1<script>self.__next_f.push([1,"10:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L23\",null,{\"children\":\"$L24\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L25\",null,{\"children\":[\"$\",\"$26\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L27\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"28:I[126629,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\",\"/_next/static/chunks/fe96ba40e9e8ef1d.js\",\"/_next/static/chunks/db81d66fdcac06eb.js\",\"/_next/static/chunks/61148fb845518522.js\",\"/_next/static/chunks/de229e9e76854d6d.js\"],\"default\"]\n36:I[802718,[\"/_next/static/chunks/b2b9122c1b63621e.js\",\"/_next/static/chunks/395e51502c352751.js\"],\"OutletBoundary\"]\n13:[\"$\",\"span\",null,{\"children\":\"导航页托管\"}]\n"])</script>
1<script>self.__next_f.push([1,"14:[\"$\",\"details\",\"框架部署\",{\"className\":\"group\",\"open\":false,\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [\u0026::-webkit-details-marker]:hidden\",\"children\":[[\"$\",\"span\",null,{\"children\":\"框架部署\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]]}],[\"$\",\"ul\",null,{\"className\":\"grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm\",\"children\":[[\"$\",\"li\",\"HTML 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-html\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"HTML 部署\"}],null]}]}],[\"$\",\"li\",\"React 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-react\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"React 部署\"}],null]}]}],[\"$\",\"li\",\"Vue 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-vue\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Vue 部署\"}],null]}]}],[\"$\",\"li\",\"PDF 托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/host-pdf\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"PDF 托管\"}],null]}]}],[\"$\",\"li\",\"DeepSeek 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-deepseek\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"DeepSeek 部署\"}],null]}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"15:[\"$\",\"details\",\"开发工具\",{\"className\":\"group\",\"open\":false,\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [\u0026::-webkit-details-marker]:hidden\",\"children\":[[\"$\",\"span\",null,{\"children\":\"开发工具\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]]}],[\"$\",\"ul\",null,{\"className\":\"grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm\",\"children\":[[\"$\",\"li\",\"JSON 格式化\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/json-formatter\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"JSON 格式化\"}],null]}]}],[\"$\",\"li\",\"正则测试\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/regex\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"正则测试\"}],null]}]}],[\"$\",\"li\",\"IP 查询\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/ip\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"IP 查询\"}],null]}]}],[\"$\",\"li\",\"Ping 检测\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/ping\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Ping 检测\"}],null]}]}],[\"$\",\"li\",\"查看全部\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors font-medium text-blue-300 hover:text-blue-200\",\"children\":[[\"$\",\"span\",null,{\"children\":\"查看全部\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-right h-3.5 w-3.5\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1ays0h\",{\"d\":\"M5 12h14\"}],[\"$\",\"path\",\"xquz4c\",{\"d\":\"m12 5 7 7-7 7\"}],\"$undefined\"]}]]}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"16:[\"$\",\"details\",\"资源支持\",{\"className\":\"group\",\"open\":false,\"children\":[[\"$\",\"summary\",null,{\"className\":\"flex min-h-12 cursor-pointer list-none items-center justify-between px-4 text-sm font-semibold text-gray-100 [\u0026::-webkit-details-marker]:hidden\",\"children\":[[\"$\",\"span\",null,{\"children\":\"资源支持\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down h-4 w-4 text-gray-500 transition-transform group-open:rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]]}],[\"$\",\"ul\",null,{\"className\":\"grid grid-cols-2 gap-x-4 gap-y-1 px-4 pb-4 text-sm\",\"children\":[[\"$\",\"li\",\"价格\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/pricing\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"价格\"}],null]}]}],[\"$\",\"li\",\"使用指南\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"使用指南\"}],null]}]}],[\"$\",\"li\",\"博客\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/blog\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"博客\"}],null]}]}],[\"$\",\"li\",\"隐私\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/legal/privacy\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"隐私\"}],null]}]}],[\"$\",\"li\",\"条款\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/legal/terms\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"条款\"}],null]}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"17:[\"$\",\"span\",null,{\"children\":\"Vue 部署\"}]\n18:[\"$\",\"li\",\"PDF 托管\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/host-pdf\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"PDF 托管\"}],null]}]}]\n19:[\"$\",\"li\",\"DeepSeek 部署\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/deploy/deploy-deepseek\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"DeepSeek 部署\"}],null]}]}]\n"])</script>
1<script>self.__next_f.push([1,"1a:[\"$\",\"div\",\"开发工具\",{\"className\":\"min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-4 text-sm font-semibold text-gray-200\",\"children\":\"开发工具\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm\",\"children\":[[\"$\",\"li\",\"JSON 格式化\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/json-formatter\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"JSON 格式化\"}],null]}]}],[\"$\",\"li\",\"正则测试\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/regex\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"正则测试\"}],null]}]}],[\"$\",\"li\",\"IP 查询\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/ip\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"IP 查询\"}],null]}]}],[\"$\",\"li\",\"Ping 检测\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools/ping\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Ping 检测\"}],null]}]}],[\"$\",\"li\",\"查看全部\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/tools\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors font-medium text-blue-300 hover:text-blue-200\",\"children\":[[\"$\",\"span\",null,{\"children\":\"查看全部\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-right h-3.5 w-3.5\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1ays0h\",{\"d\":\"M5 12h14\"}],[\"$\",\"path\",\"xquz4c\",{\"d\":\"m12 5 7 7-7 7\"}],\"$undefined\"]}]]}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1b:[\"$\",\"div\",\"资源支持\",{\"className\":\"min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-4 text-sm font-semibold text-gray-200\",\"children\":\"资源支持\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-2 text-sm\",\"children\":[[\"$\",\"li\",\"价格\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/pricing\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"价格\"}],null]}]}],[\"$\",\"li\",\"使用指南\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/docs\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"使用指南\"}],null]}]}],[\"$\",\"li\",\"博客\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/blog\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"博客\"}],null]}]}],[\"$\",\"li\",\"隐私\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/legal/privacy\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"隐私\"}],null]}]}],[\"$\",\"li\",\"条款\",{\"children\":[\"$\",\"$L12\",null,{\"href\":\"/legal/terms\",\"prefetch\":false,\"className\":\"inline-flex min-h-10 items-center gap-1.5 rounded-md py-1 transition-colors text-gray-500 hover:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"条款\"}],null]}]}]]}]]}]\n"])</script>
1<script>self.__next_f.push([1,"1d:[\"$\",\"span\",\"AI \u0026 Trends\",{\"className\":\"cursor-pointer rounded-full bg-white px-5 py-2 text-sm text-stone-600 shadow-sm ring-1 ring-black/5 transition-all hover:text-stone-900 hover:shadow-md hover:ring-stone-200\",\"children\":\"AI \u0026 Trends\"}]\n"])</script>
1<script>self.__next_f.push([1,"1e:[\"$\",\"section\",null,{\"className\":\"py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto max-w-6xl px-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-8 flex items-center justify-between\",\"children\":[\"$\",\"h2\",null,{\"className\":\"flex items-center gap-2 text-lg font-bold text-stone-900\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-sparkles h-5 w-5 text-yellow-500 fill-yellow-500\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1s2grr\",{\"d\":\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z\"}],[\"$\",\"path\",\"1rf3ol\",{\"d\":\"M20 2v4\"}],[\"$\",\"path\",\"gwowj6\",{\"d\":\"M22 4h-4\"}],[\"$\",\"circle\",\"6kqj1y\",{\"cx\":\"4\",\"cy\":\"20\",\"r\":\"2\"}],\"$undefined\"]}],\"本周精选\"]}]}],[\"$\",\"$L28\",null,{\"post\":{\"slug\":\"ai-image-assets-for-websites\",\"title\":\"AI 图像素材怎么放进网站?先看首屏、博客卡片和分享预览\",\"description\":\"AI 图像不只是生成出来就完了,真正要用在网站里,还要考虑尺寸、裁切、卡片展示和社交预览。这篇文章讲清楚怎么把图像素材放进真实页面而不翻车。\",\"date\":\"2026-05-17\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 图像素材\",\"网站首屏\",\"博客封面\",\"社交预览\",\"图片裁切\"],\"cover\":\"/images/blog/ai-image-assets-for-websites/cover.png\",\"readingTime\":\"5 分钟\",\"featured\":true},\"featured\":true}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"1f:[\"$\",\"section\",null,{\"className\":\"py-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto max-w-6xl px-6\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-8 text-lg font-medium text-stone-900\",\"children\":\"更多文章\"}],[\"$\",\"div\",null,{\"className\":\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L28\",\"ai-cover-composition-guide\",{\"post\":{\"slug\":\"ai-cover-composition-guide\",\"title\":\"AI 生成封面怎么避免裁切翻车?先留安全区,再谈视觉风格\",\"description\":\"很多封面图本身不差,问题出在缩成卡片后主体被切掉、标题区被填满、移动端预览失控。这篇文章讲清封面图应该怎么构图,才适合博客、社交和卡片展示。\",\"date\":\"2026-05-17\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 封面\",\"构图\",\"博客配图\",\"安全区\",\"图像裁切\"],\"cover\":\"/images/blog/ai-cover-composition-guide/cover.png\",\"readingTime\":\"5 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"ai-image-prompt-guide\",{\"post\":{\"slug\":\"ai-image-prompt-guide\",\"title\":\"AI 生图提示词怎么写?先锁住保留项,再谈风格和氛围\",\"description\":\"很多 AI 生图失败,不是模型不够强,而是提示词把保留项和修改项写反了。这篇文章用商品图、封面图和活动海报三个场景,讲清提示词应该怎么分层写。\",\"date\":\"2026-05-17\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 生图\",\"提示词\",\"GPT Image 2\",\"文生图\",\"图像生成\"],\"cover\":\"/images/blog/ai-image-prompt-guide/cover.png\",\"readingTime\":\"6 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"ai-product-image-and-poster-guide\",{\"post\":{\"slug\":\"ai-product-image-and-poster-guide\",\"title\":\"AI 商品图和海报怎么做才像能交付?先稳主体,再补氛围\",\"description\":\"商品图和海报最容易翻车的地方,不是背景不够漂亮,而是主体被改形、标题区没留、最终图放不进真实页面。这篇文章用商业交付视角讲清怎么写和怎么改。\",\"date\":\"2026-05-17\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 商品图\",\"AI 海报\",\"商业交付\",\"图像编辑\",\"图生图\"],\"cover\":\"/images/blog/ai-product-image-and-poster-guide/cover.png\",\"readingTime\":\"5 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"reference-image-editing-workflow\",{\"post\":{\"slug\":\"reference-image-editing-workflow\",\"title\":\"AI 修改图片怎么做?图生图与参考图编辑的实战流程\",\"description\":\"AI 修改图片经常失败在边界没写清:哪些要保留,哪些能变化。用商品图换背景、封面留白和人物图编辑几个场景,讲清图生图与参考图编辑的稳定流程。\",\"date\":\"2026-05-02\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 修改图片\",\"图生图\",\"参考图编辑\",\"商品图换背景\",\"AI 图片编辑\"],\"cover\":\"/images/blog/reference-image-editing-workflow/cover.png\",\"readingTime\":\"12 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"ai-image-tool-workflow-guide\",{\"post\":{\"slug\":\"ai-image-tool-workflow-guide\",\"title\":\"AI 生图工具怎么用?GPT Image 2 文生图、图生图工作台指南\",\"description\":\"想用 AI 生图做商品图、海报、封面和视觉提案,先别急着堆提示词。先分清文生图、图生图、GPT Image 2、模型选择和质量档位,再把结果持续改到可用。\",\"date\":\"2026-05-01\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 生图\",\"GPT Image 2\",\"文生图\",\"图生图\",\"AI 图片生成\"],\"cover\":\"/images/blog/ai-image-tool-workflow-guide/cover.png\",\"readingTime\":\"13 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"pdf-file-to-link-guide\",{\"post\":{\"slug\":\"pdf-file-to-link-guide\",\"title\":\"PDF 文件怎么变成链接?让别人一打开就能在线预览的最短方法\",\"description\":\"手里有一份 PDF,怎么发给别人才能一点就开、在线预览,不用先下载、不用再解释文件在哪?这篇文章把几种常见方法和适用场景讲清楚。\",\"date\":\"2026-04-13\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实用指南\",\"tags\":[\"PDF 文件\",\"PDF 在线预览\",\"PDF 链接\",\"文件分享\",\"文档托管\"],\"cover\":\"/images/blog/pdf-link-online-preview-cover.svg\",\"readingTime\":\"13 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"resume-pdf-vs-website-guide\",{\"post\":{\"slug\":\"resume-pdf-vs-website-guide\",\"title\":\"PDF 简历和网页简历怎么选?什么时候该做一个简历网站\",\"description\":\"找工作时到底该ç»
1§ç»­å‘ PDF,还是补一个网页简历?这篇文章把两种形式的优缺点、适用场景和最稳的组合方式讲清楚。\",\"date\":\"2026-04-13\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"求职指南\",\"tags\":[\"PDF 简历\",\"网页简历\",\"简历网站\",\"求职准备\",\"在线简历\"],\"cover\":\"/images/blog/resume-pdf-vs-website-cover.svg\",\"readingTime\":\"12 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"static-site-analytics-guide\",{\"post\":{\"slug\":\"static-site-analytics-guide\",\"title\":\"静态网站怎么做访问统计?先看 PV、设备和地区,再决定要不要上复杂埋点\",\"description\":\"网站已经上线,下一步不是盲目改首页,而是先看谁在访问、从哪种设备访问、哪些时间段有波动。这篇文章讲清静态网站最值得先看的几类数据,以及怎么避免一开始就把统计系统做得过重。\",\"date\":\"2026-04-13\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"网站访问统计\",\"静态网站分析\",\"PV UV\",\"网站流量\",\"网站运营\"],\"cover\":\"/images/blog/static-site-analytics-cover.svg\",\"readingTime\":\"14 分钟\",\"featured\":false}}],[\"$\",\"$L28\",\"static-site-password-protection-guide\",{\"post\":{\"slug\":\"static-site-password-protection-guide\",\"title\":\"网站上线后怎么加访问密码?预览站、作品集和客户演示页都适用\",\"description\":\"网站已经能打开,但还不想完全公开?这篇文章讲清访问密码最适合的几个场景,以及静态网站怎样用更轻的方式做密码保护,既方便预览,也不把自己拖进复杂运维。\",\"date\":\"2026-04-13\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"网站访问密码\",\"静态网站\",\"作品集预览\",\"客户演示页\",\"网站安全\"],\"cover\":\"/images/blog/static-site-password-cover.svg\",\"readingTime\":\"15 分钟\",\"featured\":false}}],\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\"]}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"20:[\"$\",\"section\",null,{\"className\":\"border-t border-stone-200 bg-[#fbf9f4] py-20\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto max-w-2xl px-6 text-center\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"mb-4 text-2xl font-bold text-stone-900\",\"children\":\"订阅技术周刊\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-stone-600\",\"children\":\"获取最新技术文章、产品更新和行业洞察,每周一封。\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 sm:flex-row sm:justify-center\",\"children\":[[\"$\",\"input\",null,{\"type\":\"email\",\"placeholder\":\"[email protected]\",\"className\":\"rounded-lg border border-stone-200 bg-white px-4 py-3 text-stone-900 placeholder-stone-400 outline-none transition-all focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:w-64\"}],[\"$\",\"button\",null,{\"className\":\"rounded-lg bg-stone-900 px-6 py-3 font-medium text-white transition-colors hover:bg-stone-800\",\"children\":\"订阅\"}]]}],[\"$\",\"p\",null,{\"className\":\"mt-4 text-xs text-stone-500\",\"children\":\"我们尊重您的隐私,随时可以取消订阅。\"}]]}]}]\n21:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/de229e9e76854d6d.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n22:[\"$\",\"$L36\",null,{\"children\":[\"$\",\"$26\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@37\"}]}]\n"])</script>
1<script>self.__next_f.push([1,"29:[\"$\",\"$L28\",\"static-site-version-rollback-guide\",{\"post\":{\"slug\":\"static-site-version-rollback-guide\",\"title\":\"网站更新翻车了怎么办?静态网站版本回滚的最短路径\",\"description\":\"页面刚发上去就白屏、样式错乱、资源 404,不一定要连夜热修。对静态网站来说,更稳的做法通常是先回滚到上一个可用版本,再定位问题。这篇文章讲清什么时候该回滚、为什么它比硬修更稳,以及它真正依赖的底层能力。\",\"date\":\"2026-04-13\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"版本回滚\",\"静态网站部署\",\"网站发布\",\"原子部署\",\"CAS\"],\"cover\":\"/images/blog/static-site-rollback-cover.svg\",\"readingTime\":\"14 分钟\",\"featured\":false}}]\n2a:[\"$\",\"$L28\",\"student-homework-link-guide\",{\"post\":{\"slug\":\"student-homework-link-guide\",\"title\":\"网页大作业怎么交链接?从本地文件到老师能直接打开的网址\",\"description\":\"很多网页作业不是做不出来,而是交不上去。老师要的是能直接打开的链接,不是你电脑里的 localhost,也不是一份不知道怎么运行的压缩包。\",\"date\":\"2026-04-13\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"学生教程\",\"tags\":[\"网页大作业\",\"作业链接\",\"HTML 作业提交\",\"学生建站\",\"课程项目\"],\"cover\":\"/images/blog/student-homework-link-cover.svg\",\"readingTime\":\"12 分钟\",\"featured\":false}}]\n2b:[\"$\",\"$L28\",\"ai-generated-website-publish-guide\",{\"post\":{\"slug\":\"ai-generated-website-publish-guide\",\"title\":\"AI 生成的网站怎么上线?从聊天框到真实网址的完整指南\",\"description\":\"ChatGPT、Gemini、Claude 帮你写出了网页代码,下一步怎么把它变成别人能访问的网址?这篇文章用更稳的顺序讲清楚:文件整理、部署、自定义域名、HTTPS 和上线后的关键检查项。\",\"date\":\"2026-03-12\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"AI 建站\",\"网站上线\",\"HTML 部署\",\"静态网站托管\",\"自定义域名\"],\"cover\":\"/images/blog/ai-website-publish-cover.jpg\",\"readingTime\":\"14 分钟\",\"featured\":true}}]\n2c:[\"$\",\"$L28\",\"custom-domain-static-site-guide\",{\"post\":{\"slug\":\"custom-domain-static-site-guide\",\"title\":\"静态网站怎么绑定自定义域名?从 DNS 到 HTTPS 一次讲清\",\"description\":\"已经有了网站链接,下一步怎么换成自己的域名?这篇文章系统讲清静态网站绑定自定义域名的完整流程:DNS 记录、CNAME、TXT 验证、HTTPS、常见报错和排查顺序。\",\"date\":\"2026-03-12\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"自定义域名\",\"HTTPS\",\"静态网站\",\"DNS 配置\",\"CNAME\"],\"cover\":\"/images/blog/custom-domain-cover.jpg\",\"readingTime\":\"12 分钟\",\"featured\":false}}]\n2d:[\"$\",\"$L28\",\"html-file-to-url-guide\",{\"post\":{\"slug\":\"html-file-to-url-guide\",\"title\":\"HTML 文件怎么变成网址?新手也能看懂的发布指南\",\"description\":\"手里只有一个 HTML 文件,怎么把它变成别人能打开的网址?这篇文章从文件准备、静态托管、域名绑定到常见报错,系统讲清楚 HTML 上线的最短路径。\",\"date\":\"2026-03-12\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"入门教程\",\"tags\":[\"HTML 文件\",\"网页发布\",\"静态网站\",\"网址生成\",\"新手教程\"],\"cover\":\"/images/blog/html-file-url-cover.jpg\",\"readingTime\":\"12 分钟\",\"featured\":false}}]\n2e:[\"$\",\"$L28\",\"designer-portfolio-guide\",{\"post\":{\"slug\":\"designer-portfolio-guide\",\"title\":\"设计师别再发 PDF 了!5 分钟搭一个秒杀 Behance 的作品集网站\",\"description\":\"如果你已经有作品,只是还停留在 PDF、压缩包或平台主页里,这篇文章会讲清楚:为什么越来越多设计师开始补一个独立作品集网站,以及怎么用更轻的路径把它发出去。\",\"date\":\"2025-12-31\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"Creat"])</script>
1<script>self.__next_f.push([1,"or Economy\",\"tags\":[\"作品集\",\"设计师\",\"摄影师\",\"个人品牌\",\"无需代码\"],\"cover\":\"/images/blog/designer-portfolio.jpg\",\"readingTime\":\"10 分钟\",\"featured\":false}}]\n2f:[\"$\",\"$L28\",\"github-pages-alternative-china\",{\"post\":{\"slug\":\"github-pages-alternative-china\",\"title\":\"从 GitHub Pages 迁移到国内边缘网络:网站速度提升 10 倍实录\",\"description\":\"GitHub Pages 经常无法访问?Hexo/Hugo 博客加载太慢?本文深入分析 SNI 阻断与物理延迟的根本原因,记录了从 GitHub 迁移到 ESA 边缘网络的全过程,实测首屏时间优化至 0.4 秒。\",\"date\":\"2025-12-30\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"实战教程\",\"tags\":[\"GitHub Pages\",\"迁移指南\",\"网站加速\",\"Hexo\",\"Hugo\",\"边缘计算\"],\"cover\":\"/images/blog/github-pages-migration.jpg\",\"readingTime\":\"7 分钟\",\"featured\":false}}]\n30:[\"$\",\"$L28\",\"nextjs-15-deployment-guide\",{\"post\":{\"slug\":\"nextjs-15-deployment-guide\",\"title\":\"Next.js 15 部署避坑指南:Text content does not match 与静态导出的那些“坑”\",\"description\":\"如果你的 Next.js 项目本地正常、上线后却出现 Hydration Error、动态路由 404 或图片问题,这篇文章会把最常见的原因和排查顺序讲清楚。\",\"date\":\"2025-12-30\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"Hardcore Tech\",\"tags\":[\"Next.js 15\",\"部署\",\"Hydration Error\",\"SSG\",\"前端工程化\"],\"cover\":\"/images/blog/nextjs-deployment-fail.jpg\",\"readingTime\":\"11 分钟\",\"featured\":false}}]\n31:[\"$\",\"$L28\",\"vercel-alternative-china-2025\",{\"post\":{\"slug\":\"vercel-alternative-china-2025\",\"title\":\"2025年了,Vercel 国内访问还是很慢?试试这个更适合中国开发者的部署方案\",\"description\":\"Next.js 部署国内访问太慢?本文对比 CDN 回源、自建 Nginx 等常见方案,深入解析 CAS 架构与阿里云 ESA 边缘加速如何解决静态网站托管的性能瓶颈。\",\"date\":\"2025-12-29\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"技术洞察\",\"tags\":[\"Next.js\",\"部署\",\"Vercel\",\"性能优化\",\"前端架构\"],\"cover\":\"/images/blog/vercel-slow-china.jpg\",\"readingTime\":\"7 分钟\",\"featured\":false}}]\n32:[\"$\",\"$L28\",\"getting-started\",{\"post\":{\"slug\":\"getting-started\",\"title\":\"不用买服务器,怎么免费上线个人网站或作品集?\",\"description\":\"如果你手里已经有 HTML、作品集页面或前端构建产物,这篇文章会用一条更轻的路径讲清楚:怎么在不买服务器的前提下,把本地文件变成可访问网址。\",\"date\":\"2025-12-23\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"新手教程\",\"tags\":[\"免费建站\",\"个人主页\",\"作品集\",\"HTML教程\",\"零基础\",\"无需服务器\"],\"cover\":\"/images/blog/getting-started.jpg\",\"readingTime\":\"9 分钟\",\"featured\":true}}]\n33:[\"$\",\"$L28\",\"github-pages-migration\",{\"post\":{\"slug\":\"github-pages-migration\",\"title\":\"从 GitHub Pages 迁移到上码\",\"description\":\"如果你已经在用 GitHub Pages,但想要更快的国内访问、更直接的版本管理和更轻的自定义域名流程,这篇文章会把迁移时最该检查的点讲清楚。\",\"date\":\"2025-12-22\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"教程\",\"tags\":[\"迁移\",\"GitHub Pages\",\"对比\"],\"cover\":\"/images/blog/github-pages-migration.jpg\",\"readingTime\":\"9 分钟\",\"featured\":false}}]\n34:[\"$\",\"$L28\",\"cas-architecture\",{\"post\":{\"slug\":\"cas-architecture\",\"title\":\"CAS 内容寻址存储:上码的核心技术\",\"description\":\"不是每次部署都该重新上传全部文件。本文用更具体的方式解释 CAS 在静态网站托管里的作用:为什么它能减少重复上传、让版本回退更干净,并帮助静态资源更稳定地分发。\",\"date\":\"2025-12-21\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"技术分享\",\"tags\":[\"CAS\",\"架构\",\"技术\"],\"cover\":\"/images/blog/cas-architecture.jpg\",\"readingTime\":\"10 分钟\",\"featured\":false}}]\n35:[\"$\",\"$L28\""])</script>
1<script>self.__next_f.push([1,",\"deepseek-chatgpt-html-deploy\",{\"post\":{\"slug\":\"deepseek-chatgpt-html-deploy\",\"title\":\"Gemini + DeepSeek:全网刷屏的\\\"Vibe Coding\\\",三步教你一键上线\",\"description\":\"AI 已经能帮你写网页,但很多人还是卡在最后一步:怎么把聊天框里的代码变成别人能访问的真实网址。这篇文章讲清楚从 AI 代码到公网链接的最短流程。\",\"date\":\"2025-01-01\",\"dateModified\":\"2026-08-10T21:19:27.000Z\",\"author\":\"上码团队\",\"category\":\"AI \u0026 Trends\",\"tags\":[\"Gemini\",\"DeepSeek\",\"Vibe Coding\",\"粒子特效\",\"零代码\"],\"cover\":\"/images/blog/gemini-deepseek-code.jpg\",\"readingTime\":\"8 分钟\",\"featured\":false}}]\n"])</script>
1<script>self.__next_f.push([1,"38:I[986150,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\"],\"default\"]\n39:I[96923,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\"],\"Providers\"]\n3a:I[293264,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\"],\"PlansProvider\"]\n"])</script>
1<script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"lang\":\"zh-CN\",\"suppressHydrationWarning\":true,\"className\":\"scroll-smooth\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased overflow-x-hidden bg-gray-50 dark:bg-[#050505] text-slate-900 dark:text-white\",\"children\":[[\"$\",\"$L38\",null,{\"color\":\"linear-gradient(to right, #6366f1, #8b5cf6, #ec4899)\",\"initialPosition\":0.08,\"crawlSpeed\":200,\"height\":3,\"crawl\":true,\"showSpinner\":false,\"showForHashAnchor\":false,\"easing\":\"ease\",\"speed\":200,\"shadow\":\"0 0 10px #8b5cf6,0 0 5px #8b5cf6\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"上码\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"description\\\":\\\"A platform to deploy AI-generated code (DeepSeek, ChatGPT, Claude) to the web instantly.\\\"}\"}}],[\"$\",\"$L39\",null,{\"children\":[\"$\",\"$L3a\",null,{\"initialConfig\":{\"plans\":{\"FREE\":{\"id\":\"FREE\",\"name\":\"Free\",\"description\":\"面向个人开发者、学生及简单项目演示。\",\"popular\":false,\"pricing\":{\"monthly\":0,\"annual\":0},\"limits\":{\"maxProjects\":2,\"maxUploadSize\":10485760,\"maxStorage\":104857600,\"maxBandwidth\":1073741824,\"maxDomains\":0,\"hasCustomDomain\":false,\"hasSSL\":false,\"hasAnalytics\":false,\"hasPasswordProtection\":false,\"hasBranding\":true,\"maxVersionHistory\":3,\"maxTeamMembers\":1,\"buildQueue\":\"standard\",\"cdnTier\":\"shared\",\"supportLevel\":\"community\",\"hasCleanUrls\":false,\"rateLimitBytes\":524288,\"maxFormsPerProject\":1,\"maxFormSubmissionsPerMonth\":10,\"formRetentionDays\":10,\"hasFormWebhook\":false,\"hasFormOpenMode\":false},\"features\":[\"2 个项目\",\"每月 1GB 流量\",\"单次上传 10MB\",\"总存储 100MB\",\"内置表单(1 个 / 每月 10 次提交)\",\"表单数据保留 10 天\",\"标准构建队列\",\"可额外自定义域名\",\"自动 SSL 证书\",\"右下角存在托管于上码标识\"],\"aiCreditGrant\":{\"monthly\":{\"credits\":0,\"expiresInDays\":0,\"validityLabel\":\"无赠送积分\"},\"annual\":{\"credits\":0,\"expiresInDays\":0,\"validityLabel\":\"无赠送积分\"}}},\"PRO\":{\"id\":\"PRO\",\"name\":\"Pro\",\"description\":\"面向专业开发者、生产环境及商业项目。\",\"popular\":true,\"pricing\":{\"monthly\":19.9,\"annual\":199},\"limits\":{\"maxProjects\":50,\"maxUploadSize\":209715200,\"maxStorage\":5368709120,\"maxBandwidth\":107374182400,\"maxDomains\":10,\"hasCustomDomain\":true,\"hasSSL\":true,\"hasAnalytics\":true,\"hasPasswordProtection\":true,\"hasBranding\":false,\"maxVersionHistory\":10,\"maxTeamMembers\":1,\"buildQueue\":\"turbo\",\"cdnTier\":\"global\",\"supportLevel\":\"email\",\"hasCleanUrls\":true,\"rateLimitBytes\":2097152,\"maxFormsPerProject\":10,\"maxFormSubmissionsPerMonth\":1000,\"formRetentionDays\":180,\"hasFormWebhook\":true,\"hasFormOpenMode\":true},\"features\":[\"50 个项目\",\"每月 100GB 流量\",\"单次上传 200MB\",\"内置表单(每月 1 千次提交)\",\"全球加速 CDN (香港/日本 CN2)\",\"自定义域名 (10个)\",\"自动 SSL 证书\",\"统计分析 \u0026 访客明细\",\"网站访问密码\",\"去除托管于上码标识\",\"Clean URLs (隐藏 .html 后缀)\"],\"aiCreditGrant\":{\"monthly\":{\"credits\":50,\"expiresInDays\":30,\"validityLabel\":\"30 天有效期\"},\"annual\":{\"credits\":500,\"expiresInDays\":365,\"validityLabel\":\"一年有效期\"}}},\"TEAM\":{\"id\":\"TEAM\",\"name\":\"Team\",\"description\":\"面向企业、公司及需要协作的工作室团队。\",\"popular\":false,\"pricing\":{\"monthly\":199,\"annual\":1999},\"limits\":{\"maxProjects\":-1,\"maxUploadSize\":524288000,\"maxStorage\":53687091200,\"maxBandwidth\":1099511627776,\"maxDomains\":100,\"hasCustomDomain\":true,\"hasSSL\":true,\"hasAnalytics\":true,\"hasPasswordProtection\":true,\"hasBranding\":false,\"maxVersionHistory\":-1,\"maxTeamMembers\":5,\"buildQueue\":\"dedicated\",\"cdnTier\":\"enterprise\",\"supportLevel\":\"dedicated\",\"hasCleanUrls\":true,\"rateLimitBytes\":5242880,\"maxFormsPerProject\":100,\"maxFormSubmissionsPerMonth\":10000,\"formRetentionDays\":365,\"hasFormWebhook\":true,\"hasFormOpenMode\":true},\"features\":[\"无限项目\",\"每月 1TB 流量\",\"单次上传 500MB\",\"内置表单(每月 1 万次提交)\",\"独享极速构建实例\",\"团队协作 (5人)\",\"自å
1®šä¹‰åŸŸå (100个)\",\"统计分析 \u0026 访客明细\",\"网站访问密码\",\"优先工单支持\",\"Clean URLs (隐藏 .html 后缀)\"],\"aiCreditGrant\":{\"monthly\":{\"credits\":500,\"expiresInDays\":30,\"validityLabel\":\"30 天有效期\"},\"annual\":{\"credits\":5000,\"expiresInDays\":365,\"validityLabel\":\"一年有效期\"}}}},\"features\":[{\"category\":\"构建与存储\",\"items\":[{\"name\":\"项目数量\",\"free\":\"2 个\",\"pro\":\"50 个\",\"team\":\"无限\"},{\"name\":\"单次上传限制\",\"free\":\"10 MB\",\"pro\":\"200 MB\",\"team\":\"500 MB\"},{\"name\":\"存储空间\",\"free\":\"100 MB\",\"pro\":\"5 GB\",\"team\":\"50 GB\"},{\"name\":\"构建队列\",\"free\":\"标准 (排队)\",\"pro\":\"Turbo (3x 速度)\",\"team\":\"独享实例 (极速)\"}]},{\"category\":\"分发与网络\",\"items\":[{\"name\":\"带宽限制\",\"free\":\"5 Mbps\",\"pro\":\"20 Mbps\",\"team\":\"100 Mbps\"},{\"name\":\"月流量限制\",\"free\":\"1 GB (支持额外购买)\",\"pro\":\"100 GB (支持额外购买)\",\"team\":\"1 TB (支持额外购买)\"},{\"name\":\"CDN 节点\",\"free\":\"共享 (HK/US/EU)\",\"pro\":\"全球加速 (含香港 CN2)\",\"team\":\"全球企业级\"},{\"name\":\"自定义域名\",\"free\":\"可额外购买\",\"pro\":\"10 个 (支持额外购买)\",\"team\":\"100个 (支持额外购买)\"},{\"name\":\"自动管理/续期 SSL\",\"free\":\"✔ (自动续期)\",\"pro\":\"✔ (自动续期)\",\"team\":\"✔ (自动续期)\"}]},{\"category\":\"表单与线索收集\",\"items\":[{\"name\":\"活跃表单数\",\"free\":\"1 个\",\"pro\":\"10 个\",\"team\":\"100 个\"},{\"name\":\"每月表单提交次数\",\"free\":\"10 次\",\"pro\":\"1000 次\",\"team\":\"1 万次\"},{\"name\":\"表单数据保留\",\"free\":\"10 天\",\"pro\":\"180 天\",\"team\":\"1 å¹´\"},{\"name\":\"Open Mode \u0026 Webhook\",\"free\":\"✖\",\"pro\":\"✔\",\"team\":\"✔\"}]},{\"category\":\"高级功能\",\"items\":[{\"name\":\"网站访问密码\",\"free\":\"✖\",\"pro\":\"✔\",\"team\":\"✔\"},{\"name\":\"统计分析 \u0026 访客明细\",\"free\":\"✖\",\"pro\":\"✔\",\"team\":\"✔\"},{\"name\":\"去品牌化 (隐藏托管于标识)\",\"free\":\"✖\",\"pro\":\"✔\",\"team\":\"✔\"},{\"name\":\"版本回滚\",\"free\":\"✖\",\"pro\":\"最近 10 个版本\",\"team\":\"无限\"},{\"name\":\"团队协作\",\"free\":\"✖\",\"pro\":\"✖\",\"team\":\"5 名成员\"},{\"name\":\"Clean URLs (隐藏 .html 后缀)\",\"free\":\"✖\",\"pro\":\"✔\",\"team\":\"✔\"},{\"name\":\"技术支持\",\"free\":\"社区支持\",\"pro\":\"优先邮件\",\"team\":\"24h 专属工单\"}]}]},\"children\":\"$L3b\"}]}],\"$L3c\",\"$L3d\",\"$L3e\"]}]}]\n"])</script>
1<script>self.__next_f.push([1,"3f:I[376193,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\"],\"UserProvider\"]\n40:I[408821,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\",\"/_next/static/chunks/8f11cc485796c631.js\"],\"default\"]\n41:I[754219,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\"],\"Toaster\"]\n42:I[421721,[\"/_next/static/chunks/733d483dbb25b2a8.js\",\"/_next/static/chunks/e61992e38fd16c06.js\"],\"\"]\n"])</script>
1<script>self.__next_f.push([1,"3b:[\"$\",\"$L3f\",null,{\"children\":[\"$\",\"$L4\",null,{\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$40\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/8f11cc485796c631.js\",\"async\":true}]],\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:children:0:props:children:1:1:props:children:props:children:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:1:children:0:props:children:1:1:props:children:props:children:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:children:0:props:children:1:1:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:children:0:props:children:1:1:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]\n"])</script>
1<script>self.__next_f.push([1,"3c:[\"$\",\"$L41\",null,{\"position\":\"top-right\",\"theme\":\"system\",\"richColors\":true,\"closeButton\":true,\"gap\":24,\"visibleToasts\":5,\"toastOptions\":{\"className\":\"shadow-2xl border\",\"style\":{\"padding\":\"16px\",\"borderRadius\":\"12px\",\"boxShadow\":\"0 6px 20px 2px rgba(0, 0, 0, 0.2)\"}}}]\n3d:[\"$\",\"$L42\",null,{\"id\":\"la-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n            !function(p){\\\"use strict\\\";!function(t){var s=window,e=document,i=p,c=\\\"\\\".concat(\\\"https:\\\"===e.location.protocol?\\\"https://\\\":\\\"http://\\\",\\\"sdk.51.la/js-sdk-pro.min.js\\\"),n=e.createElement(\\\"script\\\"),r=e.getElementsByTagName(\\\"script\\\")[0];n.type=\\\"text/javascript\\\",n.setAttribute(\\\"charset\\\",\\\"UTF-8\\\"),n.async=!0,n.src=c,n.id=\\\"LA_COLLECT\\\",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids\u0026\u0026o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:\\\"3OdiScgzn1QbhLyj\\\",ck:\\\"3OdiScgzn1QbhLyj\\\",autoTrack:true,hashMode:true});\\n          \"}]\n3e:[\"$\",\"$L42\",null,{\"id\":\"crisp-chat\",\"strategy\":\"afterInteractive\",\"children\":\"\\n            window.$crisp=[];window.CRISP_WEBSITE_ID=\\\"0dd55be2-d5f3-462c-8ce0-984d1ae05ac7\\\";(function(){d=document;s=d.createElement(\\\"script\\\");s.src=\\\"/crisp/l.js\\\";s.async=1;d.getElementsByTagName(\\\"head\\\")[0].appendChild(s);})();\\n          \"}]\n"])</script>
1<script>self.__next_f.push([1,"24:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
1<script>self.__next_f.push([1,"43:I[414638,[\"/_next/static/chunks/b2b9122c1b63621e.js\",\"/_next/static/chunks/395e51502c352751.js\"],\"IconMark\"]\n"])</script>
1<script>self.__next_f.push([1,"27:[[\"$\",\"title\",\"0\",{\"children\":\"博客 - 静态网站托管、部署教程与实战案例 | 上码\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"上码官方博客,持续分享静态网站托管、前端部署、性能优化与 SEO 实战教程,覆盖 React/Vue/Next.js 发布流程、AI 生成网页上线经验和产品更新。\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"静态网站托管教程,前端部署实战,React Vue Next.js 发布,AI 网页上线,网站性能优化,SEO 增长案例,Jamstack\"}],[\"$\",\"meta\",\"3\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://www.upma.cn/blog\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"博客 - 静态网站托管、部署教程与实战案例 | 上码\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"聚焦静态托管、前端部署与 SEO 增长,提供 React/Vue/Next.js 实战教程和案例复盘。\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://www.upma.cn/blog\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://www.upma.cn/images/blog/ai-website-publish-cover.jpg\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"博客 - 静态网站托管、部署教程与实战案例 | 上码\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"聚焦静态托管、前端部署与 SEO 增长,提供 React/Vue/Next.js 实战教程和案例复盘。\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://www.upma.cn/images/blog/ai-website-publish-cover.jpg\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.441ae040.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L43\",\"15\",{}]]\n"])</script>
1<script>self.__next_f.push([1,"37:null\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.