xuen

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)