Hey，我是Keen，一个喜欢折腾代码的外贸独立站运营者。在这里，我会分享建站技术、网站优化和效率工具等干货内容，欢迎关注。
前几天刷小红书看到了一个帖子《html怎么变成网址》，点赞和收藏量都挺高的，我觉得这个话题挺有意思，今天就来聊一聊。
这个问题很小白，没有贬义，对于独立站高手来说，这个问题应该从来没有考虑过，因为就像你问一个高中生「空气中哪种气体最多」一样简单，是个常识性问题。
但是这个问题同样值得做互联网产品的人去关注，因为这个就是普通人使用互联网产品的最底层需求，换句话说，这个问题下汇聚了大批量的产品需求。
什么是html
html代码就是「超文本标记语言」，其实就是文本文档+特定的标记。
文本文档我们都熟悉，我们电脑自带的，不管什么文字直接都给文本文档就生成了一个xxx.txt的文件。
互联网最初的时候，都是txt文件在网络上共享，但是用的久了就发现，这样的文档太平淡了，不能标出特定的样式，比如我想给标题加粗，给某个文字大写，还要加一个图片，txt文档就不够用了，所以科学家们就在txt基础上拟定了一个规则：
- 用h来表示标题，h1是最大标题，h6是最小标题
- 用p来表示段落，默认p之间会有20个像素的间距
- 用a来表示连接
- 用img来表示图片
通用的html格式为「两个尖括号」开始，然后「两个尖括号+一个斜线」结束：
`<h1>...</h1>
<p>...</p>`也有几种特殊情况，比如图片的img符号：
`正常是<img>...</img>
但是用习惯了就变成了<img src="" />`怎么把写好的html变成网址
有很多种方法，那么我就从free - paid 顺序列举几个。
用cloudflare的pages
之前的文章说过cloudflare pages完全免费使用，所以第一个就想到了cf。
注册cf完全免费，注册完成之后进入cf后台，我们找到pages
点击pages的tab，然后找到下面的「上传资产」，上传写好的html文档，如果文档很多，那么就把整个html打包成zip文档。
比如下图这个文档，就包含了一个html，一个css，然后assets存放的是图片，压缩成zip文档上传。
然后给你的项目取一个名字，比如我取名叫keen-landing-page，创建项目，部署站点
等运行一段时间之后，就可以通过keen-landing-page.pages.dev 访问我们的html代码了：
这里要注意一个要点，你的html文件一定要取名叫index.html，而且放在一级目录下，就是点击这个文件夹就能看到的html文档，不能放太多层，如果的html文件叫test.html，又放在了/新建文件夹/下面的话，那么在打开网址是不能之间访问的，你的网址应该变成了keen-landing-page.pages.dev/新建文件夹/test.html，只有这样访问才能打开。
另外，这时候发现我们的的网址叫 keen-landing-page.pages.dev，这是免费的二级域名，一级域名是pages.dev，属于pages.dev，如果你想换成自己的域名，比如keentalking.com，那么你就要花钱买了，可以在cloudflare买域名或者其他地方，.com域名费用在80-90人民币之间。
用自带服务器
如果是正规公司，想要自己的服务器的话，可以考虑购买虚拟服务器或者虚拟主机，比如虚拟主机：
- 阿里云
- 腾讯云
- Siteground
- Hostinger
- Wpengine 这些虚拟主机不用配置环境，也就是不用装系统，买完就能直接使用，上传文档就行了。
如果用虚拟服务器（英文简称vps）：
- Linode
- Digital ocean
- Vultr
- Amazon aws
- Google cloud
- 阿里云ecs 这些需要自己安装适合网站运行的操作系统，比如lnmp指令，还有我常用的宝塔面板，这个对新手的技术要求稍微高一点。
在wordpress中使用html代码
html代码也是可以直接放到wordpress中的。
wp中是有代码有个很大的好处就是，你可以无限更新网站内容，而不用考虑排版问题，工作流如下：
- 截图搜集自己网站想要的设计方案
- 截图提供给cursor等ai工具
- 生成自适应代码，上传到wp站点
如果你会使用ftp软件，那么更简单的粗暴的就是：
- 使用ftp打开wp子主题的文件夹，并用cursor打开要编辑的文件
- 用cursor自动写代码，保存之后筛选网站，内容已经更新完成
目前我使用的plan B，那么怎么做呢？
新建template
我们新建一个php文件，放到我们wp的子主题，然后开头格式如下：
`/*
* Template Name: About
*/`然后在wp后台新建page，找到Template，下拉选择About，名字跟你的Template Name一致即可。
大家不要有代码恐惧症，其实都是很简单的，因为现在有了AI工具，能帮我们搞定一切，放心大胆用起来。
这样做的好处还有一个，那就是速度比所有可视化编辑器都要快。
因为使用template的方案，你的代码都在浏览器上，不用从数据库中调取任何数据，完全是0sql，那么网页打开速度这块你根本不用担心了
而且如果你的网站使用elementor等编辑器，也是可以使用这个方案的，不冲突。
AI建站究极体
最近研究一个ui叫flowbite，这个ui库是基于tailwindcss的，它内置了很多现成的框架，比如hero/features/contact等等。
最主要的是它还有一个基于chatgpt的智能体flowbite gpts，也就是说你把截图给到它的gpts，它会根据自己的组件库生成对应的设计。
我称这样的建站为“背题式建站”，基于AI+一套成熟的UI库，我们逐渐打磨积累自己的模版库，截图用AI生成，而且所有的代码都是基于一套完整的方案，不用担心代码混乱，就像我们上学时候背题考试一样。
以上。