generated from evanwill/workshop-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit bbe458c
Showing
28 changed files
with
1,260 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
_site | ||
.sass-cache | ||
.jekyll-metadata | ||
.jekyll-cache |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
--- | ||
title: Prep | ||
nav: true | ||
--- | ||
|
||
# Workshop Prep | ||
|
||
To create your own materials using `workshop-template`, please create a free [GitHub account](https://github.com/join) if you do not have one already. | ||
Basic familiarity with the GitHub web interface will be helpful. | ||
|
||
For a quick introduction check out GitHub's [Hello World guide](https://guides.github.com/activities/hello-world/) and [Try Git](https://try.github.io/). | ||
|
||
It is possible to create a website with this template using only GitHub's web interface--it works great! | ||
However, for more advanced uses you will want Git, Ruby, and Jekyll installed on your computer to do local development. | ||
|
||
1. Have a [GitHub](https://github.com) account. | ||
2. Fork or import this [repository](https://github.com/evanwill/workshop-template). | ||
3. Optional: have [Git](https://git-scm.com/), [Jekyll](https://jekyllrb.com/), and a nice [text editor](https://code.visualstudio.com/) installed. | ||
|
||
# Local Jekyll Setup [optional] | ||
|
||
## Install Git | ||
|
||
[Git](https://git-scm.com/) is a [free](https://www.gnu.org/philosophy/free-sw.en.html), [distributed](https://en.wikipedia.org/wiki/Distributed_version_control) version control system. [GitHub](https://github.com/) is a Git repository hosting service, a place to store and sync your work in the cloud--your Jekyll and GitHub Pages projects will be under Git version control, so you need the software on your machine. | ||
|
||
- Windows: install [Git for Windows](https://git-for-windows.github.io/) using the default options. This will give you Git, Git Bash, and Git GUI. Git Bash is a great terminal that lets you use UNIX style commands on Windows. | ||
- Mac: check if Git is already installed by opening terminal and typing `git --version`. If you do not have it, download the official [Mac installer](https://git-scm.com/downloads). | ||
- Linux: check if Git is already installed by opening terminal and typing `git --version`. If you do not have it, install from your distribution's software center or package manager (for Ubuntu `sudo apt install git`). | ||
|
||
If you are interested in using a visual GUI application integrated with GitHub, Windows and Mac users should also install [GitHub Desktop](https://desktop.github.com/) using the default options. | ||
You can install GitHub Desktop in addition to other versions of Git. | ||
|
||
There are other [GUI apps available](https://git-scm.com/downloads/guis) for managing and visualizing Git repositories, including Linux options. | ||
|
||
## Install Ruby | ||
|
||
[Ruby](https://www.ruby-lang.org/en/) is a fairly young and developing programming language with some unique features. | ||
To use Jekyll, you do not need to know anything about Ruby, but if you are curious, check out [Ruby in 20 minutes](https://www.ruby-lang.org/en/documentation/quickstart/). | ||
Frustratingly, different versions have many dependency and incompatibility problems. | ||
Because of these issues, many use Ruby Managers, such as [RVM](http://rvm.io/), to switch between versions. | ||
However, if you are just interested in working with Jekyll, using an installer for your OS should be sufficient. | ||
Jekyll requires a Ruby version > 2.2.5. | ||
|
||
- **Windows:** Use [RubyInstaller for Windows](https://rubyinstaller.org/). | ||
- First, [download](https://rubyinstaller.org/downloads/) the suggested stable version "WITH DEVKIT" (as of this writing, Ruby+Devkit 2.4.X (x64)) and double click to install. Use the install defaults, but make sure "Add Ruby executables to your PATH" is checked. On the final step, ensure the box to start the MSYS2 DevKit is checked. | ||
- Second, the installer will open a terminal window with options to install MSYS2 DevKit components. Choose option 3, "MSYS2 and MINGW development toolchain", or simply press ENTER to install all the necessary dependencies. (This installer can be restarted by typing `ridk install` into a command prompt) | ||
- **Mac:** OS X has a version of Ruby installed by default. Check the version with `ruby -v`. If it is > 2.2.5 you can use the system Ruby. However, a newer version can be installed using [Homebrew](https://brew.sh/), `brew install ruby`, or a manager such as [rbenv](https://github.com/rbenv/rbenv) or [RVM](http://rvm.io/). Check the official Jekyll [Mac install docs](https://jekyllrb.com/docs/installation/#macOS) for tips. | ||
- **Linux:** Even though the version will not be the most up-to-date, the simplest method is to use your distro's repositories. For example on Ubuntu, `sudo apt install ruby-full`. Make sure the repository version is > 2.2.5. You will also need the build tools Make and GCC, on Ubuntu get them with `sudo apt install build-essential`. For a more up-to-date version, use a manager such as [RVM](http://rvm.io/). | ||
|
||
## Install Jekyll | ||
|
||
> Note: Jekyll does not officially support Windows, however it is cross platform (they just don’t officially write windows documentation or check for bugs). | ||
> There is a [Jekyll on Windows](https://jekyllrb.com/docs/windows/#installation) page, but it can be out of date and inaccurate. | ||
Jekyll is a Gem, a software package installed via Ruby's management system called RubyGems (similar to Python's Pip). | ||
Open a terminal and type: | ||
`gem install jekyll bundler` | ||
|
||
This will take a minute as Gem installs all the dependencies and builds extensions. | ||
|
||
> Note: Linux users may need to `sudo`, to avoid this install Ruby using [RVM](http://rvm.io/). | ||
> On Windows, if `gem` returns an error about secure connections, it may be necessary to update to a newer version of RubyGems as some versions have out of date SSL certificates. | ||
> Manually install the newer version by downloading the [RubyGems zip package](https://rubygems.org/pages/download#formats). | ||
> Unzip the package, then run `ruby setup.rb` in the directory. | ||
# Text Editor | ||
|
||
When working with code you should have a good text editor. | ||
Windows notepad does not handle UTF-8 encoding or UNIX line endings that are standard for cross platform applications. | ||
For basic editing, Windows [Notepad++](https://notepad-plus-plus.org/), Mac TextEdit, or Linux Gedit are sufficient. | ||
However, a more complete code editor will be helpful for managing Jekyll projects. | ||
|
||
Open-source cross platform suggestions: | ||
|
||
- [Visual Studio Code](https://code.visualstudio.com/) | ||
- [Atom](https://atom.io/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
--- | ||
title: Intro | ||
nav: true | ||
--- | ||
|
||
# Introduction | ||
|
||
One amazingly useful GitHub feature is [GitHub Pages](https://guides.github.com/features/pages/){:target='_blank'}. | ||
It provides free static web hosting from any repository. | ||
Gh-pages is intended to host relatively simple sites for your GitHub portfolio, project, or documentation. | ||
Because it is free and a valuable transferable skill, this is a great option for teaching and learning. | ||
|
||
Many organizations are using GitHub to collaboratively create and publish instructional websites. | ||
For example: | ||
|
||
- [Programming Historian](http://programminghistorian.org/) | ||
- [Software Carpentry](https://software-carpentry.org/), [Data Carpentry](http://www.datacarpentry.org/), [Library Carpentry](https://librarycarpentry.org/) | ||
- this site! | ||
|
||
> 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. | ||
# workshop-template | ||
|
||
`workshop-template` is a Jekyll project to create a simple workshop website, based on the [Minima theme](https://github.com/jekyll/minima){:target='_blank'}, designed for hosting on [gh-pages](https://pages.github.com/){:target='_blank'}. | ||
|
||
It works best for about 5 pages of instructions, plus index, all written in Markdown. | ||
The navigation to the main pages is exposed at top and bottom of each page for easy stepping through the lessons. | ||
|
||
## Why? | ||
|
||
Rather than making slides for a workshop, why not make a website? | ||
It's easier to write, access, share, and reuse. | ||
GitHub and gh-pages makes this super easy. | ||
|
||
It is a better [Open Educational Resource](https://en.wikipedia.org/wiki/Open_educational_resources){:target='_blank'} since anyone can easily fork and adapt! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
title: Start | ||
nav: true | ||
--- | ||
|
||
# Get Started | ||
|
||
The `workshop-template` [repository](https://github.com/evanwill/workshop-template) is a template project--to get started quickly, make a copy and fill in your own content and customizations. | ||
This [site](https://evanwill.github.io/workshop-template/) demonstrates the output on gh-pages, and the content pages serve as examples. | ||
|
||
Overview: | ||
|
||
1. Copy the code to your own repository by clicking the green "Use this template" button on [workshop-template](https://github.com/evanwill/workshop-template) (alternatively, import the [repository](https://github.com/evanwill/workshop-template) on GitHub or manually copy the files into a new repo). | ||
2. Clone to your local machine, or work on the GitHub web interface to edit files. | ||
3. Edit the `_config.yml` with your info. | ||
4. Edit the content pages in markdown. | ||
5. Add images to the "images" folder. | ||
5. Push to GitHub (or commit on the web interface). | ||
6. In your repo's settings, activate gh-pages, using main branch. | ||
|
||
## Config | ||
|
||
Edit the `_config.yml` to get your workshop website set up. | ||
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
Pellentesque eu velit felis. | ||
Duis fermentum est nec mollis scelerisque. Vivamus interdum efficitur mauris, et dignissim velit egestas vitae. | ||
Cras dignissim sagittis varius. Pellentesque eu laoreet dui. | ||
|
||
``` | ||
Praesent congue: | ||
eros = eget | ||
accumsan euismod | ||
``` | ||
|
||
Praesent congue, eros eget accumsan euismod, lorem dui vulputate leo, tincidunt efficitur risus metus ut risus. | ||
Sed pharetra ipsum orci, eu cursus turpis semper egestas. | ||
|
||
> Pellentesque sodales, felis auctor auctor rutrum, velit quam interdum erat, sit amet placerat urna nisl at justo. | ||
## Substep | ||
|
||
Nam maximus eget orci id pretium. Pellentesque feugiat mauris eu nulla viverra consectetur. Nullam rutrum augue eget mauris accumsan, ac elementum tellus lacinia. Sed pretium aliquet tortor in ornare. Sed eget aliquet metus. Integer sed arcu turpis. Duis auctor sollicitudin semper. Cras posuere, neque nec varius cursus, massa libero sodales elit, sed tempor nibh ex sit amet nisi. Quisque consequat ante quis diam malesuada, in imperdiet tortor mattis. Aliquam erat volutpat. Morbi tortor elit, sagittis quis nibh ut, gravida cursus arcu. | ||
|
||
{% include figure.html img="uidaho-workshop.jpg" alt="workshop scene" caption="Be sure to replace all the example values!" width="75%" %} | ||
|
||
Ut dapibus lectus tristique efficitur dictum. Quisque efficitur ornare sagittis. Donec ex sem, volutpat quis scelerisque quis, scelerisque non neque. Vivamus convallis felis vel eros pulvinar faucibus. Aliquam finibus pretium odio a pharetra. Nullam ac commodo magna. Fusce et feugiat sem. Nunc vitae scelerisque metus. Aenean sodales placerat mi in aliquet. Curabitur pulvinar auctor mauris quis faucibus. Ut commodo imperdiet ante, at dignissim tellus ultricies ut. Donec at lacus ultrices sem vulputate semper. Donec commodo porta nunc, non tristique mi interdum quis. Phasellus rhoncus bibendum ipsum, ac malesuada augue pulvinar et. Etiam finibus lacus massa, sit amet faucibus lorem consequat sit amet. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
title: Content | ||
nav: true | ||
--- | ||
|
||
# Create Lesson Content | ||
|
||
Edit the lesson Markdown files to create content pages. | ||
|
||
[Markdown](https://daringfireball.net/projects/markdown/) is a standard to [simplify writing](https://evanwill.github.io/_drafts/notes/writing-markdown.html) content for the web. | ||
[GitHub markdown flavor](https://help.github.com/articles/basic-writing-and-formatting-syntax/) 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](https://evanwill.github.io/_drafts/notes/markdown-minute.html) to get started. | ||
|
||
When creating content pages: | ||
|
||
- to include a page in the nav, add `nav: true` to the file's yml front matter. | ||
- the `title:` value will appear in the nav, sorted in the order of filenames. For simplicity use leading numbers in the lesson page filenames to create correct order. | ||
- the default layout does not add `title` to the page, so it can be a short for the nav. So add a title in the Markdown content. | ||
|
||
## Add Figures | ||
|
||
Using figure include: | ||
|
||
- put all images in the `images` directory. | ||
- figures will be centered, and can optionally be given a caption and percentage width. | ||
- in a markdown file where you want the image to appear, use the `figure.html` include on its own line. | ||
- pattern: `{% raw %}{% include figure.html img="my-cat.jpg" alt="cat" caption="My cat" width="50%" %}{% endraw %}` | ||
|
||
## Additionally | ||
|
||
Lorem ipsum `dolor sit amet`, consectetur adipiscing elit. Pellentesque eu velit felis. | ||
Duis *fermentum est nec* mollis scelerisque. | ||
Vivamus interdum **efficitur mauris**, et dignissim velit egestas vitae. Cras dignissim sagittis varius. | ||
Pellentesque eu laoreet dui. | ||
Praesent congue, eros eget accumsan euismod, lorem dui vulputate leo, tincidunt efficitur risus metus ut risus. | ||
|
||
{% include figure.html img="uidaho-workshop.jpg" alt="workshop scene" caption="Make sure participants are on the same page!" width="75%" %} | ||
|
||
> Sed pharetra ipsum orci, eu cursus turpis semper egestas. | ||
> Pellentesque sodales, felis auctor auctor rutrum, velit quam interdum erat, sit amet placerat urna nisl at justo. | ||
## Furthermore... | ||
|
||
Nam maximus eget orci id pretium. Pellentesque feugiat mauris eu nulla viverra consectetur. Nullam rutrum augue eget mauris accumsan, ac elementum tellus lacinia. Sed pretium aliquet tortor in ornare. Sed eget aliquet metus. Integer sed arcu turpis. Duis auctor sollicitudin semper. Cras posuere, neque nec varius cursus, massa libero sodales elit, sed tempor nibh ex sit amet nisi. Quisque consequat ante quis diam malesuada, in imperdiet tortor mattis. Aliquam erat volutpat. Morbi tortor elit, sagittis quis nibh ut, gravida cursus arcu. | ||
|
||
Ut dapibus lectus tristique efficitur dictum. Quisque efficitur ornare sagittis. Donec ex sem, volutpat quis scelerisque quis, scelerisque non neque. Vivamus convallis felis vel eros pulvinar faucibus. Aliquam finibus pretium odio a pharetra. Nullam ac commodo magna. Fusce et feugiat sem. Nunc vitae scelerisque metus. Aenean sodales placerat mi in aliquet. Curabitur pulvinar auctor mauris quis faucibus. Ut commodo imperdiet ante, at dignissim tellus ultricies ut. Donec at lacus ultrices sem vulputate semper. Donec commodo porta nunc, non tristique mi interdum quis. Phasellus rhoncus bibendum ipsum, ac malesuada augue pulvinar et. Etiam finibus lacus massa, sit amet faucibus lorem consequat sit amet. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
--- | ||
title: Resources | ||
nav: true | ||
--- | ||
|
||
# Resources | ||
|
||
To learn how to use `workshop-template`, the [Readme](https://github.com/evanwill/workshop-template/blob/main/README.md) and content pages have some documentation. | ||
|
||
Other workshop sites using this template: | ||
|
||
- [get-git](https://evanwill.github.io/get-git/) | ||
- [hello-arduino](https://evanwill.github.io/hello-arduino/) | ||
- [clean-your-data](https://evanwill.github.io/clean-your-data/) | ||
- [go-go gh-pages](https://evanwill.github.io/go-go-ghpages/) | ||
- [Make @ the MILL](https://uidaholib.github.io/make-at-the-mill/) | ||
|
||
# Reference | ||
|
||
### Git & GitHub | ||
|
||
[GitHub](https://github.com/){:target="_blank"} is a popular web service for hosting Git repositories--with benefits! | ||
It provides a handy web interface for editing and collaborating on repos, as well as, built in project management features and static web hosting. | ||
Accounts are free for public repositories--private repositories are available on a subscription pricing model. | ||
To learn more check out Hellow World on [GitHub Guides](https://guides.github.com/){:target="_blank"} or [GitHub Training](https://services.github.com/on-demand/){:target="_blank"}. | ||
|
||
### Markdown | ||
|
||
[Markdown](https://daringfireball.net/projects/markdown/) is a standard to simplify writing content for the web. | ||
[GitHub markdown flavor](https://help.github.com/articles/basic-writing-and-formatting-syntax/) can be used any where on GitHub and in Jekyll. | ||
|
||
- [Markdown in a Minute](https://evanwill.github.io/_drafts/notes/markdown-minute.html) | ||
- GitHub Guide [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) | ||
|
||
### YAML | ||
|
||
[YAML](http://www.yaml.org/) is a human readable plain text data format. | ||
It is used in Jekyll for configuration, site data, and front matter. | ||
Jekyll projects are [configured](https://jekyllrb.com/docs/configuration/) using the `_config.yml` file. | ||
|
||
### Liquid | ||
|
||
[Liquid](http://shopify.github.io/liquid/) is a flexible template language. | ||
[In Jekyll](https://jekyllrb.com/docs/templates/) it allows you to layout pages built from modular components and data, using the `_includes`, `_layouts`, and `_data` directories. | ||
Liquid includes features such as operators, loops, and filters to manipulate raw content. | ||
Liquid statements are enclosed by {% raw %}`{% %}`{% endraw %} and variables in {% raw %}`{{ }}`{% endraw %}. | ||
|
||
### Sass | ||
|
||
[Sass](http://sass-lang.com/) is a CSS extension / preprocessor. | ||
All normal CSS is valid SCSS, but Sass adds many powerful functions and programatic features. | ||
Writing SCSS is often easier and more sensible, for example by supporting nesting, variables, and operators. | ||
Jekyll lets you write SASS in modular chucks called partials, in the `_sass` directory, that will be combined and compiled into normal CSS files when the site is built. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
--- | ||
title: "404" | ||
# this creates a 404 page automatically handled by gh-pages | ||
layout: default | ||
permalink: /404.html | ||
--- | ||
|
||
<div class="page"> | ||
<h1 class="page-title">404?</h1> | ||
<span>Sorry, but the page you were trying to view does not exist.</span> | ||
<pre><code> | ||
____________ | ||
< Sorry, 404 > | ||
------------ | ||
\ ^__^ | ||
\ (oo)\_______ | ||
(__)\ )\/\ | ||
||----w | | ||
|| || | ||
|
||
</code></pre> | ||
</div> |
Oops, something went wrong.