Skip to content

Using the Jeykll Based Website

Daniel Lee edited this page Mar 2, 2016 · 6 revisions

Jekyll is a Ruby-based framework for automatically generating static webpages. Jekyll is made significantly easier to use with themes, and this site uses the So Simple Theme.

The big advantage of Jekyll is that it separates formatting with content, making it much easier to maintain content. In particular, content can be generated using the plain-text Markdown.

Serving The Website Locally

The website can be served locally, substantially easing debugging and testing.

First, clone the repository locally on your machine. It should default to the gh-pages branch, but be sure to double check just in case.

The following assumes that you are on Linux or OS X. First change into the repository,

> cd stan-dev.github.io

then install the necessary Ruby components with

> gem install bundler
> bundle install

Make sure that you don't run bundle install as root!

Now build the static pages and start the web server.

bundle exec jekyll build
bundle exec jekyll serve

The serve command will print out the localhost URL to use (http://0.0.0.0:4000/ when I ran it).

Note that if files are editing while the server is being run then the site will be recreated and updated on the fly. It's pretty great.

Pushing the Website to GitHub

Another great feature of Jekyll is its integration with GitHub. When updates are pushed to the gh-pages branch,

> git push origin master

the website will be built and served at http://stan-dev.github.io

Updating Content

Page content is specified as markdown files in the appropriate directories. Simply edit and save. If you want to add new pages contact @betanalpha.

In order to update developer information or add new developer you'll have to edit the _data/developers.yml file. Each developer is defined with entry of the form

- name:
  affiliation:
  web:
  email:
  linkedin:
  twitter:
  avatar:

Each element is optional, although a developer without a name and affiliation will appear awkwardly!

avatar must be the name of an image file in the images/bio directory. It should be a square image with dimensions 200px X 200 px.

Those who want to brave formatting tweaks will have to explore the scss files in _sass which are compiled into CSS when the website is built. SASS is a little trickier than raw CSS because of some of the dynamic elements and includes. I've been sticking new raw CSS in _sass/variable.scss after the // STAN STYLING comment.