github pages发布dist包流程与避坑

YveTraveler
431 阅读3分钟

最近意气风发，写了个在浏览器端直接解析.psd文件的预览工具。但是发布到网上犯了难。 由于：

  1. 个人网站到期了不想续费
  2. gitee.com的pages服务关闭了,如图 image.png
  3. github的pages服务，限制颇多，并且按照官方方案index.html可以访问，但是其他.js .css资源无法访问。

最后问题解决，把思路和过程记录一下。

根据 Troubleshooting 404 errors for GitHub Pages sites - GitHub Docs文档，以及gitee.com的经验来看：

  • index.html必须放在根目录。也就是无法像gitee码云一样设置静态资源目录。 有两种方案（我采用的方案一成功了，有兴趣的可以试试方案二）

方案一：git

  1. 步骤一：项目打包放到github（此方案要求index.html必须在根路径下）
git subtree push --prefix dist github_psd_viewer gh-pages

原理是将dist作为一个子项目push到一个远程仓库，其中github_psd_viewer为我远程仓库，gh-pages为我的分支。由于我的主仓库在gitee所以github_psd_viewer是我自己添加的源，这个需要改为你的github的源，大概率是origin。

  1. 步骤二：发布pages image.png
  2. 这时通过控制台可以发现:1页面空白 2index.html正常加载 3 js css资源404
    • 分析：
      • 由于不知道github pages后端的实现方式，我优先搜攻略解决，但是无果。
      • 经过猜测，以及对页面的观察，我发现url上并没有锚点（#），这意味着index.html在一个类似tomcat的静态文件夹下。
      • 但是css和js访问不到有可能是路径的问题，有可能是github故意设置的只保存了index.html（不太成立，因为hexo等博客不可能把所有资源放在html下）
      • 经过修改vite打包配置，重新部署，注意：重新部署可能有延迟以及浏览器缓存，注意github上的更新时间以及强制刷新即可
      • 最终成功共解决问题。vite配置如下：
export default defineConfig({
  //...
  base: '/psd_viewer/'//你网站的io后的部分，我的网站：https://liuayi.github.io/psd_viewer/)
})

方案二：借助docs（理论可行，本人未尝试，优点：打包和代码不分离）

github上pages配置可以不选择根据经而是选择/docs image.png

  • 所以只需要把dist改掉，然后解决路径的问题即可。 参考vite配置：
export default defineConfig({
  //...
  build: {
    outDir: 'docs'
  },
  base: '/psd_viewer/'//你网站的io后的部分，我的网站：https://liuayi.github.io/psd_viewer/)
})

思路总结

  1. index.html必须在最外层，更多规则详见：Troubleshooting 404 errors for GitHub Pages sites - GitHub Docs
  2. 路径选择：/(root) /docs
  3. 选择/（root）需要解决怎么自动化上传项目，或者手动复制dist
  4. 选择/docs需要修改vite配置：将打包dist改为docs或者自己手动修改。
  5. 资源引用不到的问题需要修改vite配置：修改外部资源，增加或减少前缀。

last

如果这篇文章帮助到了你，请帮我的github点一个star⭐谢谢！

👉👉👉liuayi/psd_viewer (github.com)⭐

此外我的工具可以帮助你在web端预览.psd文件，手机浏览器也可以。网址是：免费PSD文件预览 (liuayi.github.io)

avatar
文章
阅读
粉丝