https://dailystuff.nlDailystuff on the Internet - Posts tagged CSS2024-03-16T09:59:03.034541+00:00ABloghttps://dailystuff.nl/blog/2023/minify-websites.htmlHow to minify websites with GitHub Actions2023-04-12T00:00:00+00:00Hans Spaans<section id="how-to-minify-websites-with-github-actions">
<p>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.</p>
<p>Multiple ways to minify these files do exist. One way is to use a <a class="reference external" href="https://www.minifier.org/">minifier online</a>. 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.</p>
<p>The application <a class="reference external" href="https://github.com/coderaiser/minify">minify</a> is packaged in <a class="reference external" href="https://github.com/marketplace/actions/minify-action">GitHub Action Minify</a> 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.</p>
<div class="literal-block-wrapper docutils container" id="id1">
<div class="code-block-caption"><span class="caption-text">Example workflow file <code class="file docutils literal notranslate"><span class="pre">.github/workflows/ci.yml</span></code></span></div>
<div class="highlight-yaml notranslate"><div class="highlight"><pre><span></span><span class="linenos"> 1</span><span class="nn">---</span>
<span class="linenos"> 2</span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">CI</span>
<span class="linenos"> 3</span>
<span class="linenos"> 4</span><span class="nt">on</span><span class="p">:</span>
<span class="linenos"> 5</span><span class="nt">push</span><span class="p">:</span>
<span class="linenos"> 6</span><span class="w"> </span><span class="nt">branches</span><span class="p">:</span>
<span class="linenos"> 7</span><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">master</span>
<span class="linenos"> 8</span><span class="nt">pull_request</span><span class="p">:</span>
<span class="linenos"> 9</span><span class="w"> </span><span class="nt">branches</span><span class="p">:</span>
<span class="linenos">10</span><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">master</span>
<span class="linenos">11</span>
<span class="linenos">12</span><span class="nt">jobs</span><span class="p">:</span>
<span class="linenos">13</span><span class="w"> </span><span class="nt">build</span><span class="p">:</span>
<span class="linenos">14</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Building Artifacts</span>
<span class="linenos">15</span><span class="w"> </span><span class="nt">runs-on</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">ubuntu-latest</span>
<span class="linenos">16</span>
<span class="linenos">17</span><span class="w"> </span><span class="nt">steps</span><span class="p">:</span>
<span class="linenos">18</span><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Checkout Code</span>
<span class="linenos">19</span><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">actions/checkout@v3</span>
<span class="linenos">20</span>
<span class="hll"><span class="linenos">21</span><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Minify Action</span>
</span><span class="hll"><span class="linenos">22</span><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">anthonyftwang/minify-action@v1.0.1</span>
</span><span class="linenos">23</span>
<span class="linenos">24</span><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">Upload artifact</span>
<span class="linenos">25</span><span class="w"> </span><span class="nt">uses</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">actions/upload-artifact@v3</span>
<span class="linenos">26</span><span class="w"> </span><span class="nt">with</span><span class="p">:</span>
<span class="linenos">27</span><span class="w"> </span><span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">html-site</span>
<span class="linenos">28</span><span class="w"> </span><span class="nt">path</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">public</span>
<span class="linenos">29</span><span class="w"> </span><span class="nt">retention-days</span><span class="p">:</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">1</span>
</pre></div>
</div>
</div>
<p>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.</p>
</section>
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.2023-04-12T00:00:00+00:00