From dba9ae1393b5ce0767575e4bb9aca53ef99c0451 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Mon, 24 May 2021 18:50:27 +0200 Subject: [PATCH] Improve a bit of everything prepare article --- src/css/y.css | 8 ++- src/posts/0005-rss-gen/index.org | 2 +- .../index.org | 57 ++++++++++--------- 3 files changed, 36 insertions(+), 31 deletions(-) rename src/{drafts => posts}/0018-makefile-as-static-site-builder-follow-up/index.org (88%) diff --git a/src/css/y.css b/src/css/y.css index 799993a..f9e167f 100644 --- a/src/css/y.css +++ b/src/css/y.css @@ -1,7 +1,8 @@ html { - font-family: Georgia,serif; - font-size: 18px; - line-height: calc(1ex/0.32); } + font-family: Georgia, serif; + font-size: 16px; + line-height: calc(1ex/0.37); +} #TOC {text-align: left;} html,body { margin: 0; padding: 0; border: 0; } .main { min-height: calc(100vh - 1em); } @@ -36,6 +37,7 @@ figure { margin: 1rem 0; padding: 0; } figure img { width: 100%; } li p { margin: 0; padding: 0; } li > img, p > img { max-height: 1.5em; vertical-align: middle; } +abbr {border-bottom: dotted 1px;} sup, sub { vertical-align: baseline; position: relative; diff --git a/src/posts/0005-rss-gen/index.org b/src/posts/0005-rss-gen/index.org index cf0642e..a869e2e 100644 --- a/src/posts/0005-rss-gen/index.org +++ b/src/posts/0005-rss-gen/index.org @@ -204,7 +204,7 @@ echo "RSS Generated" Here is the full script I use: -[[file:rss-gen/mkrss.sh][mkrss.sh]] +[[file:mkrss.sh][mkrss.sh]] You can notice I start my script with: diff --git a/src/drafts/0018-makefile-as-static-site-builder-follow-up/index.org b/src/posts/0018-makefile-as-static-site-builder-follow-up/index.org similarity index 88% rename from src/drafts/0018-makefile-as-static-site-builder-follow-up/index.org rename to src/posts/0018-makefile-as-static-site-builder-follow-up/index.org index a0f6261..52fafa1 100644 --- a/src/drafts/0018-makefile-as-static-site-builder-follow-up/index.org +++ b/src/posts/0018-makefile-as-static-site-builder-follow-up/index.org @@ -1,5 +1,5 @@ -#+TITLE: Efficient Static Site builder -#+DESCRIPTION: A deeper view of my static site builder via Makefile +#+TITLE: Efficient Static Site Build with make +#+DESCRIPTION: A deeper view of my static site builder Makefile #+KEYWORDS: blog static #+AUTHOR: Yann Esposito #+EMAIL: yann@esposito.host @@ -8,27 +8,31 @@ #+OPTIONS: auto-id:t #+STARTUP: showeverything -After many different tools, I recently switched to a simple Makefile to -generate my static website. -In previous article [[https://her.esy.fun/posts/0017-static-blog-builder/index.html][Static Blog Builder]] I give a starter pack. -In this post I provide more detail about my specific Makefile and the -feature I would like to have. +This article will dig a bit deeper about how I generate my static website. +In a [[https://her.esy.fun/posts/0017-static-blog-builder/index.html][previous article]] I just gave the rationale and an overview to do it +yourself. -Features: +A few goal reached by my current build system are: 1. Source file format agnostic. You can use markdown, org-mode or even directly writing html. 2. Support gemini -3. Minify HTML -4. Minify CSS -3. Compress images for the web -5. Generate indexes (for both gemini and html) -6. Generate RSS/atom feed (for both gemini and http) +3. Optimize size: minify HTML, CSS, images +4. Generate an index page listing the posts +5. Generate RSS/atom feed (for both gemini and http) +So make will just take care of handling the dependency graph to minimize +the amount of effort when a change occurs in the sources. +But for some features, I built specifics tools. +For example to be absolutely agnostic in the source format for my articles +I generate the RSS out of a tree of HTML files. +But taking advantage of Make, I generate an index cache to transform those +HTML into XML which will be faster to use to build different indexes. +To make those transformations I use very short a shell scripts. -* The =Makefile= +* =Makefile= overview :PROPERTIES: -:CUSTOM_ID: the--makefile- +:CUSTOM_ID: -makefile--overview :END: A Makefile is constitued of rules. @@ -80,24 +84,22 @@ In my =Makefile= I have many similar block with the same pattern. 3. I declare a rule to construct these destination files 4. I add the destination files to the =ALL= variable. -So I have a block for: +I have a block for: - raw assets I just want copied - images I would like to compress for the web -- =html= I would like to generate from org mode files +- =html= I would like to generate from org mode files via pandoc - =gmi= I would like to generate from org mode files - =xml= files I use as cache to build different index files - =index.html= file containing a list of my posts - =rss.xml= file containing a list of my posts - =gemini-atom.xml= file containing a list of my posts -** Block Pattern Example +** Assets :PROPERTIES: -:CUSTOM_ID: block-pattern-example +:CUSTOM_ID: assets :END: -I have a bunch of similar block in my Makefile. -A good example is the block taking care of assets. -Mainly the rule is: +The rules to copy assets will be a good first example. 1. find all assets in =src/= directory 2. generate all assets from these file in =_site/= directory @@ -139,8 +141,8 @@ So my Makefile is composed of similar blocks, where I replace the first find command to match specific files and where I use different building rule. An important point, is that the rule must be the most specific possible because make will use the most specific rule in case of ambiguity. -So for example, the matching rule `_site/%: src/%` will match all files in -the `src/` dir. +So for example, the matching rule =_site/%: src/%= will match all files in +the =src/= dir. But if we want to treat css file with another rule we could write: #+begin_src makefile @@ -196,7 +198,7 @@ This is very similar to the block for raw assets. The difference is just that instead of using =cp= we use the =minify= command. -** ORG -> HTML +** ORG → HTML :PROPERTIES: :CUSTOM_ID: org----html :END: @@ -233,8 +235,9 @@ But importantly *not* at the first place. Because we use =$<= that will be the first dependency. I also have a short script instead of directly using =pandoc=. -Because I would like to handle the =toc= depending on the metadatas in the -file. +It is easier to handle =toc= using the metadatas in the file. +And if someday I want to put the template in the metas, this will be the +right place to put that. The =mk-html.sh= is quite straightforward: