How to minify websites with GitHub Actions#

Websites are usually made up of HTML, CSS, and Javascript. These files are usually not minified, which means that they are not compressed. This means that the files are not optimized for the web. This can cause the website to load slower than it should. This is especially true for mobile users. This is where minification comes in. Minification is the process of removing unnecessary characters from the files. This can include removing comments, removing whitespace, and removing unnecessary characters. This can make the website load faster and more efficiently.

Multiple ways to minify these files do exist. One way is to use a minifier online. Another way is to use a minifier locally on your computer, but both of these methods are not ideal. A more efficient way is to use a GitHub Action. This is a way to automate tasks on GitHub. This can be used to minify these files before creating an artifact and deploying this artifact to the web.

The application minify is packaged in GitHub Action Minify and can be directly used in a workflow and will reduce the size of all the HTML, CSS, and Javascript files. This can be done by adding lines 21 and 22 like in the workflow example below.

Example workflow file .github/workflows/ci.yml#
 2name: CI
 6  branches:
 7    - master
 9  branches:
10    - master
13  build:
14    name: Building Artifacts
15    runs-on: ubuntu-latest
17  steps:
18    - name: Checkout Code
19      uses: actions/[email protected]
21    - name: Minify Action
22      uses: anthonyftwang/[email protected]
24    - name: Upload artifact
25      uses: actions/[email protected]
26      with:
27        name: html-site
28        path: public
29        retention-days: 1

The example above shows how simple it is to this GitHub Action. The first step is to checkout the code. After this you can run the minify action. This will minify all the HTML, CSS, and Javascript files. The last step is to upload the artifact. This will upload the minified files to the artifact. This can then be used to deploy the website.