<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>NAS123 Blog</title>
        <link>https://nas123.cc/blog</link>
        <description>NAS123 Blog</description>
        <lastBuildDate>Fri, 22 May 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-Hans</language>
        <item>
            <title><![CDATA[NAS123.CC 背后的故事：从一张飞书表格到一个完整的静态网站]]></title>
            <link>https://nas123.cc/blog/NAS123的网站怎么构建的</link>
            <guid>https://nas123.cc/blog/NAS123的网站怎么构建的</guid>
            <pubDate>Fri, 22 May 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[很多朋友看到现在的 nas123.cc，可能会觉得这就是一个标准的技术导航和博客网站。但其实在最初的设计蓝图里，它极其简单，甚至简陋——我当时只是想做一张飞书多维表格。]]></description>
            <content:encoded><![CDATA[<p>很多朋友看到现在的 <strong><a href="https://nas123.cc/" target="_blank" rel="noopener noreferrer" class="">nas123.cc</a></strong>，可能会觉得这就是一个标准的技术导航和博客网站。但其实在最初的设计蓝图里，它极其简单，甚至简陋——我当时只是想做一张<strong>飞书多维表格</strong>。</p>
<p>今天想和大家聊聊，这个项目是如何从一个“单纯的表格联动想法”，一步步演变成如今使用 Docusaurus 构建的完整静态站点的。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一-起点为什么是一张飞书表格">一、 起点：为什么是一张“飞书表格”？<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#%E4%B8%80-%E8%B5%B7%E7%82%B9%E4%B8%BA%E4%BB%80%E4%B9%88%E6%98%AF%E4%B8%80%E5%BC%A0%E9%A3%9E%E4%B9%A6%E8%A1%A8%E6%A0%BC" class="hash-link" aria-label="一、 起点：为什么是一张“飞书表格”？的直接链接" title="一、 起点：为什么是一张“飞书表格”？的直接链接" translate="no">​</a></h2>
<p>玩 NAS 和自建服务的朋友都知道，工具和知识点实在太碎片化了。市面上的导航站很多，但要么广告满天飞，要么排版密密麻麻，很难让人静下心来查找组织。</p>
<p>我最初的想法很简单：<strong>能不能做一个极简、无无打扰的导航？</strong></p>
<p>为了快速验证想法，我最先想到的是用<strong>飞书多维表格（Bitable）</strong>。</p>
<ul>
<li class=""><strong>优点：</strong> 录入极其方便，字段清晰，改完数据直接发布成网页就能分享。</li>
<li class=""><strong>初衷：</strong> 只要把好用的工具、常用的命令分门别类放进表格，再联动前端生成一个单页卡片布局的站点就行了。</li>
</ul>
<p>这也是很多轻量级独立项目最完美的“最小可行性产品（MVP）”。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="二-痛点单页导航的局限性">二、 痛点：单页导航的局限性<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#%E4%BA%8C-%E7%97%9B%E7%82%B9%E5%8D%95%E9%A1%B5%E5%AF%BC%E8%88%AA%E7%9A%84%E5%B1%80%E9%99%90%E6%80%A7" class="hash-link" aria-label="二、 痛点：单页导航的局限性的直接链接" title="二、 痛点：单页导航的局限性的直接链接" translate="no">​</a></h2>
<p>然而，随着收集的资源越来越多，问题接踵而至。单独的“导航卡片”虽然清爽，但它承载不了深度的内容。</p>
<ol>
<li class=""><strong>“知其然，不知其所以然”</strong>：导航只能告诉你这个工具叫什么、地址在哪。但怎么配置 PVE 硬件直通？怎么优化 Docker 镜像加速？这些需要长篇图文的“硬核硬货”，单单一个链接根本说不清楚。</li>
<li class=""><strong>内容沉淀困难</strong>：单纯的导航没有页面层级，无法做深度的分类沉淀，更像是一个临时查阅的黄页，缺乏内容的“生命力”。</li>
<li class=""><strong>SEO 与访问体验</strong>：纯表格或者简单的单页应用对搜索引擎并不友好，加载性能也容易受限。</li>
</ol>
<p>我意识到，我需要的不仅仅是一个**“指路牌（导航）”<strong>，更需要一个能和读者真诚交流、沉淀深度硬核教程的</strong>“根据地（完整网站）”**。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="三-蜕变为什么最终选择了-docusaurus">三、 蜕变：为什么最终选择了 Docusaurus？<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#%E4%B8%89-%E8%9C%95%E5%8F%98%E4%B8%BA%E4%BB%80%E4%B9%88%E6%9C%80%E7%BB%88%E9%80%89%E6%8B%A9%E4%BA%86-docusaurus" class="hash-link" aria-label="三、 蜕变：为什么最终选择了 Docusaurus？的直接链接" title="三、 蜕变：为什么最终选择了 Docusaurus？的直接链接" translate="no">​</a></h2>
<p>既然要从单页变成完整网站，选型就成了关键。在对比了多种方案后，我把目光投向了由 Meta 开源的 <strong>Docusaurus</strong>。</p>
<p>它几乎完美地踩中了我的所有核心诉求：</p>
<ul>
<li class=""><strong>天生强大的文档/博客双系统</strong>：Docusaurus 的结构非常清晰。它既可以有结构严密的 <code>docs</code>（用来做分类清晰的系统教程、资源索引），又可以有按时间线更新的 <code>blog</code>（用来发日常动态和深度思考）。</li>
<li class=""><strong>基于 Markdown，纯粹的写作体验</strong>：作为创作者，我希望把精力100%放在内容本身。在 Docusaurus 里，所有的页面都是用 Markdown 编写的，不需要在复杂的后台点来点去，极其清爽。</li>
<li class=""><strong>极佳的性能与静态化体验</strong>：构建后生成纯静态 HTML，部署到云端服务器或 Vercel/GitHub Pages 后，访问速度极快，且原生自带完美的 SEO 优化。</li>
<li class=""><strong>生态与扩展性</strong>：搭配 Tailwind CSS 或是自定义组件，可以非常方便地把原本的“导航”功能作为一个独立的核心模块，无缝嵌入到整个网站的生态里。</li>
</ul>
<p>从那一刻起，nas123.cc 正式挥别了“单页表格”的设想，向着一个功能完整的、专业的内容站点演进。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="四-核心构建流程一步步来">四、 核心构建流程（一步步来）<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#%E5%9B%9B-%E6%A0%B8%E5%BF%83%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B%E4%B8%80%E6%AD%A5%E6%AD%A5%E6%9D%A5" class="hash-link" aria-label="四、 核心构建流程（一步步来）的直接链接" title="四、 核心构建流程（一步步来）的直接链接" translate="no">​</a></h2>
<p>以下是目前 nas123.cc 的核心构建与部署链路，分享给同样想建站的朋友：</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="1-初始化项目">1. 初始化项目<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#1-%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE" class="hash-link" aria-label="1. 初始化项目的直接链接" title="1. 初始化项目的直接链接" translate="no">​</a></h3>
<p>使用 Docusaurus 脚手架直接初始化（选择经典的经典经典主题模板）：</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><div class="token-line" style="color:#F8F8F2"><span class="token plain">npx create-docusaurus@latest nas123-site classic</span><br></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="2-梳理核心目录结构">2. 梳理核心目录结构<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#2-%E6%A2%B3%E7%90%86%E6%A0%B8%E5%BF%83%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" class="hash-link" aria-label="2. 梳理核心目录结构的直接链接" title="2. 梳理核心目录结构的直接链接" translate="no">​</a></h3>
<p>为了把“导航”和“内容”融合，我规划了清晰的目录职责：</p>
<ul>
<li class=""><code>/src/pages/</code>：用于构建标志性的极简首页和独立的导航面板。</li>
<li class=""><code>/docs/</code>：用来存放分类清晰、适合检索的硬核技术指南（例如 NAS 系统配置、网络搭建等）。</li>
<li class=""><code>/blog/</code>：也就是你现在看到的这里，用来记录个人的碎碎念、项目日志和阶段性思考。</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="3-本地开发与实时调整">3. 本地开发与实时调整<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#3-%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91%E4%B8%8E%E5%AE%9E%E6%97%B6%E8%B0%83%E6%95%B4" class="hash-link" aria-label="3. 本地开发与实时调整的直接链接" title="3. 本地开发与实时调整的直接链接" translate="no">​</a></h3>
<p>在本地通过 <code>npm run start</code> 启动开发服务器。Docusaurus 支持热更新，左边写代码和 Markdown，右边浏览器就能秒级看到效果，这种即时反馈的体验非常顺畅。</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="4-视觉降噪">4. 视觉降噪<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#4-%E8%A7%86%E8%A7%89%E9%99%8D%E5%99%AA" class="hash-link" aria-label="4. 视觉降噪的直接链接" title="4. 视觉降噪的直接链接" translate="no">​</a></h3>
<p>为了贯彻“专业、干净、无打扰”的视觉风格，我在全局配色上做了一些克制的设计，拿掉了多余的视觉干扰，确保所有的焦点都在文字和工具链接本身。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="五-写在最后">五、 写在最后<a href="https://nas123.cc/blog/NAS123%E7%9A%84%E7%BD%91%E7%AB%99%E6%80%8E%E4%B9%88%E6%9E%84%E5%BB%BA%E7%9A%84#%E4%BA%94-%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E" class="hash-link" aria-label="五、 写在最后的直接链接" title="五、 写在最后的直接链接" translate="no">​</a></h2>
<p>从最初想做的一张“飞书表格”，到如今正式上线的 <strong>nas123.cc</strong>。这个过程不仅是技术的更迭，更是我对这个网站定位的思考过程。</p>
<p>导航站的本质是<strong>高效</strong>，而博客和文档的本质是<strong>沉淀</strong>。我希望 nas123.cc 未来能把这两者很好地结合起来——既能让你在需要找工具时一目了然，也能在你遇到配置难题时，提供一份真诚、详实的硬核指南。</p>
<p>这是本站的第一篇博文，一个全新的起点。关于 NAS、关于自建服务、关于折腾的一切，我们折腾不止，更新不断。</p>
<p>欢迎大家常来逛逛！</p>]]></content:encoded>
            <category>开源</category>
            <category>Docusaurus</category>
            <category>独立开发</category>
            <category>导航站</category>
            <category>建站指南</category>
        </item>
    </channel>
</rss>