This is the source code for my website/blog, tomdale.net. It is a handrolled static site generator written in TypeScript.
The source code for the static site generator is released under the MIT license; I hope it is useful to you!
The contents of the site (i.e., anything not inside the src/ directory)
remains my copyright with all rights reserved.
src/- the source code for the static site generatorpages/- Individual pagesposts/- Blog posts, by convention grouped by year (but it'll find 'em wherever you put 'em)public/- Static content that will get included during a deploystyles/- Sass stylesheets.style.scssis the entry point; everything else must be manually imported.templates/- Handlebars templates. Partials start with an underscore.dist/- the built output
npm start- starts the development server at http://localhost:4000/npm run build- builds a static version of the site todist/npm run build:production- same as above with minification and other optimizations appliednpm run minify- runs the minification step againstdist/npm run deploy- manual deploy to Netlify
The Generator (src/generator.ts) is like a router (in fact it uses
route-recognizer.js to do route matching). Files are scanned to create an
in-memory database and wrapped in the appropriate model class (see
src/models/).
In development, an Express server runs and routes requests to the generator, which finds the appropriate model in the in-memory database and renders it with the route's Handlebars template. (The file database and templates are rebuilt every request so changes are reflected without having to restart the server.)
When doing a static build of the site, the contents of the database are
enumerated and a representation for each item is built. (This is where
route-recognizer.js's ability to both serialize and deserialize paths really
comes in handy.)
Markdown content is rendered with marked and syntax highlighting is done with
highlight.js (see src/utils/marked.ts).
Media files can be colocated with a Markdown source file and inherit its URL. So, for example, if you had:
posts/foo/bar/baz/bang/dumb-post.mdposts/foo/bar/baz/bang/some-image.pngposts/foo/bar/baz/bang/songs/power-of-love.mp3
They would end up being generated at the URLs:
2017/06/dumb-post/index.html(rendered post)2017/06/dumb-post/some-image.png2017/06/dumb-post/songs/power-of-love.mp3
TLDR you can put any post or page in a directory and any assets you throw in there with it will be grouped correctly based on the routing rules specified in the generator.