nandbit

[index] [fun] [about]
how this site was made

motivation

one of my goals with this site was to try to create it in a simple way. I use Svelte for work, and enjoy using it, but I never really made a site without a large framework. so this is my attempt at making it as barebones as I feel comfortable.

tools

 
  • + html        <-- markup
  • + tailwindcss <-- css
  • + pnpm        <-- package management
  • + jinja       <-- templating
  • + cloudflare  <-- hosting

note: i could definitely do away with pnpm

build process

write html

↓

add tailwind classes

↓

build with jinja

↓

push to github

↓

deploy to cloudflare

project structure
my project layout is more or less this. the public folder contains the actual user-facing pages. 
.
├── build.py
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── public
│   ├── articles
│   ├── articles.html
│   ├── assets
│   ├── blog.html
│   ├── css
│   ├── index.html
│   └── projects.html
├── pyproject.toml
├── README.md
├── tailwind
│   └── input.css
└── templates
    ├── base.html
    └── pages

build script
python
from
 jinja2 
import
 
Environment
, 
FileSystemLoader

from pathlib import 
Path


env = 
Environment
(loader=
FileSystemLoader
('templates'))

base_in_dir = 
Path
('templates/pages')
base_out_dir = 
Path
('public')
base_out_dir.
mkdir
(exist_ok=
True
)

pages = base_in_dir.
rglob
('*.html')


for
 page 
in
 pages:
    
print
(f"Processing: {page}")
    rel_path = page.
relative_to
(base_in_dir)
    out_path = base_out_dir / rel_path
    out_path.
parent
.
mkdir
(parents=
True
, exist_ok=
True
)

    
with
 
open
(page) 
as
 f:
        content_template = env.
from_string
(f.
read()
)
        content = content_template.
render()


    base = env.
get_template
('base.html')
    html = base.
render
(title=page.
stem
.
capitalize()
, 
content
=content)

    
with
 
open
(out_path, 'w') 
as
 f:
        f.
write
(html)