hacked-jekyll

Hacked Jekyll is a responsive, minimalistic Jekyll theme for a tiny personal website. It consists of a homepage and a 404 page. The homepage lists information about the user in a format that resembles JSON, giving the website a "hacked" appearance. As in JSON, elements can be strings, arrays, or hashes. One of the string elements, typically the user's description, can use typed.js to cycle through multiple lines of text.

The style is rebooted through normalize.css and based on the Open Color library. The monospaced typeface Hack is served together with the website. The favicons are generated by favicon.io.

See the demo to check the end result.

Installation

The theme can be installed as usual by cloning this repository and editing the files. However, it is far more convenient to install it as a gem, in which case all the files you do not want or need to customize remain hidden from view, but will still be read and processed during build.

To install the theme as a gem, you can then add this line to your Gemfile:

gem "hacked-jekyll"

And this line to _config.yml:

theme: hacked-jekyll

The easiest way to set up a new website in this way is to clone the contents of the demo folder. This provides a working set of files to get you started.

After you are done creating the basic files, run bundler:

$ bundle

Or install the gem yourself as:

$ gem install hacked-jekyll

To customize hidden files, you can create new files with the same names and paths. For example, to change the layout of the index page, you can create a _layouts folder and a file index.html within this folder that contains your custom code. During build, Jekyll will give priority to your files over the theme's.

Usage

You can input the content of your JSON object in _data/json.yml. This is a list of key-value pairs: for each of them you need to provide key and value, as in the example below.

- key: Name
  value: Place Holder

In addition, you can provide a url, in which case the value is rendered as a hyperlink. Here is an example:

- key: Source
  value: piazzai/hacked-jekyll
  url: https://github.com/piazzai/hacked-jekyll

If value is a single line of text, the resulting JSON element will be a string. If value includes multiple lines of text, as in the code below, the resulting JSON element will be an array.

- key: Address
  value:
    - University of Jekyll
    - Department of Themes
    - 123 Main St, Anytown, USA

An array can also consist of hyperlinks. To achieve this, provide each line of value with its own value and url, like so:

- key: Profiles
  value:
    - value: Instagram
      url: https://www.instagram.com
    - value: LinkedIn
      url: https://www.linkedin.com

Finally, it is possible to render value as a hash, which is a list of key-value pairs. This will happen automatically if the elements of value have their own key and value (and possibly a url).

- key: Contact
  value:
    - key: Office
      value: Foobar Hall 1.23
    - key: Phone
      value: +1 234 567 890
    - key: Email
      value: username@domain.com
      url: "mailto:username@domain.com"

You can customize the appearance of the rendered JSON object using site variables. These have default values that can be overridden by specifying a new value in your _config.yml file.

Variable	Default	Purpose
color_bg	gray-9	Set the background color
color_punct	green-9	Set the color of quotes, commas, and brackets
color_key	green-4	Set the color of keys
color_value	green-4	Set the color of values
color_hover	green-5	Set the color of values on hover (if they are links)
quotes	true	Display quote marks around keys and/or values
commas	true	Display commas between key-value pairs
lowercase	true	Transform all keys and/or values to lowercase
newtab	false	Open links in a new tab

The color_* variables follow the Open Color library's naming convention (read here). You can change them to any color in the library using the same convention. For example:

color_bg: indigo-5
color_punct: teal-6
color_key: grape-7
color_value: lime-8
color_hover: cyan-9

The variables quotes and lowercase are true by default and can be set to false, but they can also be set to keys or values in order to restrict their effect to either keys or values. For example, the following code will display quote marks only around values and transform only keys to lowercase:

quotes: values
lowercase: keys

It is possible to customize the CSS by creating a file _sass/_custom.scss. You can use this to define new styles as well as overwrite the theme's defaults. The file will be automatically compiled during build.

Bugs

If you find any problem using the theme, please open an issue.