技术 on 醋泡白豆

飞书另类用法：把表格信息自动生成可分享的网页

Thu, 21 Aug 2025 10:00:00 +0800

各个 AI 都能生成网页代码（HTML），非程序员也能用 AI 制作简单的互动网页。

有的 AI 工具内置了在页面上自动渲染 HTML 页面的功能，我们甚至可以直接截图做简单的海报。

随之而来，痛点出现了：

如何更快把这段代码变成一个能发个朋友的链接？

如何更便捷保存这些代码网页，更快速找到呢？

年初，在归藏老师那里看到了可以直接粘贴代码就直接预览并分享的 youware ，非常好用。不过粘贴后，自己的代码就看不到了，现在 youware 这个功能也限制用量了。

另一个类似的网站 32kw.com （HTMLgo）也限定了一定的权限（刚刚得知是向阳乔木老师的网站，特加附注）。

不过最近，我发现在飞书多维表格中，借助「网页自动部署」这个免费的字段捷径，就能解决这个问题：

在一个单元格中粘贴 HTML 代码，旁边的单元格就能生成一个可分享的网页链接。

这样既能够保存代码，也能够有分享链接，减少了很多阻力——再也不需自己打开编辑器粘贴 HTML 代码，保存为 HTML 格式的文件，再用浏览器打开了。

平替了 HTML 在线托管和分享工具的最基础功能。

更有趣的是，可以利用飞书表格中内嵌的 Deepseek，自动引用表格中其他的数据信息，自动生成可以分享的网页。

网页就是图片，图片背后就是网页，那么就能够实现批量制图了。

（文科生最表面的理解）

于是我又拓展了这个的使用场景：

我使用飞书多维表格记录的日志，加个「Deepseek 」和「网页自动部署」这两个字段捷径，就能在我记录完备之后，自动生成一个分享网页了！

生成网页的效果截图

让我取消了飞书「排版打印」插件的订阅。

如果 Deepseek 生成的网页质量不是很好，可以用 Claude 4 先写好模板，把整个代码嵌入提示词中就好了。

如果再拓展一下，其实可以批量生成很多东西，把表格的行的内容，变成铺开可以展示的内容。

今天先写这些。

当我发现思维导图本质是「层级结构」，一个更有趣的工作流就诞生了

Mon, 18 Aug 2025 16:06:00 +0800

上周三很兴奋，得益于一个观察和尝试：

我用 20 分钟配合 Ai ，几乎完成了一整天的工作量。而且结果百分百比我纯人工更好。

我的任务是：把已经做好，但未最终定稿的一本近 200 页的宣传画册，做个详细的思维导图，要细致到每页的具体内容。

有了思维导图，可以更高效和客户调整、确认。所以这个思维导图后续还需要可编辑。

每页至少有4 张以上照片和描述，而且我还需要把这页整体内容进行总结，200 页，很机械、很要命，每页 2 分钟，至少需要我 400 分钟， 5 个多小时。

能懒则懒，开始想着是否能借助 Ai 减少些工作量。

于是，开始尝试探索：

1、我想要一个能够编辑的思维导图，可以用 Xmind 或者幕布

2、去 Xmind 和幕布，发现它们都可以导入 Markdown 文件

3、问 Ai 知道了 Markdown 形式的纯文本可以变成思维导图！

4、思考我的需求：可以把长文本多图的 pdf 文件作为输入的 Ai ，还得聪明些，遂想到了 Google 的 Gemini

5、喂给 Gemini 2.5 pro 全部的文件，沟通清我的需求，Gemini 在 5 分钟内给我了一版完整的 Markdown 文字（最好让它以代码块的形式回复，复制更方便）

6、保存 .md 文件，导入 Xmind，生成思维导图

7、Gemini 总结太好了，人工校对修改只用了 10分钟

Ai 总结的 Markdown 和思维导图之间的关系：

Gemini 生成：

思维导图的核心是可视化的层级结构。Markdown通过标题（#）和列表（-）等语法，恰好能以纯文本形式记录这种结构。

因此，一份写好的Markdown文件，就像一份思维导图的“建筑蓝图”，能被专业软件瞬间识别并渲染成完整的、可编辑的思维导图，完美实现了“内容与形式”的分离。

走通之后很兴奋，我的收获是：

1、发现思维导图的核心是可视化的层级结构后，就可以让 Ai 去「写」思维导图了

2、不用找专门能够生成思维导图的 Ai 工具了，也不用担心 Ai 生成的导图不能修改。任何大模型都能完成这项任务，后续只要自己导入其他工具，就能无限制编辑了！

3、可以充分发挥各个工具的优势！我用 Gemini 做思维导图，充分发挥了它长文本、多模态的能力——除了识别 pdf 中的文字，Gemini 甚至直接识别了每页的每张照片，生成了对应的总结描述。

因工作的资料无法分享，我拿《纳瓦尔宝典》这本书按照这种方式做了个思维导图：

这种发现很鼓舞到我！

但我又不是很擅长各类工具格式什么的，遂有了就向 Ai 请教了下，很有启发，分享给大家。

一张Anki卡片，启发我给微博做了个「飞行模式插件」

Sun, 17 Aug 2025 16:09:00 +0800

写在前面

其实不是最近做的东西，是在年初的时候做的。已经使用了半年多，感受还不错。

行动带来更多行动，一时兴起重新更新文章，就不想断掉，最近尝试新东西的文章还没写完，遂想着回顾一下自己做「旧东西」的过程。

2025年1月25日，我复习到一张Anki卡片，大意是：警惕多媒体，图片和视频会影响人的情绪。

观点有些极端，但有一定道理。

我觉得自己在刷微博的时候，「多媒体类的信息」，除了会影响我的情绪，还经常让我刷微博的时间增加了不止一倍。

毕竟所有社交媒体，它们设计的目的就是让我们尽可能花更多时间在上面，所以或许我可以尝试把微博变成「纯文字版」。把这句话的理念，「翻译」成具体的行动，读了东西，切实去实践看看。

于是当天就用 Ai 做了一个浏览器插件，打开之后就能屏蔽掉微博所有的图片和视频，效果如下：

做个简单落地网页，大家感兴趣也可以下载试试：

纯文字微博插件 weibo.baidou.work

下载后加载解压包，点击确定，就能刷到没有图片和视频的微博了。

不过有个 bug，需要登录后再打开，因为如果登录前打开，会自动把扫描登录网页版微博的二维码也给屏蔽掉。

目前还特别粗糙——比如如果在没有登陆网页微博的情况下，开启插件，就会把登陆的二维码屏蔽掉。

致谢：白纸朋友等朋友

有了 Ai ，短时间复习 1000 本书成为可能

Thu, 14 Aug 2025 16:24:00 +0800

拼好 1000 张书籍封面的照片墙之后，我感到些许恐慌。

不是因为没有读过它们。恰恰相反，每一本都投入了数小时，甚至数天的时间，现在却感觉至少忘记了 90%。

「读过很多书」和「拥有很多智慧」之间，隔着一条「遗忘」的巨大鸿沟。

趁着用 Ai 拼照片墙的激情余热，以及被硅谷王川「GPT 的技术，相当于可以让极少数人具有超大规模处理非结构化数据信息的能力，这个能力层层叠加爆发出的生产力，看不到上限。」这条微博的启发。

我设想的，一种长期复习自己读过 1000 本书的场景，终于在几个工具配合下，几个小时内就实现了。

设想是：

- 在间歇性复习软件 Anki 中，制作 1000 张书籍知识卡。

- 复习的时候，正面只给我看书的封面，强迫自己- - 回想关于这本书的一切。

- 尝试回想之后，点击按钮。

- 反面是关于书籍内容总结、作者介绍、特殊之处等等。还可以一键跳转得到更多这本书的信息。

就像这样：

没有合适的工具，这个工作量太大了，至少需要几周，筋疲力竭，也不一定做完。

有趣的是，这些工作，我在当天用不到三小时全部完成了。（2025年2月15日）

简单分享下思路给大家：

1、用飞书多维表格做「加工车间」，表格的一行是一本书的信息，使用其内嵌的 Deepseek 批量生成我需要的字段。

2、下载为 CSV 文件，导入到 Anki ，并在 Ai 帮助下写个 Anki 卡片模板。

3、在 Ai 帮助下，为每张书籍卡嵌入对应的秘塔搜索链接和豆瓣页链接。

1000本书籍基础信息录入飞书，使用了拼 1000 书籍墙这篇提到的工具，不到 5 分钟。

嵌入 Deepseek 的飞书多维表格，把 Ai 从线性的你一句Ai回一句的聊天工具，变成了表格的「自动化函数」，如图带有颜色的列，能够按照输入的提示词，自动处理整列的所有内容。

这个步骤，感受到了作为普通人，也能够大规模处理非结构性信息的舒爽。

它还直接消灭了「复制粘贴」这个搬运数据的过程，生成的内容直接在表格中。

1000booksToAnki 纯色列均为 Ai 生成

这个飞书表格的共享地址：

https://auwwgc2fnl.feishu.cn/base/CIDcbntpla65mssQX3bckh6gn0b?from=from_copylink

Anki知识卡展示：

Anki 卡片本质上是个网页，网页就可以嵌入各种链接；

因为 Ai 生成的内容不完全准确，我在迟疑的时候，想要快速地验证，想要点击一下链接就出现这本书相关内容。

这时候之前的一个观察就帮到了忙：我发现秘塔Ai搜索后，地址栏显示的是：

固定网址 + ?q=搜索关键词。

相当于每个关键词的搜索链接是固定的！

于是我就让 Ai 实现了点一下链接，就跳转到用秘塔Ai搜索这本书的网页。

制作完 1000 张知识卡后，就可以长期随时随地复习了。

当然这只能作为一个知识系统的补充，更多应该去主动创作、更及时实践。

（Anki手机版显示）

1000本?系列：

《读完1000本书之后，我有哪些收获？》

《把1000本书的封面拼成一张照片墙》

独家问卷：只给自己填的个人追踪工具

Tue, 17 Jun 2025 10:09:00 +0800

问卷是一种对话

电子问卷或表单（Forms），一般用来向大家收集信息，设置好问题，让不同人填写。

比如我最早接触的问卷星、报名表单，都是如此。

如果查看后台，就会发现收集结果会自动汇集成一张表格，列为各项问题，行是不同的人。

表格结构性强，后续无论是分析数据、做图表展示都非常方便。

传统表格输入是单一维度的过程，对照横轴表头，一行一行填写；

问卷的形式则创造了一种全新的形式，将输入转变为一种对话。

如果问卷所有填写人都是自己呢？

三年前，脑中突然冒出的这个问题，启发我找到了现在每天用得最多的工具。

问卷的所有填写人都是自己，那它就成了一份独家问卷，实际是一种非常强大的个人追踪工具。

问卷填写人只有自己，不代表问卷只被填写一次。 不同时间戳上的自己，有很多个。

过去 3 年，我把问卷作为了一种个人追踪记录工具。制作了 20 多种问卷：

1、番茄表单问卷——每个番茄闹钟前后填写

2、朋友见面问卷——每次朋友见面后填写，记录时间、地点、干了什么、聊了什么等

3、会议纪要问卷——工作会议无论是否要求写会议纪要，都会顺手填下

4、情绪波动问卷——有比较大的情绪波动时填写

5、编程知识问卷——随手记录在实践中遇到的知识点

...等等

平台多样，从 Google Forms 、腾讯问卷、Notion Forms 到飞书问卷，但形式都一样：问卷。

三年左右总计填写 1500+ 次，预计还会继续使用下去。

为什么要填问卷？

填这么多次，是发现了问卷这种形式，不可替代的优点。

问卷是一种脚手架，减少了记录的阻力。

填问卷，不像打开空白的 Word 页面，半天只打一行字，它有具体的问题，有限制选项，有防呆设计，甚至只需要二选一，让自己在任何状态下都能够保持记录。

问卷是一个微环境，可以自定义触动自己的元素。

问卷可以设置的图片背景，都可以自定义。问问题风格的方式也都由自己发挥。

比如我的番茄问卷图片背景是任务的几种类型和它们的关系，朋友见面问卷是《老友记》截图，情绪波动问卷是《头脑特工队》截图。

问卷是一个超链接、一个二维码，只要有网络就可以输入。

比如我不用记忆任何复杂信息，只要打开 d.baidou.work 就能够看到提前设置好的问卷链接；也可以自动化工具一键打开特定问卷的超链接；电脑上作为书签，手机上可以设置成主屏幕，甚至可以用输入法的语音转文字填写。

以下是我的几个表单，填写的结果只有我有权限查看，不过大家感兴趣可以扫码查看问题。

脚手架减少阻力，微环境多次提醒自己，超链接全平台通用，这都是输入过程的角度；从输入信息的结果看，就更有价值了。

更快对单一维度进行纵向分析：比如番茄问卷结果表格，直接查看特定的一列；

更容易从记录的数据找出规律：比如可以把番茄问卷结果，按照对过去满意程度进行排列，分析自己做什么事的时候状态更好；

甚至还可以用上平台的 Ai 功能（飞书智能表格字段捷径）：直接针对特定某一列，嵌入 Deepseek 自定义提示词，批量处理。

Ai 针对困难的地方给鼓励

甚至还可以使用飞书的仪表盘做可视化

和上篇《Anki的意外用途：我如何用它存储触动瞬间》联动，问卷的结果是表格，表格内容可以批量导入 Anki ，一次性制作上千张卡片，我 Anki 中朋友见面的部分，前身就是问卷。

问卷实际是一种思考框架，设计的时候，必须考虑我们要记录的信息是什么，如何结构化这些信息。迭代问卷的过程，也是迭代自己思考方式的过程。

尝试下这种只有自己填写的问卷，随便选个平台（我目前主要用飞书问卷），设计个问卷，哪怕只有三个问题，不同时间戳上的自己填写后，查看结果，可能发现些有趣的东西。

或者也可以试试我之前做的模板：

白豆编程记录 003 | JavaScript 是「一夜情」的产物？

Mon, 05 Sep 2022 22:22:00 +0800

临时加班到 10 点，写完就周一了，大家好。

本周是我开始 coding 的第三周，来更新了?！

freeCodeCamp 课程平台 JavaScript Algorithm and Data Structures 课程的 Basic JavaScript 部分(60/113)
《Head First JavaScript 程序设计》500/628 。
下载 VScode 并安装六个辅助性插件。

Chinese：中文环境

Live preiew：实时预览 HTML

Markdown PDF：在VScode码字

Prettier：代码自动美化

vscode icon：美化图标

Wisen Translate：鼠标悬浮翻译

4. 逛技术博客，发现一个没有任何编基础的姑娘，发起并完成了《180天建180个网站》项目。

5. 复习 HTML CSS anki 卡片，并制作了 10 张 JavaScript 新卡。

-网络应用程序为了更容易建立，分离了功能与内容。内容就是网页上额 HTML 代码，它提供网页实际上如何拼在一起的结构，同时也是网页上所有数据的家；外观就是网页上的 CSS 代码，决定网页内容的外表：字体、色彩、排版等；功能就是驱动网页，带来交互性的 JavaScript 代码。

-为了给自家浏览器Navigator加上一种脚本语言和蹭 Java 流量，网景公司在 1995 年 5月决定设计一种「看上去与 Java 足够相似，但比 Java 简单，让非专业的网页制作者也能很快上手」。网景员工布莱登艾奇对 Java 不感兴趣，为了应付工作，他只用 10 天就把「简化版 Java 语言」，即 JavaScript 设计出来了。

-布莱登的设计思路是这样的：

（1）借鉴C语言的基本语法；

（2）借鉴Java语言的数据类型和内存管理；

（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；

（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

所以，Javascript语言实际上是两种语言风格的混合产物----（简化的）函数式编程+（简化的）面向对象编程。

他对 JavaScript 的评价是：

"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：'它的优秀之处并非原创，它的原创之处并不优秀。'（the part that is good is not original, and the part that is original is not good.）"

-了解语言诞生的历史，对初学第一门编程语言的小白来说，能大体了解语言特性、增加兴趣。知道了 JavaScript 是个「一夜情产物」，是函数式编程和面向对象编程的混合产物，好像也没啥用，因为这两种编程我都不熟悉，但在未来的某一时间，肯定就能理解了。

-分配任务要具体到每一天。 因为 freeCodeCamp 的这部分和响应式网页设计有所不同，不是按照单个项目来进行课程设计，这周开始学 JavaScript 没有进行具体安排，只是跟着课程走，但发现效率低下，对每天的学习量没概念，不知道自己是落后进度，还是超额完成，也就没了成就感。进行具体每天的任务规划后，效率有所提高。

JavaScript 具体进程任务分配

-注意字母的大小写。前两周的记录中，我没太注意英文单词的大小写，因为 HTML 代码中大小写和空格都对结果没有影响。这周学习到「驼峰命名法」才意识到自己的坏习惯。

CamelCase 是编程的一套命名规则，其优点是在任何计算机系统里字母都是连续的（中间没有空格），这样可以用一列描述性的词来取有含义的名字且还不会违反命名限制。它又分为两种。第一个词的首字母小写，后面每个词的首字母大写，叫做「小骆驼拼写法」（lowerCamelCase）；第一个词的首字母，以及后面每个词的首字母都大写，叫做「大骆驼拼写法」（UpperCamelCase）。

先读书，再coding，再读书。由于《Head First JavaScript 程序设计》是按照项目来进行编排的，而 freeCodeCamp 的这部分内容不是，虽然我基本过完了书，但和课程实操练习不配套，导致这周学得有点混乱。计划完成可能之后再阅读一本体系比较完整的 JavaScript 书籍。备选：《你不知道的 JavaScript》《JavaScript 权威指南》。
保持开放，增多交流。开始写编程记录才知道有朋友也在学，交流之后还被推荐了很棒的资源，真是太棒了。给自己打造环境，加入康文昌老师的元岛社区，认识更多志同道合的朋友。
在 Flomo 创建#编程随记标签。每天随时记录想法和知识点，周末再写推文就不需要再从头开始思考这周都学了啥。同时经过二次筛选，也能提高每周编程随记的质量。

资料参考：

《180天建立180个网站》：jenniferdewalt.com
阮一峰：《JavaScript诞生记》：www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html
康文昌：vscode保姆级教程和常用插件，Re01必修部分编程环境配置：
www.bilibili.com/video/BV1k34y1Y7xk

如果你喜欢我的推文，请关注公众号醋泡白豆~

白豆编程记录 002 | 这么快就拿一个证？

Sun, 28 Aug 2022 22:22:00 +0800

周日，大家晚上好。

本周是我开始动手 coding 的第二周，来更新了?！

1. 本周五的时候拿到了 freecodecamp 的响应式网页设计证书，共完成了二十个项目，其中 15 个项目有指导的学习教程，5 个为测试项目，根据示例做出符合要求的网页（放了几个成果在文末）。

2. 配合着阅读的书《head first html 和 css 》也通读完了第一遍。开了 100 页的《head first html5 programming 》。

3. 把博主康文昌的所有视频都转换为文字过了一遍，但发现这种编程教学性质的视频还是配合画面食用更佳。

跟着教程，写出还不错的网页，拿到证书，个人的成就感还是很足的。总计敲代码的时间 28 小时。

-html 和 css 算不上是严格意义上的编程语言，html 的全称是：Hyper Text Markup Language，即超文本标记语言。css的全称是：Cascading Style Sheets，即层叠样式表。html 确定是页面输入内容，而 CSS 则是通过规则，高效地对网页布局进行美化。使用两者能够设计出静态的页面，做出传达信息性质的 wiki 库和个人作品展示网站是足够了。但要让页面能够更有交互性，就需要用到我下一步要学习的 JaveScrip 语言了。

-只是不到三十个小时的敲代码练习，就能让自己有一个看网站的视角，真是太值得了。现在打开一个网页，就习惯性地用 F12 开发者工具，看看如此精美的网页是怎样用 html 最基础的模块和 CSS 的布局规则搭建起来的。关于 JS 语言的部分还看不懂，但可以通过网页的功能稍微逆向猜出点作用，也算为后面的语言学习预习了。

-拳不离手，曲不离口。每天都敲几行还是很有必要。周五晚上状态比较好，提前做了三个项目，拿到了证书。周六没敲代码，今天录入 anki 知识卡就有些内容开始遗忘了。

-在没有任何提示的情况下的实践感受印象最深刻。

freecodecamp 是一个以项目为核心的课程平台。非考试课程开始之前会让你预览一遍要做的网页，然后直接进入在线编辑器的页面，你就可以输入代码了，不过此编辑器自带了教学功能 —— 每一步都会给要用到知识点的介绍。输错了有提示反馈，不过不会给出正确的答案，实在弄不明白，可以在论坛中求助，网友们的回答都挺快，半个小时内就有人解答。

这样的项目教程确实很好，不过如果在此过程中过于依赖提示，需要自己从头到尾去设计一个页面的时候，才发现自己对很多概念理解不清，也没有从整体规划页面的逻辑思路。看来《程序员面试金典》上提到很多公司会直接让应聘者在白板上徒手写代码，确实是个好方法。

-及时查清代码中的英文单词能够事半功倍。我在前十个项目中都很容易把中的“rel”和“href”弄混，其实只要查一下其英文单词的全称，整理个对照的文档，及时复习，就能解决这个问题，还能更深刻自己理解自己写的是什么。

-HTML 菜鸟教程（是个网站）中各个属性介绍页面的内容，是可以实际操作体验的。

先阅读 head first 的书籍，再进行 freecodecamp 的代码实操。原因是这周都是先用教程实操，见到的新知识点还没咋理解，就按照教程中提示码上了。等再读书就觉得自己都练习过了，肯定会用了，就囫囵吞枣地过了。
加强运动，保证睡眠，在早上的时间整理要录入 anki 的知识点。本周晚上实操之后，大脑疲倦，啥也不愿意干。久而久之，要录入 anki 的知识点就堆积了。感觉还是总体的精力下降了，因为每天集中 coding 的时间平均还不到两个小时。
按照博主康文昌的建议，设置一个专门用的电脑输入法。本周用搜狗调成英文状态，总是不小心触碰到 shift 。

如果你喜欢我的推文，请关注公众号醋泡白豆~

白豆编程记录 001 | 万里长征第一步

Sun, 21 Aug 2022 22:22:00 +0800

我决定开始学编程，自己动手敲代码。

拖延近六年，终于开始行动。

Derek Sivers 的网站加载基本无需等待，秒开。速度着实在让我羡慕。

他网站上所有页面基本都是「纯文本」，简洁优雅，正是我心中理想的个人网站。

Derek 把自己 350＋书的阅读笔记「开源」到个人网站上，在这启发下，我照葫芦画瓢，根据一系列文字和视频教程，用 WordPress 的模板搭建自己的笔记网站。

页面加载出的瞬间，很有成就感。但大半年的时间，我一共更新了九篇读书笔记。后天管理繁琐，个人也不是很喜欢现用的博客模板，页面显示信息量小，且加载速度有时很慢。

正好是从零开始学习一项技能，按照《show your work》的精神，我打算把学习计划，学习过程中的心得体会都更新到公众号。

这系列就叫「白豆编程记录」吧。

分析一下自己目前的优势：

心理状态改变： 现在开始行动，到三十岁就至少有五多年的 coding 经验。

各类资源丰富：书籍、影视、游戏、在线编程网站，还有可以求助的朋友，完全足够自学。

阅读能力达标： 从去年到现在，阅读了至少十本计算机相关的书。

写作习惯养成： 写了一年公众号，抵触感基本没有，搭建起自己的笔记系统，学习 coding 过程中，写技术博客很有信心。

头脑一热，只是心里想做一件事，不去计划，大概率失败。

于是我开始写 Coding 的个人执行文档。

按照《软技能》的十步学习法，我做了以下规划：

第一步了解全局：了解「未知之未知」。

我阅读了软件设计师写的两本《软技能》，B站 up 等的个人职业生涯分享，以及《crash course》四十节计算机科学入门课程。大体上对编程有了一定了解。

第二步确定范围：将大主题分解为可控小主题。

确定了自己阶段方向是HTML、CSS、JS三件套。

第三步定义目标：形成一份简明清晰的目标陈述。

我的阶段性目标：

拿到 freecodecamp Responsive Web Design 和 JavaScript Algorithms and Data Structures 两门的课程的证书。
搭建一个与 Derek Sivers 博客打开速度相当的个人笔记网站，并上传 100 篇读书笔记。
使用 toggl 统计实际编程时间达到 200 小时。

第四步寻找资源：图书、博客、视频、专家、源代码、示例项目等。

第五步创建学习计划：根据阅读过的书籍目录，定制自己的学习路径。

目前我的学习路径以 freecodecamp 的两门课程安排为主。

第六步筛选资源：通读之后筛选出最优质的资源进行深入学习。

目前选定的书籍为：

《Head First：HTML与CSS》

《Head First：HTML5 Programming》

《Head First: JavaScript》

《代码大全》

《代码整洁之道》

第七步开始学习，浅尝辄止：像买了新的游戏机一样，先玩，遇到问题再看说明书。

同 freecodecamp 与博主康文昌实际操作；

个人网站逐渐改版。

第八步动手操作，边玩边学：亲自操作，亲身体验

freecodecamp 实操项目
个人笔记网站项目
博主康文昌个人网站项目
博主康文昌个人内容管理系统
博主康文昌编写微信小程序

第九步全面掌握，学以致用：和自己最高人生目标结合，自己探索。

订阅技术大牛的博客文章；

保持每日技术类书籍阅读。

第十步乐为人师，融会贯通：写博客、做视频、做演讲、教朋友、答问题

争取周更「白豆编程记录」，主要复盘一周学习的状态和思考
个人网站改版之后学习阮一峰老师写技术博客
和朋友、刚计算机专业大一的表弟聊天讨论
回答知乎上相关的基础问题

为了尽量不让自己半途而废，我的 Coding 自学指南的文档第一部分就是鸡汤文章?。调整好心态，这一阶段时间上设置为四个月，每隔一周都留出冗余，按照实际情况进行调整。

个人自学的主要形式是根据 freecodecamp 课程进行实操；

下班地铁上阅读 First Head 书籍对应的部分；

尽可能每天在 notion 学习日志中用自己的话总结新学的概念；

及时将需要记忆的程序语言，录入到 Anki 中，每日过。

更新个人 coding 自学指南 notion 文档；

freecodecamp 九个章节；

录入 Anki 35个知识点；

重读 Derek Sivers 技术博客。

小白入门，希望技术大佬们多多指教！

录入anki的知识点

醋泡白豆：搭建个人网站指南1.0

Sun, 10 Apr 2022 11:11:00 +0800

写在前面

笔者在建立个人网站之前未接触过编程，偶然在一篇文章中看到，有位国外的博主Derek Sivers把自己读过的书做的笔记放在了自己的网站上，比尔盖茨也有个专门的笔记网站。恰逢双十一阿里巴巴的云服务器有特价活动，于是就了自建网站的念头。（链接见第四部分）

通过互联网十几篇图文教程和几个视频教程，以及朋友的答疑解惑，搭建了一个个人博客网站，建站成功之后很是激动。当然做出来的网站页面很朴素，是套用的免费模板。但作为一个分享笔记的地方是足够了。

从购买云服务器到上传成功笔记，耗时一个多月。首次建站，遇到问题就搁置，耽搁了很长时间。实际搭建时间，应该不到半天。打算以现在的视角给当时的自己写份指南，也分享到公众号，供有兴趣自己建站的小伙伴参考。

这篇文章主要分以下四部分：

1、开始前的几点建议

2、建站准备：了解流程和概念

3、建站七个流程

4、需要用到的网站和软件的地址

开始前的几点建议：

1、要有信心。

现在网络基础设施，以及网络上的信息完全可以让一个不懂编程的人建立自己的个人网站。

2、要有耐心。

自建网站并不难，只是步骤比较多。分解任务，一步步来，每一小步你都是可以做到的。如果觉得有难度，继续分解任务。

3、做好记录。

中途放弃多次但最后还是搭建成功，很大一部分靠做的记录笔记。建立专门的文档，每一步的操作，每一个设置的账号密码，最好都记录下来。以便下次不用从头开始。

4、多方参考，善于求助。

网上有很多教程，但有可能发布时间很早、使用的机器和软件和你不是同款，实际操作的时候会遇到一些教程上没有的问题，这时候要善用搜索引擎。实在解决不了，可以求助专业的朋友。

5、勤读文档。

任何软件或网站的帮助页面的内容，其实可以解决大部分的问题。

建站准备: 了解流程和概念

从流程上主要分为以下七个部分：

形象一些来说，你租用了一个智能仓库。

网站的IP地址就相当于仓库的具体地址，比如北京市区街道**楼单元号；

访问网站就像用地图导航，只知道IP的话，每次都要输入很长的信息，但网站有了域名，就如同你的仓库有了具体的名字，例如“醋豆仓库”，每次只需要输入这四个字，就能找到你的仓库。当然域名有唯一性，别人注册了，你就不能用了。www.jd.com、www.mi.com 这些简短好记的域名都是企业花了大价钱买回来的。

云服务器是一种虚拟的基础架构，作用是执行应用和储存信息。其实相当于另一种形式的PC，24小时不停机运转。现在大部分人使用的都是云服务器，性价比更高，安全性也相对自己架服务器要高。用租仓库的比喻，云服务器相当于你购买的仓库以及可以用手机远程操作仓库开关门的这些服务。

xshell是用于远程连接Linux服务器，方便用户对Linux服务器上的资源文件进行远程操控的一个安全终端模拟软件。相当于连接智能仓库和你的手机的一个软件。

宝塔面板主要用于管理、维护服务器使用，是一款服务器管理软件，支持windows和linux系统，通过浏览器管理服务器，比如创建新网站、FTP、数据库等，具有可视化的功能。相当于你手机上远程管理智能仓库的一个软件，页面很简单，适合技术小白。

xshell和宝塔面板的区别在于，xshell只能通过SSH方式登录服务器，使用shell命令来控制和操作服务器和文件，比如安装软件和程序，复制粘贴，创建文件等，任何操作都是没有图形界面，都是在黑色界面上敲代码命令实现的，这样对于技术小白比较有难度的，不适合初学建站的人使用，于是可视化简单易操作的宝塔面板就来了。

WordPress是是一种使用php开发语言和数据库的内容管理系统，有很多免费和付费的模板。有点像你用来管理智能仓库的金蝶库存管理软件。我的网站界面都是通过修改WordPress上的模板做出来的。

备案的全称叫做ICP备案。ICP也就是Internet Content Provider，指的是网络内容服务商，即向广大用户综合提供互联网信息业务和增值业务的网络运营商。相当于你的智能仓库向政府申请相应的执照。

SSL证书是HTTP明文协议升级HTTPS加密协议必备的数字证书。它在客户端（浏览器）与服务端（网站服务器）之间搭建一条安全的加密通道，对两者之间交换的信息进行加密，确保传输数据不被泄露或篡改。部署了SSL证书的网站，在浏览器的地址栏前面会增加一个小锁的标志，没有部署，则会显示红色的“不安全”字样。

前几周还有条新闻，因为颁发SSL证书的公司基本都是欧美国家的，俄乌战争开始，著名SSL认证机构Sectigo拒绝为俄罗斯域名颁发HTTPS证书，甚至还吊销了已经办理的证书。

建站七个流程

1、购买云服务器

建议618或者是双十一购买，各大平台都对新用户非常友好，轻量性的服务器前三年的价格一年100元左右。

我搭建个人网站的用途主要是放文字类的笔记和文章，所以选择了阿里云轻量性云服务器ECS s6 1核2G。操作系统选择Alibaba Cloud Lunix3.2104 64位，宽带1M。

地域选择：取决于访问网站的人群，某些地区用户多，就选择最近城市的实例，无法确定的话，直接选择北京或上海即可。

更根据自己的需求购买云服务器之后，如果是个人的网站，暂未有商业化需求，按照我的配置选择就可以。后续的操作基本都在页面右上角的控制台，可以多熟悉一下。

实例：从控制台进入购买的服务器，点击左侧栏的实例，再点击创建实例， Lunix系统用户名为root，只要设置自己实例的密码即可。

2、域名购买、认证以及解析

购买：购买域名的平台有很多，国内头部公司有腾讯云、阿里云、华为云等，价格上有些差异，其他方便都基本类似。我用的是阿里云。

.com是国际顶级域名，全球都可以访问，.cn是中国国家顶级域名，.io是科技圈子喜欢的域名，比如nft最大的交易网站的域名就是www.opensea.io 。建议选择以大众接受度高的.com结尾的域名，不是特别突出的域名大概50元以内一年。

认证：购买好自己的域名之后，点击控制台，再点击阿里云最左侧的导航条，找到域名，进行实名认证，一般需要1~2个工作日。

解析：域名的解析相当于把IP地址与购买的域名绑定，让别人可以通过简单的域名来访问你的网站。在控制台——云服务器ECS——实例——复制自己的公网IP地址。回到我的域名界面，点击解析。按照引导，粘贴公网IP即可进行解析。

3、SSH软件xshell安装与设置

下载：可以通过下面的地址，选择家庭和学校使用的非商用版本，填写邮箱，官方会把下载地址发送到你的邮箱。这样就不会出现xshell软件过试用期需要付费的情况了。

连接服务器：安装好软件后，进入xshell，点击左上角的“文件”，再点击“新建”。名称可以随意修改，协议为SSH，不用修改。主机后面填入你的阿里云服务器公网IP，点击确定。

这时候会弹出对话框，我们按照要求填入登录的用户名（root）和服务器的密码。

到这里，我们就使用xshell连接上了服务器。

不要关闭xshell，安装宝塔面板还需要在此界面。

4、安装与设置宝塔面板

安装：在安装宝塔面板之前，我们需要打开服务器8888端口。我们到阿里云服务器ECS页面——网络与安全——安全组——服务器右边的“配置规则”——手动添加——在“目的”后输入“8888”，在“源”后边选择“0”最多的那个选项，点击保存。这样8888端口就被放行，就可以安装访问宝塔面板了。

在xshell的黑色界面，输入

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

然后黑屏上的代码滚动一段时间后，底部出现：

Do you want to install BT-Panel to the / www directory now?(y/n)：

输入：y

黑屏上的代码开始滚动，大概需要一分钟左右，耐心等待。

出现：Congratulations！Installed successfully!

说明宝塔面板按照成功。

保存好红色框中的内外面板地址和username、password。

登录：宝塔面板无需下载客户端，那么怎么登录呢？

打开浏览器，在地址处输入刚才外网面板地址，确认，即可来到宝塔面板的登录页面。输入username和password登录。

设置：登录宝塔Linux面板——点击左侧菜单“软件商店”——宝塔插件——找到“宝塔一件部署源代码”并安装。

部署完源代码插件后，点击“设置”进入到一键部署源代码页面——点击“博客”——找到“WordPress”，点击右侧的“一键部署”。

在弹出的页面中，我们需要输入“域名”，其他内容系统会自动创建，保持默认，点击“提交”。

几十秒后会弹出“已成功部署WordPress站点”，这时候要保存好数据库的账号资料（数据库名、用户、密码、访问站点）

访问站点，点击“现在就开始！”，在弹出的对话框中填入相应的内容，记得修改“表前缀”，点击“提交”。

在新的对话框中填入相应的站点标题、用户名、密码、电子与邮件，点击“安装WordPress”。

稍等片刻，显示“成功！” ，WordPress站点就安装完成了。

5、设置WordPress

我们在WordPress后台可以实现写文章、安装插件、通过拖拽的方式来定制自己的网站页面等功能。

WordPress是今后我们运营和维护网站最常来的地方了，请务必记好登录名和密码。

登录：WordPress在电脑端也不需要安装客户端，直接使用浏览器登录。WordPress登录网址默认是：域名/wp-admin/，输入登录名和密码，我们就能进入到管理网站内容的后台了。当然这样域名/wp-admin/登录有一定风险，网站搭建完毕后可自己研究换其他方式。

插件：登录WordPress——点击左侧“插件”——“安装插件”——即可在右侧的搜索框中搜索网站UI编辑器、邮件收发器、主题等各种实用插件。

主题：登录WordPress——点击左侧“外观”—— 搜索安装你喜欢的主题。

发文：登录WordPress——点击左侧“文章”即可进入编辑和发表文章的界面。

这部分大家可按照自己的喜好，搭建独特风格的网站页面。在这里推荐B站up主梧桐小课堂老师的视频，他的建站视频帮了我很多，我的网站目前使用的也是他推荐的Blocksy主题，免费且简洁。（链接在第四部分）

6、网站备案

域名的持有者要和备案填入的信息相一致。登录阿里云账户，点击右上角“ICP备案”，按照引导备案即可。

7、免费申请SSL证书

每个实名认证过的阿里云账号都可以免费申请20个SSL。

申请：登录阿里云官网——搜索框输入“SSL”——点击证书控制台——选择“单域名 DVSSL 免费版”—— 点击立即购买支付0元，成功购买。

绑定：在证书控制台，找到购买的证书，点击“证书申请”——填写对应内容，等待审核通过——审核通过后即与所填写的域名绑定即可下载对应的SSL证书——下载证书替换掉本地证书就成功了。

需要用到的网站和软件的地址

阿里云官网：https://www.aliyun.com/
Derek Sivers网站：https://sive.rs/
盖茨笔记网站：https://www.gatesnotes.com/
xshell下载：
https://www.xshell.com/zh/xshell-download/
WordPress登录网址：域名/wp-admin/
梧桐小课堂：
https://www.bilibili.com/video/BV1az4y1d7Ai?spm_id_from=333.999.0.0
我的个人网站：www.cupaobaidou.com

以上就是我的个人建站全部记录了，搭建过程中参考了很多博主的技术博客、建站视频，还得到了计算机专业的朋友郭瑞的帮助，尝试多次才上线网站成功。建站的过程对我这样一个技术小白来说，是很艰难，但网站上线成功之后获得的成就感是无可比拟的。

这篇指南有些地方不太详细，但大体梳理了一遍技术小白自己动手建站从头到尾的思路，也可能存在错误之处，大家还是要多方搜索来辩证参考。

终于写出来了，希望能有借鉴的意义。

如果你喜欢我的推文，请关注公众号醋泡白豆~

技术 on 醋泡白豆

飞书另类用法：把表格信息自动生成可分享的网页

当我发现思维导图本质是「层级结构」，一个更有趣的工作流就诞生了

一张Anki卡片，启发我给微博做了个「飞行模式插件」

有了 Ai ，短时间复习 1000 本书成为可能

独家问卷：只给自己填的个人追踪工具

白豆编程记录 003 | JavaScript 是「一夜情」的产物？

康文昌：vscode保姆级教程和常用插件，Re01必修部分编程环境配置：

www.bilibili.com/video/BV1k34y1Y7xk

白豆编程记录 002 | 这么快就拿一个证？

白豆编程记录 001 | 万里长征第一步

Memorizing a programming language using spaced repetition software：https://sive.rs/srs

Should you learn programming? Yes.：https://sive.rs/prog

醋泡白豆：搭建个人网站指南1.0

技术 on 醋泡白豆

飞书另类用法：把表格信息自动生成可分享的网页

当我发现思维导图本质是「层级结构」，一个更有趣的工作流就诞生了

一张Anki卡片，启发我给微博做了个「飞行模式插件」

有了 Ai ，短时间复习 1000 本书成为可能

独家问卷： 只给自己填的个人追踪工具

白豆编程记录 003 | JavaScript 是「一夜情」的产物？

康文昌：vscode保姆级教程和常用插件，Re01必修部分编程环境配置：

www.bilibili.com/video/BV1k34y1Y7xk

白豆编程记录 002 | 这么快就拿一个证？

白豆编程记录 001 | 万里长征第一步

Memorizing a programming language using spaced repetition software：https://sive.rs/srs

Should you learn programming? Yes.：https://sive.rs/prog

醋泡白豆：搭建个人网站指南1.0

独家问卷：只给自己填的个人追踪工具