alex996 / static-site

Static site with JavaScript & Markdown

Roadmap

🎉 DONE

• Set up rollup + babel build step
  • transpile, uglify ES6+ (prod only), copy index.html
• Wire up preact + preact-router
  • h pragma in babel, initial routes, 404 fallback
• Add bulma + rollup CSS plugin
  • concat into static styles.css only, not runtime
• Convert Markdown to HTML in JSON
  • unified libs + script to loop files, generate html, & embed in json
• Fetch JSON & inject HTML for each route
  • page component, either fetch [/path].json or render component prop
  • loading state; render <Error /> if failed to load or 404
• Set up pre-rendering (react-snapshot)
  • crawl all pages & generate static HTML, then hydrate on FE
• Enable nested routes, e.g. /blog/how-i-build-this-site
  • loop recursively & mirror tree structure & filenames
• Generate index.json listing for each subdir (/blog, /series)
  • should include embed metadata in md
    • title, published at (Unix timestamp), tags, img URL
  • posts should be ordered by publish date (desc)
• Only pull in required Bulma modules (saas)
  • customizing vars (need rollup saas plugin)
• Add subtle loading effect (nanobar)

🏗️ TODO

• Markdown themes (e.g. GitHub), code snippets highlight
• Embed [hash] in assets filename (rollup plugin)
• Load /build/img/*.png assets + minify with imagemin
  • allow embeding img in md files? (raw <img /> HTML)
• Set up unit tests with jest
• .editorconfig file
• sitemap.xml, robots.txt (ignore json?)
• GA signup + add script
• Don't (re-)generate json if MD didn't change?
• es (type='module') and iife (nomodule, IE 11?) bundles (see this)
  • ⚠️ blocked by rollup-plugin-terser
• scripts can be executable binaries (see this)
• Set up a build pipeline (lint, test, build)
• Deploy to static host (Now / Surge) + domain

🚀 POC

• replace preact with inferno + inferno-router
  • compare bundle size, load time benchmarks, composition vs inheritance
• email contact form + reCAPTCHA
• disqus comments for each blog post / video