wall-e-jekyll.github.io

wall-e-jekyll.github.io

A modern jekyll theme with grid frontpage, beautiful typography, mobile responsive, made with Semantic UI

Wall-E

Wall-E is a modern Jekyll template with a magazine-like grid layout on the frontpage, beautiful typography and uncomplicated content.

Demo

wall-e-jekyll.github.io/

Contents

Features

  • Mobile responsive, built with Semantic UI, customization is easy
  • Disqus is integrated by default
  • One column layout suitable for personal blogs with focus on content
  • Beautiful typography (uses League Gothic and Open Sans)
  • Feature image can be added to homescreen post cards
  • Search box links to Google search by default

Usage

Wall-E is fully furnished right out of the box. To use this template on your blog

  • If this is your first Jekyll blog, follow this helpful guide to set up Jekyll.
  • Fork this repository, rename the fork as your-username.github.io. Your blog should immediately be live on https://your-username.github.io
  • Clone your fork
  • Delete everything in _posts directory. Delete the tmp directory.
  • Open _config.yml and set the variables
  • Open _includes/disqus.html and _includes/disqus-count.html and replace the value of disqus_shortname variable to your Disqus username
  • Run jekyll serve and your blog should be live on http://localhost:4000. Make changes, test them locally, commit your changes and push to your fork. Your changes should be live in a couple of seconds

Customization

  • _includes/author.html: Add your name, link to a profile picture and a short author description that appears on the bottom of each post. See Semantic Link docs.
  • _includes/card.html: Cards can be customized to show the essential info about a post (feature image, catagory, tags, comment count etc). See Semantic Card docs.
  • _includes/header.html: Replace the site logo here. Add/replace frequently visited pages and/or social links here.
  • _includes/footer.html: Add your copyrights, if any, here. Also link to the less frequently visited pages and/or social links here.
  • assets/css/main.css and assets/css/mobile.css: Global and mobile specific CSS files respectively
  • assets/js/main.js: Any common javascript goes here. If you wish to customize the search behaviour (for example, use a different search engine), that can be done here.

Screenshots (Desktop)

Homepage

Sample post

Screenshots (Mobile)

Homepage (Portrait)

Homepage (Landscape)

Sample post (Portrait)

Credits

License

Open sourced under the MIT license <3