An elegant open source, mobile first theme for Jekyll. It includes lightweight styles and placeholder content to get you up and running with a simple blog in no time.
This version of Hyde has been ported to Jekyll bootstrap by Jadar.
Hyde is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward:
$ gem install jekyll
Windows users: Windows users have a bit more work to do, but luckily @juthilo has your back with his Run Jekyll on Windows guide.
You may also need to install Pygments, the Python syntax highlighter for code snippets that plays nicely with Jekyll. Read more about this in the Jekyll docs.
To help anyone with any level of familiarity with Jekyll quickly get started, Hyde includes everything you need for a basic Jekyll site. To that end, just download Hyde and start up Jekyll.
Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Hyde and then copy what you need (likely _layouts/
, *.html
files, atom.xml
for RSS, and public/
for CSS, JS, etc.).
To see your Jekyll site with Hyde applied, start a Jekyll server. In Terminal, from /hyde
(or whatever your Jekyll site's root directory is named):
$ jekyll serve
Open http://localhost:4000 in your browser, and voilà. You're done.
Hyde includes a few options, typically applied via classes on the <body>
element.
As of v1.1, Hyde ships with optional themes based on the base16 color scheme. In Hyde, a theme simply changes the sidebar's background color and the color of links within blog posts. Here's the red theme in action:
There are eight themes available at this time.
To use a theme, add any one of the available theme classes to the <body>
element like so:
<body class="theme-base-08">
...
</body>
To create your own theme, look to the Themes section of Hyde's CSS. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
Hyde's page orientation can be reversed with a single class.
<body class="layout-reverse">
...
</body>
###Removing project-specific navigation content
To remove the "GitHub Project" and "Download" and "Vesion v" from the site's navigation bar, simply change a setting in your site config.
github:
repo: false
Mark Otto https://github.com/mdo https://twitter.com/mdo
Open sourced under the MIT license.
<3