通过 Windsurf 打造个人快速笔记工具：NoteUp 项目开发记

X Lv2
  2025-03-25 14:47:29 2025-03-25 14:47:29 创建   2025-04-03 16:09:02 2025-04-03 16:09:02 更新    

作为一个喜欢随时记录灵感和想法的人，我经常需要在手机上快速记笔记，然后在电脑上整理并发布到我的 Hexo 博客。然而，常用的工具如 Obsidian 在手机上启动慢、耗电严重，iCloud 的同步又不够灵活。为了解决这些问题，我利用 Windsurf（一个 AI 驱动的代码编辑器）开发了一个轻量级 Web 应用——NoteUp。它让我通过手机浏览器一键记录笔记，并自动保存为 Markdown 文件到 Hexo 的草稿目录。这篇文章将分享我的开发过程，希望能为有类似需求的你提供一些灵感。

项目背景

我的需求很简单：

  • 快速记录：在手机上随时记录灵感，无需启动笨重的应用。
  • 自动保存：笔记以 .md 格式保存到 Hexo 的草稿目录（/root/blog/source/_drafts），方便后续整理。
  • 轻量便捷：无需安装额外应用，通过浏览器即可使用。
  • 替代方案：取代 Obsidian 和 iCloud 在手机上的不足，同时保留现有工具的使用习惯。

最终，NoteUp 不仅满足了我的个人需求，还让我多了一个快捷的记录方式：将网址添加到手机桌面，像打开 App 一样一键记录。

开发过程

1. 项目初始化

我选择用 Flask（一个轻量级的 Python Web 框架）作为后端，搭配简单的 HTML 和 CSS 前端。

  • 服务器端：
    • 在服务器上创建项目目录 /opt/NoteUp。
    • 编写 Flask 应用（app.py），设置 /upload 路由接收文本输入并保存为 Markdown 文件。
    • 将保存路径配置为 Hexo 的草稿目录 /root/blog/source/_drafts。
  • 本地端：
    • 在本地路径 /e/Code/noteup 创建项目，并通过 Git 克隆到服务器。
    • 配置 SSH 密钥，实现本地与服务器的无密码推送。
2. 前端设计与优化

为了让 NoteUp 在手机上好用，我设计了一个简洁的上传页面：

  • HTML 表单：包含一个 textarea 用于输入笔记和一个提交按钮。
  • 移动端优化：
    • 添加 autofocus 属性，确保页面加载时自动聚焦到输入框并弹出键盘。
    • 使用 CSS 实现响应式布局，适配手机屏幕。
  • Windsurf 的帮助：
    • 我利用 Windsurf 的 AI 编程模型claude sonnet 3.7 快速生成了美化后整个网站代码。
    • 不断通过对话提示词完善网站功能和页面。
3. 核心功能实现
  • Markdown 文件生成：
    • 用户输入的文本会自动生成一个带时间戳的文件名（例如 draft_20231115_143022.md）。
    • 文件内容包含 Hexo 兼容的 YAML 前置元数据（标题、日期等）和用户输入的正文。
  • 本地测试：
    • 在 Windsurf 中创建虚拟环境，运行 python app.py。
    • 通过 Safari 访问 http://localhost:5000，确认笔记能正确保存。
4. 代码同步与部署
  • Git 配置：
    • 在服务器上创建裸仓库 /root/git/NoteUp.git。
    • 本地项目通过 git push 推送代码，服务器端用 git pull 更新 /opt/NoteUp。
  • 部署：
    • 使用宝塔面板将域名 upnotes.sightx.top 绑定到 Flask 应用（端口 5000），并启用 HTTPS。
    • 测试通过后，将 https://upnotes.sightx.top 添加到手机桌面，像 App 一样一键打开。

实现细节

以下是项目的主要代码片段：

  • Flask 后端（app.py）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    from flask import Flask, request, render_template
    import os
    from datetime import datetime

    app = Flask(__name__)
    UPLOAD_FOLDER = '/root/blog/source/_drafts'
    os.makedirs(UPLOAD_FOLDER, exist_ok=True)

    @app.route('/upload', methods=['POST'])
    def upload():
        text = request.form.get('text')
        if text:
            filename = f"draft_{datetime.now().strftime('%Y%m%d_%H%M%S')}.md"
            md_content = f"---\ntitle: Draft {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\ndate: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\ntags: draft\n---\n{text}"
            with open(os.path.join(UPLOAD_FOLDER, filename), 'w') as f:
                f.write(md_content)
            return '上传成功', 200
        return '请输入内容', 400

    @app.route('/')
    def index():
        return render_template('index.html')

    if __name__ == '__main__':
        app.run(host='0.0.0.0', port=5000)

  • 前端页面（templates/index.html）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>NoteUp - 快速记录</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    </head>
    <body>
        <div class="container">
            <h1>NoteUp</h1>
            <form action="/upload" method="post">
                <textarea name="text" placeholder="输入你的想法..." autofocus></textarea>
                <button type="submit">提交</button>
            </form>
        </div>
        <script>
            window.onload = function() {
                document.querySelector('textarea').focus();
            };
        </script>
    </body>
    </html>

  • 样式文件（static/style.css）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
    }
    .container {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 500px;
    }
    textarea {
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

最终效果

  • 手机端：打开 https://upnotes.sightx.top，输入笔记后点击提交，笔记自动保存为 .md 文件到草稿目录。（每天可多次记录，且仅在同一个md文件中记录）
  • 电脑端：通过Obsidian的 Git 插件拉取草稿目录，整理文章后移动到 Hexo 的 _posts 目录发布。
  • 使用体验：轻量、无需安装、启动快，完全满足了我的预期。

一点感想

借助 Windsurf，我从零开始完成了 NoteUp 的开发。它的 AI 代码生成和多文件编辑功能让我省去了大量重复工作。虽然 Obsidian 仍然是我的主力工具，但 NoteUp 提供了一个更快捷的记录方式，完美契合手机端的碎片化需求。如果你也有类似的痛点，不妨试试用 Windsurf 和 Flask 打造一个属于自己的工具！

下一步

  • 进一步完善NoteUp的页面美化效果和功能。
  • 可能会开发浏览器插件用来自动收集复制的信息提交到草稿当中。
  • 优化手机端界面的视觉效果。

这篇博客记录了我如何通过各种工具解决个人需求的过程。现在任何人都可以通过各种AI工具实现属于自己的应用工具，打造属于自己的工具群。现在想要实现一个功能，很快就能实现，完全不需要你懂代码编程，通过不断提问和实践，就能拥有属于自己的工具。如果你觉得有用，可以参考代码动手试试。欢迎留言交流你的想法！

  • 标题: 通过 Windsurf 打造个人快速笔记工具：NoteUp 项目开发记
  • 作者: X
  • 创建于 : 2025-03-25 14:47:29
  • 更新于 : 2025-04-03 16:09:02
  • 链接: http://sightx.top/2025/03/25/通过 Windsurf 打造个人快速笔记工具：NoteUp 项目开发记/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
通过 Windsurf 打造个人快速笔记工具：NoteUp 项目开发记