Giter VIP home page Giter VIP logo

jekyll-clean's Introduction

Jekyll Clean

A simple and clean Jekyll theme using bootstrap (not to be confused with jekyll-bootstrap) that's easy to modify and very modular in component and element reuse.

It uses Disqus for comments and includes Google Analytics support. Both of these features are disabled by default and can be enabled via _config.yml. You can also rip this code out of the templates if you like (footer.html and post.html). The beauty of Jekyll - keep things clean... Jekyll Clean!

The theme works well on mobile phones, using a collapsable nav bar and hiding the sidebar. The links pane in the sidebar is available on mobile through the nav menu, and you can do the same thing for any other sections added to the sidebar.

Don't forget to occassionally merge against my upstream repository so you can get the latest changes. Pull requests are encouraged and accepted!

Installation

If you don't have a blog already on github, start by cloning this repository. Best to do that directly on github and then clone that down to your computer.

If you already do have a blog, You can certainly apply this theme to your existing blog in place, but then you won't be able to merge as the theme changes. If you re-apply your blog history on top of this theme's gh-pages branch, it's then easy to update to the latest version of the theme. You also don't want to have to deal with resolving old conflicts from your existing history, so you may wish to to push your existing master off to a new branch so you have the old history and start a new branch with this as the start, merging in your _posts and other assets (after git rm'ing the current _posts.

Not ideal, but you have to make a choice - either apply it manually or base your blog off this theme's branch. Either way it will work, and both have their own pros and cons.

You can setup an upstream tracking repository like so:

$ git remote add upstream [email protected]:scotte/jekyll-clean.git

And now when you wish to merge your own branch onto the latest version of the theme, simply do:

$ git fetch upstream
$ git merge upstream/gh-pages

Of course you will have to resolve conflicts for _config.yml, _includes/links-list.html, and _posts, and so on, but in practice this is pretty simple.

This is how I maintain my own blog which is based on this theme. The old history is sitting in an old-master branch that I can refer to when I need to.

Running Locally

Here's the exact set of packages I need to install on Debian to run jekyll locally with this theme for testing.

$ sudo aptitude install ruby ruby-dev rubygems nodejs
$ sudo gem install jekyll jekyll-paginate

And then it's just a simple matter of running jekyll locally:

$ jekyll serve --baseurl=''

Now browse to http://127.0.0.1:4000

Using gh-pages

Running a jekyll site is a bit outside the scope of this doc, but sometimes it can be a bit confusing how to configure jekyll for project pages versus user pages, for example.

To start with, read through the documentation here. This will provide a good overview on how it all works. The git branch and baseurl (in _config.yml) will change depending on the sort of site deployed.

When you clone this repository, it's set up for project pages, so the deployed branch is "gh-pages" and baseurl is configured to 'jekyll-clean', because that's the name of this project.

If you plan to deploy this as user pages, the deployed branch is "master" and baseurl is configured to '' (i.e. empty).

Using Gitlab Pages

A basic .gitlab-ci.yml is provided with this project.

Comment Systems

Jekyll clean supports both isso and disqus comment systems.

After enabling comments, either isso or disquss must be configured. Don't try configuring both!

Isso Comments

Isso requires running a local server, so is not suitable for hosting in github pages, for example. Isso is open source and keeps all your data local, unlike Disqus (who knows exactly what they are doing with your data).

In _config.yml you'll need to set isso to the fully-qualified URL if your isso server (this is the value for data-isso passed to the isso JS). Make sure comments is true.

Disqus Comments

Getting Disqus to work can be a bit more work than it seems like it should be. Make sure your Disqus account is correctly configured with the right domain of your blog and you know your Disqus shortname.

In _config.yml you'll need to set disqus to your Disqus shortname and make sure comments is true.

Finally, in posts, make sure you have comments: true in the YAML front matter.

More information on using Disqus with Jekyll is documented here.

Code Syntax Highlighting

To use code syntax highlighting, use the following syntax:

```python
import random

# Roll the die
roll = random.randint(1, 20)
print('You rolled a %d.' % roll)
``` #REMOVE

(Remove #REMOVE from the end of the last line). Which will look like this in the rendered jekyll output using the default css/syntax.css provided with this theme (which is the colorful theme from https://github.com/iwootten/jekyll-syntax):

import random

# Roll the die
roll = random.randint(1, 20)
print('You rolled a %d.' % roll)

NOTE: The example in this README.md will render differently than in the final jekyll output. See the live demo to see how it really looks.

You can, of course, use any theme you wish, see the jekyll and pygments documentation for more details.

License

The content of this theme is distributed and licensed under a License Badge Creative Commons Attribution 4.0 License

This license lets others distribute, remix, tweak, and build upon your work,
even commercially, as long as they credit you for the original creation. This
is the most accommodating of licenses offered. Recommended for maximum
dissemination and use of licensed materials.

In other words: you can do anything you want with this theme on any site, just please provide a link to the original theme on github so I get credit for the original design. Beyond that, have at it!

This theme includes the following files which are the properties of their respective owners:

jekyll-clean's People

Contributors

ethan-nelson avatar samervin avatar scotte avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jekyll-clean's Issues

pagination broken in jekyll 3

I think pagination has changed (sorry, fairly new user). If I don't install jekyll-pagination I get an error. If I install it, I instead get the following. I like how this theme looks, so it would be nice if this could be fixed (or someone could tell me what I'm doing wrong...)

/usr/local/lib/ruby/gems/2.2.0/gems/jekyll-pagination-0.0.4/lib/jekyll/pagination.rb:61:in `alias_method': undefined method `pagination_enabled?' for class `Class' (NameError)
    from /usr/local/lib/ruby/gems/2.2.0/gems/jekyll-pagination-0.0.4/lib/jekyll/pagination.rb:61:in `singleton class'
    from /usr/local/lib/ruby/gems/2.2.0/gems/jekyll-pagination-0.0.4/lib/jekyll/pagination.rb:54:in `<class:Pager>'
    from /usr/local/lib/ruby/gems/2.2.0/gems/jekyll-pagination-0.0.4/lib/jekyll/pagination.rb:52:in `<module:Jekyll>'

Markdown not converted correctly

Hi! I love your jekyll-clean theme!

Now I am encountering to a problem:

I want to add markdown sites, but not as _posts, just as sites. The folder with the .md file is located at /writeups/. But it's not formed correctly...

Here's the webpage:
markdown_1

And here's a code snippet:

---
layout: page
title: Writeup's
permalink: /writeups/
---

Writeup's will be published in english! It may appear that the textstyle differs from other texts.

## Hacking Series

<a href="{{ site.baseurl }}/writeups/bwapp">bWAPP - buggy web app</a>

<a href="{{ site.baseurl }}/writeups/hackthebox">HackTheBox</a>

I want that it looks like a post, but not that it's a post:D

You have an idea?

Syntax highlighting won't work until an appropriate file is loaded

Hello,

Thank you for this great Jekyll theme. After some analysis I figured out the output of Pygments was correct although no CSS file was generated to render its output accordingly. This is normal behaviour (see this link) but I guess it should be added to the README file for clarity.

I propose a file update below (to be inserted between Disqus and License sections).
I would have done directly a pull request with pleasure but I already forked your repo for my own purposes so I'm afraid I can't do it directly.

Have a nice day!

Syntax Highlighting

You need to either install or create CSS classes to make the code highlighting work Pygments does visible. You can download your preferred theme here and put it into your css folder.

Before using directly, you first have to remove the .codehilite class the repo owner added on every style definition:

sed  -i 's/.codehilite /span/' theme.css

You then have to call the css file from your _includes/header.html file:

<link rel="stylesheet" type="text/css" href="/path/to/theme.css">

More info can be found on this Stackoverflow thread.

jekyll-clean-dark layouts

Since you delete "_includes/gallery.html" and "_includes/gallery_lightbox.html" in jekyll-clean-dark some layouts don't exist anymore.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.