it’s not too hard to realize that i love static websites, here’s how mine is made.
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
dist/contains the rendered, static site.
src/is where everything is.
src/assetscontains files that need to get compiled (eg.:
scsscontains the stylesheets that’ll be compiled and copied to
src/componentscontains, well, components. my
<head>are both files that just get imported whenever a page is rendered.
src/pagescontains all of the pages (eg.:
/src/pages/bookmarks.esh, and so on…).
src/staticcontains all of the files that do not need any processing (pictures, js, favicon.ico, robots.txt, yadda yadda).
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.
<% tells esh to start executing whatever is inside of
%>. 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.
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).
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:
$(pwd)(really, you can’t find this website unless you search for the full adress, and even then, it’s full of broken links).