diff options
| -rw-r--r-- | README.md | 69 |
1 files changed, 58 insertions, 11 deletions
@@ -1,19 +1,66 @@ -## Images +Small utilities and source files for generating my static website. -## Storing images +## Getting started -Any image files (.png, .jpg, .gif, ...) MUST be stored in a separate branch. By -default, those filetypes are ignored in this git repository, and must be added -with `git add -f "${file}"`. +### Building the static website -### Generating images +The generation is handled by the shell script `bin/ssg`. It uses functions +from `bin/func` as abstraction layers to process source files. -All images in the *out* or the *intermediate* directory must be processed with -the following command: +The generation of the *rss* file is handled in `bin/rssg`. Same as the above +for the shell functions. + +Building the static website is as simple as typing: ``` -convert "${in}" -resize 600x -ordered-dither 3x3 -colorspace gray "${out}" -convert "${in}" -resize 600x -ordered-dither 3x3 -colors 16 "${out}" +make website + +# building small parts is possible +./bin/ssg +./bin/rssg ``` -- The use of `-colors 16` is encouraged for colored pictures. +### Previewing + +Run a local webserver, e.g.: `python3 -m http.server out/`. Preview the results +on your favorite web browser. + +### Uploading the output directory + +The content of the `out/` directory is uploaded to a remote directory, thanks +to *rsync* over *ssh*. + +`make deploy` + +## Media + +### Storing medias + +Any media files, such as images or video can be stored in a separate `media` +branch . Any files or directory at its root will be copied to the `out/` +directory in the `trunk` branch when generating the static website. + +### Compressing images + +Files in *jpg format* can be compressed with one of the following command: + +- `convert "${in}" -interlace Plane -sampling-factor 4:2:0 -quality 75% "${out}"` +- `convert "${in}" -interlace Plane -gaussian-blur .05 -quality 85% "${out}"` + +Additionaly, the option `-strip` can be used for removing metadata. Moreover, +the `-quality`, `-gaussian-blur` and `-sampling-factor` can be swapped between +the example above. Once again, it is a manual process and difficult -time +consumming ?- to automate it with good results. + +### Dithering images + +It is preferred to use the `png` format with dithered images. Moreover, using +a maximum width of 600 pixeles makes sense, since the dithered will lose +informations anyway. Some of the following commands can be used, with different +results or colored output. Moreover, changing the order of the parameters +changes the final output! + +- `convert "${in}" -resize 600x -ordered-dither 3x3 -colorspace gray "${out}"` +- `convert "${in}" -resize 600x -ordered-dither 3x3 -colors 16 "${out}"` + +The use of `-colors 16` is encouraged for colored pictures. |