1. Make a Github web site using project pages
Sign up with github and make a new project
- make a new branch called "gh-pages" (click on branch and enter name, click create)
- click the '+' and make a page called index.html and enter some text, commit it
- test the site at http://username.github.io/project-name/
2. Get Jekyll
Github doesn't support php client files, for web security reasons - so that means you can't use php includes in your pages (a standard means to insert a navbar or banner site-wide). So how do you include header, navigation bar or footer in plain html on every page and also be able to change them site-wide later on?
This is jekyll's work - you use "fluid includes" in your site build pages, jekyll reads them, and inserts what you specified in them for each page, thus producing all pages in plain html. There's no need for php includes. Then you just need to commit the built site to Github.
The jekyll website
is certainly colourful, but it didn't help me understand what its really about, so here's how to use it...
Install jekyll with ruby
You will need to have a java environment installed too (openjdk isn't suitable either, the list of runtimes are here https://github.com/rails/execjs
To create your website build, make a dir, cd there and run
and browse http://localhost:4000
to see what the site (which is only a default index page so far) looks like
When you are working on the website and you want to view it as you make changes to pages, you need to make jekyll watch your build, and it will rebuild the site with every file save. But before we do that, let's see how we build...
3. Using Jekyll to build a pure html site
|include||_includes||will be called by the web page - can be the header with css files, footer section, navigation bar, banner, whatever you need included on pages that you can make changes to later on and it will affect the whole site -saves editing every single html file|
|layout||_layouts||decides what includes to insert and in what order to fit them on a page|
|site page in html||top level or a sub-dir of build||calls a layout - so the layout then determines what includes to insert on the page|
The necessary include files...
Note: I added the "id" include to the <body> tag, so that I can set the body id on each html page as I like - see the page field setter below
The class "ban" div sets the banner image using css, e.g. background-image: url(...); width: 100%; height: ...px; background-size: cover;
Note: the navbar will be included on each page, so the links have to point to the top level, with `/`.
Also, the <nav>
tags are necessary for the css to be applied!
I added "id" to each link so that the buttons can be highlighted by the corresponding body id using css.
The layout file..
Web page html files..
something like this is placed at the top, to call layout, and set certain fields in the head and on the page:
Note: keywords are deprecated - search engine robots ignore them because of abuse, such as inserting false words for better search ranking.
These three important elements are in unique div sections, i.e. navbar, banner and content..
<div class="nav"> </div>
wraps the lines in navbar.html
<div class="ban"> </div>
wraps the banner in header.html
and content on each page is wrapped in another marker, i.e.
<div class="cont"> </div>
Just so that the navbar can sit right across the page width (100%), but the content have margins and padding that won't effect the navbar, and also the banner image stay behind the navbar - possible because different styles will be applied to each div element, as determined by its "class" - or "id".
You can use the z-index tag in the style for any div class, to determine which div element will be on top when other elements are displayed in the same region.
e.g. a drop-down menu button that needs to be seen over a banner image, not hidden under it.
The z-index, e.g. "z-index: 10;", simply uses a number and the highest number has priority - this is html5.
You can make a template so that its easy to make new pages - I use bluefish html editor