jekyllDecent

Example Blog

Home Offline CV About

All posts in one long list

Theme Installation and Usage

Jun 8, 2016 on Jekyll Theme GitHub Installation

This is a blog template for a static site generator named Jekyll based on a Ghost template named Decent. If you like to see the theme in production have a look at jwillmer.de.

Screenshots

Installation

To generate/host the blog you need to install Jekyll.
For the plugins (github-pages) you need to install Bundler: gem install bundler
- Open a command prompt and install the plugins (github-pages): bundle install
- On Windows you can get an exception if you have not the latest rubygems. To solve it you get the latest rubygems or you can read How to install Jekyll and pages-gem on Windows (x64) or you just remove the plugins by deleting the Gemfile and delete all gems: from the _config.yml.

Build

To build the static site you can use the generated site folder that Jekyll creates when you use jekyll serve or you can build it explicitly with jekyll build.
To auto refresh your browser on changes run jekyll with the following command jekyll liveserve
If you like to use GitHub to host your blog you can fork this project and publish the code to gh-pages. GitHub has jekyll included and will generate the site for you.

When using WSL on Windows you have to use bundle exec jekyll serve --force_polling --livereload

User Content

Blogposts can be written in Markdown.

The folder for blog content is _posts
For author details you need to modify _data/authors.yml
For cv details you need to modify _data/cv.yml
If you change the author in _data you need to change the author attribute in _posts and _pages as well
For site properties (like the name) you need to modify _config.yml and robots.txt

After modifying *.yml files you need to restart jekyll to take effect.

YAML Features

Following (additional) features are supported in the header (YAML Front Matter) of each post. A detailed description can be found in the YAML Custom Features post.

---
title:         Example      #Page/post title
author:        jwillmer     #Page/post author
cover:         /image.jpg   #Optional: Posibillity to change cover on a post/page
redirect_from: /foo         #Optional: Redirect url
visible:       false        #Optional: Hide page from listing in the menu.
weight:        5            #Optional: Influence sorting of pages in the menu
menutitle:     Offline      #Optional: Use a secondary name in the menu/post list
tags:          hallo welt   #Optional: Will be displayed as tags and as keywords in posts
keywords:      hallo welt   #Optional: Will add keywords to a page
language:      en           #Optional: Will set a specific language of the page
comments:      false        #Optional: Will enable/disable comments in your post 
math:          false        #Optional: Will enable math formulas
citation:      [..]         #Optional: Additional meta tags for scholar articles
---

License

The theme is released under The MIT License (MIT).

The MIT License (MIT)

Copyright (c) 2016 Jens Willmer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Theme Features

Jun 7, 2016 on Jekyll Theme GitHub Installation

The features described in this section are specific for this template. All other language features can be found in the kramdown documentation.

Image Features

Parallax Effect

Keep in mind that paralax effect will not be captured if you like to print the page.

<div class="bg-scroll" style="background-image: url('{{ "/media/img/mountain1.jpg" | absolute_url }}')"></div>

Caption for Image

<figure>
   <img src="{{ "/media/img/mountain2.jpg" | absolute_url }}" />
   <figcaption>A nice mountain.</figcaption>
</figure>

Image Allignment

![]({{ "/media/img/mountain3.gif#right" | absolute_url }})
![]({{ "/media/img/mountain2.gif#left" | absolute_url }})

Allignment with caption

<aside>
   <figure class="left">
      <img src="{{ "/media/img/mountain3.jpg#left" | absolute_url }}" />
      <figcaption>What a view!</figcaption>
   </figure>
</aside>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan ante nulla, quis pulvinar nibh tempus sed. In congue congue odio, vel ornare mauris ultrices vel. Vestibulum tristique eros at enim vulputate fringilla. Nullam non augue sit amet elit interdum tempus non ut justo.

Phasellus ut ipsum id leo sagittis pretium a quis neque. Maecenas rutrum lectus id magna malesuada, non dapibus neque tincidunt. Suspendisse ultrices accumsan eros, sit amet facilisis quam hendrerit a. Integer sed felis et diam efficitur accumsan. Suspendisse facilisis lectus non orci mattis vestibulum. Suspendisse molestie vulputate nunc non tincidunt. Maecenas vulputate, mauris ut rhoncus vulputate, tellus augue aliquet nibh, vel egestas nulla ipsum bibendum lorem. Pellentesque posuere laoreet lectus eget luctus. Vestibulum mattis ut ligula sed sodales. Vestibulum sit amet viverra arcu.

Fullscreen image

<div class="large">
   ![]({{ "/media/img/mountain2.jpg" | absolute_url }})
</div>

With caption

<figure class="large" markdown="1">   
   ![]({{ "/media/img/mountain2.jpg" | absolute_url }})
   <figcaption>On top of the mountain!</figcaption>
</figure>

Image Gallery

<div class="album">
   ![]({{ "/media/img/Screenshot_2016-04-09-19-16-28.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-04-02-00-48-25.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-04-01-12-03-36.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-04-01-12-01-33.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-03-24-12-13-58.png" | absolute_url }})
   ![]({{ "/media/img/Screenshot_2016-03-17-22-50-05.png" | absolute_url }})
</div>

With caption

<div class="album">
   // ...
   <figure>
      <img src="{{ "/media/img/mountain2.jpg" | absolute_url }}" />
      <figcaption>On top of the mountain!</figcaption>
   </figure>
   <figure>
      <img src="{{ "/media/img/mountain3.jpg" | absolute_url }}" />
      <figcaption>What a view</figcaption>
   </figure>
</div>

Sourcecode Features

With language highlighting

    ```html
    <script>
        var decentThemeConfig = {
            ga: 'YOUR TRACK ID'
        };
    </script>
    ```

With language highlighting, line numbers and line highlighting

<pre data-line="5" class="line-numbers language-javascript"><code>
   Array.prototype.uniq = function () {
       var map = {};
       return this.filter(function (item) {
           if (map[item]) {
               return false;
           } else {
               map[item] = true;
               return true;
           }
       });
   };
</code></pre>

Author in quote

> Our destiny offers not the cup of despair, but the chalice of opportunity. So let us seize it, not in fear, but in gladness.
> 
> <cite>——R.M. Nixon</cite>

Our destiny offers not the cup of despair, but the chalice of opportunity. So let us seize it, not in fear, but in gladness.

——R.M. Nixon

Attention Box

<div class="tip">
Chemicals including paint and thinners must be stored in labelled containers that are in good condition, as provided for in the regulations. Liquids must be placed in holding tanks.
</div>

Chemicals including paint and thinners must be stored in labelled containers that are in good condition, as provided for in the regulations. Liquids must be placed in holding tanks.

404 Page

The 404 page has a fuzzy search implemented that lists urls that are similar to the entered url. Try it out: Unknown URL

JSON API

The theme offers a JSON API for the blog posts. You can query all blog posts via: /api/posts.json

PDF and PowerPoint integration

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://img.labnol.org/di/PowerPoint.ppt' frameborder='0'></iframe>

MathJax integration

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

The result of this code:

\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

More formating features can be found in the Kramdown syntax.

YAML Custom Features

Apr 5, 2016 on Jekyll YAML Features Explained

In this short post I changed the title that is displayed on the front page from YAML Custom Features to YAML Features.

---
title:             "YAML Custom Features"
menutitle:         "YAML Features"
---

I also added a redirect to this post. If you browse to YAML-Feature-Redirect you should be redirected to this page. This only works if you have not removed the plugins.

---
redirect_from:     "/YAML-Features-Redirect"
---

If you like to redirect from multible sources you can specify it as an array.

---
redirect_from:  
  - "/YAML-Features-Redirect/"
  - "/blog/old-category/YAML-Features/"
---

I also changed the cover image for this block via YAML.

---
cover:         /assets/mountain-alternative-cover.jpg
---

To generate keywords for the search engines I use the tags that you specify in the post. If you are writing a page you need to specify keywords instead of tags.

---        
tags:          Jekyll YAML Features Explained  #Only used in posts!
keywords:      Jekyll YAML Features Explained  #Only used in pages!
---

Post will be sorted by category on the front page. This is how you define the category in YAML.

---        
category:     Readme
---

On a page I have additional options. For instance I can hide the page from the menu by setting the visible tag to false.

---        
visible:       false     
---

If I like to have the page in the menu I can add weight to the page in order to specify a position in the menu.

---        
weight:       5  
---

The default language of your blog is defined in the _config.yml file but if you like to write a post/page in another language you can use the language attribute. This will specify that you are using another language on this page for search engines. Please use on of the language codes as value.

---        
language:       en  
---

You can enable disqus comments in posts by adding comments to the page. To configure the disqus forum you need to modify the disqus_shortname in the _config.yml file.

---        
comments:       true  
---

If you like to write some formula you can enable MathJax. Go to the theme feature post to see it in action. You can find the preprocessing options in _includes/mathjax_support.html.

---        
math:           true 
---

If you are writing a scholar article and like to add bibliographic metadata you can use the following YAML. This makes your article searchable at Google Scholar.

---        
citation:
  author: 
    - "Doe, John"
    - "Roe, Jane"
  publication_date:    "1996/05/17"
  online_date:         "1996/06/22"
  title:               "title"
  conference_title:    "conference_title"
  journal_title:       "journal_title"
  volume:              "271"
  issue:               "20"
  firstpage:           "11761"
  lastpage:            "11766"
  pdf_url:             "/media/scholar_article.pdf"
  pdf_url_dynamic:     true                            #true: http://your-domain.com/[pdf_url]
  issn:                "1234-5678"
  isbn:                "0-2345-6634-6"
  institution:         "institution"
  report_institution:  "report_institution"
  report_number:       "12345678"
---

Additional features, that can be specified, can be found in the YAML Front Matter documentation.

This post demonstrates post content styles

Mar 5, 2016 on Jekyll Content Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.

Some great heading (h2)

Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu.

Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

Another great heading (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.

Some great subheading (h3)

Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum.

Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.

Some great subheading (h3)

Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don’t misuse it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.

Some great subheading (h3)

Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum.

<html>
  <head>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>