(w) smolweb

A smolweb bash generator

I publish this ugly code just to show that it is very easy to build and regenerate a smolwebsite with a few lines of bash script.

It uses discount markdown converter to generate html code from .md files.

All files

The source directory contains the converter, favicons, a page template and markdown content of each page. Two folder would be used to store image (/img) and documents (/doc).

├── convert.sh
├── doc
│   └── index.html
├── favicon-32x32.png
├── favicon-64x64.png
├── favicon.ico
├── guidelines.md
├── img
│   └── index.html
├── index.md
├── news.md
├── page.tpl
├── posts
│   ├── 2023-10-09-1st-post.md
│   ├── 2023-10-09-an-other-smallweb-definition.md
│   └── 2023-10-11-smolweb-bash-generator.md
├── style.css
└── subset.md

The bash script

This script (called convert.sh) uses files put in the same directory to generate the content of smolweb.org


cd "$(dirname "$0")"
export docroot="../smolweb.org"
export urlroot="https://smolweb.org"
cp -vu *.{ico,png,css} $docroot
cp -vu img/* $docroot/img/
cp -vu doc/* $docroot/doc/

echo "# News" > news.md
echo '<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
    <title type="text">smolweb.org</title>
    <subtitle type="text">Smolweb news</subtitle>
    <updated>'"$(date -u -Isecond)"'</updated>
    <link rel="alternate" type="text/html" href="'"$urlroot"'/" />
    <link rel="self" type="application/atom+xml" href="'"$urlroot"'/atom.xml" />' > $docroot/atom.xml
# posts
for f in `ls -1r posts/*.md`;
    head -n 3 "$f" | grep "^# " | sed -e "s/^# //" > /tmp/title.tmp
    cat "$f" |  markdown -f fencedcode > /tmp/content.tmp
    cat "$f" |  markdown -f fencedcode -f cdata > /tmp/cdata.tmp
    cat page.tpl | sed -e "/PAGE_TITLE/r /tmp/title.tmp" -e '//d' -e "/PAGE_CONTENT/r /tmp/content.tmp" -e '//d' > $docroot/${f%.*}.html
    echo "* $(echo $f | grep -oP "[0-9]{4}-[0-9]{2}-[0-9]{2}") [$(cat /tmp/title.tmp)](${f%.*}.html)" >> news.md
    echo '  <entry xml:lang="en">
        <title type="html">'"$(cat /tmp/title.tmp)"'</title>
        <link rel="alternate" type="text/html" href="'"$urlroot"'/'"${f%.*}.html"'" />
        <published>'"$(echo $f | grep -oP "[0-9]{4}-[0-9]{2}-[0-9]{2}")"'T00:00:00+00:00</published>
        <updated>'"$(date -u -Isecond --date=$(stat -c '@%Y' $f))"'</updated>
        <content type="html">' >> $docroot/atom.xml
    cat /tmp/cdata.tmp >> $docroot/atom.xml
    echo '      </content>
    </entry>'>> $docroot/atom.xml
echo '</feed>' >> $docroot/atom.xml

# pages
for f in *.md
    head -n 3 "$f" | grep "^# " | sed -e "s/^# //" > /tmp/title.tmp
    cat "$f" |  markdown -f fencedcode > /tmp/content.tmp
    cat page.tpl | sed -e "/PAGE_TITLE/r /tmp/title.tmp" -e '//d' -e "/PAGE_CONTENT/r /tmp/content.tmp" -e '//d' > $docroot/${f%.*}.html

The markdown files

The files with .md extension contain text in markdown format. The first line begining with with a # and a space is the H1 and the title of the page.

Example index.md:

# About smolweb

_Promoting a simple unbloated web!_

Nowadays, hardware resources of our personal devices are essentially
oversized to manage bloated websites. If we incite web designers to
return to a lighter web, small devices such as old PC, old smartphones,
retro-machines and small boards could be usable.


The site template

The file page.tpl contains the template of a page for the site. the line PAGE_TITLE and PAGE_CONTENT are replaced dynamically to generate each page of the site.

<!DOCTYPE html>
<html lang="en">
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
                <meta name="viewport" content="width=device-width, initial-scale=1.0" >
                <meta name="description" content="smolweb.org promotes simple unbloated web. It provides resources to actors who want to participate." >
                <link href="/style.css" rel="stylesheet" type="text/css" >
                <link href="/atom.xml" rel="alternate" type="application/atom+xml" title="Smolweb news" >
                <link rel="icon" href="/favicon.ico" type="image/x-icon" >
                <link rel="icon" href="/favicon-64x64.png" type="image/png" >
                        <small><code>(w)</code></small> smolweb
                        <li><a href="/index.html">Home</a></li>
                        <li><a href="/guidelines.html">Guidelines</a></li>
                        <li><a href="/subset.html">HTML subset</a></li>
                        <li><a href="/news.html">News</a></li>
                        <li><a href="/atom.xml">RSS feed</a></li>
                         <p><a property="dct:title" rel="cc:attributionURL" href="https://smolweb.org/">Smolweb</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://mastodon.tetaneutral.net/@adele">Adële</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a></p> 

The stylesheet

The file style.css is the stylesheet for the whole site.

body {
    margin: 0 auto;
    padding: 0;
    max-width: 1024px;
    font-family: Verdana, Sans-Serif;
main {
    margin: 0 1em;
header {
    color: #a0a;
    background-color: #ddf;
    padding: 0.2em;
    border-bottom: 1px solid black;
header p {
    line-height: 2em;
    font-size: 2em;
    margin: 0;
    padding-left: 1em;
    font-weight: bold;
header p small {
    font-size: 0.5em;
nav ul {
    list-style-type: none;
    border-left: 1px solid black;
    margin: 0;
    padding: 0;
nav ul li {
    display: inline-block;
    border-right: 1px solid black;
    padding: 2px 10px;
    margin: 0;
nav ul li a.active {
    font-weight: bold;
img#logo {
    vertical-align: middle;
    max-width: 80px;
    max-height: 80px;
pre, code {
    font-family: Monaco, Courier, monospace;
    tab-size: 1em;
pre {
    padding: 1em;
    margin: 1em 0;
    overflow-x: auto;
    background-color: #111;
    color: #6f6;
    border-radius: 0.5em;
li {
    margin-left: 1em;
p {
    margin: 1em 0;
    line-height: 1.5em;
a {
    color: #009;
    text-decoration: none;
blockquote {
    background: #eee;
    padding: 0.5em 1em;
    margin: 0 0 0 0.5em;
    border-radius: 0.5em;
div.inline-img img {
    max-width: 100%;
footer {
    margin-top: 20px;
    border-top: 1px solid black;
footer img {

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background: #444;
    a {
        color: #99f;
    blockquote {
        color: #fff;
        background: #333;