Building Websites
Status: scribble
My aim is to create websites as a platform with minimal mingling in the web languages. The use case determines the required framework.
Display Static Content
Here, I want to have files that can be visualized directly on any browser without relying on any environment setup. Each
consumer should see a mostly identical output.
Those sites are lean, secure, and generally simple. In the past, I have not overly enjoyed creating and maintaining
such sites, which was the reason for me looking into it.
My goal is to set the page up once and from then on only worry about the content anymore.
Painpoint: Repetitive code
The subpages will contain repetitive code, such as the header or navigation. To avoid the need to adjust all files when changing one of those elements, a static site generator comes in handy. Eleventy lets us create templates and generates the final static webpage with all its html-files.
Painpoint: HTML
When writing my mind, I don't do that directly as HTML. Eleventy allows us to have markdown files as raw, content input for our webpages.
Painpoint: CSS/JavaScript
Placing all the individual boxes of a website in the right place for multiple browsers, and screen resolutions and keeping it up to date with the latest developments can quickly start consuming time. Bootstrap massively simplifies this by offering dynamic design templates.
npm
We have identified two packages that help us resolve most of the pain points.
npm manages packages for JavaScript/node.js similarly to the way poetry
or setuptools
do
for Python projects.
The dependencies are stored in package.json
. To create the dependencies run
npm init -y
npm install @11ty/eleventy --save-dev
Generate HTML files
npx @11ty/eleventy
Start up a local web server that hot-reloads the page
npx @11ty/eleventy --serve
Deployment
As the website is fully static, it can be freely hosted e.g. on GitHub pages. With GitHub workflows, we can even host it on a specific git action like a push on the master branch.
This website is the result of this evaluation. Feel free to check out its source code on github.
Dynamic Websites
Next: Plotly Dash, hosting, host on subdomain?