我有一个静态网站通过GitHub页面,建立在Jekyll-Bootstrap。我的小网站包含了很多JavaScript,为了可维护性,我希望所有的JavaScript都能在GitHub的repo中保持人类可读。
但是对于我的网站的最终用户,我更倾向于最小化JavaScript。
是否有办法在GitHub Pages构建过程中建立一个钩子来最小化/丑化JavaScript,以便最终用户可以下载更小的文件?
GitHub页面构建服务不能有任何其他代码运行在它上,除了Jekyll在安全模式和少量包含的插件。这样做是为了安全。
你最好的选择是使用替代服务来构建你的网站,并将结果推回GitHub。站点的源代码将驻留在主分支中,编译后的源代码驻留在h-pages中。
一个适合这样做的服务是许多CI服务中的一个,比如Travis CI。这些通常用于在每次推送到repo时运行软件测试套件,但也可以用于构建您的网站并将结果推送给您。 Jekyll文档有一个在Travis上测试构建的指南。push输出没有提到。您需要在Travis配置文件中的after_success
派生文件中添加一个脚本。一个来自我维护的站点的例子。
要验证您的推送,脚本将需要访问您的github个人访问令牌。您不能直接将其放入部署脚本中,因为这是一个秘密。
如果你使用Github生成网站并显示它,没有选项可以这样做,因为Github对它将处理的内容很严格-为了安全。
一种解决方法是在本地进行编译和处理,然后将结果输出推到h-pages——它很乐意简单地托管静态页面。
你仍然可以使用github来托管项目。你只是不使用Github来编译它。
你的开发进程可能是:
- 检查主服务器和本地服务器是否匹配。
- 在开发模式下工作
- 在生产中构建。
- 使用grunt或其他程序来缩小/丑化/等_site生产文件-输出到一个单独的dist(分发)文件夹。
- 将dist文件夹的内容推送到你的h-pages。
- 将对项目文件的更改提交回主。
我可能没有太多的意义,但也许这个讨论可能会帮助更多:https://gist.github.com/cobyism/4730490
玩得开心!
您可以尝试使用我自己的迷你器https://github.com/Mendeo/jekyll-minifier。它完全是在液体上编写的,所以你不需要安装任何额外的gems,并且它与GitHub Pages完全兼容。
我的方法是一个Github动作:
- 检出
main
分支 - 执行缩小/清除等
- 将更改推送到
gh-pages
分支
然后你只需要把Github Pages指向gh-pages
分支而不是main
分支。
您需要选择适当的CLI工具来在操作启动的虚拟机中执行最小化/清除。这里有很多选择。我建议使用可以通过node
安装的软件包,这样您只需要在VM上安装它。例如:
- PurgeCSS:删除不需要的CSS
- terser:最小化JS
- csso-cli:最小化CSS
- HTML -minifier:最小化HTML
这是相对简单的Github操作,看起来有点像这样:
# A Github Action that minifies html/css/js and pushes it to a new branch
name: purge-and-minify
# Run on pushes to `main` branch
on:
push:
branches:
- 'main'
jobs:
checkout-minify-push:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
# Install CLI tools
- uses: actions/setup-node@v3
with:
node-version: '16'
- run: npm install -g terser
- run: npm install -g csso-cli
- run: npm install -g html-minifier
# Use CLI tools to minify, overwriting existing files
- run: for i in ./js/*.js; do terser $i --compress -o $i; done
- run: for i in ./css/*.css; do csso $i -o $i; done
- run: for i in ./html/*.html; do html-minifier [--your-options-here] $i -o $i; done
# Push changes to `gh-pages` branch
- run: |
git config user.name github-username
git config user.email github-username@user.noreply.github.com
git commit -am 'Automated minify of ${{ github.sha }}'
git push --force -u origin main:gh-pages
下面是我的一个Github项目中类似过程的工作示例。
netflix是GitHub Pages的替代方案,它与GitHub集成(甚至是私有repos),并类似地发布Jekyll(或其他静态站点生成器)的输出。免费层有一些限制,但大多数个人用户不太可能遇到它们。
你应该能够添加一个Jekyll迷你插件在这里列出来完成你的目标。以下是插件的安装说明。
如果这对你有用,请添加评论!我很想听听结果如何