use ↔ to navigate foo bar
Bret Comnes
🌐bret.io
🐦@uhhyeahbret
🐈github.com/bcomnes
I work at Netlify

✍️

Site specific generators & building your own tools

📜

A little history

Website development has changed a lot over the last few years
Static sites were the norm at one point
generic.edu/~you
Apache and PHP shared hosting came sometime later
Dynamic server rendered sites hosted in multi-tenant web servers

Wordpress ate the world

💪

Dynamic languages started flexing
Python Django, Ruby on Rails Etc
Lots of PHP jokes were made
At some point this thing was launched
Webapps actually became a thing...
But they didn't work out...
And native apps became a concept
At some point Github launches
And starts offering free static hosting for developers
It includes built in support for Jekyll
A minor SSG renaissance commenced
Many (more technical) folks jumped ship from shared hosting to static site hosts...
...taking advantage of cheap (and free) static hosting...
...and escaping armature dba hell.
React and many other reactive SPA frameworks launched
Advanced GUI architecture via App Component models...
...backed by the worlds most active Module ecosystem
SSR and static SSR pushed the boundaries of webapps closer to native app capabilities
Highly capable webapps backed by static assets served from CDNs and APIs...
...and lots and lots of frameworks and tools
⏭
My story
Initial dive into webdev via static sites + git
Big fan of Jekyll + gh-pages
A slow progression from octopress to jekyll
As I picked up more Node.js and JS dev xp...
I started seeing the walls and fences of the framework I had built my sites with...
...and felt constrained withing the design of Jekyll...
...now that I had access to a much wider universe through JS and Node.js
      
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')
Netlify launches with a serene combination of Travis.CI and gh-pages like features...
...finally a git centric static site work flow was possible with ANY tool
This is fantastic news for every generalized SSG out there...
But its also good for every kind of tool out there.
What does infinite, free, static hosting look like?
What does it enable?
Site specific generators
Augmented and bespoke tooling and dashboards
Low cost experiments and technological evolution
Site specific generators

📝

Sitedown
      
$ 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
Orthogonal tooling

Trend 1: SSG's started bundling in non html-processing tools

Trend 2: Toolchain wrappers

Issues I had with these trends

What can one do?
The right tool for the right job!
How to Use npm as a Build Tool 

{
  "devDependencies": {
    "postcss-cli": "^6.0.0"
  },
  "scripts": {
    "css": "postcss src/index.css -o site/bundle.css"
  }
}
demo: 
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"
  }
}
Mad science!
BONUS: Auto-updates for my sites!
Tool specific sites
Github freed open source git repos
Hosted git repos became a ubiquitous tool you can use in creative ways
Netlify is freeing git backed static sites
Statically built apps and information can become a ubiquitous part of your work flow and projects
Set up auxiliary websites that supplement your work-flow with static analysis and information
Demo: sverweij/dependency-cruiser
Demo: storybook
Demo: bundle profiling
Build your own tools! (or at least give it a try)
Static SSR is still difficult to do in a general way
Publish your experiments!
Bret Comnes
🌐bret.io
🐦@uhhyeahbret
🐈github.com/bcomnes
🗒brets-jamstack-pdx-slides.netlify.com/