✍️
Site specific generators & building your own tools📜
A little history
generic.edu/~you
Wordpress ate the world
💪
Dynamic languages started flexing
net.createServer((socket) => {
socket.end('whatever you want!')
})
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' })
res.end('whatever you want!')
})
fs.writeFileSync('some/build/dir/foo.html', 'whatever you want!', 'utf8')
$ sitedown --help
Usage: sitedown [source] [options]
Example: sitedown source/ -b build/ -l layout.html
source path to source directory (default: current working directory)
--build, -b path to build directory (default: "build")
--pretty use directory indexes for pretty URLs (default: true)
--layout, -l path to layout file
--el, -e css selector for target element (default: ".markdown-body")
--github-headings, -g add anchors to headings just like GitHub (default: false)
--silent, -s make less noise during build
--watch, -w watch a directory or file (experimental)
--version, -v show version information
--help, -h show help
$ sitedown src -b dist -l src/layout.html
- .gitignore
- .travis.yml - index.html
- bin.js + changelog/
- CHANGELOG.md - index.html
- CONTRIBUTING.md + contributing/
- index.js - index.html
- LICENSE.md -----> + license/
- package.json - index.html
- README.md + test/
+ test/ + markdown/
- index.js - index.html
+ markdown/
- README.md
Trend 1: SSG's started bundling in non html-processing tools
Trend 2: Toolchain wrappers
Issues I had with these trends
{
"devDependencies": {
"postcss-cli": "^6.0.0"
},
"scripts": {
"css": "postcss src/index.css -o site/bundle.css"
}
}
npm-run-all
$ run-s # run series
$ run-p # run parallel
{
"scripts": {
"a": "run-s a:*",
"a:1": "echo a:1",
"a:2": "echo a:2",
"a:3": "echo a:3",
"b": "run-p b:*",
"b:1": "echo a:1",
"b:2": "echo a:2",
"b:3": "echo a:3"
}
}
$ npm run a # prints a:1 a:2 a:3
{
"scripts": {
"build": "npm run clean && run-p build:*",
"build:css": "postcss src/index.css -o site/bundle.css",
"build:js": "browserify src/index.js --debug | exorcist site/bundle.js.map > site/bundle.js",
"build:static": "cpx 'src/{index.html,static/**}' site",
"clean": "rimraf site && mkdirp site",
"start": "npm run watch",
"test": "run-s test:* build",
"test:deps": "dependency-check ./package.json --entry src/index.js",
"test:lint": "standard | snazzy",
"test:tape": "tape src/test.js | tap-format-spec",
"watch": "npm run clean && run-p watch:*",
"watch:css": "run-s 'build:css -- --watch'",
"watch:js": "budo src/index.js:bundle.js --dir site --live --open",
"watch:static": "npm run build:static -- --watch"
}
}