All Projects → sighingnow → jekyll-gitbook

sighingnow / jekyll-gitbook

Licence: Apache-2.0 license
Build Jekyll site with GitBook style!

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Smarty
1635 projects
ruby
36898 projects - #4 most used programming language

Projects that are alternatives of or similar to jekyll-gitbook

No Style Please
A (nearly) no-CSS, fast, minimalist Jekyll theme.
Stars: ✭ 192 (-15.04%)
Mutual labels:  jekyll-theme, jekyll-themes
comical-jekyll-theme
A Configurable Webcomic Theme for Jekyll
Stars: ✭ 39 (-82.74%)
Mutual labels:  jekyll-theme, jekyll-themes
Bulma Clean Theme
A clean and modern Jekyll theme based on Bulma
Stars: ✭ 194 (-14.16%)
Mutual labels:  jekyll-theme, jekyll-themes
Resume
A minimalist resume template for Jekyll and Hexo
Stars: ✭ 174 (-23.01%)
Mutual labels:  jekyll-theme, jekyll-themes
jekyll-theme-mint
A clean and responsive jekyll theme
Stars: ✭ 16 (-92.92%)
Mutual labels:  jekyll-theme, jekyll-themes
Oscailte
Oscailte — A powerful light, clean, and responsive Jekyll theme.
Stars: ✭ 178 (-21.24%)
Mutual labels:  jekyll-theme, jekyll-themes
Hagura
A light weight, minimal Jekyll theme.
Stars: ✭ 235 (+3.98%)
Mutual labels:  jekyll-theme, jekyll-themes
Online Cv
A minimal Jekyll Theme to host your resume (CV)
Stars: ✭ 1,844 (+715.93%)
Mutual labels:  jekyll-theme, jekyll-themes
Gesko
Gesko is a simple and minimalistic jekyll blogging theme.
Stars: ✭ 147 (-34.96%)
Mutual labels:  jekyll-theme, github-page
jasper2
Full-featured Jekyll port of Ghost's default theme Casper v2 👻
Stars: ✭ 725 (+220.8%)
Mutual labels:  jekyll-theme, jekyll-themes
Wu Kan.github.io
✨ my homepage & template for jekyll-theme-WuK
Stars: ✭ 171 (-24.34%)
Mutual labels:  jekyll-theme, jekyll-themes
duo
👬 A Simple Jekyll Theme.
Stars: ✭ 76 (-66.37%)
Mutual labels:  jekyll-theme, jekyll-themes
Affiliates Jekyll Theme
Affiliates - Jekyll Blogging Theme for Affiliate Marketers
Stars: ✭ 145 (-35.84%)
Mutual labels:  jekyll-theme, jekyll-themes
Minima
Minima is a one-size-fits-all Jekyll theme for writers.
Stars: ✭ 2,452 (+984.96%)
Mutual labels:  jekyll-theme, jekyll-themes
Jekyll Text Theme
💎 🐳 A super customizable Jekyll theme for personal site, team site, blog, project, documentation, etc.
Stars: ✭ 2,150 (+851.33%)
Mutual labels:  jekyll-theme, jekyll-themes
Millennial
A minimalist Jekyll theme for running an online publication
Stars: ✭ 223 (-1.33%)
Mutual labels:  jekyll-theme, jekyll-themes
Jekyll Rtd Theme
Just another documentation theme compatible with GitHub Pages
Stars: ✭ 92 (-59.29%)
Mutual labels:  jekyll-theme, github-page
Blog
博客
Stars: ✭ 103 (-54.42%)
Mutual labels:  jekyll-theme, jekyll-themes
Jekyll Serif Theme
Serif is a beautiful business theme for Jekyll.
Stars: ✭ 235 (+3.98%)
Mutual labels:  jekyll-theme, jekyll-themes
agency-jekyll-theme
Jekyll version of the newest Agency Bootstrap theme, plus new features: Google Analytics, Markdown support, custom pages, and more!
Stars: ✭ 222 (-1.77%)
Mutual labels:  jekyll-theme, jekyll-themes
layout title permalink
home
Jekyll Gitbook Theme
/

Make Jelly site have a GitBook look!

Demo

Live demo on Github Pages: https://sighingnow.github.io/jekyll-gitbook

Jekyll Themes

Why Jekyll with GitBook

GitBook is an amazing frontend style to present and organize contents (such as book chapters and blogs) on Web. The typical to deploy GitBook at Github Pages is building HTML files locally and then push to Github repository, usually to the gh-pages branch. It's quite annoying to repeat such workload and make it hard for people do version control via git for when there are generated HTML files to be staged in and out.

This theme takes style definition out of generated GitBook site and provided the template for Jekyll to rendering markdown documents to HTML, thus the whole site can be deployed to Github Pages without generating and uploading HTML bundle every time when there are changes to the original repo.

How to Get Started

This theme can be used just as other Jekyll themes and support remote theme, see the official guide as well.

You can introduce this jekyll theme into your own site by either

  • Fork this repository and add your markdown posts to the _posts folder.
  • Use as a remote theme in your _config.yml(just like what we do for this site itself),
remote_theme: sighingnow/jekyll-gitbook

Deploy Locally with Jekyll Serve

This theme can be ran locally using Ruby and Gemfiles.

Testing your GitHub Pages site locally with Jekyll - GitHub

Full-text search

The search functionality in jekyll-gitbook theme is powered by the gitbook-plugin-search-pro plugin and is enabled by default.

https://sighingnow.github.io/jekyll-gitbook/?q=generated

Code highlight

The code highlight style is configurable the following entry in _config.yaml:

syntax_highlighter_style: colorful

The default code highlight style is colorful, the full supported styles can be found from the rouge repository. Customized style can be added to ./assets/gitbook/rouge/.

How to generate TOC

The jekyll-gitbook theme leverages jekyll-toc to generate the Contents for the page. The TOC feature is not enabled by default. To use the TOC feature, modify the TOC configuration in _config.yml:

toc:
    enabled: true
    h_min: 1
    h_max: 3

Google Analytics, etc.

The jekyll-gitboook theme supports embedding the Google Analytics, CNZZ and Application Insights website analytical tools with the following minimal configuration in _config.yaml:

tracker:
  google_analytics: "<YOUR GOOGLE ANALYTICS KEY, e.g, UA-xxxxxx-x>"

Similarly, CNZZ can be added with the following configuration in _config.yaml

tracker:
  cnzz: "<YOUR CNZZ ANALYTICS KEY, e.g., xxxxxxxx>"

Application Insights can be added with the following configuration in _config.yaml

tracker:
  application_insights: "<YOUR APPLICATION INSIGHTS CONNECTION STRING>"

Extra StyleSheet or Javascript elements

You can add extra CSS or JavaScript references using configuration collections:

  • extra_css: for additional style sheets. If the url does not start by http, the path must be relative to the root of the site, without a starting /.
  • extra_header_js: for additional scripts to be included in the <head> tag, after the extra_css has been added. If the url does not start by http, the path must be relative to the root of the site, without a starting /.
  • extra_footer_js: for additional scripts to be included at the end of the HTML document, just before the site tracking script. If the url does not start by http, the path must be relative to the root of the site, without a starting /.

Customizing font settings

The fonts can be customized by modifying the .book.font-family-0 and .book.font-family-1 entry in ./assets/gitbook/custom.css,

.book.font-family-0 {
    font-family: Georgia, serif;
}
.book.font-family-1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Tips, Warnings and Dangers blocks

The jekyll-gitbook theme supports customized kramdown attributes ({: .block-tip }, {: .block-warning }, {: .block-danger }) like that displayed in the discord.js website. The marker can be used like

> ##### TIP
>
> This guide is last tested with @napi-rs/canvas^0.1.20, so make sure you have
> this or a similar version after installation.
{: .block-tip }

Rendered page can be previewed from

https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html

Cover image inside pages

The jekyll-gitbook theme supports adding a cover image to a specific page by adding a cover field to the page metadata:

  ---
  title: Page with cover image
  author: Tao He
  date: 2022-05-24
  category: Jekyll
  layout: post
+ cover: /assets/jekyll-gitbook/dinosaur.gif
  ---

The effect can be previewed from

https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-05-24-page_cover.html

License

This work is open sourced under the Apache License, Version 2.0.

Copyright 2019 Tao He.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].