跳到正文
DEV Community· Kevinleary.net·· 3 小時前AI 評分36

如何使用 Webflow 在自訂網域建立網站

How to Build a Webflow Website on a Custom Domain

AI 導讀

這篇教學示範如何無需編寫程式,使用 Webflow 建立網站並連接自訂網域,從免費帳戶、頁面發布到設定 DNS,完成網站上線。Basic 年繳每月 $15、按月 $25;Premium 年繳每月 $25、按月 $39。內容亦涵蓋 SEO 設定;複雜整合及自訂應用程式邏輯較難處理,遷出 Webflow 後需重建。

正文

Cover image for How to Build a Webflow Website on a Custom Domain

Kevinleary.net

If you want to get a Webflow website live on your own domain, you can do it in an afternoon for $15 a month without writing any code.

Here’s exactly how I set up my demo site, webflow.kevinleary.net, from signup to a live custom domain with the basic SEO settings in place.

What It Costs

Webflow charges per site. You can build for free, but you need a paid Site plan to use your own domain.

Webflow site plans pricing

Plan Yearly Monthly Use it for
Starter Free Free Building and testing on a webflow.io address
Basic $15/mo $25/mo A simple site on your own domain
Premium $25/mo $39/mo Sites that need a blog or other CMS content

Most marketing sites can start on Basic. Upgrade to Premium when you need a blog.

Build the Site

  1. Sign up for a free account at webflow.com.
  2. Click New site and pick a blank site or a template. A template is the fastest way to start.
  3. Build your pages in the Designer. A home, about and contact page is enough to launch.
  4. Click Publish, check the webflow.io domain, and publish. This gives you a free preview link to share with your team.

Connect a Custom Domain

Webflow Publishing settings with staging and production domains

  1. Buy a Site plan under Site settings > Plans.
  2. Go to Site settings > Publishing and click Add a custom domain.
  3. Add both yourdomain.com and www.yourdomain.com.
  4. Add the DNS records Webflow gives you at your domain registrar.
  5. Click Check status until both domains connect.
  6. Make the www version the default.

The records will look something like this, but copy the exact values from your own Publishing tab:

Type Host Value
A @ 198.202.211.1
CNAME www cdn.webflow.com
TXT _webflow Verification code from Webflow

A few things that commonly go wrong:

  • Delete any old A records on @. Two A records will break the connection.
  • If you use Cloudflare, set the records to DNS only (grey cloud) until the SSL certificate is issued.
  • If Webflow says Update needed next to your domain, you’re on old DNS records and publishing is blocked until you update them. My demo site ran into this.

Basic SEO Settings

Webflow SEO settings

Open Site settings > SEO and do the following:

  1. Turn off Webflow subdomain indexing so Google doesn’t index a duplicate copy of your site on webflow.io.
  2. Leave robots.txt empty and keep search engine crawlers and AI bots allowed.
  3. Make sure Auto-generate sitemap is on, then submit /sitemap.xml in Google Search Console.
  4. In the Designer, open each page’s settings and fill in the SEO title, meta description and Open Graph image.
  5. If you’re replacing an old site, add 301 redirects under Publishing for every old URL.

While you’re in settings, add a favicon under General, set who gets form emails under Forms, and add Google Analytics or Tag Manager under Custom code.

How Webflow Is Different From a Developer Workflow

If you’re used to working with developers, Webflow will feel very different:

  • No code: you build pages visually. Custom code is optional.
  • No GitHub: changes save automatically and Webflow keeps backups you can restore.
  • No DevOps: no servers, deploys, updates or security patches. Hosting and SSL are handled for you.
  • Publish to staging or live: every time you click Publish, you choose the webflow.io domain, your real domain, or both.

The normal routine is to publish to webflow.io, get approval, then publish to your domain. Just know that publishing to your domain pushes every unpublished change on the site, not only the page you were working on.

The trade off is control. Complex integrations and custom application logic are harder in Webflow, and moving off it later means a rebuild. If you need help with a bigger build or migration, I do Webflow development.

來源:DEV Community · dev.to