Turning Published Websites Into Code You Can Own

Likes

0 views

5 Mins Read

Overview

NoCode Export là một URL-to-code platform cho phép người dùng chuyển đổi một website đang hoạt động thành một code package có thể tự deploy.

Người dùng chỉ cần nhập URL.

Hệ thống sẽ:

  • Crawl website

  • Thu thập asset

  • Tổ chức lại cấu trúc file

  • Generate static package

  • Push lên GitHub

  • Deploy lên hạ tầng riêng

Mục tiêu của sản phẩm không phải là rebuild lại website bằng AI.

Mục tiêu là giúp doanh nghiệp lấy lại quyền sở hữu website mà họ đã xây dựng trên các nền tảng như Framer, Webflow hoặc WordPress.

Role

Product Designer

Team

1 Product Owner + AI-assisted development

Timeline

2 weeks

Status

Internal Production Tool

Why This Project Needed to Exist

Trong vài năm gần đây, việc tách biệt marketing website và product application đã trở thành một tiêu chuẩn phổ biến.

Ngay cả những công ty công nghệ lớn cũng sử dụng:

  • Framer

  • Webflow

  • Squarespace

  • WordPress

  • Shopify

để publish landing page nhanh hơn thay vì đưa toàn bộ vào đội ngũ engineering.

Điều này giúp tốc độ triển khai tăng lên đáng kể.

Tuy nhiên một vấn đề khác bắt đầu xuất hiện:

Platform dependency.

Một website marketing có thể chỉ tốn khoảng 20 USD mỗi tháng để duy trì.

Con số này không đáng kể với một website.

Nhưng với một công ty outsource quản lý hàng chục website khác nhau, chi phí này tăng lên rất nhanh.

10 website đồng nghĩa với:

  • ~200 USD mỗi tháng

  • ~2.400 USD mỗi năm

  • Hơn 60 triệu VNĐ mỗi năm chỉ để duy trì hosting và builder subscription

Trong khi đó phần lớn các website marketing sau khi publish chỉ thay đổi rất ít.

Câu hỏi bắt đầu xuất hiện:

Chúng ta có thực sự cần tiếp tục trả tiền cho một platform nếu website gần như không thay đổi nữa?

Đó là lý do NoCode Export ra đời.

The Real Problem Was Not Building

Ban đầu, nhiều người nghĩ vấn đề nằm ở việc tạo website.

Thực tế thì không.

Việc build website ngày nay đã trở nên dễ hơn bao giờ hết.

Framer, Webflow và hàng loạt AI Website Builder đã giải quyết rất tốt bài toán đó.

Vấn đề thật sự xuất hiện sau khi website đã được xây dựng.

The problem was no longer building a website.

The problem was owning the website after it had already been built.

Doanh nghiệp muốn:

  • Tự deploy

  • Chuyển hosting

  • Lưu trữ nội bộ

  • Giảm subscription

  • Handoff cho developer

Nhưng code lại không phải lúc nào cũng dễ lấy hoặc dễ sử dụng.

The Core Idea

Thay vì yêu cầu người dùng cung cấp:

  • Design file

  • Webflow account

  • Framer project

  • Platform credentials

sản phẩm bắt đầu từ thứ đơn giản nhất:

A public URL.

Nếu website đã được publish, hệ thống có thể:

Discover → Crawl → Capture → Transform → Export → Deploy

Người dùng không cần quan tâm đến crawler hay pipeline.

Họ chỉ cần nhập URL và nhận lại một package có thể sử dụng được.

The Challenge

Thách thức lớn nhất của dự án không nằm ở crawler.

Crawler thực tế là phần tương đối dễ.

Scaffold generation cũng chỉ là một hướng thử nghiệm cho các framework hiện đại như React hoặc Next.js.

Thách thức thực sự là:

Làm sao để biến một workflow kỹ thuật thành một trải nghiệm one-click.

Người dùng không muốn:

  • Cấu hình pipeline

  • Thiết lập GitHub Action

  • Cấu hình deployment

  • Quản lý asset

  • Thiết lập performance audit

Người dùng chỉ muốn:

Paste URL → Export → Deploy

Mọi thứ khác nên được tự động hóa.

Designing for Automation

Toàn bộ sản phẩm được thiết kế quanh một nguyên tắc:

One setup. One click. Everything else runs automatically.

Sau khi cấu hình ban đầu hoàn tất, pipeline có thể:

  • Crawl website

  • Fetch assets

  • Generate package

  • Push lên GitHub

  • Deploy lên PaaS

  • Chạy performance audit

  • Lưu lại lịch sử export

Người dùng không phải hiểu từng bước trong pipeline để nhận được giá trị.

Why HTML Became the Default Output

Một câu hỏi xuất hiện rất sớm:

Tại sao không rebuild lại website thành React, Next.js hoặc các framework hiện đại hơn?

Sau nhiều lần thử nghiệm, chúng tôi quyết định không xem đó là mục tiêu chính.

Lý do khá đơn giản:

HTML là output cuối cùng của tất cả các platform.

Dù website được xây bằng:

  • Framer

  • Webflow

  • WordPress

  • Next.js

thì cuối cùng trình duyệt vẫn nhận HTML.

Nếu mục tiêu là:

  • Ownership

  • Archiving

  • Migration

  • Self-hosting

thì HTML là lựa chọn ổn định và ít sai số nhất.

Scaffold export vẫn tồn tại như một hướng mở rộng.

Tuy nhiên HTML export mới là core workflow của sản phẩm.

The Export Pipeline

Pipeline được chia thành nhiều giai đoạn riêng biệt.

Stage

Purpose

Discover

Tìm toàn bộ page của website

Crawl

Thu thập nội dung

Asset Fetch

Download asset và media

Transform

Chuẩn hóa output

Package

Tổ chức cấu trúc file

Git Push

Đồng bộ GitHub

Deploy

Deploy lên hạ tầng riêng

Việc tách pipeline thành nhiều bước giúp hệ thống dễ mở rộng hơn trong tương lai và giúp người dùng hiểu chính xác export đang ở giai đoạn nào.

Key Decisions

Decision

Why

Impact

Start from URL

Giảm friction

Người dùng không cần credential

HTML-first export

Độ chính xác cao nhất

Hỗ trợ nhiều platform

Automation-first workflow

Giảm thao tác thủ công

Publish nhanh hơn

GitHub integration

Hỗ trợ ownership

Handoff dễ hơn

Deploy integration

Hoàn thành workflow

Không cần chuyển công cụ

Pay-as-you-go credits

Phù hợp với export workflow

Không ép subscription

Outcome

Mặc dù được xây dựng chủ yếu cho nhu cầu nội bộ, sản phẩm đã nhanh chóng trở thành một phần của workflow vận hành.

Metric

Result

Launch Status

Released

Sites Exported

100+

Deployment Type

Internal Production

Cost Savings

100+ million VND per year

Pricing Model

Pay-as-you-go credits

Do tính chất nhạy cảm của sản phẩm, nhiều dữ liệu chi tiết về độ chính xác và quy mô sử dụng không được công bố.

Tuy nhiên mục tiêu chính của dự án đã đạt được:

Giảm đáng kể chi phí phụ thuộc vào các nền tảng website builder bên thứ ba.

What I Learned

Dự án này củng cố một bài học khá thú vị:

Speed and ownership are often optimized by different tools.

Website builder giúp đội ngũ marketing publish nhanh hơn.

Nhưng khi website đã ổn định, bài toán lại chuyển sang ownership và cost efficiency.

NoCode Export không cố gắng thay thế Framer, Webflow hay WordPress.

Ngược lại, nó chấp nhận rằng các công cụ đó rất tốt ở giai đoạn xây dựng.

Sản phẩm chỉ giải quyết một thời điểm rất cụ thể:

Khi website đã hoàn thành và doanh nghiệp muốn kiểm soát nhiều hơn đối với tài sản số mà họ đã tạo ra.

Đôi khi giá trị không nằm ở việc tạo ra thứ mới.

Mà nằm ở việc giúp người dùng giữ lại những gì họ đã sở hữu.

Likes

0 views

Comment

Create a free website with Framer, the website builder loved by startups, designers and agencies.