Presented by the City of Santa Monica and the Santa Monica Chamber of Commerce.
This is a fairly standard Jekyll site, hosted on gh-pages.
In fact, this site follows Jekyll's recommendation and was setup using the
github-pages gem. We use Bundler to manage gem installs.
Getting all of this working on Windows is technically possible. But it's a big hassle. Jekyll recommends using Linux (e.g. Ubuntu) or OS X, and so do we.
- Clone the repo into a local directory
$ git clone [email protected]:CityofSantaMonica/hackthebeach.git hackthebeach
$ cloning into 'hackthebeach'...
$ cd hackthebeach
- Install the
github-pagesgem and its dependencies
$ bundle install
- Launch the website locally (available at http://localhost:4000)
$ bundle exec jekyll serve --baseurl ''
The standard Jekyll structure is used. We opted for the Named HTML files with permalinks approach to keep page URLs clean.
Well they aren't Jekyll templates, but "partial template" is a name that fits. Inside _includes/templates are a
number of Liquidified HTML snippets for rendering different content within consistent stylistic containers.
For example, _includes/templates/button.html defines the reusable button component used on the site. Usage is simple through
Jekyll includes:
<div>
{% include templates/button.html href="http://example.com" text="click me" %}
</div>
Sections of a particular page are rendered using the _includes/templates/section.html template, the content
of which is stored in the corresponding folder under _includes (e.g. _includes/index for the homepage partial content)
Pages may also specify jumbotron content using the jumbotron front-matter with a path to the partial content (relative to the _includes/ directory).
See index.html for an example.
This folder contains the repeatable, structured content as YAML documents:
- events
- challenges
- team and partners
Styles are built using scss partial files inside the _sass folder, each of which is @imported into the
css/main.scss file. This is converted to the css/main.css file that is served with the site.