Skip to content

Commit 8ed196f

Browse files
committed
add rake
Lots of refactoring * New Rakefile * Move page parts out to layouts and includes, minimal index.html * Add _sass folder * Add staging config file * New setup shell script * Updated README a lot * Add `git init` to setup.sh * use https for reveal.js * clean out submodules * update .gitignore * fix up initialize_github_pages if no gh-pages exist yet * Fix add --all * more Rakefile * Update README, config files * fix missing prepend in scripts.html * Fix scheme mismatch in footer.
1 parent 5620fd4 commit 8ed196f

21 files changed

+428
-281
lines changed

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ _site
22
.sass-cache
33
.jekyll-metadata
44
/Gemfile.lock
5-
/bin/
5+
bin/

.gitmodules

Lines changed: 0 additions & 3 deletions
This file was deleted.

Gemfile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
source "https://rubygems.org"
22
gem "jekyll"
3+
gem "rake"
4+
gem "highline"

README.md

Lines changed: 99 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -33,46 +33,32 @@ installed:
3333
gem install bundler
3434
```
3535

36-
## Starter Kit Installation
36+
* [Hub](https://github.com/github/hub#installation)
3737

38-
To start a new set of class slides, or a new presentation, clone the
39-
[repo] to your local system:
4038

41-
``` bash
42-
git clone https://github.com/gdiminneapolis/jekyll-reveal-starter-kit.git my-awesome-course
43-
```
4439

45-
where `my-awesome-course` is an empty directory you'll use to create
46-
your presentation. When you create the course name, remember to **use
47-
only lower-case letters, numbers, and dashes** in the filename. This
48-
will become part of an externally available URL, so the URL format
49-
must be valid.
40+
## Starter Kit Installation
5041

51-
Change the remote `origin` to `upstream`:
42+
1. Download the zipped source files from github at `https://github.com/gdiminneapolis/jekyll-reveal-starter-kit/archive/master.zip` and save it someplace memorable.
5243

53-
``` bash
54-
git remote rename origin upstream
55-
```
44+
2. Create and/or go to the parent directory for your new slide set.
5645

57-
Create the remote `origin` for this repository. Using the **SSH**
58-
version of the remote url, set the new `origin`;
46+
3. Unzip the zipped source you downloaded into the parent directory.
5947

60-
``` bash
61-
git remote add origin git@github.com:gdiminneapolis/my-awesome-course.git
62-
```
48+
4. Rename the newly created directory to the name you want for your Github repository.
6349

64-
Go ahead and push the current initial version up to your new repo:
50+
5. Change into the new directory.
6551

66-
``` bash
67-
git push -u origin HEAD
68-
```
52+
7. Run the setup script: `./setup.sh`
6953

70-
Initialize **and** update (both) the git submodule(s):
54+
8. Create your github repository for this repo: `hub create`. If you
55+
don't have `hub` installed, install it. If you can't, follow the
56+
direction at Github for
57+
[how to create a repository](https://help.github.com/articles/creating-a-new-repository/).
7158

72-
``` bash
73-
git submodule init
74-
git submodule update
75-
```
59+
9. Do the initial git dance: `git add --all && git commit -m "initial commit" && git push -u origin master`
60+
61+
10. Right now, create a new branch for working: `git checkout -b dev && git push -u origin dev`
7662

7763
### Keep Git Up to Date
7864

@@ -81,52 +67,48 @@ clean working tree and remote repository. When you want to start off
8167
on a new feature, or just try something out, create a branch. If it's
8268
what you want, merge it back in to master.
8369

84-
## Complete Installtion
85-
86-
To complete the installation, run the `bundle install` command. On
87-
OS/X or Ubuntu, it looks like this:
88-
89-
``` bash
90-
bundle install
91-
bundle binstub jekyll
92-
```
93-
9470
## Configuration
9571

9672
There are some configuration values to set, which are found in the
97-
`_config.yml` and `_config_publish.yml` files in the home
73+
`_config.yml`, `_staging.yml` and `_publish.yml` files in the home
9874
directory. (See
9975
[editing yaml files](https://github.com/gdiminneapolis/jekyll-reveal-starter-kit/wiki/Editing-YAML-files)
10076
in the starter kit wiki.) Edit these files in your code editor and
10177
change the settings to be what you want.
10278

103-
There are only two settings you must absolutely change:
79+
*Note:* the `baseurl` value **must** begin with a "/" character. Leave
80+
the end without a "/" character as well.
10481

105-
* `title` - change this to the title of your course
106-
* `baseurl` - change this to the repository base name
82+
### `_config.yml`
10783

108-
Using the above example, you'd have:
84+
Obvious things like the title, description, and keywords should be
85+
changed to fit your new slide set. These appear in the head of the
86+
documents, and in the default title page of the of the slide set.
10987

110-
``` yaml
111-
title: My Awesome Course
112-
baseurl: /my-awesome-course
113-
```
88+
Don't touch `baseurl` or `url` in this file. These are the values that
89+
work with the Jekyll server so you can preview your work.
11490

115-
(Thus revealing whey the restriction on the name for your repository:
116-
it's used in the URL for the slide set when published on Github
117-
pages.)
91+
### `_staging.yml`
11892

119-
*Note:* the `baseurl` value **must** begin with a "/" character. Leave
120-
the end without a "/" character as well.
93+
This file gets appended to the configuration set when building for
94+
staging. In this file, you should set the `url` field by changing the
95+
`YOUR_GITHUB_ACCOUNT` string to, well, your github account name.
96+
97+
Change `baseurl` to the name of your github repo. Make sure the string
98+
begins with a forward slash ("/").
99+
100+
### `_publish.yml`
101+
102+
Change the `baseurl` to the name of the github repo as it will be on
103+
`https://github.com/gdiminneapolis`. If you don't feel comfortable
104+
doing this, discuss this with at the organization.
121105

122106
## Spin up the Jekyll Server
123107

124108
Everything should be good to go, now, and you can start up the Jekyll
125109
development server to show the slides while you create them.
126110

127-
``` bash
128-
bin/jekyll serve
129-
```
111+
$ rake
130112

131113
You may want to pay attention to the terminal window running the
132114
server, as that is where errors will be reported in case there's
@@ -144,20 +126,31 @@ page in the browser.
144126
Slides live in the `_slides` folder, and should be named with the
145127
following conventions:
146128

147-
* start with a sequence number. By default, I've started the sequence
148-
at 000 -- this allows up to 999 slides.
129+
* start with a sequence number, the slides will be ordered by this
130+
sequence number. A good sequencing scheme is `00.00` where the first
131+
set of numbers is the class section, and the second set is the
132+
slides in that section. Example: `00.00.introduction.html`
149133
* the slide title, lowercased, only letters, numbers, and dashes --
150134
use dashes for spaces between words.
151-
* the extension `.html` (you can edit your slides in Markdown using
152-
the `.md` extension.)
135+
* the extension `.html` (you can also edit your slides in Markdown
136+
using the `.md` extension.)
153137

154138
For example, the introduction slide is:
155-
`_slides/000-introduction.html`.
139+
`_slides/00.00.introduction.html` and the very last slide would be
140+
`_slides/99.99.fin.html`.
156141

157142
A very good practice is to leave gaps in the sequence number to make
158143
it easy to rearrange slides if you want, or insert conent as you'd
159144
like.
160145

146+
If you need more than 100 sections or more than 100 slides per
147+
section, make sure your numbering allows this because the system is
148+
rather stupid about it. Example: `000.001.slide-title.html`. If you do
149+
think you need this, though, think about restructuring the
150+
presentation into more than one slide set. You can create new
151+
collections, for example, and have a root `.html` file for each
152+
collection.
153+
161154
## Slide Content
162155

163156
### Frontmatter
@@ -169,10 +162,28 @@ Every slide needs to have at least the following frontmatter:
169162
``` yaml
170163
---
171164
layout: slide
172-
title: Slide Title
173165
---
174166
```
175167

168+
You can also put other meta data in the frontmatter. A useful one is the slide's title:
169+
170+
``` yaml
171+
---
172+
layout: slide
173+
title: Let's Develop It!
174+
---
175+
```
176+
177+
And you can use the title in the body with a little Liquid:
178+
179+
``` html
180+
<h1>{{ page.title }}</h1>
181+
```
182+
183+
This comes in very handy when there are multiple `section`s in the
184+
slide to put the title on each `section`.
185+
186+
176187
### Slide Body
177188

178189
After that point, you can provide the HTML that will make up your
@@ -189,6 +200,7 @@ For example, the standard "Welcome" slide has the following content:
189200
layout: slide
190201
title: "Welcome!"
191202
---
203+
<h1>{{ page.title }}</h1>
192204
<div class="left-align">
193205
<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
194206
<p class="green">Some "rules"</p>
@@ -199,6 +211,7 @@ title: "Welcome!"
199211
<li>Have fun</li>
200212
</ul>
201213
</div>
214+
202215
```
203216

204217
which should be pretty easy to figure out.
@@ -211,104 +224,56 @@ a good presentation practice, but a lot of people seem to use it.)
211224

212225
### Code Snippets
213226

214-
Since we're all about the code, you can place snippets on the slide by
215-
wrapping them with `<pre><code>` elements. These will be nicely
216-
formatted and syntax highlighted. To tell the highlighter what
217-
language syntax to use, give the `<code>` tag the appropriate `class`
218-
attribute:
227+
Since we're all about the code, you can place code snippets on the slide using Jekyll's `highlight` feature:
219228

220229
``` html
221-
<pre>
222-
<code class="css">
223-
h1 {
224-
font-weight: bold;
225-
text-size: 120%;
226-
}
227-
</code>
228-
</pre>
230+
Here's an example:
231+
232+
{% highlight html linenos %}
233+
<div class="introduction">
234+
<h1>Introduction</h1>
235+
<ul>
236+
<li>My Life</li>
237+
</ul>
238+
</div>
239+
{% endhighlight %}
229240
```
230241

231242
Make sure to keep your snippets short, so they stay on the slide
232243
nicely.
233244

234-
### Helper Classes
245+
### Helper and Override Classes
235246

236-
`reveal.js` seems to shorten boxes on some blocks, making ridiculous
237-
line breaks when the text would look a lot better all on one line.
247+
There are several helper and override classes defined in `_sass/_overrides.scss`. Please feel free to add to this for your own work. You can add more Sass partials to the `_sass/` directory as well, just make sure they get `@import`ed in `css/main.scss`.
238248

239-
There are two helpers for this:
249+
### JavaScripts
240250

241-
* `go-wide` - sets the box width to 960px
242-
* `no-wrap` - forces the contents to never wrap on white spaces
251+
The `js/` directory holds the scripts you can change, or add your own. If you add new script files, make sure the add them in `_includes/scripts.html` as well. Follow the pattern used there for `revealConfig.js`.
243252

244253
## Build the Presentation
245254

246255
To build the slide presentation for publication, *stop* the running
247-
`jekyll` server. Then at the command line, enter:
256+
`jekyll` server with `ctrl-C`. Then at the command line, enter:
248257

249258
``` bash
250-
bin/jekyll build --config=_config.yml,_config_publish.yml
259+
rake staging:build
251260
```
252261

253262
This will build the presentation into the `_site` folder. You can open
254263
the presentation from there to see if it's as you want.
255264

256-
## Publish the Presentation
265+
## Staging the Presentation
257266

258267
By default, everything we've done will allow us to easily publish
259-
slides and notes on Github pages. Follow these steps.
260-
261-
### First time only
268+
slides and notes on your repo's Github pages. This is where you'll
269+
"stage" the presentation to allow other folks to review it as slides
270+
and give feedback.
262271

263-
We'll need the URL of the git remote origin (where we have been saving
264-
the slides). The following command on OS/X or Ubuntu will save it in a
265-
bash variable:
272+
$ rake staging:push
266273

267-
``` bash
268-
ORG=$(git remote -v | grep origin | head -1 | awk '{print $2}')
269-
```
270-
271-
Next, descend into the `_site` folder and run `git init`
272-
273-
``` bash
274-
cd _site
275-
git init
276-
```
274+
You can run both the staging build and push task with just:
277275

278-
Add the remote:
279-
280-
``` bash
281-
git remote add origin $ORG
282-
```
283-
284-
Set the branch to `gh-pages`:
285-
286-
``` bash
287-
git checkout -b gh-pages
288-
```
289-
290-
Now, add all the file, commit them, and push them up to the remote:
291-
292-
``` bash
293-
git add --all -v
294-
git commit -m "publish"
295-
git push -u origin HEAD
296-
```
297-
298-
After a couple minutes, your site will be available on Github.
299-
300-
### Every time you want to publish
301-
302-
Most of the previous steps settings will be intact in the `_site`
303-
folder, so you should only need to do the following:
304-
305-
``` bash
306-
cd _site
307-
git add --all -v
308-
git commit -m "publish"
309-
git push -u origin HEAD
310-
cd ..
311-
```
276+
$ rake staging
312277

313278
## Contributing
314279

0 commit comments

Comments
 (0)