Improve a bit of everything prepare article
This commit is contained in:
parent
d939ae3f33
commit
dba9ae1393
|
@ -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;
|
||||||
|
|
|
@ -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:
|
||||||
|
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Loading…
Reference in New Issue