Static Site With Tailwind

静态站点（带顺风）

堆栈

• 超文本标记语言
• 顺风CSS

如何跑

DEV

• 运行yarn serve:dev这将为src提供index.html作为入口点。

• 在第二个终端中运行yarn watch 。这将监视src/内的所有文件，并知道使用在此过程中添加的任何新的 tailwind 样式重新编译app.css 。

注意：在点击刷新之前会有一点延迟...“嘿，这不是一个奇特的 React 应用程序 KISS，只需点击刷新按钮即可。”

• 为dev手动编译 Tailwind CSS，无需观看运行yarn compile:css:dev

生产建筑

所以你实际上想部署这个东西......

• 运行yarn build:all来完成“所有事情” 这会将所有*.html文件复制到/build目录并使用NODE_ENV=production编译app.css 。这告诉 Tailwind 使用 tailwind.config.js 中预设的purge选项

• 将此/build目录复制到任何静态托管站点...或者告诉您的静态托管站点使用/build/index.html作为入口点。

注意：构建后，您也可以在本地提供此构建，并通过运行yarn serve:prod来查看“prod”的外观。这将提供build目录而不是src以便使用新编译的代码进行查看。

路由

如何为新页面创建一些干净的网址？添加一个定义了routes的 vercel.json 文件，然后让 Vercel 处理其余的事情。

 {
  "version": 2,
  "routes": [
    {"src": "/about", "dest": "/about.html"}
  ]
}

有关更多详细信息，请在此处查看他们的文档

就是这样

就是这样，伙计们...放入一些静态 HTML，链接index.css ，然后享受乐趣。

与 Vercel 一起托管

链接存储库和设置

部署预览

完毕！