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.
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.
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: [email protected]
url: "mailto:[email protected]"
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.
If you find any problem using the theme, please open an issue.