Today, we built a slide presentation template using the Reveal.js framework. This framework is great for HTML-based presentations and it is a great hack for any technical speaker for the following reasons:

1) It is browser-based: you don’t need Power Point or Keynote to deliver your presentation (but you would need an internet connection)
2) Is is great for showing code: you can display code in a nice and concise way
3) It has an additional functionality: you can move up/down and left-right. So, you can better define the sections of your presentation
4) It is highly customizable: you can add bell and whistles or all sorts in custom css and js files.

Here is the template:

Reveal.js Template

Basically, every slide is a considered a section: <section> I am a slide </section>, and then you can treat every single slide as a HTML page.

Today’s hack is about turning Friday Hacks’ boring static Github Pages website into a more dynamic blogging platform powered by Jekyll. In order to do that, I set to find a sample template that would fit the style and content of this site. The HPSTR theme by mmistakes was the perfect fit

Before

Friday Hacks 1 FridayHacks website, using static Github Pages

After

Friday Hacks 2 FridayHacks website, using HPSTR Jekyll theme

First, I had to fork the HPSTR repository, cloned it on my sandbox, and installed dependencies with

 bundle install

Then, I modified certain files such as _config.yml and navigation.yml, and I also did a bit of clean up (removed sample blog posts and unused pictures).

Now, every time I want to add a new post, I add it to the _posts folder with a .md extension. Then, need to test it in localhost by changing url parameter in the _config.yml file to serve in localhost instead of the fridayhacks.com url:

 url: #http://fridayhacks.com

Then, I need to run the following commands:

 bundle exec jekyll build
 bundle exec jekyll serve

If all goes well, I uncomment the url in the _config.yml file and push it directly to Github.