When I started this new blog, I wanted to find something minimal to
be able to minimize my natural tendency to hack my blogging system.
Clearly it was a failure :), org-publish
ecosystem is not easy enough to
handle all my needs, so I had to hack a few external scripts. In
particular regarding RSS.
Here are a few recent changes I did in my system:
- I changed how I reduce the size of the images.
- I do not merge all CSS styles in the same CSS file, I splitted 4
different CSS each supporting light/dark theme. This way the size of
each page is reduced.
- I added an HTML minimize step. I could optimize this a lot I
think.
- I added a script that show the size of each webpage (HTML + CSS +
Images). There is an example in all the footers of the pages of my
website.
So to compress the images I use:
convert src.jpg \
-resize 400x400\> \
-colorspace Gray \
-ordered-dither o8x8,8 \
dst.jpg
Somehow, I made 4 themes. This is too much, but, I don't know I guess
I felt inspired. I'm particularly proud of the matrix theme (sci dark,
try it by selecting sci and then choose dark theme). It takes care of
making the images green, and inspired by this one I also added this
trick to all other themes.
To note, one of the theme is a minimal one. It is used to minimize
the size of the CSS, while I'm writting those lines, the css size is 728
bytes.
I'll certainly be able to optimize a lot more the size of my HTML
files too. But I haven't invested much time in it yet. I just use the
minify
command line tool for them.
So right now to build my website here is the script I use:
#!/usr/bin/env bash
# build the files via emacs
emacs \
--load project.el \
--eval "(progn (org-publish \"blog\" t) (evil-quit))"
echo "Optim HTML size"
./optim-html.sh
echo "Gen themes clones"
./dup-for-themes.sh
echo "Update file size"
./update-file-size.sh
echo "Building RSS"
./mkrss.sh
echo "RSS Built"
Where
#!/usr/bin/env nix-shell
#!nix-shell -i zsh
#!nix-shell -I nixpkgs="https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz"
webdir="_site"
debug () {
print -- $* >/dev/null
}
type -a filelist
setopt extendedglob
if (($#>0)); then
filelist=( $* )
else
filelist=( $webdir/**/*.html(.) )
fi
tmp=$(mktemp)
for fic in $filelist; do
if echo $fic|egrep -- '-(mk|min|sci|modern).html$'>/dev/null; then
continue
fi
print -n -- "$fic "
cp $fic $tmp; minify --mime text/html $tmp > $fic
print "[OK]"
done
#!/usr/bin/env nix-shell
#!nix-shell -i zsh
#!nix-shell -I nixpkgs="https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz"
webdir="_site"
debug () {
print -- $* >/dev/null
}
if (($#>0)); then
filelist=( $* )
else
filelist=( $webdir/**/*.html(.) )
fi
trans(){
local suff=$1;
local fic=$2;
cat $fic | perl -p -e 's#href="?/css/mk.css"?#href=/css/'$suff'.css#;s#(/?(index|archive|slides|about-me)).html#$1-'$suff'.html#g;s#(posts/[a-zA-Z0-9_-]*).html#$1-'$suff'.html#g;s#-'$suff'.html>mk#.html>mk#g' > ${fic:r}-${suff}.html
}
for fic in $filelist; do
if echo $fic|egrep -- '-(mk|min|sci|modern).html$'>/dev/null; then
continue
fi
print -n -- "$fic "
for suff in sci min modern; do
trans $suff $fic
done
print "[OK]"
done
and the script to write the size of the file inside the file:
#!/usr/bin/env nix-shell
#!nix-shell -i zsh
#!nix-shell -I nixpkgs="https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz"
webdir="_site"
sizeof() {
stat --format="%s" "$*"
}
debug () {
print -- $* >/dev/null
}
toh () {
numfmt --to=iec $*
}
tmpdir=$(mktemp -d)
type -a filelist
if (($#>0)); then
filelist=( $* )
else
filelist=( $webdir/**/*.html(.) )
fi
for fic in $filelist; do
print -n -- "$fic "
htmlsize=$(sizeof $fic)
debug HTML: $htmlsize
xfic=$tmpdir/$fic
mkdir -p $(dirname $xfic)
hxclean $fic > $xfic
images=( $( < $xfic hxselect -i -c -s '\n' 'img::attr(src)' | sed 's/^\.\.\///' ) )
imgsize=0
nbimg=0
for i in $images; do
((nbimg++))
isize=$( sizeof ${fic:h}/$i )
debug $i '=>' $isize
(( imgsize += isize ))
done
debug IMG: $imgsize
css=( $( < $xfic hxselect -i -c -s '\n' 'link[rel=stylesheet]::attr(href)'))
csssize=0
for i in $css; do
isize=$( sizeof $webdir/$i )
debug $i '=>' $isize
(( csssize += isize ))
done
debug CSS: $csssize
total=$(( htmlsize + imgsize + csssize ))
sizeinfos=$(print -- "Size: $(toh $total) (HTML: $(toh $htmlsize), CSS: $(toh $csssize), IMG: $(toh $imgsize))")
print -- $sizeinfos
perl -pi -e 's#(<span class="?web-file-size"?>)[^<]*(</span>)#$1'"$sizeinfos"'$2#' $fic
done
rm -rf $tmpdir