@FrontendFightrs

https://www.facebook.com/frontendFightersBudapest/

@jjmu15

Front end developer

CRO - expert

Trainer

 

Sponsors

agenceinovae.com

webonic.hu/

Competition Time

Christian Maniewski

Test all the things, tooling and best practices for client side testing in JavaScript 

 Jekyll 

Your New CMS?

  • Static Site Generator
  • Markdown
  • Blog Aware (But thats not all!)
  • Can be hosted on GitHub Pages (FREE HOSTING)
  • Version Control for content!
  • Easy to learn
  • Fun & Practical
  • Super fast
  • Security

Benefits

Drawbacks

  • Markdown
  • Not client friendly
  • ANOTHER thing to learn
  • No Real time content
  • No Admin UI
  • No User Input

Getting Started

gem install jekyll
jekyll new frontendfighters-com
cd frontendfighters-com
jekyll serve

Now browse to http://localhost:4000 & Voila!

Jekyll Commands

$ jekyll build
# => The current folder will be generated into ./_site

$ jekyll build --destination <destination>
# => The current folder will be generated into <destination>

$ jekyll build --source <source> --destination <destination>
# => The <source> folder will be generated into <destination>

$ jekyll build --watch
# => The current folder will be generated into ./_site,
#    watched for changes, and regenerated automatically.

$ jekyll serve
# => A development server will run at http://localhost:4000/
# Auto-regeneration: enabled. Use `--no-watch` to disable.

How it is put together!

├── _config.yml
├── _drafts
|   ├── frontendFighters-Meetup2.markdown
|   └── why-am-i-reading-this.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2016-02-03-frontendFighters-Meetup1.markdown
|   └── 2006-01-01-how-remote-working-changed-my-life.markdown
├── _data
|   └── members.yml
├── _site
├── .jekyll-metadata
└── index.html

Front Matter

  • YAML Information Blocks
  • Must be first thing on page and displayed like below
  • Processed, not just displayed like HTML
---
layout: post
title: Frontend Fighters - Meetup 2
---

Pre-defined Front Matter Variables

  • Layout
  • Permalink
  • Published
  • Category/Categories
  • tags

Custom Front Matter Variables

  • Page Title
  • Keywords
  • Custom Meta tags
  • Data values 

Front Matter In Action

<!DOCTYPE HTML>
<html>
  <head>
    <title>{{ page.title }}</title>
    <meta name="description" content="{{ page.description }}">
    <meta name="keywords" content="{{ page.keywords }}">
  </head>
  <body>
    ...

Dont Repeat yourself!

 

Define defaults in config.yaml & Then override when needed

Writing Content

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__
_You **can** combine them_

Links
[GitHub](http://github.com)


Unordered Lists
* Item 1
* Item 2
  * Item 2a
  * Item 2b

Ordered Lists
1. Item 1
2. Item 2
3. Item 3
   * Item 3a
   * Item 3b

Data Files

.yml .yaml json .csv - all supported

accessible via site.data

meetups.js

{
    meetup1: {
        name: "Building Foundations",
        speakers: "Jamie Murphy & Aron Novak",
    },
    meetup2: {
        mame: "Jekyll & Client Side Testing with JavaScript",
        speakers: "Christian Maniewski & Jamie Murphy"
    }

}
Template.html

<ul>
{% for meetup in site.data.meetups %}
  <li>
      <strong>{{ meetup.name }}</strong> - Talks by {{ meetup.speakers }}
  </li>
{% endfor %}
</ul>

Free Hosting (GitHub Pages)

  • Code on GitHub
  • Name repository - project.github.io
  • Repository Settings -> Options
  • Custom Domain option!

Prize winner!

Thank you!

Jekyll - Your new CMS?!

By Jamie Murphy

Made with Slides.com

Jekyll - Your new CMS?!

Second talk given at Frontend Fighters, Budapest. http://www.frontendfighters.com

  • 442

More from Jamie Murphy