From c9350ba2691e5934b950c455f551e0fcdb225c71 Mon Sep 17 00:00:00 2001 From: curben Date: Fri, 5 Oct 2018 12:29:35 +0930 Subject: [PATCH] Simplify npm installation --- source/_posts/make-hexo-blog-smaller.md | 38 +++++++++---------------- 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/source/_posts/make-hexo-blog-smaller.md b/source/_posts/make-hexo-blog-smaller.md index c4e96dd..72608c0 100644 --- a/source/_posts/make-hexo-blog-smaller.md +++ b/source/_posts/make-hexo-blog-smaller.md @@ -10,34 +10,24 @@ Static site serves html, css, javascript and images. These files can be compress In Hexo, there are two approaches. ### hexo-all-minifier -1. The easiest way is using hexo-all-minifier. Unlike others, this plugin also compress images as well. To use it, simply add the following line to `package.json`: - ```json - "hexo-all-minifier": "^0.5.2" - ``` -2. Note you should add a comma at the end of previous line, but no comma at the last value. The last few lines look like this: - ```json - ... - "hexo-renderer-stylus": "latest", - "hexo-server": "latest", - "hexo-all-minifier": "^0.5.2" - } - } - ``` -3. Run `$ npm install` to install it. -4. To enable it, put `all_minifier: true` line at `_config.yml`. -5. Deploy. +1. The easiest way is using hexo-all-minifier. Unlike others, this plugin also compress images as well. To use it, simply run the following command in your hexo folder: + ``` bash + $ npm install hexo-all-minifier --save + ``` +2. Above command will add hexo-all-minifer to your `package.json` and install it. +3. To enable it, put `all_minifier: true` line at `_config.yml`. +4. Deploy. -To see this in action, check out this [job log](https://gitlab.com/curben/curben.gitlab.io/-/jobs/101703188). As you can see, the resulting files are around 20% smaller. However, do note that its image compression dependencies have some [vulnerabilities](https://snyk.io/test/npm/hexo-all-minifier). This can be patched using [Snyk](https://snyk.io/). +To see this in action, check out this [job log](https://gitlab.com/curben/blog/-/jobs/101703188). As you can see, the resulting files are around 20% smaller. However, do note that its image compression dependencies have some [vulnerabilities](https://snyk.io/test/npm/hexo-all-minifier). This can be patched using [Snyk](https://snyk.io/). ### hexo-yam -Despite the convenience of hexo-all-minifier, I don't use it due to the vulnerabity. I don't need its image compression as I plan to use [Cloudinary](https://cloudinary.com/) via [hexo-cloudinary](https://github.com/maliMirkec/hexo-cloudinary) plugin. +Despite the convenience of hexo-all-minifier, I don't use it due to the vulnerability. I don't need its image compression since the [Cloudinary](https://cloudinary.com/) image hosting offers [auto compression](https://cloudinary.com/documentation/responsive_images#responsive_images_with_automatic_quality_selection). -Thus, I switch to hexo-yam which doesn't offer image compression. To use, add the following line to `package.json`: -```json - "hexo-yam": "latest" +Thus, I switch to leaner hexo-yam. To use it, simply run the following command in your hexo folder: +``` bash +$ npm install hexo-yam --save ``` -2. `$ npm install` and enable the plugin by putting `neat_enable: true` to `_config.yml`. -3. Deploy. +and deploy. # Compression [Compression](https://en.wikipedia.org/wiki/Data_compression) uses more advanced technique to reduce the file size even further. Most modern web browsers support gzip decompression and prefer it (with appropriate HTTP header). As you might know from zipping a text file, this can yield significant reduction in file size. For example, my home page `index.html` is less than half smaller (3.3KB > 1.2KB). Check it out [here](https://gitlab.com/curben/curben.gitlab.io/-/jobs/101703188/artifacts/browse/public/). @@ -45,7 +35,7 @@ Thus, I switch to hexo-yam which doesn't offer image compression. To use, add th ***Update:*** hexo-yam v0.5.0 onwards offer gzip and brotli compressions. After you install it, it will automatically compress assets files to `.gz` and `.br` whenever hexo generate/deploy/server. This means the command `$ find ....` as shown below is no longer required. 1. Linux distro has built-in gzip. Install brotli through apt/dnf/yum/pacman. -2. To compress, simply run the following commands after you generate static files (`$ hexo generate`), +2. To compress, simply run the following commands after you generate static files (`$ hexo generate`), only `public` folder is affected, ```bash $ find public -type f -iregex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -execdir gzip -f --keep {} \; $ find public -type f -iregex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -execdir brotli -f --keep {} \;