Your website.
Your words.
Your own little address.你的网站，
你的内容，
你的专属域名。
A practical walkthrough from opening your template to publishing it on a domain you own. Use a computer for editing and uploading. You do not need a terminal, a code editor, or a design-platform subscription.从打开模板，到发布到自己的域名，跟着这份教程一步步完成。建议使用电脑编辑与上传。无需命令行、代码编辑器或设计平台订阅。
The editor and template files are included in the customer package. This is the complete written walkthrough.编辑器与模板文件包含在客户交付包内。这是完整的文字操作教程。
The actual website files: the design, words, images, and interactions.实际的网站文件，包含设计、文字、图片与交互。
The service that puts those files on the internet.把这些文件放到互联网上、让别人访问的服务。
The address people type, such as yourname.com. Usually renewed yearly.别人输入的网址，例如 yourname.com，通常需要按年续费。
Open your template.打开你的模板。
- Download the customer package to your computer and unzip it. On macOS, double-click the ZIP. On Windows, right-click it and choose Extract All.
- Open START-HERE.html in your browser to read this guide. Open EDIT-ME.html to personalize your website.
- If a text editor opens, right-click the HTML file and choose Open With → your browser.
Success looks like this: the editor shows editable fields and a working preview. No account is needed to edit your template.
- 将客户交付包下载到电脑并解压。Mac 通常双击 ZIP；Windows 右键选择全部提取。
- 用浏览器打开 START-HERE.html 阅读教程，打开 EDIT-ME.html 开始修改。
- 如果双击后进入文字编辑器，右键 HTML 文件，选择打开方式 → 浏览器。
完成标志：看到可以填写的编辑区域与网站预览。修改模板不需要注册账号。
Change the words. Choose your photos.改文字，换上自己的照片。
- In Website basics, set the browser title, short description, and your public contact email. Leave the website address blank until you have a domain.
- Open each content section. Replace the sample name, headline, introduction, services, project stories, location, and footer. The preview follows the section you edit.
- Open Photos & project covers. Choose your JPG, PNG, or WebP images, up to 12 MB each. The editor makes web-sized copies locally.
- Describe each image for visitors using screen readers. The example covers and sample person are demonstration content; replace them with your own work and details.
- Use Desktop / Phone to compare layouts. After editing, test the exported page too.
Email buttons open the visitor's configured email application. These templates do not collect form submissions, accept bookings, or process payments. The editor language button translates the controls; it does not automatically translate your website copy.
- 在网站基本信息填写浏览器标题、简短介绍与公开邮箱。还没买域名时，网站地址可以留空。
- 逐个展开内容分区，替换示例姓名、标题、介绍、服务、作品说明、所在地和页脚。预览会定位到修改区域。
- 展开照片与项目封面，选择 JPG、PNG 或 WebP 图片，每张不超过 12 MB。编辑器在本机生成适合网页的副本。
- 为每张图片写简短说明，方便使用读屏工具的访客。样板人物和案例均用于示范，请替换为自己的真实资料与作品。
- 切换桌面 / 手机检查布局，导出后还要打开实际网页检查。
联系按钮打开访客配置好的邮件应用。模板没有收集表单、自动预约或付款后台。编辑器语言按钮只翻译操作界面，网站中的实际文字需由你修改。
Keep an editable copy. Export the website.保存编辑文件，导出网站。
- Click Save editing file. Keep the downloaded JSON beside the template folder. This file preserves your text and replacement images.
- Click Export my website .zip. You will get a separate ZIP, such as
folio-website.zip. - Unzip it into a new folder. Open the index.html at the top level to check the result. Images, fonts, and interactions are included in that HTML.
- Keep the downloaded ZIP ready for Cloudflare, or the extracted folder ready for Netlify.
You now have two different things: an editing JSON for future changes, and a website ZIP for publishing. Upload only the website ZIP or its extracted contents.
Saving an editing file or exporting a ZIP does not update any live website. Closing the editor without saving can lose unsaved changes.
- 点击保存编辑文件，把下载的 JSON 与模板文件夹一起保留。它包含修改后的文字与替换图片。
- 点击导出我的网站 .zip，得到单独的网站 ZIP，例如
folio-website.zip。 - 解压到新文件夹，打开最外层的 index.html 检查。图片、字体与交互已经包含在该 HTML 内。
- 准备好 ZIP 上传 Cloudflare，或准备好解压后的文件夹上传 Netlify。
现在有两种文件：编辑 JSON用于以后继续修改，网站 ZIP用于发布。只上传网站 ZIP 或其中的文件。
保存或导出并不会自动更新线上网站。没有保存就关闭编辑器，可能丢失尚未保存的修改。
Give your website an address.为网站购买一个地址。
You can test on a hosting service's default address before buying a domain. When ready, use an account you own.
- Open Cloudflare Register domains ↗, sign in, and verify your account email.
- Search for the exact name. Compare the registration price and renewal price, then select an available domain.
- Enter accurate registrant and payment details. Review the term, auto-renew settings, and agreements before completing your own purchase.
- Complete the registrant verification email and confirm that the domain is active.
Official domain registration guide ↗
Domains bought through Cloudflare Registrar keep Cloudflare nameservers. You can still use another host by setting the appropriate DNS records. A domain purchase does not automatically give you an email inbox.
Domain registration, renewals, and any hosting charges are paid separately to the chosen provider. Check its current plan and usage terms; this template does not require a paid visual editor.
可以先使用托管平台提供的默认网址测试，准备好再购买域名。请始终使用你自己拥有的账号。
- 打开 Cloudflare 注册域名页面 ↗，登录并验证账号邮箱。
- 搜索想要的完整名称，对比首年价格与续费价格，选择可注册的域名。
- 填写真实注册人和付款信息，核对注册年限、自动续费设置及协议，再自行完成付款。
- 完成注册人邮箱验证，确认域名状态已经生效。
在 Cloudflare Registrar 购买的域名需要继续使用 Cloudflare nameservers。仍可通过 DNS 记录连接其他托管服务。购买域名并不等于已经获得邮箱收件箱。
域名注册、续费与可能产生的托管费用，单独支付给相应平台。以其当前套餐与用量规则为准；模板本身不需要付费可视化编辑平台。
Upload it. Connect your domain.上传网站，连接自己的域名。
Pick one of the two complete paths below. The main Cloudflare walkthrough uses Pages Direct Upload because its manual upload and update flow is documented together.
从下方选择一条完整路线即可。Cloudflare 主教程采用 Pages Direct Upload，方便直接上传文件，并在同一项目里手动更新。
A / Publish on Cloudflare Pages
- Open Workers & Pages in your Cloudflare dashboard. Choose Create application and the Pages / Get started / Drag and drop path.
- Name the project. Upload the website ZIP you exported, with
index.htmlat its root. Select Deploy site or Save and Deploy. - Open the resulting
project-name.pages.devaddress and check the site. - In this Pages project, open Custom domains → Set up a custom domain. Add your domain and follow the DNS instructions. For an apex domain on Pages, its zone must be active in the same Cloudflare account.
- Add
www.yourname.comseparately if you want that address too. Wait for DNS and HTTPS activation, then test both addresses.
Upload & update docs ↗ · Pages custom domains ↗
Pages and Workers use different domain screens. Follow the screen for the product you created. Do not delete unrelated DNS records, especially existing email records.
Optional: try Cloudflare Drop first
Cloudflare Drop ↗ accepts your website folder or ZIP. The initial preview lasts 60 minutes; choose Claim and sign into your account to keep it. After claiming, you can connect or buy a domain. This creates a Worker; its domain settings differ from Pages. The main tutorial above avoids mixing these two flows.
A / 发布到 Cloudflare Pages
- 在 Cloudflare 控制台打开 Workers & Pages，选择 Create application，进入 Pages / Get started / Drag and drop 上传路线。
- 填写项目名，上传刚导出、根目录包含
index.html的网站 ZIP，点击 Deploy site 或 Save and Deploy。 - 打开获得的
项目名.pages.dev默认网址，检查网站。 - 在该 Pages 项目中打开 Custom domains → Set up a custom domain，填写域名并按提示设置 DNS。Pages 使用根域名时，该域名的 zone 需要在同一 Cloudflare 账号中生效。
- 如果还要使用
www.你的域名.com，再单独添加它。等待 DNS 与 HTTPS 生效，然后测试两个地址。
Pages 与 Workers 的域名设置入口不同，请对应自己创建的产品操作。不要删除无关 DNS 记录，尤其是正在使用的邮箱记录。
可选：先用 Cloudflare Drop 快速预览
Cloudflare Drop ↗ 可接收网站文件夹或 ZIP。初始预览只有 60 分钟，需要点击 Claim 并登录自己的账号，才能保留。认领后可绑定或购买域名。这条路线创建的是 Worker，域名入口与 Pages 不同。首次跟教程时使用上方主流程即可。
B / Publish on Netlify
- Unzip your exported website ZIP. Confirm
index.htmlis directly inside the folder you will upload. - Sign into your own Netlify account and use Netlify Drop ↗ to upload that folder. Open the resulting site address.
- In the project, go to Domain management → Production domains → Add a domain, and add the domain you already own.
- For a Cloudflare-registered domain, choose external DNS. Keep Cloudflare nameservers and add the exact records shown by Netlify in Cloudflare's DNS screen. Start with DNS-only records while verifying.
- Netlify provides separate instructions for the apex and
www. Configure both as requested, then confirm DNS verification and HTTPS. - If your project is private by default, make the intended public website accessible before sharing its address.
Netlify deploy documentation ↗ · External DNS instructions ↗
Copy the records from your own project. The example project name in a guide is not your DNS target. Do not change Cloudflare Registrar nameservers to Netlify nameservers.
B / 发布到 Netlify
- 解压网站 ZIP，确认要上传的文件夹中直接包含
index.html。 - 登录自己的 Netlify 账号，使用 Netlify Drop ↗ 上传该文件夹，打开生成的网址。
- 进入项目的 Domain management → Production domains → Add a domain，添加已经购买的域名。
- 如果域名购于 Cloudflare，使用 external DNS 路线，保留 Cloudflare nameservers。把 Netlify 项目显示的记录填入 Cloudflare DNS；验证期间可先使用 DNS-only。
- 根域名与
www会有各自的配置说明，按要求填写，再确认 DNS 验证和 HTTPS 生效。 - 如果项目默认设为私有，在分享前把这个准备公开的网站设置为可公开访问。
Netlify 部署文档 ↗ · 外部 DNS 配置说明 ↗
从自己的项目页面复制记录，教程里的示例项目名不是你的 DNS 目标。Cloudflare Registrar 域名不应按更换 nameservers 到 Netlify 的路线操作。
Keep your website up to date.以后更新，也由你自己完成。
- Open the original EDIT-ME.html and choose Open editing file. Select the JSON you saved last time.
- Make changes. Save a new editing file and export a fresh website ZIP. Keep the previous ZIP as your backup.
- Cloudflare Pages: open the existing project, choose Create a new deployment, select Production, and upload the complete updated website ZIP.
- Netlify: open the existing project's Deploys page and use its manual upload area for the complete extracted website folder.
- Visit the same custom domain. Check the changed content and links. Use a private browser window if an older version is cached.
Update the existing project. You do not need to purchase the domain again or create a new project for each text change.
- 打开原始 EDIT-ME.html，点击打开编辑文件，选择上次保存的 JSON。
- 修改内容，保存新的编辑文件，再导出新的网站 ZIP。保留上一次 ZIP 作为备份。
- Cloudflare Pages：进入原项目，点击 Create a new deployment，选择 Production，上传完整的新网站 ZIP。
- Netlify：打开原项目的 Deploys 页面，把完整解压后的网站文件夹放入手动上传区域。
- 访问原来的域名，确认改动与链接。若仍看到旧版本，可用无痕窗口检查。
更新的是原项目，不需要每次重新买域名或创建新项目。
A short check before you share.分享之前，做一次小检查。
Use these checks on the exported website and on the final domain. Tick them as you go.
对导出的网站和最终域名都检查一遍，完成一项勾选一项。
0 / 6
A little help, if you get stuck.遇到问题，先看这里。
I see a 404 page.打开后是 404。
Check that index.html is at the root of the uploaded ZIP or folder, not inside an extra parent folder. Confirm the deploy completed. If the default hosting URL works, check the custom-domain configuration next.检查 index.html 是否直接位于上传 ZIP 或文件夹的根目录，而不是多套了一层文件夹。确认部署完成。如果默认网址能打开，再检查自定义域名配置。
My changes disappeared.修改的内容不见了。
Open EDIT-ME.html, then import your saved editing JSON. A website ZIP is a publishing copy, not an editing file. If you never saved before closing, those unsaved changes may not be recoverable.打开 EDIT-ME.html，再导入保存的编辑 JSON。网站 ZIP 是发布副本，不是编辑文件。如果关闭前从未保存，未保存的改动可能无法恢复。
A photo will not upload.图片无法替换。
Convert HEIC or unsupported images to JPG, PNG, or WebP first. Choose a file smaller than 12 MB. Portrait and landscape frames crop differently; use a photo with room around the subject.请先把 HEIC 等不支持的格式导出为 JPG、PNG 或 WebP，文件要小于 12 MB。横竖画框会有不同裁切，请选择主体周围有余量的图片。
My email button does nothing.邮箱按钮没有反应。
Email links are disabled inside the editor preview. Test the exported index.html. Visitors need a configured email app; the visible address can also be copied into webmail.编辑器预览中的邮箱链接被禁用，请在导出的 index.html 中测试。访客需要配置邮件应用，也可以复制页面上的邮箱地址到网页邮箱。
The domain works without www, but not with it.不带 www 能打开，带 www 不行。
These are two hostnames. Add the missing hostname to your hosting project and follow its DNS instructions. Do not remove existing mail records. Wait until both domain and certificate statuses are ready.这是两个不同主机名。把缺少的那个添加到托管项目，并按其提示配置 DNS。不要删除现有邮箱记录，等待域名与证书状态就绪。
Can I edit layout or add payments?可以改布局或增加付款吗？
This editor changes existing content and images. The supplied HTML can be developed further, but new layouts, databases, payments, or forms require additional implementation. Keep a copy of the original package.编辑器用于修改既有文字和图片。所附 HTML 可以继续开发，但新布局、数据库、付款或表单需要额外实现。请保留原始交付包。
This is a written guide with editing illustrations. Hosting instructions were checked against official documentation; exact dashboard layouts may change. Customer account creation, purchases, DNS changes, and deployment are completed in the customer’s own account.本交付为文字教程与编辑示意。托管步骤已按官方文档核对，具体控制台布局可能变化。客户在自己的账号内完成注册、购买、DNS 设置与部署。