DEV Community

barrazaky540
barrazaky540

Posted on

Building and Deploying a Receipt-Style To-Do List with Tencent EdgeOne Makers

#tencentedgeone #edgeonemakers #codepolitan #edgeone

By Barra Zaky Azzama, SMKN 1 Cimahi

If you've ever wanted to ship a small web project without wrestling with servers, domains, or deployment pipelines, Tencent EdgeOne Makers is worth a look. In this tutorial, I'll walk through how I built a simple, single-file to-do list app and deployed it live in a few minutes using EdgeOne Pages.

Why I Tried EdgeOne Makers

As part of the DevHandal 2026 program, I was looking for a fast way to take a static web project from "just a file on my laptop" to "a real URL I can share." Most hosting options require some setup: connecting a Git repo, configuring build settings, or dealing with CLI tools. EdgeOne Makers offers a much more direct path — you can literally drag and drop a file and get a live link back in seconds.

The Project: A Receipt-Style To-Do List

Instead of building another generic task list with rounded cards and a sidebar, I designed mine to look like a paper shopping receipt — complete with a torn-paper edge, a dashed divider between tasks, and a barcode at the bottom. Each task can be:

  • Added by typing into an input field and pressing Enter
  • Marked done, which strikes through the text like a checked-off item
  • Deleted with a small close button

The whole thing is a single index.html file with embedded CSS and JavaScript — no frameworks, no build step, no dependencies. Task data is saved to the browser's local storage, so a refresh doesn't wipe out your list.

Step-by-Step: From Code to Live URL

1. Write the app.
I built the interface with plain HTML for structure, CSS for the receipt-paper styling (custom fonts, dashed borders, a repeating gradient to fake a barcode), and vanilla JavaScript to handle adding, completing, and deleting tasks.

2. Open EdgeOne Pages.
From the Tencent Cloud console, I navigated to EdgeOne → Service Dashboard, then selected "Quickly Deploy Web Apps and AI Agents" → Create project.

3. Choose "Upload directly."
Since this was a single static file rather than a Git-connected project, I skipped the repository import option and went straight for Upload directly, which is built for exactly this kind of quick, file-based deployment.

4. Upload the file.
I gave the project a name, kept the default "Global" acceleration region, and uploaded my HTML file (renamed to index.html so it would automatically serve as the homepage).

5. Deploy.
EdgeOne ran through its build pipeline automatically — Initialize, Clone, Install, Build, Deploy — all completed in about 10 seconds. That's noticeably faster than most static hosting workflows I've used before.

6. Get the live link.
Once deployment finished, EdgeOne generated a public URL immediately, in the format https://<project-name>-<hash>.edgeone.dev. No extra DNS setup or waiting required.

What Stood Out

A few things made this experience smoother than I expected:

  • No build configuration needed for a plain HTML/CSS/JS project — it just worked.
  • Deployment speed — going from "select file" to "live URL" took well under a minute.
  • Free hosting for a small project like this, which is ideal for students, side projects, or quick demos.
  • Global acceleration by default, so the site should load quickly regardless of where a visitor is located.

Best Practices I'd Recommend

If you're trying EdgeOne Makers for a similar project:

  1. Rename your entry file to index.html before uploading, so it's automatically recognized as the homepage.
  2. Keep it to a single file when possible (or a small folder) — the "Upload directly" flow is built for simplicity, not complex multi-service apps.
  3. Test locally first by opening the HTML file directly in your browser, so you're only debugging deployment issues, not app logic, once you get to EdgeOne.
  4. Use local storage sparingly for state — it's perfect for small personal tools like a to-do list, but remember it's per-browser, not synced across devices.

Final Thoughts

For anyone learning web development and wanting to publish small projects quickly, Tencent EdgeOne Makers removes a lot of the usual friction. What used to take me a server, a domain, and some configuration now takes a file and a few clicks. If you're working through the DevHandal 2026 program too, I'd genuinely recommend trying the "Upload directly" flow for your first project — it's the fastest way to go from idea to live link.

Built and deployed as part of DevHandal 2026 Batch 2, by a student from SMKN 1 Cimahi.

Top comments (0)