如何从Haskell代码生成静态HTML？blank-canvas项目部署至itch.io

先明确核心：blank-canvas是Haskell后端+前端HTML/JS的组合，仓库里的静态文件是前端渲染的基础，必须用上。部署到itch.io有两种靠谱路径，按需选：

路径1：打包成桌面应用（最快上手） #

itch.io支持上传桌面二进制包，用户下载后运行就能打开浏览器用你的应用：

• 把blank-canvas仓库里的static目录完整复制到你的项目根目录，和Haskell源码放一块。
• 修改你的Haskell启动代码，指定静态文件的路径，比如：

  import qualified Web.Blank as Blank
  
  main :: IO ()
  main = Blank.static "." $ \context -> do
    -- 你的图形绘制代码
    Blank.send context $ Blank.fillStyle "red"
    Blank.send context $ Blank.fillRect (0,0) 100 100
  

  这里的"."表示当前目录，确保编译后的可执行文件和static目录在同一路径。
• 编译可执行文件：
  用stack的话：stack build --copy-bins，用cabal的话：cabal build，编译好的程序会在对应工具的输出目录里。
• 打包上传：把可执行文件+static目录压缩成zip（Windows/macOS用zip，Linux用tar.gz），上传到itch.io项目页面，选择对应平台的构建版本就行。用户运行程序后，会自动打开本地浏览器加载HTML页面，连接Haskell后端的WebSocket服务。

路径2：转成纯静态Web应用（浏览器直接访问） #

如果想让用户不用下载，直接在浏览器打开，需要把Haskell代码转成WebAssembly/JS：

• 同样先把static目录复制到项目，然后修改index.html，把原本连接WebSocket的逻辑改成调用WebAssembly模块的代码（需要适配blank-canvas的前端逻辑）。
• 用GHCJS把Haskell代码编译成JavaScript：

  stack build --compiler ghcjs-9.2.5.20230125
  

  编译后生成的JS文件放到static目录，修改index.html引入这个JS文件。
• 本地测试：用静态服务器打开static/index.html，确认图形能正常渲染，不需要本地WebSocket服务。
• 上传：把整个static目录压缩成zip，上传到itch.io，选择“Web”类型的构建版本，itch.io会托管这些静态文件，用户直接就能在浏览器访问。

必看注意点 #

• 仓库里的静态文件绝对不能丢，blank-canvas的前端渲染完全依赖这些文件。
• 桌面应用路径要注意跨平台编译：比如在Windows上编译Windows版本，macOS上编译macOS版本，或者用Docker做跨平台构建。
• WebAssembly路径需要调整前端和Haskell的交互逻辑，因为浏览器里没法用本地WebSocket服务，得把Haskell的绘制逻辑转成前端可直接调用的函数。

内容的提问来源于stack exchange，提问作者lonelyfloat