Static Site Generation
Computer Science and Engineering College of Engineering The Ohio State University
What is Static Site Generation?
Copyright By PowCoder代写 加微信 powcoder
Computer Science and Engineering The Ohio State University
Use a program to produce HTML pages
Analogous to compiling programs Translation: source code -> machine code
Development cycle:
Write source Compile Test/inspect result
Examples of translators
Jekyll (used for “GitHub Pages”) Middleman
Lots more, see: staticsitegenerators.net
Computer Science and Engineering The Ohio State University
source generated files web site
Middleman: A Ruby Gem
Computer Science and Engineering The Ohio State University
Project is a directory (eg myproj)
$ middleman init myproj
Configuration files, README, Gemfile, etc Create source files in myproj/source
Subdirectories for CSS, images, etc Compile all the source files
$ bundle exec middleman build
Result is placed in myproj/build
Copy site to some visible location
$ rsync -avz –del myproj/build ~/WWW
Or preview locally (live reload, no build)
$ bundle exec middleman server
Why Bother?
1. Code reuse and single-point-of-control over change
2. Authoring of content in a language that is more human-friendly
3. Parameterized generation of markup and content
Let’s look at each of these benefits in turn…
Computer Science and Engineering The Ohio State University
Motivation #1: Visual Identity
Computer Science and Engineering The Ohio State University
Motivation #1: Visual Identity
Computer Science and Engineering The Ohio State University
Common headers & footers
Example: OSU web sites share nav bar Example: course web site
Duplication of code is evil
Corollary: cut-and-paste is evil Destroys single-point-of-control over change
Put common HTML in one file (a “partial”) Every document includes that file
ERb: Embedded Ruby
Computer Science and Engineering The Ohio State University
General templating mechanism
“Template” = a string (usually contents of some file)
Contains (escaped) bits of ruby
<% code %> execute ruby code (“scriplet”)
<%= expr %> replace with result of ruby expr
<%# text %> ignore (a comment) Example: a text file
This is some text.
<% 5.times do %>
Current Time is <%= Time.now %>!
Process using erb tool to generate result
$ erb example.txt.erb > example.txt
Naming convention: filename.outputlang.erb Example index.html.erb
Many alternatives, eg HAML
Generation of Site
Source files in myproj/source
$ ls source
index.html.erb syll.html.erb meet.html.erb
$ bundle exec middleman build
Result after building
$ ls build
index.html meet.html syll.html
Computer Science and Engineering The Ohio State University
A document fragment included in other documents
Include in template with partial function
<%= partial "navigation" %>
<%= partial "footer" %>
Partial’s filename begins with ‘_’ ie _navigation.erb