零基础教程：在国内买服务器和网站备案其实没那么难
/* 容器基础样式：极简灰，左侧细边框强调 */ .custom-ai-summary { margin: 1.5em 0; padding: 1.25em 1.5em; background-color: #f3f4f6; /* 浅灰色背景 */ border-left: 4px solid #6b7280; /* 石板灰边框 */ border-radius: 0 8px 8px 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background-color 0.3s, color 0.3s; } /* 标题区：使用简约的SVG图标替代Emoji，显得更加专业 */ .custom-ai-summary-header { display: flex; align-items: center; font-size: 0.95em; font-weight: 600; margin-bottom: 0.75em; color: #111827; letter-spacing: 0.05em; } .custom-ai-summary-header svg { width: 16px; height: 16px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 正文区：提高行高，优化长文阅读体验 */ .custom-ai-summary-content { font-size: 0.95em; line-height: 1.7; text-align: justify; } /* 底部声明区：低调的虚线分割，弱化存在感 */ .custom-ai-summary-footer { margin-top: 1em; padding-top: 0.75em; border-top: 1px dashed #d1d5db; font-size: 0.8em; color: #6b7280; text-align: right; } .custom-ai-summary-footer a { color: #4b5563; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .custom-ai-summary-footer a:hover { color: #111827; border-bottom-color: #111827; } /* ==================== 暗夜模式适配 (Dark Mode) ==================== */ @media (prefers-color-scheme: dark) { .custom-ai-summary { background-color: #1f2937; /* 深灰背景 */ border-left-color: #9ca3af; color: #d1d5db; } .custom-ai-summary-header { color: #f9fafb; } .custom-ai-summary-footer { border-top-color: #374151; color: #9ca3af; } .custom-ai-summary-footer a { color: #d1d5db; } .custom-ai-summary-footer a:hover { color: #f9fafb; border-bottom-color: #f9fafb; } } /* ==================== 移动端适配 (Mobile) ==================== */ @media (max-width: 600px) { .custom-ai-summary { padding: 1em 1.2em; /* 手机上稍微缩小内边距 */ } } AI 摘要 文章指导在国内购买服务器和进行网站备案。强调国内服务器对面向中国用户的速度和稳定性优势。备案流程已由云厂商简化，手机即可完成。关键步骤包括：选购中国内地服务器（包年包月、一年期），购买并实名认证域名，在线提交ICP备案申请（注意网站命名规范），以及在24小时内完成工信部短信核验。备案成功后需悬挂备案号，并建议进行公安联网备案。整个过程虽需耐心，但操作简便，最终可享受国内服务器优势。 Powered by Gemini-2.5-Flash 打算建站的朋友们肯定纠结过一个问题：到底买国内服务器还是国外服务器？其实答案很简单：如果你希望网站访问速度快、稳定，且主要面向国内用户，国内服务器绝对是不二之选。很多人一听到“备案”两个字就觉得头大，觉得流程复杂又繁琐。但其实现在各大云厂商的备案系统已经做得非常傻瓜化了，全程在手机上点一点就能搞定。今天咱们就用大白话，一步步带你把购买国内服务器和网站备案这两个流程跑通。关于年龄限制部分省份管局对于备案人的年龄有严格限制（例如年龄必须年满 18 周岁）。在开始折腾前，强烈建议先查看你所在省份管局的审核规则进行对照。点击查看：阿里云各地区管局备案规则文档第一步：挑选并购买国内服务器市面上的云厂商很多，对于个人站长，建议直接在阿里云、腾讯云、华为云这三家大厂里选。不仅因为机器稳定，更重要的是他们有专门的移动端备案系统，非常省事。购买服务器时，请务必注意以下三个核心点：选择地域：必须选择中国内地的节点（比如北京、上海、广州等）。如果你买的是香港或者海外节点，是无法进行国内备案的，当然也不需要备案。计费模式：对于新手建站或写博客，买“包年包月”的轻量应用服务器最划算。一般来说，1 核 2G 或者 2 核 4G 的配置完全够用了。省钱小贴士：各大厂商通常有新人优惠。比如阿里云的“99上云计划”，只需 99 元就能买到一台一年的 2C2G 国内服务器，不仅续费同价，还能直接用于国内服务器备案。服务器时长要求：国内绝大多数管局要求，用于备案的服务器，剩余有效期必须在 3 个月及以上。因此，强烈建议大家直接购买一年的服务器，千万别买按量付费或只买一个月，此两类服务器无法用于国内备案。第二步：准备并实名认证域名有了服务器，你还需要一个域名。备案本质上就是“域名 + 服务器 + 个人信息”绑定的过程。注册域名：建议直接在你买服务器的同一家云厂商购买域名。这样后续备案时，域名解析和接入都在一个平台上，能省去跨平台调资料的麻烦。避坑提醒：千万小心那些“首年 1 元”的域名低价诱惑！通常来说，此类域名第二年续费极其昂贵。掏钱前一定一定要看清楚续费条款。实名认证：买完域名后，第一件事就是提交身份证进行实名认证。请注意：域名所有人的身份信息，必须和准备备案的主体人身份信息完全一致，否则备案申请会被直接驳回。等待生效：域名实名认证通过后，请耐心等待几个小时甚至几天，让你的实名信息同步到工信部的国家系统库里。千万别刚买完域名就火急火燎地去提交备案，系统大概率会提示“查不到域名信息”或“正在验证中”。第三步：正式开始 ICP 备案（核心环节）准备好服务器、域名且实名同步完成后，就可以进入备案环节了。以阿里云或腾讯云为例，现在不需要你跑去寄实体幕布或者打印纸质文件了，直接进入厂商网站或者下载他们的官方 App以及微信小程序即可操作。1. 登录备案系统在云厂商的后台找到“ICP 备案”入口，按照系统提示一步步进入流程。2. 填写基础信息系统会自动验证你的域名和服务器。随后，你需要上传身份证正反面，系统会自动识别你的姓名和住址。在此环节，你还需要提供服务器的公网 IP 并输入云厂商提供的备案服务码（国内厂商的系统通常会自动填充这些信息）。3. 填写网站信息这是个人备案最容易失误的地方，请务必仔细阅读以下命名规范：个人备案网站名称指南：绝对不能带这些敏感字眼：博客、论坛、官网、导航、商城、资讯、社区等。不能带有强烈的行业属性或企业性质：例如某某科技、某某工作室。不能包含地名：例如北京日记、广东分享。推荐起名格式：某某的个人笔记、某某的学习空间、某某的读书分享。注：对应省份管局有不同的命名要求，强烈建议先查询当地管局的命名规范文档。点击查看：阿里云各地区管局备案网站命名要求在“网站备注”栏里，用一两句话如实描述你要做什么即可。参考话术：“本网站（填你的域名）用于分享个人的读书心得、学习笔记以及生活日常，不涉及任何商业盈利性内容。” (部分省份管局可能还需要提供手写申请书或证明材料，按厂商提示操作即可提交。)4. 人脸核验按照系统提示，用手机前置摄像头录个短视频或者拍个照，验证是你本人在操作。这彻底代替了以前麻烦的官方幕布拍照。5. 提交审核信息填完提交后，流程分为两步：初审（云厂商审核）：通常 1 个工作日内，云厂商的客服会给你打电话，核实是不是你本人在备案，并简单询问网站的用途。照实回答你的备注内容即可。管局审核（工信部审核）：云厂商初审通过后，会帮你把资料正式提交给各省的通信管理局。这一步你只能耐心等待，通常需要 1 到 3 周不等。第四步：工信部短信核验当云厂商把你的资料提交给管局后，工信部系统会给你的手机发送一条带有验证码的官方短信。必看要求：需要在短信下来24 小时限时核验！你的域名！收到短信后的 24 小时内，你必须登录工信部的备案官方网站（beian.miit.gov.cn），找到“短信核验”入口，输入你的验证码、手机号和身份证号后六位。如果超时没有完成核验，你的整个备案申请会被系统直接退回！ 大家提交完资料后，务必保持手机畅通并留意短信。第五步：备案成功后的收尾工作恭喜你！当你收到管局下发的“审核通过”短信后，你的网站就已经有了合法的国内备案号了。接下来还有两件事情需要弄好：1. 悬挂备案号根据法规，你需要在网站的最底部（Footer）悬挂你的备案号，并超链接到工信部官网。你可以参考并修改下面这段 HTML 代码，将其放到你的博客主题页脚中： 京ICP备12345678号-1 2. 公安联网备案（建议）ICP 备案成功后的 30 天内，国内建站法规要求你必须前往“全国公安机关互联网站安全管理服务平台”注册账号，把你的网站信息再填报一遍。审核通过后，公安系统同样会给你一串“公网安备”号。按照官方提供的 HTML 代码，将其连同警徽图标一起加到网站底部即可。教程总结你看，其实整个国内服务器的购买和备案流程，就像是在网上办个证。虽然要填一些资料、等上十天半个月，但只要按照规矩把资料填对、网站名字起好，基本都是一次性稳过的。搞定备案之后，你就可以享受国内服务器飞一般的访问速度了，以后接入国内的 CDN、各大平台的第三方登录接口也会畅通无阻。万事俱备，赶紧去折腾你的网站吧！
不懂代码也能做网站？腾讯云 EdgeOne 拖拽部署高颜值二次元导航站
/* 容器基础样式：极简灰，左侧细边框强调 */ .custom-ai-summary { margin: 1.5em 0; padding: 1.25em 1.5em; background-color: #f3f4f6; /* 浅灰色背景 */ border-left: 4px solid #6b7280; /* 石板灰边框 */ border-radius: 0 8px 8px 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background-color 0.3s, color 0.3s; } /* 标题区：使用简约的SVG图标替代Emoji，显得更加专业 */ .custom-ai-summary-header { display: flex; align-items: center; font-size: 0.95em; font-weight: 600; margin-bottom: 0.75em; color: #111827; letter-spacing: 0.05em; } .custom-ai-summary-header svg { width: 16px; height: 16px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 正文区：提高行高，优化长文阅读体验 */ .custom-ai-summary-content { font-size: 0.95em; line-height: 1.7; text-align: justify; } /* 底部声明区：低调的虚线分割，弱化存在感 */ .custom-ai-summary-footer { margin-top: 1em; padding-top: 0.75em; border-top: 1px dashed #d1d5db; font-size: 0.8em; color: #6b7280; text-align: right; } .custom-ai-summary-footer a { color: #4b5563; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .custom-ai-summary-footer a:hover { color: #111827; border-bottom-color: #111827; } /* ==================== 暗夜模式适配 (Dark Mode) ==================== */ @media (prefers-color-scheme: dark) { .custom-ai-summary { background-color: #1f2937; /* 深灰背景 */ border-left-color: #9ca3af; color: #d1d5db; } .custom-ai-summary-header { color: #f9fafb; } .custom-ai-summary-footer { border-top-color: #374151; color: #9ca3af; } .custom-ai-summary-footer a { color: #d1d5db; } .custom-ai-summary-footer a:hover { color: #f9fafb; border-bottom-color: #f9fafb; } } /* ==================== 移动端适配 (Mobile) ==================== */ @media (max-width: 600px) { .custom-ai-summary { padding: 1em 1.2em; /* 手机上稍微缩小内边距 */ } } AI 摘要 本文详细介绍了如何利用腾讯云EdgeOne Pages，通过“复制粘贴、打包压缩、拖拽上传”三步，零代码快速搭建一个高颜值的二次元导航站。用户无需服务器和编程知识，即可拥有自带毛玻璃特效、随机二次元背景、聚合搜索、全端适配的网站。部署过程包括准备`index.html`和`404.html`文件、将其压缩为`.zip`包，然后手动上传至EdgeOne控制台。文章强调了EdgeOne提供的全球加速和可视化操作优势，并指导用户绑定自定义域名及后续更新方法，让建站变得简单高效。 Powered by Gemini-2.5-Flash 想拥有一个属于自己的高颜值导航站，但一看到代码就头疼，觉得非常麻烦？没关系！今天我们换一种更简单、更直接的方式。只需要 “复制粘贴 -> 打包压缩 -> 拖拽上传” 三步，利用 腾讯云 EdgeOne Pages 的手动部署功能，就能把这个自带毛玻璃特效、随机二次元背景的 YumeACG 导航站 发布上线！无需服务器 |无需敲代码 |全程可视化操作还是先看导航站效果导航站Demo极速访问：依托腾讯云边缘节点，全球秒开。全端适配：手机、电脑完美自适应。颜值正义：自带聚合搜索、毛玻璃 UI、专属 404 页面。电脑端展示：手机端展示：准备工作腾讯云账号 1 个（开通 EdgeOne 即可，有免费额度）。电脑 1 台（系统自带记事本就能做）。双手 1 双（有手就行）。部署教程：保姆级四步走第一步：本地准备代码文件我们在电脑桌面上新建一个文件夹，命名为 MyNav（或者你喜欢的名字），然后进入文件夹。1. 创建主页 (index.html)新建一个文本文档，重命名为 index.html。用记事本（或 VS Code）打开它。将本文 【附录：源码复制区】 里的 index.html 代码全部复制进去，保存。2. 创建 404 页 (404.html)新建一个文本文档，重命名为 404.html。同样用记事本打开。将本文 【附录：源码复制区】 里的 404.html 代码复制进去，保存。修改提示：此时，你可以直接在记事本里搜索“Hzの小站”改成你的名字，把 href="..." 里的链接换成你常用的地址。改完保存，这就是你的专属版本了！第二步：打包压缩现在你的文件夹里应该有两个文件：index.html 和 404.html。同时选中这两个文件（ 注意：是选中这俩文件，不是选中外面的文件夹）。鼠标右键 -> 发送到 -> 压缩(zipped)文件夹（或者使用 WinRAR/7-Zip 压缩为 .zip 格式）。你会得到一个 index.zip 或者 archive.zip，这就是我们要上传的“网站包”。第三步：EdgeOne 拖拽上线登录 腾讯云 EdgeOne 控制台。左侧菜单点击 Pages (页面托管)。点击 新建项目。关键一步：选择 【手动上传】。上传文件：点击上传区域，选择你刚才压缩好的 .zip 包，或者直接把它拖进去。项目名称：给你的网站起个名，比如 mynav-2026。点击 部署。等待几秒钟，当你看到 “部署成功” 的绿色提示时，恭喜你！你的网站已经发布到了互联网上！重要提示：EdgeOne 自动分配的预览域名仅有 3小时有效期。请务必前往项目设置，绑定你自己的自定义域名！第四步：后续如何更新？如果你以后想添加新的链接，或者换个背景图，操作也非常简单：在本地电脑修改好 index.html。重新选中文件压缩成 .zip 包。回到 EdgeOne 控制台，点击你的项目 -> 概览 -> 新建部署。上传新的压缩包即可。EdgeOne 会自动更新你的网站，完全不用懂复杂的服务器运维知识！简单修改指南 (记事本也能改)既然代码都在本地，修改起来非常方便。打开 index.html，使用 Ctrl+F 搜索对应的关键词即可修改：改标题：搜索 ，把里面的文字改成你的。改 Logo：搜索 class="logo"，修改 YUMEACG 里的文字。加链接：搜索 <!-- 1. [置顶]，你会看到类似这样的代码块： 网站名称 简介 复制这一整块，粘贴在后面，填入你的新链接即可。总结看，做网站其实没那么难！通过 腾讯云 EdgeOne 手动上传 功能，用最朴素的“打包上传”方式，就拥有了一个全球加速的静态导航站。不用买服务器，不用担心被攻击，只要你有文件，EdgeOne 就能帮你分发到全世界。快去试试吧！附录：源码复制区1. 主页代码 (index.html)此处代码为本站同款，直接复制修改所需到地方即可（不懂可使用AI进行辅助替换）： 您的网站标题 - 个人导航站 MYNAV 在这里写下您的网站介绍或座右铭 正在加载今日份的感动... 百度一下 国内最大的搜索引擎 GitHub 全球最大的代码托管平台，开发者聚集地 © 2026 Yumeacg. All rights reserved. Powered by HTML5 & CSS3 2. 404代码（可选同款） 404 - 迷路了 | YumeACG 404 这里是异次元空间... 你要找的页面似乎不存在， 或者已经被吸入黑洞了 (・_・;) 返回首页
电脑或手机文件太大没空间保存，不妨用Openlist部署自己的私有化网盘试一试？
/* 容器基础样式：极简灰，左侧细边框强调 */ .custom-ai-summary { margin: 1.5em 0; padding: 1.25em 1.5em; background-color: #f3f4f6; /* 浅灰色背景 */ border-left: 4px solid #6b7280; /* 石板灰边框 */ border-radius: 0 8px 8px 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background-color 0.3s, color 0.3s; } /* 标题区：使用简约的SVG图标替代Emoji，显得更加专业 */ .custom-ai-summary-header { display: flex; align-items: center; font-size: 0.95em; font-weight: 600; margin-bottom: 0.75em; color: #111827; letter-spacing: 0.05em; } .custom-ai-summary-header svg { width: 16px; height: 16px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 正文区：提高行高，优化长文阅读体验 */ .custom-ai-summary-content { font-size: 0.95em; line-height: 1.7; text-align: justify; } /* 底部声明区：低调的虚线分割，弱化存在感 */ .custom-ai-summary-footer { margin-top: 1em; padding-top: 0.75em; border-top: 1px dashed #d1d5db; font-size: 0.8em; color: #6b7280; text-align: right; } .custom-ai-summary-footer a { color: #4b5563; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .custom-ai-summary-footer a:hover { color: #111827; border-bottom-color: #111827; } /* ==================== 暗夜模式适配 (Dark Mode) ==================== */ @media (prefers-color-scheme: dark) { .custom-ai-summary { background-color: #1f2937; /* 深灰背景 */ border-left-color: #9ca3af; color: #d1d5db; } .custom-ai-summary-header { color: #f9fafb; } .custom-ai-summary-footer { border-top-color: #374151; color: #9ca3af; } .custom-ai-summary-footer a { color: #d1d5db; } .custom-ai-summary-footer a:hover { color: #f9fafb; border-bottom-color: #f9fafb; } } /* ==================== 移动端适配 (Mobile) ==================== */ @media (max-width: 600px) { .custom-ai-summary { padding: 1em 1.2em; /* 手机上稍微缩小内边距 */ } } AI 摘要 电脑手机空间不足、文件杂乱？文章推荐 OpenList。这是一款基于 Go 语言开发的高性能、高颜值开源文件管理站，轻量、快速，支持多用户和后台管理。它提供一键脚本和Docker两种部署方式，部署后可配置域名访问、HTTPS，并能挂载各类云存储或本地存储，实现海量资源统一管理，有效解决存储困扰，提升管理效率。 Powered by Gemini-2.5-Flash 文件杂乱？空间告急？用 OpenList 搭建高性能私有文件站（一键脚本/Docker 双教程）作为一个热衷于在互联网上“囤积资源”的松鼠党，我的电脑 C 盘和手机内存常年处于爆红状态。每次看到学习资料或精彩视频时都想“先收藏”，结果往往是“收藏从未停止，学习从未开始”，每次找个文件都要小心翼翼地权衡剩余空间。是时候给这些无处安放的文件找个家了！今天我们要部署的是 OpenList —— 一个基于 Go 语言开发的高性能、高颜值的开源文件管理站与文件列表系统。它不仅轻量级、加载速度飞快，还支持多用户和强大的后台管理。不管你是想做一个私有文件管理站，还是想搭建一个资源分享站，它都是绝佳的选择。项目地址：OpenListTeam/OpenList方式一：懒人专属（官方一键脚本）如果你拥有一台 Linux 服务器（CentOS/Debian/Ubuntu的1C1G小鸡即可）并且不想折腾复杂的环境配置，官方提供的一键脚本是最快的选择。1. 连接服务器打开 SSH 终端工具，连接到你的服务器。2. 执行安装命令复制下面这行命令，粘贴到终端并回车：curl -fsSL https://res.oplist.org/script/v4.sh > install-openlist-v4.sh && sudo bash install-openlist-v4.sh3. 等待安装完成脚本会自动检测系统环境、下载二进制文件并配置服务。安装完成后，终端会显示安装成功的提示，以及默认的访问端口（通常是 服务器IP:5244，具体请查看脚本输出）优点：速度快，无需配置环境，适合新手。缺点：直接运行在宿主机，可能会与服务器上现有的 Nginx/Apache 产生端口冲突。注意：请务必在服务器防火墙或安全组中提前开放 5244 端口，否则无法通过外网访问。方式二：Docker 部署（推荐）相比一键脚本，我更推荐使用容器化部署。Docker 能够实现数据隔离、升级方便，不想用时直接删除容器即可，完全不污染服务器环境。安全警告：强烈建议在 Docker 隔离环境中部署。如果在宿主机直接运行且未正确配置 SELinux 或 AppArmor 等安全措施，一旦密码泄露，攻击者可能访问您服务器上的所有文件。方法 A：使用 Docker CLI（命令行）安装好 Docker 后，直接执行以下命令即可启动# 1. 创建配置目录 mkdir -p /etc/openlist # 2. 启动容器 docker run -d \ --restart=unless-stopped \ -v /etc/openlist:/opt/openlist/data \ -p 5244:5244 \ -e UMASK=022 \ --name="openlist" \ openlistteam/openlist:latest注：/etc/openlist 为本机映射目录，您可以根据需要修改为其他路径。方法 B：使用 Docker Compose（更易管理）如果你习惯使用 Compose，可以创建一个 docker-compose.yml 文件。创建目录并新建文件：mkdir -p /opt/openlist cd /opt/openlist vim docker-compose.yml写入以下内容（适用于 v4.1.0 及以后版本）：services: openlist: image: 'openlistteam/openlist:latest' container_name: openlist # 如果需要指定用户运行，请取消注释并修改下行 user ID # user: '0:0' volumes: - './data:/opt/openlist/data' ports: - '5244:5244' environment: - UMASK=022 restart: unless-stopped启动容器：docker compose pull docker compose up -d当终端显示 Started 或者部署完成开始显示外网访问地址时等字样，则说明部署成功！此时访问 http://你的服务器IP:5244 即可进入 OpenList 界面。后续步骤：域名访问与 HTTPS直接使用 IP:5244 访问不仅难以记忆，也不够安全。建议配合 Nginx 反向代理实现域名访问。宝塔/1Panel 反向代理设置新建一个站点（例如 file.example.com）。进入反向代理设置功能。目标 URL 填写 http://127.0.0.1:5244。保存设置，并在面板中申请免费的 SSL 证书。设置完成后，你就有了一个带 SSL 安全锁的专属文件站了！别忘了去域名提供商处添加二级域名的 A 记录解析，用作二级域名进行访问进阶玩法：挂载海量存储和自定义OpenList 最强大的功能在于其存储策略。它支持挂载多种存储源：云存储：Google Drive, OneDrive, S3 存储桶等。国内网盘：百度网盘, 夸克网盘, 阿里云盘等。本地存储：服务器自身的硬盘空间。你可以查看官方文档，选择适合自己的存储策略，将几十 T 的网盘资源瞬间变成你的“本地硬盘”。点击查看官方存储挂载教程避坑指南管理员账号：安装完成后，首次访问时通常会要求设置管理员账号，或者显示默认账号密码，请留意界面引导或终端日志及时进行保存无法访问：如果部署后无法打开网页，请重点检查服务器防火墙（Firewall）和云服务商的安全组是否已放行 5244 端口。如有使用 CDN，请确保缓存策略配置正确。总结拥有一个属于自己的私有文件站，不仅能大幅提高资源管理效率，看着一个个整齐排列的文件，强迫症瞬间都被治愈了。OpenList 凭借其高性能和易用性，绝对是个人文件管理系统的有力竞争者。快去动手部署一个，把你的电脑和手机空间从“爆红”中解救出来吧！觉得有用？记得认真的学学或者将本站加入你的收藏夹【Doge】
告别付费订阅！用 Docker + Uptime Kuma 打造高颜值的服务器监控面板！
/* 容器基础样式：极简灰，左侧细边框强调 */ .custom-ai-summary { margin: 1.5em 0; padding: 1.25em 1.5em; background-color: #f3f4f6; /* 浅灰色背景 */ border-left: 4px solid #6b7280; /* 石板灰边框 */ border-radius: 0 8px 8px 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background-color 0.3s, color 0.3s; } /* 标题区：使用简约的SVG图标替代Emoji，显得更加专业 */ .custom-ai-summary-header { display: flex; align-items: center; font-size: 0.95em; font-weight: 600; margin-bottom: 0.75em; color: #111827; letter-spacing: 0.05em; } .custom-ai-summary-header svg { width: 16px; height: 16px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 正文区：提高行高，优化长文阅读体验 */ .custom-ai-summary-content { font-size: 0.95em; line-height: 1.7; text-align: justify; } /* 底部声明区：低调的虚线分割，弱化存在感 */ .custom-ai-summary-footer { margin-top: 1em; padding-top: 0.75em; border-top: 1px dashed #d1d5db; font-size: 0.8em; color: #6b7280; text-align: right; } .custom-ai-summary-footer a { color: #4b5563; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .custom-ai-summary-footer a:hover { color: #111827; border-bottom-color: #111827; } /* ==================== 暗夜模式适配 (Dark Mode) ==================== */ @media (prefers-color-scheme: dark) { .custom-ai-summary { background-color: #1f2937; /* 深灰背景 */ border-left-color: #9ca3af; color: #d1d5db; } .custom-ai-summary-header { color: #f9fafb; } .custom-ai-summary-footer { border-top-color: #374151; color: #9ca3af; } .custom-ai-summary-footer a { color: #d1d5db; } .custom-ai-summary-footer a:hover { color: #f9fafb; border-bottom-color: #f9fafb; } } /* ==================== 移动端适配 (Mobile) ==================== */ @media (max-width: 600px) { .custom-ai-summary { padding: 1em 1.2em; /* 手机上稍微缩小内边距 */ } } AI 摘要 这篇文章详细介绍了如何告别付费订阅，利用 Docker 和开源工具 Uptime Kuma，在自己的服务器上搭建一个高颜值、功能强大的服务器监控面板。Uptime Kuma 不仅完全免费，界面美观，还支持毫秒级监控、多种报警方式（如微信、邮件、Telegram），并能创建专业的状态页，甚至绑定专属域名。部署过程简单，只需通过 Docker 安装，然后配置反向代理实现域名访问和SSL加密。最后，你可以轻松添加监控项、设置报警通知，并通过自定义CSS打造独一无二的状态页，让你的服务稳定运行，数据尽在掌握。 Powered by Gemini-2.5-Flash 告别付费订阅！用 Docker + Uptime Kuma 打造高颜值的服务器监控面板 想象一下：如果服务器悄悄挂了，而你毫无察觉，直到被用户发邮件轰炸才知道，那是种什么体验？虽然市面上有 UptimeRobot 这样的工具，但免费版限制颇多：5 分钟才检测一次、自定义域名要付费、界面也平平无奇。作为尊贵的 Linux 服务器拥有者，数据当然要掌握在自己手里！今天，我们来玩点高端的。利用 Docker，在自己的服务器上部署开源监控神器 —— Uptime Kuma。它界面如丝般顺滑，支持中文，支持微信/TG/邮箱报警，最重要的是：完全免费，颜值爆表！Github 项目地址为什么选择 Uptime Kuma？颜值即正义：UI 设计非常现代化（支持暗夜模式），动态心跳图表看着极度舒适。毫秒级监控：你可以设置 20秒 一次检测，甚至更短（UptimeRobot 免费版只能 5 分钟）。报警方式多：支持 Telegram, Discord, 邮件，甚至企业微信、飞书、钉钉等 90+ 种通知方式。高大上的状态页：原生的状态页 (Status Page) 就足以媲美付费产品，还能绑定你的 专属域名。第一步：安装 DockerUptime Kuma 基于 Docker 部署，环境隔离，干净清爽。连接你的 SSH 或者服务器终端，输入以下命令（如果你的服务器已经装过 Docker，请直接跳过此步）：# 1. 官方一键安装脚本 curl -fsSL https://get.docker.com | bash # 2. 启动 Docker 并设置开机自启 systemctl start docker systemctl enable docker第二步：部署 Uptime KumaDocker 装好了，部署 Kuma 只需要几行命令。这里我们将数据映射出来，防止重启后数据丢失。你可以选择 Docker CLI 或 Docker Compose 两种方式。方式 A：Docker Compose 部署（推荐）结构清晰，方便管理。# 创建目录 mkdir uptime-kuma && cd uptime-kuma # 下载官方 Compose 文件 curl -o compose.yaml https://raw.githubusercontent.com/louislam/uptime-kuma/master/compose.yaml # 启动容器 docker compose up -d方式 B：Docker 直接运行（简单粗暴）docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:2参数解析：-p 3001:3001：开放 3001 端口（如需修改访问端口，改冒号前面的数字即可）。louislam/uptime-kuma:2：使用 V2 版镜像。 懒人提示：如果你使用的是 宝塔面板 或 1Panel，直接在“应用商店”搜索 Uptime Kuma 点击安装即可，省去命令行操作。第三步：配置域名与 SSL (反向代理)直接用 IP:3001 访问既难记又不安全，我们需要给 Uptime Kuma 加上“SSL安全证书”（配置反向代理 + HTTPS）。这里以 宝塔面板 为例（Nginx 同理）：域名解析：去你的域名服务商（如阿里云、腾讯云、Cloudflare），添加一条 A记录。名称：填 status (或者 monitor)。IPv4 地址：填你服务器的公网 IP。添加站点：在面板中“新建站点”，域名填写 status.你的域名.com。设置反代：进入站点设置 -> 反向代理 -> 添加反向代理。代理名称：随意（如 Kuma）。目标 URL：http://127.0.0.1:3001。点击提交。开启 HTTPS：在站点设置 -> SSL 中申请免费证书并开启强制 HTTPS。搞定！ 现在你可以通过 https://status.你的域名.com 优雅地访问你的监控面板了。第四步：配置监控与报警1. 添加监控项进入 Kuma 后台，创建管理员账号。建议先点击-> 设置 -> 常规，配置一下 “ 站点主 URL”，也就是你刚才绑定的 https://status.你的域名.com。回到仪表盘，点击 “+ 添加监控项”。监控类型：HTTP(s)：适用于监控网站。Ping：适用于监控服务器 IP 连通性。显示名称：例如 我的博客。URL：填入你需要监控的地址，如 https://example.com。心跳间隔：推荐 180 秒（太快容易被防火墙当成攻击，太慢反应迟钝）。接着看到 高级，证书过期提醒，这里我们可以顺手开启，方便我们随时查看SSL证书过期点击 保存。2. 设置报警不想错过每一次宕机？让 Kuma 喊你起床处理问题！点击监控 -> 【编辑】 -> 【通知】 -> 【设置通知】。通知类型：推荐 Email (SMTP) 或 Telegram / 企业微信等通知方式。配置示例 (SMTP)：填写你的 SMTP 信息（QQ邮箱、Gmail 或域名邮箱），这里不懂的可以自行搜索或者询问AI解决点击 测试，收到测试消息后保存。第五步：创建高颜值“状态页”我们要把这个漂亮的监控结果展示给访客看，证明我们的服务有多稳定。点击 Kuma 后台右上角的 【状态页】 -> 【新的状态页】。名称：例如 System Status。路径：/status (或者直接设为首页)。在编辑页面，把刚才添加的“我的博客”监控项 拖拽 到分组中。自定义 CSS (注入灵魂)想让界面更好看？在状态页编辑界面 -> 样式 -> 自定义 CSS 中加入以下代码。(这段代码来自不知道来自哪位大佬的美化CSS，如果有人告诉我那最好不过了，我只通过Gemini 3.0 Pro进行了优化和精简和更换图片API ，该美化适配了日间/暗夜模式/移动和PC端，点击下方箭头展开复制，注：如果想要修改网页背景图，只需要修改第14行代码处的loliapi的随机图API即可) 点击展开完整美化 CSS 代码/* ======================== 1. 字体定义与全局设置 ======================== */ @font-face { font-family: 'CustomACG'; /* 原字体保留，若失效或加载慢，会自动降级使用系统字体 */ src: url('https://jsd.cdn.zzko.cn/gh/54ayao/ACG@main/static/fonts/1666963922.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } :root { --bg-image-url: url('https://www.loliapi.com/acg/'); --card-blur: 12px; /* 稍微增加模糊度，提升文字可读性 */ --transition-speed: 0.3s; /* 定义主题色：使用一种舒适的“ACG绿”或“科技蓝”作为点缀，而不是彩虹色 */ --primary-color: #42b983; --text-main: #2c3e50; /* 浅色模式主文字颜色 */ --text-dark: #f0f0f0; /* 深色模式主文字颜色 */ } /* 优化后的字体栈：优先 ACG 字体，其次是系统原生字体（macOS/iOS/Win/Android） */ body, #app, .font-monospace { font-family: 'CustomACG', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif !important; -webkit-font-smoothing: antialiased; /* 让字体在 Mac/iOS 上更清晰 */ -moz-osx-font-smoothing: grayscale; } /* ======================== 2. 背景图与遮罩 ======================== */ body { margin: 0; padding: 0; color: var(--text-main); background-color: #f0f2f5; /* 图片加载前的底色 */ min-height: 100vh; } /* 使用伪元素做背景，解决移动端 background-attachment: fixed 的兼容性问题 */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: var(--bg-image-url) center center / cover no-repeat; } /* 遮罩层：稍微加深一点，确保文字在任何图片上都能看清 */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgba(255, 255, 255, 0.15); /* 浅色模式叠加层 */ pointer-events: none; } /* 暗黑模式下的遮罩调整 */ .dark body::after { background: rgba(0, 0, 0, 0.4); /* 深色模式背景压暗 */ } /* ======================== 3. 毛玻璃卡片 (高可读性优化) ======================== */ .card, .shadow-box, .alert, .list-group-item, .modal-content, .form-control, .input-group-text { background-color: rgba(255, 255, 255, 0.8) !important; /* 增加不透明度提升对比度 */ backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur)); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; border-radius: 12px !important; transition: transform var(--transition-speed), box-shadow var(--transition-speed); } /* 卡片悬停效果 */ .card:hover, .shadow-box:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } /* === 暗黑模式卡片适配 === */ .dark .card, .dark .shadow-box, .dark .alert, .dark .list-group-item, .dark .modal-content, .dark .form-control, .dark .input-group-text { background-color: rgba(30, 30, 30, 0.75) !important; border-color: rgba(255, 255, 255, 0.15); color: var(--text-dark); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } /* 列表项去背景，更通透 */ .list-group-item { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(150, 150, 150, 0.1) !important; } /* 侧边栏与导航 */ .sidebar, .navbar { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(var(--card-blur)); border-bottom: 1px solid rgba(0,0,0,0.05); } .dark .sidebar, .dark .navbar { background-color: rgba(20, 20, 20, 0.8) !important; border-bottom: 1px solid rgba(255,255,255,0.05); } /* ======================== 4. 标题与文字 ======================== */ /* 通用标题样式：清晰、稳重 */ h1, h2, h3, h4, h5, .navbar-brand { color: var(--text-main); font-weight: 700; /* 给文字加一点点白色描边，防止背景图太杂导致看不清 */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); letter-spacing: 0.5px; } /* 重点文字颜色 */ .monitor-list .item-name, .alert-heading { color: #333; font-weight: 600; } /* === 暗黑模式文字适配 === */ .dark h1, .dark h2, .dark h3, .dark .navbar-brand, .dark .monitor-list .item-name, .dark .alert-heading { color: var(--text-dark); /* 深色模式下，文字阴影改为黑色，增加立体感 */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } /* 描述性文字颜色减淡，形成层级 */ .description, .text-muted { color: #666 !important; } .dark .description, .dark .text-muted { color: #aaa !important; } /* 链接颜色优化 */ a { color: var(--primary-color); text-decoration: none; transition: color 0.2s; } a:hover { color: #2c8560; /* 深一点的绿色 */ text-decoration: underline; } /* 状态徽章 (Badge) 保持高亮清晰 */ .badge { text-shadow: none !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* ======================== 5. 组件细节微调 ======================== */ /* 进度条美化 */ .progress { background-color: rgba(0, 0, 0, 0.08); border-radius: 10px; height: 10px; /* 稍微细一点，更精致 */ } .dark .progress { background-color: rgba(255, 255, 255, 0.1); } /* 滚动条美化 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: rgba(120, 120, 120, 0.3); border-radius: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 120, 0.6); } /* 隐藏不必要的边框 */ .border-end { border-right: 1px solid rgba(0,0,0,0.05) !important; } .dark .border-end { border-right: 1px solid rgba(255,255,255,0.05) !important; } 最终效果配置完成后，你的状态页将焕然一新：总结：相比于 UptimeRobot，Uptime Kuma 才是极客的终极选择：完全免费，功能无阉割。数据私有，隐私安全，不用担心监控数据被卖。自由度高，配合自定义 CSS 和反向代理，打造专属监控面板。现在，把你的 status.你的域名.com 链接挂到博客页脚吧，让那一行绿色的 “100% 在线” 成为你网站中最闪耀的点！[TIP]觉得有用？ 把这篇文章收藏起来，这是每个站长都应该尝试的项目！
想要一个自己的免费图床？教你白嫖如何Cloudflare？
/* 容器基础样式：极简灰，左侧细边框强调 */ .custom-ai-summary { margin: 1.5em 0; padding: 1.25em 1.5em; background-color: #f3f4f6; /* 浅灰色背景 */ border-left: 4px solid #6b7280; /* 石板灰边框 */ border-radius: 0 8px 8px 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #374151; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: background-color 0.3s, color 0.3s; } /* 标题区：使用简约的SVG图标替代Emoji，显得更加专业 */ .custom-ai-summary-header { display: flex; align-items: center; font-size: 0.95em; font-weight: 600; margin-bottom: 0.75em; color: #111827; letter-spacing: 0.05em; } .custom-ai-summary-header svg { width: 16px; height: 16px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 正文区：提高行高，优化长文阅读体验 */ .custom-ai-summary-content { font-size: 0.95em; line-height: 1.7; text-align: justify; } /* 底部声明区：低调的虚线分割，弱化存在感 */ .custom-ai-summary-footer { margin-top: 1em; padding-top: 0.75em; border-top: 1px dashed #d1d5db; font-size: 0.8em; color: #6b7280; text-align: right; } .custom-ai-summary-footer a { color: #4b5563; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .custom-ai-summary-footer a:hover { color: #111827; border-bottom-color: #111827; } /* ==================== 暗夜模式适配 (Dark Mode) ==================== */ @media (prefers-color-scheme: dark) { .custom-ai-summary { background-color: #1f2937; /* 深灰背景 */ border-left-color: #9ca3af; color: #d1d5db; } .custom-ai-summary-header { color: #f9fafb; } .custom-ai-summary-footer { border-top-color: #374151; color: #9ca3af; } .custom-ai-summary-footer a { color: #d1d5db; } .custom-ai-summary-footer a:hover { color: #f9fafb; border-bottom-color: #f9fafb; } } /* ==================== 移动端适配 (Mobile) ==================== */ @media (max-width: 600px) { .custom-ai-summary { padding: 1em 1.2em; /* 手机上稍微缩小内边距 */ } } AI 摘要 想拥有自己的免费图床？这篇文章教你如何利用Cloudflare Pages和GitHub上的CloudFlare-ImgBed项目，搭建一个永久免费、全球加速的图床。它能彻底解决个人博客服务器硬盘不足的困扰，无需额外付费或占用服务器资源。该方案通过Cloudflare Pages托管，利用R2或Telegraph等免费接口存储图片，并借助Cloudflare全球CDN加速。核心优势是零成本、不依赖自有服务器、可视化管理和极速访问。搭建过程简单，但需注意数据安全、合理使用配额及国内访问速度，建议上传前压缩图片。 Powered by Gemini-2.5-Flash 还在为服务器硬盘发愁？教你用 Cloudflare Pages 搭建永久免费图床！在前两篇文章中，我们搞定了域名接入和 SSL 安全设置，网站已经跑得飞快了。但是，作为一个刚刚起步的个人博客，我们很快就会面临一个新的焦虑：服务器硬盘太小了！一般的 VPS 只有 20G 左右的硬盘，如果我们要在文章里放很多高清大图或者一些文件，没几天硬盘就红了。而且，万一哪天要迁移服务器，搬运这些图片简直是噩梦。有没有一种方案，既不用花钱买存储对象（OSS/S3），又不需要占用服务器空间，还能有可视化界面直接上传图片呢？有！今天我们就来介绍 GitHub 上的神级项目：CloudFlare-ImgBed。感谢大佬 MarSeventh 的开源贡献，让我们得以实现这个想法~原理揭秘：它是怎么工作的？简单来说，这个项目利用了 Cloudflare 的 Pages 服务来托管前端页面和后端逻辑。前端：提供一个漂亮的网页，让你能拖拽上传图片。后端：默认利用 CF 的 R2 存储桶、Telegraph 等存储方式（Telegram 旗下的发布平台）的免费接口来存储图片，并通过 Cloudflare 的全球网络进行加速。省流总结：0 成本：完全免费，构建简单。0 服务器：不用占用你自己服务器的任何资源。可视化：有个像样子的后台管理界面。速度快：CF 全球 CDN 加速。第一步：Fork 项目到你的 GitHub首先，你需要有一个 GitHub 账号，Fork 一下这个项目。打开项目地址：MarSeventh/CloudFlare-ImgBed点击右上角的 Fork 按钮。点击 Create fork，把这个项目“叉”到你自己的仓库里。第二步：在 Cloudflare Pages 部署登录 Cloudflare 后台。在左侧菜单找到 【Workers 和 Pages】。点击蓝色的 【创建 (Create)】 -> 选择 【Pages】 标签 -> 【选择一个存储库】。选择你刚才 Fork 的那个仓库 CloudFlare-ImgBed，点击 开始设置。关键设置环节：项目名称：随便填，比如 miku-img。生产分支：默认 main 即可。构建设置：完全不用动！ 保持默认即可。构建命令：填写 npm install （注意：这里必须填！）直接点击 【保存并部署 (Save and Deploy)】。等待几十秒，当看到“成功！”的绿色对勾时，你的图床就已经基本完成了！ 进阶设置提醒：虽然部署好了，但我们还需要一些别的设置（比如连接 R2 存储桶）。我们可以查看作者的文档来进行相对应的设置。点击查看官方配置文档第三步：设置后台账号密码（重要）默认情况下，谁知道了你的网址都能往里传图，这可不行，如果是自己博客使用的话，我们需要设置一个管理员账号。点击页面上的 设置（或访问你的图床地址），确保我们的站点不会被恶意使用。 注意： 第一次使用时账号和密码均为空，自行登录后修改即可。第四步：绑定自定义域名虽然 CF 分配了一个 xxx.pages.dev 的域名，但为了逼格和长久考虑，我们最好用自己的二级域名，方便好看【doge】。在 Pages 项目页面，点击 【自定义域 (Custom domains)】。点击 【设置自定义域】。输入你想用的域名，比如 img.example.com。点击继续，Cloudflare 会自动帮你添加一条 DNS 记录。 特别提醒：别忘了去 Cloudflare 的 DNS 设置 里面检查你的二级域名，确保添加了 A 记录（主机名填 img 或你设置的前缀），否则可能无法访问。等待几分钟，访问 https://img.example.com，你就会看到那个熟悉的上传界面了！登录后，你就可以愉快地拖拽上传图片，并直接获取 MD 或者直链格式的链接。避坑与注意事项虽然这个方案很香，但作为一个负责任的博主，我有必要告诉你它的局限性：数据安全性：如果你使用的是 Telegraph 的接口，虽然免费，但图片理论上不在你自己的控制手中。如果哪天 Telegraph 倒闭了或者接口变了，图片可能会丢失。建议：用来存博客配图完全没问题（记得本地留个底），但千万别存私密照片！适度薅羊毛：虽然 CF 不限制流量，但限制了文件存储容量和访问次数（R2 也是有免费额度的）。请注意自己的配额，不要滥用作为大文件存储，做一个优雅的互联网公民。引用限制：有些国内平台（如微信公众号、知乎）可能会拦截 Telegraph 的图片源，但在你自己的独立博客上使用是完全没问题的。国内访问速度（重要）：由于 Cloudflare 在国内存在“众所周知”的网络连接限制，部分地区直连访问可能会比较慢。建议： 强烈建议在上传前使用压缩工具对图片进行压缩，减小体积。一张 5MB 的原图和一张 200KB 的压缩图，在弱网环境下的加载体验是天差地别的！这能有效避免访客因加载太慢而无法正常预览图片。总结至此，你已经拥有了一个“无限容量、全球加速、带有管理后台”的免费图床。以后写文章，只需要把图片往浏览器里一拖，复制 Markdown 链接，粘贴到 Typecho 里，行云流水，一气呵成！你的服务器硬盘终于可以松一口气了！[label color="blue"]下一篇预告：网站有了，图片有了，如何在对接搜索引擎对你的网站进行收录和爬取？[/label]