piazzai/hacked-jekyll

Jekyll microtheme that looks like JSON

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: [phone]
    - 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.

Bugs

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

hacked-jekyll's Issues

Added the blog functionality to this amazing theme

https://github.com/zepvalue/zepvalue.github.io

You can check this Repo with the blog feature added, I still have to add the footer to give you credit but I really enjoy this theme

As you can see there is a bit of work around github-pages gem and extra gems needed to make it work properly with sass, maybe even manage it a bit better

Grazie mille collega :)

`address` field disappears after changing `address` to `profession`

Here is what the YML looks like currently

Here is what it looks like on the page

Error deploying to github pages

I'm trying to deploy to GH pages and I get this error
Logging at level: debug Configuration file: /github/workspace/./_config.yml Theme: hacked-jekyll github-pages 231 | Error: The hacked-jekyll theme could not be found.

This is my config.yml. I don't know how to use baseurl or url, so they might be causing the error. They are commented out for now. I'm just using the default URL that GH pages assigns me. Gem works locally, and is in Gemfile

title: Your awesome title
email: [email protected]
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
#baseurl: '' # the subpath of your site, e.g. /blog
#url: '' # the base hostname & protocol for your site, e.g. http://example.com

# Build settings
theme: hacked-jekyll
plugins:
  - jekyll-feed

Something wrong with GitHub Pages

Good evening. I am an economist from Japan. While attempting to create a personal website for my research, I came across your excellent template. However, after forking it as my repository and deploying it live on GitHub Pages, the design for JSON seems to be missing, as shown in the image below.

As a complete novice in GitHub and CSS, I'm struggling to pinpoint the exact bug. Could it be a mistake in my procedures? I haven't altered the file order or paths. I apologize for reaching out amidst your busy schedule, but could you please assist me in rectifying my site's design?

Error when adding remote

Hi there. I get this permission error when trying to connect this to a github remote repo. Did I miss a step?

{23-09-19 17:36}Ryans-MBP:~/Dev/rriggin.github.io@main ryanriggin% git push -u origin main
ERROR: Permission to piazzai/hacked-jekyll.git denied to rriggin.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
{23-09-19 17:36}Ryans-MBP:~/Dev/rriggin.github.io@main ryanriggin%