{ }

how $(pwd) is built

it’s not too hard to realize that i love static websites, here’s how mine is made.

what’s used

the directory hierarchy

the hierarchy is have set up for directories is very similar to how nuxt.js projects are organized, maybe nuxt.js borrowed that hierarchy from some other framework, i have no clue. either way, i like it a lot, so i decided that i might aswell use something similar for my own project.

├── dist
│   ├── blog
│   ├── css
│   ├── img
│   └── js
└── src
    ├── assets
    │   └── scss
    ├── components
    ├── pages
    │   ├── blog
    └── static
        ├── img
        └── js

actually building it

all of these pages are built with esh, a:

“Simple templating engine based on shell.”

esh isn’t only used for that though. it’s a templating engine, which means you can process any file with it and make dynamic changes to that file with a simple script.

here’s an example, just in case you want a clearer idea of how it works.

        <p>this website was generated by <% whoami %>, on <% uname -a %>, on <% date %>.</p>

<% tells esh to start executing whatever is inside of <% and %>. here you can see a simple whoami, which will output the name of the current user on any *nix system.

here’s what the output should be like.

        <p>this website was generated by eti, on Darwin souls.local 18.7.0 Darwin Kernel Version 18.7.0: Sun Dec  1 18:59:03 PST 2019; root:xnu-4903.278.19~1/RELEASE_X86_64 x86_64, on Sat Jan 11 14:28:30 CET 2020.</p>

that way, it’s pretty easy to import components into my pages, i just need to write <% cat $components/head.esh %> and esh will just render it out for me.

and did i not tell you yet? it’s fast. really fast.

running: rm -rf dist
running: mkdir dist
running: esh -o dist/blog/index.html src/pages/blog/index.esh
running: esh -o dist/bookmarks.html src/pages/bookmarks.esh
running: esh -o dist/index.html src/pages/index.esh
running: esh -o dist/more.html src/pages/more.esh
running: cp src/pages/blog/2020-01-10-testing.html dist/blog/
running: cp src/pages/blog/2020-01-11-how-$(pwd)-is-built.html dist/blog/
running: sass src/assets/scss:dist/css
running: cp -r src/static/favicon.ico src/static/img src/static/js src/static/robots.txt dist/

    1.21 real         0.66 user         0.49 sys

the whole website builds under 1.25s, now try that with some nodejs framework.
just to be clear, that’s with pandoc and sass enabled. obviously, as i add more pages to the blog, the build times will get slower.

don’t take my opinion too seriously, i know why web frameworks are often slow, there’s always gonna be a huge difference in speed between a website that’s fully dynamic, and this one. one can do thousands of actions per second while the other tends to break when something that wasn’t planned by the dev tries to be added (the latter being my website).

what’s left to do

i always feel like there’s a lot left to add on my website. i usually start from the ground up and rebuild a whole new $(pwd) about every 3 to 6 months, it’s kind of become a ritual that helps me stay creative. hopefully this one will last a bit longer since i’ve had so much fun coding it, and who knows, maybe i’ll keep the same backend next time.

so here’s a little to-do list in case i get lazy or forget to do something: