Creating Your First Slide

Getting started

Requirements:

• Ruby 2.5.0
• Git

Fork a repository. More information can be found here.

Use the gem install to install bundler:

gem install bundler

Install all of the required gems:

bundle install

Serve your site locally:

jekyll s --config _config.yml,_config_dev.yml \
         --trace \
         --profile \
         --incremental

Now browse to http://localhost:4000

Directory Structure

An overview of what each of these does:

_config.yml and _config_dev.yml files are stored configuration data, such as:

Site settings	These are used to personalize the site.
title	The title of the Page.
description	The description of the Page.
baseurl	The subpath of the site.
url	The base hostname & protocol for the site.
repository	The URL to the repository.

_includes - these are the partials that can be mixed and matched by our layouts and slides to facilitate reuse.

• _includes/header.html - header partials which are included in the _layouts/slide.html and _layouts/page.html
• _includes/footer.html - footer partials which are included in the _layouts/slide.html

_layouts - templates that wrap slides.

• _layouts/page.html - this layout is used for group page purpose.
• _layouts/slide.html - this layout is used for slide page purpose.

slides - the slides which are related to the one group/category (e.g. git or trailblazer) - can be nested in a separate directory (all new slides will be added to this folder).

assets - this contains the static files required for the application’s front-end grouped into folders based on their type.

vendor - a place for all third-party code.

.gitignore - this file tells git which files (or patterns) it should ignore. See GitHub - Ignoring files for more info about ignoring files.

.ruby-version - This file contains the default Ruby version.

Gemfile and Gemfile.lock - These files allow us to specify what gem dependencies are needed for the application. These files are used by the Bundler gem. For more information about Bundler, see the Bundler website.

index.markdown - provided that the file has a front matter section, it will be transformed by Jekyll.

README.md - This is a brief instruction manual for the application.

Let's practice

Let's assume that we need to create a presentation that will consist of a few pages:

• On the first page, we need to display the name of the presentation.
• On the second page, we need to display some text and image.
• And on the last page, we need to display just some text.

To do this, you only need just a few actions:

1. Create a presentation file at the slides directory.

$ touch slides/hello-world.markdown

2. Let's create our first page with the next content:

---
layout: slide
title:  Hello World
---

# Hello World

--

# :wave:

where:

• layout: - specification what layout we're using in our pages (https://jekyllrb.com/docs/layouts/).
• title: - the title of the Page.
• --- - horizontal slide divider
• -- - vertical slide divider

3. In the next step, we need to display an image on the separate page:

---

![](/assets/images/hello-world.png)

TIP: to display an image, you need to add it to the assets/images folder.

4. In the last step, we need to display a simple text on the separate page:

---

# The End

> Have any questions?

5. To display a link to this presentation you need to add a link in the index.markdown

- [Hello World](/slides/hello-world)
  <br>
  <small>My first slides.</small>

Documentation

• Mastering Markdown
• Markwown
• Jekyll