我有一个由Hugo驱动的网站，但我想转而使用一个更简单的解决方案，这样当我想做出改变时就不必处理Hugo的模板。
Astro似乎是个不错的选择。
我觉得对JSX比较熟悉，如果以后想用Svelte或React这样的框架，我可以选择。
在这篇文章中，我将向你展示我是如何转换的。
我所说的网站是javascript.flaviocopes.com，即JavaScript大师班的网站。
它已经上线了，它是用普通的HTML和CSS建立的，在页面中内联。我只有一个images/ 文件夹，和一个thanks/index.html 页面，这是我在购买后感谢客户的地方。
我的做法是这样的。首先，我在Git仓库中创建了一个新的分支，并在其中初始化了Astro，使用npm init astro 。
这要求我强制覆盖现有文件。
然后我选择了Minimal模板并完成了安装。
我把images 文件夹移到了public ，我把index.html 移到了src/pages/index.astro 。
我运行了npm install 和npm run dev 来查看我目前的工作。
它成功了!
然后我把thanks/index.html 页面移到src/pages/thanks.astro
检查了URL，它成功了!
那是一个快速的过渡。转移HTML需要零工。
这不是你在使用JJSX时所期望的。但正如你所知，Astro的JJSX有点独特，使我们的生活更容易。没有更多的camelCase属性，或className= ，用于所有的HTML类。
然后我决定为两个页面做一个共同的布局，因为它们有很多共同点。
我在src/layouts/common.astro ，做了一个简单的骨架，有页面的头部和主体，有所有的CSS、字体导入、元标签等，还有基本的布局容器。
与` ，就像我在关于Astro布局的帖子中解释的那样。
我唯一需要改变的是使用<style global> ，而不是<style> ，以及图片的链接，这些链接使用的是相对的URL，如../images 。现在所有的图片都在/images 。如果你不这样做，构建会失败，因为你可以在本地使用npm run build 进行测试。
[build] file:///Users/flaviocopes/www/javascript.flaviocopes.com/src/pages/thanks.
astro: could not find file "/_astro/src/images/welcome2.jpg".
通过这种方式，我可以在该布局中修改所有需要的东西，而且这也适用于所有页面。
最后是部署部分。
我去了我的Cloudflare Pages仪表板，配置了构建。
并在网站设置中把NODE_VERSION 环境变量配置为^14.13.1 ，否则默认情况下它就太老了。
将该分支推送到GitHub，触发了一个预览构建。
部署时间从2分钟26秒，对于一个简单的HTML网站，完全没有构建步骤，变成了大约3分钟。这并不是一个大的区别。
其中大部分时间是设置构建环境，反正CFP对任何类型的网站都会这样做。
在确保一切设置正确后，我将该分支与我在CloudFlare Pages设置中设置的默认分支合并，并将变化推送到GitHub，以便这些变化可以上线。
现在，Astro正在为javascript.flaviocopes.com。
