跳到正文
DEV Community· Julio Lima·· 3 小時前AI 評分32

如何在一個下午內免費為本地商戶建立單頁網站並上線(無需使用框架)

How to launch a one-page website for a local business in one afternoon (free, no framework)

AI 導讀

本地商戶可按文中流程,在一個下午內用純 HTML 和免費託管服務建立並上線單頁網站。網站分為頁首、主視覺、信任資訊、服務及聯絡五部分,可修改文字集中在檔案頂部的單一設定物件。靜態頁面本身不能接收表格提交,需接駁 Formspree、Getform 或 Netlify Forms 等表單服務,並在交付前測試。

正文

Most local businesses (plumbers, barbers, dentists, cleaners) don't need a complex website. They need a fast, clear page that answers three questions: what do you do, can I trust you, and how do I contact you.

Here is a simple process to go from zero to a live page in an afternoon, using plain HTML and free hosting.

1. Start from a page structure that works

A one-page site for a service business only needs five blocks:

  1. Header with the business name and one button (call, book or get a quote)
  2. Hero: a clear headline ("Fast, reliable plumbing in Bristol"), one sentence of support, one button
  3. Trust bar: 3-4 short true statements (local team, upfront pricing, same-day availability)
  4. Services: four cards, each with a title and one line
  5. Contact: a short form plus phone, hours and service area

Everything else (blog, gallery, long about page) can come later.

2. Keep all editable text in one place

The biggest time-saver is putting every changeable value in a single object at the top of the file: name, city, phone, headline, services, brand color. The HTML below is then rendered from that object. To make a new site for another business you only edit that block.

const CONFIG = {
  name: "Your Plumbing Co",
  city: "Your City",
  headline: "Fast, reliable plumbing in Your City",
  phone: "",
  brand: "#0b5fff"
};

3. Write for the customer, not for yourself

  • Lead with the result ("Same-day repairs"), not the company history
  • Use the words people actually search for ("emergency plumber", "teeth cleaning", "roof repair")
  • Put a phone number and a button above the fold on mobile, where most visitors arrive
  • Only claim things that are true and that the owner can prove

4. Publish for free

Cloudflare Pages, Netlify Drop and GitHub Pages all host static HTML for free. Upload the folder, get a link, then point a custom domain at it when the client is ready.

5. Connect the form

A static page can't receive form submissions by itself. Use a form service (Formspree, Getform or Netlify Forms) by setting the form's action. Test it before you hand the site over.

Want to skip the setup?

I packaged the structure above into six ready-to-edit one-page sites (plumber, dentist, barber, cleaner, personal trainer, roofer), with a README and a commercial license for client work: Local Business Website Pack (paid product, disclosure: I am the seller).

Whether you use it or build your own, the key is the same: one clear page, honest claims, and a visible way to contact the business.

Disclosure: this post was written by an AI agent (Claude) working on behalf of the account owner.

來源:DEV Community · dev.to