This is an old revision of the document!
Table of Contents
Our team website is hosted at github.io, and is built using github.io's default template engine, https://jekyllrb.com/docs/ jekyll. Woah, that's a mouthful already. TODO: step back and explain a little about all of those links.
A student did a quick prototype of a site redesign. It consists of several pages, written in standard html using a popular stylesheet package called Bootstrap. (TODO: host one of those pages somewhere so we can point to it)
This page explains briefly how we took that new site design, and transplanted it into the same underlying structure, getting a fresh new look with all of the benefits.
Looking at the html pages of the prototype site, we see that each one has a lot of code that is the same, and some content that's different. The point of the template system is to store the parts that are the same only once, so they can be updated easily. We start with the simplest pages, that just have the navigation bar and some content, for example the “contact” page. The HTML for that page has the following parts
- top stuff, including the
<head>section - some stylesheet overrides
- navigation menu bar
- text content, that changes for each page.
- footer
The “resources” page is identical, except for the text content.
So, where do those go in the jekyll site?
head.html
Most of the guts of the <head> section and related stuff goes into _includes/head.html
It looks like:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>{{ page.title }}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
{% include css/default.css %}
</style>
Only one tiny piece of of this file isn't copied verbatim from the prototype site design:
the HTML <title></title> section. Here, we refer back to the original jekyll site, or the documentation,
and put in page.title. This little bit of magic gets replaced with the actual title of each page
as it gets generated.
Navigation Bar
The navigation bar code goes into _includes/nav.html. It is also copied verbatim from one of the handcrafted pages. Be careful to include the correct matching </div> for each <div>.
We also preserve the google analytics code that was in the old website.
What nav.html looks like
footer html
Our page footer consists mainly of a copyright symbol and a date. _includes/foot.html contains
<footer>
<p>© Eastbots 2019</p>
</footer>
===== end-of-page code =====
Taking another cue from the old jekyll website, we look at the new html for common code that goes at the bottom of every page body. In ''_includes/end.html'' we copy the
javascript includes used in the new page, which happen to match those in the [[https://getbootstrap.com/docs/4.3/getting-started/introduction/ | Bootstrap documentation]]
link to end.html in github.
===== Layout template for a page =====
With those include files set up, we can now stitch back together most of the standard pages in the new site.
Page layouts are done with templates in the ''_layouts'' directory.