For best viewing, open the actual website here
Preliminaries:
- Fork the website
- Make github page from settings
How to edit the website:
- Edit the _config.yml
- Delete the
content/<>.html
files that you don't want as tabs or add new ones. Alphabetical order determines navigation order. - Edit them to your liking. Check example markdown code below this list for html templates.
- Edit
index.md
to your landing page description - Change
favicon.ico
to your icon - Move this file (
content/0-markdown.md
) to a different folder for future reference.
- To use Google Analytics, add your analytics id to
_config.yml
ingoogle-analytics-id:
(ifgoogle-analytics-id
is blank, the GA code will not added) - The
custom.scss
in theassets/css
folder exposes variables that can customize the basic style of website. - Give a tiny splash of color on the header and footer borders by tweaking the
$top-border
$link-color
colors links
Content pages are written in markdown and can be enhanced using Liquid includes that are packaged with the template. Start by editing the examples or creating new files in the "content" folder.
Markdown is a standard to simplify writing content for the web. GitHub markdown flavor can be used any where on GitHub and in Jekyll. The basics are intuitive, you can learn in about a minute! See Markdown in a Minute to get started.
At the top of each page is "YML front matter" used to configure the page. Use these options:
- to include a page in the header and footer navigation, add
nav:
push the text you want to appear to the file's yml front matter. Alternatively, addnav: true
to use the page'stitle:
value. All pages with anav
value will appear in the top-bar, sorted by order of filenames. For simplicity use leading numbers in the lesson page filenames to create correct order. title:
value will appear ash1
at the top of the page.description:
will appear as an indented text block below the title (optional). This gives you a chance to summarize the section contents.youtubeid:
will add an YouTube video embed (optional). Find the id in the YouTube link. For example, inhttps://youtu.be/moJgWrD6dwg
orhttps://www.youtube.com/watch?v=moJgWrD6dwg
the youtubeid ismoJgWrD6dwg
.- Alternatively, if you don't want
title
or other options to appear on the page, you can over ride the layout by addinglayout: default
Use snippets from this file to copy over to your other pages as needed:
{% capture text %}
1. Can add more complex text using markdown.
2. Use a Liquid capture to create the text.
3. It magically becomes a [Bootstrap Card](https://getbootstrap.com/docs/4.1/components/card/).
{% endcapture %}
{% include card.html text=text header="Example Card" title="Title example" img="uidaho-workshop.jpg" %}
{% capture text %}
1. Link: [GitHub](https://github.com)
{% endcapture %}
{% include card.html text=text header="Setup Overview" %}
{% include alert.html text="This is a [Bootstrap Alert](https://getbootstrap.com/docs/4.1/components/alerts/)" align="center" color="success" %}
{% capture text %}Note:
There are *soft* limits and guidelines for gh-pages usage: sites should be < 1GB, use < 100GB bandwidth per month, and make < 10 builds per hour.
If your site exceeds these quotas, GitHub will send you a notice asking you to modify the repository.
All content must follow the [community guidelines](https://help.github.com/articles/github-community-guidelines/), e.g. no violence, obscene sex, or illegal stuff.{% endcapture %}
{% include alert.html text=text color=secondary %}
{% raw %}{% include figure.html img="uidaho-workshop.jpg" alt="workshop scene" caption="Library workshops!" width="75%" %}{% endraw %}
- put any images you want to use in the "images" folder.
- in a markdown file where you want the image to appear, use the
figure.html
include on its own line, following the pattern:{% raw %}{% include figure.html img="my-cat.jpg" alt="cat" caption="My cat" width="50%" %}{% endraw %}
{% include figure.html img="uidaho-workshop.jpg" alt="workshop scene" caption="Library workshops!" width="75%" %}
{% include button.html text="Bootstrap Docs" link="https://getbootstrap.com/docs/4.1/components/buttons/" color="info" %}
{% include modal.html button="Try Me" color="success" title="Example Modal" text="This is a modal, with little text." %}
{% include video-embed.html youtubeid="moJgWrD6dwg" caption="Example video" %}