Improve a bit of everything prepare article

This commit is contained in:
Yann Esposito (Yogsototh) 2021-05-24 18:50:27 +02:00
parent d939ae3f33
commit dba9ae1393
Signed by untrusted user who does not match committer: yogsototh
GPG Key ID: 7B19A4C650D59646
3 changed files with 36 additions and 31 deletions

View File

@ -1,7 +1,8 @@
html { html {
font-family: Georgia,serif; font-family: Georgia, serif;
font-size: 18px; font-size: 16px;
line-height: calc(1ex/0.32); } line-height: calc(1ex/0.37);
}
#TOC {text-align: left;} #TOC {text-align: left;}
html,body { margin: 0; padding: 0; border: 0; } html,body { margin: 0; padding: 0; border: 0; }
.main { min-height: calc(100vh - 1em); } .main { min-height: calc(100vh - 1em); }
@ -36,6 +37,7 @@ figure { margin: 1rem 0; padding: 0; }
figure img { width: 100%; } figure img { width: 100%; }
li p { margin: 0; padding: 0; } li p { margin: 0; padding: 0; }
li > img, p > img { max-height: 1.5em; vertical-align: middle; } li > img, p > img { max-height: 1.5em; vertical-align: middle; }
abbr {border-bottom: dotted 1px;}
sup, sub { sup, sub {
vertical-align: baseline; vertical-align: baseline;
position: relative; position: relative;

View File

@ -204,7 +204,7 @@ echo "RSS Generated"
Here is the full script I use: 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: You can notice I start my script with:

View File

@ -1,5 +1,5 @@
#+TITLE: Efficient Static Site builder #+TITLE: Efficient Static Site Build with make
#+DESCRIPTION: A deeper view of my static site builder via Makefile #+DESCRIPTION: A deeper view of my static site builder Makefile
#+KEYWORDS: blog static #+KEYWORDS: blog static
#+AUTHOR: Yann Esposito #+AUTHOR: Yann Esposito
#+EMAIL: yann@esposito.host #+EMAIL: yann@esposito.host
@ -8,27 +8,31 @@
#+OPTIONS: auto-id:t #+OPTIONS: auto-id:t
#+STARTUP: showeverything #+STARTUP: showeverything
After many different tools, I recently switched to a simple Makefile to This article will dig a bit deeper about how I generate my static website.
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
In previous article [[https://her.esy.fun/posts/0017-static-blog-builder/index.html][Static Blog Builder]] I give a starter pack. yourself.
In this post I provide more detail about my specific Makefile and the
feature I would like to have.
Features: A few goal reached by my current build system are:
1. Source file format agnostic. You can use markdown, org-mode or even 1. Source file format agnostic. You can use markdown, org-mode or even
directly writing html. directly writing html.
2. Support gemini 2. Support gemini
3. Minify HTML 3. Optimize size: minify HTML, CSS, images
4. Minify CSS 4. Generate an index page listing the posts
3. Compress images for the web 5. Generate RSS/atom feed (for both gemini and http)
5. Generate indexes (for both gemini and html)
6. 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: :PROPERTIES:
:CUSTOM_ID: the--makefile- :CUSTOM_ID: -makefile--overview
:END: :END:
A Makefile is constitued of rules. 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 3. I declare a rule to construct these destination files
4. I add the destination files to the =ALL= variable. 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 - raw assets I just want copied
- images I would like to compress for the web - 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 - =gmi= I would like to generate from org mode files
- =xml= files I use as cache to build different index files - =xml= files I use as cache to build different index files
- =index.html= file containing a list of my posts - =index.html= file containing a list of my posts
- =rss.xml= 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 - =gemini-atom.xml= file containing a list of my posts
** Block Pattern Example ** Assets
:PROPERTIES: :PROPERTIES:
:CUSTOM_ID: block-pattern-example :CUSTOM_ID: assets
:END: :END:
I have a bunch of similar block in my Makefile. The rules to copy assets will be a good first example.
A good example is the block taking care of assets.
Mainly the rule is:
1. find all assets in =src/= directory 1. find all assets in =src/= directory
2. generate all assets from these file in =_site/= 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. 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 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. 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 So for example, the matching rule =_site/%: src/%= will match all files in
the `src/` dir. the =src/= dir.
But if we want to treat css file with another rule we could write: But if we want to treat css file with another rule we could write:
#+begin_src makefile #+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= The difference is just that instead of using =cp= we use the =minify=
command. command.
** ORG -> HTML ** ORG HTML
:PROPERTIES: :PROPERTIES:
:CUSTOM_ID: org----html :CUSTOM_ID: org----html
:END: :END:
@ -233,8 +235,9 @@ But importantly *not* at the first place. Because we use =$<= that will be
the first dependency. the first dependency.
I also have a short script instead of directly using =pandoc=. 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 It is easier to handle =toc= using the metadatas in the file.
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: The =mk-html.sh= is quite straightforward: