paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 33815524467f01a1af2d5aff9a71fc34014bcdc3
parent 94f767fd029938062065a3557f55c19c60bac336
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Thu,  6 Aug 2020 20:56:25 -0400

Publish new blog post

Diffstat:
Mpages/blog.md | 1+
Apages/blog/adding-image-optimization-to-my-static-site-generator.md | 45+++++++++++++++++++++++++++++++++++++++++++++
Mpages/home.md | 4++--
Mpublic/feeds/sitewide-feed.xml | 15+++++++++++++++
Mpublic/sitemap.xml | 1+
5 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/pages/blog.md b/pages/blog.md @@ -27,6 +27,7 @@ href="https://pleroma.paritybit.ca/jbauer">Pleroma</a>. ### 2020 <ul> + <li>2020-08-06 <a href="blog/adding-image-optimization-to-my-static-site-generator">Adding Image Optimization to My Static Site Generator</a></li> <li>2020-08-05 <a href="blog/use-xterm-256color-with-alacritty">Use xterm-256color With Alacritty For Better ls Output</a></li> <li>2020-08-03 <a href="blog/my-journey-with-computers">My Journey With Computers</a></li> <li>2020-08-02 <a href="blog/vortex-vibe-keyboard">The Vortex ViBE Mechanical Keyboard</a></li> diff --git a/pages/blog/adding-image-optimization-to-my-static-site-generator.md b/pages/blog/adding-image-optimization-to-my-static-site-generator.md @@ -0,0 +1,45 @@ +## Adding Image Optimization to My Static Site Generator + +[//]: # "I've added image optimization to my static site generator by making use of the tinypng.com API allowing me to optimize png, jpg, and jpeg images by using my script. No more manual work!" + +[//]: # "main.min.css" + +[//]: # + +<div class="byline"> +<b>Written By:</b> Jake Bauer | + <b>Posted:</b> 2020-08-06 | + <b>Last Updated:</b> 2020-08-06 +</div> + +I just added image optimization and resizing to my website's static site +generator so that uploading images to my website involves a lot less manual +labour. + +For a while I've been using [tinypng.com](https://tinypng.com) to optimize the +PNG, JPG, and JPEG images that I upload to my website since I found that it did +a better job than the command line utility `pngquant` (which also only worked on +PNGs). They have an API service which allows one to upload 500 images in a month +for free which is much more convenient than visiting the website every time I +need to optimize an image. Using the magic of `curl`, I added the ability to use +this API from my `compile` script which also handles compiling Markdown to HTML +and CSS minification. + +Another thing I added to the script was a `-r` or `--resize` option which takes +a number (let's call it x) as an argument and uses the `convert` utility from +ImageMagick to resize the input image by x%. I would commonly do this on the +command line to generate smaller images (thumbnails, sort of) for embedding in +blog posts to make page load sizes smaller so including it in the script +alongside image optimization was a no-brainer. + +I am slowly getting closer to releasing my scripts as a standalone project. It +would be a set of static site generator scripts that anybody could use but +without the bloat and complication of the existing ones such as Hugo or Jekyll. +I'm aiming for it to be a static site generator for minimalists who don't want +to go through the hassle of writing their own, plus I want to include HTML to +Gopher/Gemini conversion scripts. + +_This is my eighty-sixth post for the +[#100DaysToOffload](https://social.paritybit.ca/tags/100DaysToOffload) +challenge. You can learn more about this challenge over at +[https://100daystooffload.com](https://100daystooffload.com)._ diff --git a/pages/home.md b/pages/home.md @@ -18,6 +18,8 @@ This site will soon™️ be available over Gopher and Gemini. <a class="rss-icon" href="/feeds/sitewide-feed.xml"> <img src="/img/feed-icon.png" width="15" height="15" alt="Click for RSS Feed"/> </a> </div> +2020-08-06 <a class="feed-item" href="blog/adding-image-optimization-to-my-static-site-generator">Adding Image Optimization to My Static Site Generator</a> + 2020-08-05 <a class="feed-item" href="blog/use-xterm-256color-with-alacritty">Use xterm-256color With Alacritty For Better ls Output</a> 2020-08-03 <a class="feed-item" href="blog/my-journey-with-computers">My Journey With Computers</a> @@ -36,8 +38,6 @@ This site will soon™️ be available over Gopher and Gemini. 2020-07-23 <a class="feed-item" href="blog/mastodon-to-pleroma-2-customizing-my-instance">Mastodon to Pleroma — 2 — Customizing My Instance</a> -2020-07-21 <a class="feed-item" href="blog/mastodon-to-pleroma-1-setting-up-a-pleroma-server">Mastodon to Pleroma — 1 — Setting up a Pleroma Server</a> - ### What is a Parity Bit? It is a bit (in the 1's and 0's sense) used in checking for errors in digital diff --git a/public/feeds/sitewide-feed.xml b/public/feeds/sitewide-feed.xml @@ -7,6 +7,21 @@ <description>The feed that covers all notable additions, updates, announcements, and other changes for the entire paritybit.ca website.</description> <item> + <title>Adding Image Optimization to My Static Site Generator</title> + <link>https://www.paritybit.ca/blog/adding-image-optimization-to-my-static-site-generator</link> + <guid>https://www.paritybit.ca/blog/adding-image-optimization-to-my-static-site-generator</guid> + <pubDate>Thu, 06 Aug 2020 20:53:29 -0400</pubDate> + <description><![CDATA[<h2 id="adding-image-optimization-to-my-static-site-generator">Adding Image Optimization to My Static Site Generator</h2> +<div class="byline"> +<p><b>Written By:</b> Jake Bauer | <b>Posted:</b> 2020-08-06 | <b>Last Updated:</b> 2020-08-06</p> +</div> +<p>I just added image optimization and resizing to my website’s static site generator so that uploading images to my website involves a lot less manual labour.</p> +<p>For a while I’ve been using <a href="https://tinypng.com">tinypng.com</a> to optimize the PNG, JPG, and JPEG images that I upload to my website since I found that it did a better job than the command line utility <code>pngquant</code> (which also only worked on PNGs). They have an API service which allows one to upload 500 images in a month for free which is much more convenient than visiting the website every time I need to optimize an image. Using the magic of <code>curl</code>, I added the ability to use this API from my <code>compile</code> script which also handles compiling Markdown to HTML and CSS minification.</p> +<p>Another thing I added to the script was a <code>-r</code> or <code>--resize</code> option which takes a number (let’s call it x) as an argument and uses the <code>convert</code> utility from ImageMagick to resize the input image by x%. I would commonly do this on the command line to generate smaller images (thumbnails, sort of) for embedding in blog posts to make page load sizes smaller so including it in the script alongside image optimization was a no-brainer.</p> +<p>I am slowly getting closer to releasing my scripts as a standalone project. It would be a set of static site generator scripts that anybody could use but without the bloat and complication of the existing ones such as Hugo or Jekyll. I’m aiming for it to be a static site generator for minimalists who don’t want to go through the hassle of writing their own, plus I want to include HTML to Gopher/Gemini conversion scripts.</p> +<p><em>This is my eighty-sixth post for the <a href="https://social.paritybit.ca/tags/100DaysToOffload">#100DaysToOffload</a> challenge. You can learn more about this challenge over at <a href="https://100daystooffload.com">https://100daystooffload.com</a>.</em></p>]]></description> + </item> +<item> <title>Use xterm-256color With Alacritty For Better ls Output</title> <link>https://www.paritybit.ca/blog/use-xterm-256color-with-alacritty</link> <guid>https://www.paritybit.ca/blog/use-xterm-256color-with-alacritty</guid> diff --git a/public/sitemap.xml b/public/sitemap.xml @@ -3,6 +3,7 @@ <url><loc>https://www.paritybit.ca</loc></url> <url><loc>https://www.paritybit.ca/home</loc></url> <url><loc>https://www.paritybit.ca/blog</loc></url> + <url><loc>https://www.paritybit.ca/blog/adding-image-optimization-to-my-static-site-generator</loc></url> <url><loc>https://www.paritybit.ca/blog/use-xterm-256color-with-alacritty</loc></url> <url><loc>https://www.paritybit.ca/blog/my-journey-with-computers</loc></url> <url><loc>https://www.paritybit.ca/blog/vortex-vibe-keyboard</loc></url>