Ramme Jekyll Theme

21 Mar 2016

Contents

Logo

Ramme is a simple jekyll theme.

About

I made this theme after seeing this screenshot. I took some parts from @mmistakes, like TOC, sample posts. I never tought making a theme from scratch would be this hard. And it’s still WIP.

I’m not a designer or something, so I’m sure there is a better way to make this theme. But it’s working and looks acceptable for different screen sizes. If something looks extremely ugly and you can’t resist to fix it, just send me a PR. I will be grateful.

I see some people using this theme. I need to search on Github to find who use it. But I don’t want to search like this. If you like this theme or using it, please give a star for motivation.

Installation

That’s all.

Scaffolding

How Ramme is organized and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped nicely under the root folder.

├── 404.html                                    # 404 page
├── about                                       # About Page
├── assets
│   ├── css                                     # Compiled stylesheets
│   ├── fonts                                   # webfonts
│   ├── img                                     # Folder for images
│   │   ├── favicon                             # Folder for favicons
│   └── js                                      # Folder for scripts
├── blog                                        # Post list for blog
├── _config.yml                                 # Configuration file for jekyll
├── _data
│   └── navigation.yml                          # Navigation links
├── _includes
│   ├── favicon.html                            # Favicon links
│   ├── footer-home.html                        # Footer for home page
│   ├── footer.html                             # Footer for other pages
│   ├── head-home.html                          # Head for home page
│   ├── head.html                               # Head for other pages
│   ├── nav-home.html                           # Top navigation for home page
│   ├── nav.html                                # Top navigation for other pages
│   ├── open-graph.html                         # Twitter Cards and Open Graph meta data
│   ├── scripts.html                            # Site scripts
│   ├── social-links.html                       # Social links to show in homepage
│   └── toc.html                                # Table of contents to use in some posts
├── index.html                                  # Homepage
├── _layouts
│   ├── home.html                               # Home layout
│   ├── page.html                               # Page layout
│   ├── post.html                               # Post layout
│   ├── post-index.html                         # Post list layout
│   └── project.html                            # Project list layout
├── _posts                                      # MarkDown formatted posts
├── _sass                                       # Sass stylesheets
└── projects                                    # Projects list page

Site Setup

A quick checklist of the files you’ll want to edit to get up and running.

Site Wide Configuration

_config.yml is your friend. Open it up and personalize it. Most variables are self explanatory but here’s an explanation of each if needed:

title

The title of your site… shocker!

Example title: My Awesome Site

url

Used to generate absolute urls in sitemap.xml, feed.xml, and for generating canonical URLs in <head>. When developing locally either comment this out or use something like http://localhost:4000 so all assets load properly. Don’t include a trailing /.

Examples:

url: http://taylantatli.me/Ramme
url: http://localhost:4000
url: //cooldude.github.io
url:

Google Analytics and Webmaster Tools

Google Analytics UA and Webmaster Tool verification tags can be entered in _config.yml. For more information on obtaining these meta tags check Google Webmaster Tools and Bing Webmaster Tools support.

To set what links appear in the top navigation edit _data/navigation.yml. Use the following format to set the URL and title for as many links as you’d like. External links will open in a new window.

- title: Home
  url: /

- title: Blog
  url: /blog/

- title: Projects
  url: /projects/

- title: About
  url: /about/

- title: Ramme
  url: http://taylantatli.me/Ramme

Layouts and Content

Explanations of the various _layouts included with the theme and when to use them.

Post and Page

These two layouts are almost similar. Only difference is page layout doesn’t show date under title.

Post Index Page

A sample index page listing all blog posts. The name can be customized to your liking by editing a few references. For example, to change Blog to Posts update the following:

  - title: Posts
    url: /posts/

Thumbnails for OG and Twitter Cards

Site logo is used by Open Graph and Twitter Cards.

Pro-Tip: You need to apply for Twitter Cards before they will begin showing up when links to your site are shared.

Kramdown Table of Contents

To include an auto-generated table of contents for posts and pages, add the following _include before the actual content. Kramdown will take care of the rest and convert all headlines into list of links.

{% include toc.html %}

Questions?

Found a bug or aren’t quite sure how something works? By all means file a GitHub Issue. And if you make something cool with this theme feel free to let me know.

License

This theme is free and open source software, distributed under the MIT License. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.

Hephaestus - Data. Forged. © 2024