- Notifications
You must be signed in to change notification settings - Fork1.2k
Build Jekyll site with GitBook style!
License
sighingnow/jekyll-gitbook
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
| layout | title | permalink |
|---|---|---|
home | Jekyll Gitbook Theme | / |
Make Jelly site have a GitBook look!
Live demo on Github Pages:https://sighingnow.github.io/jekyll-gitbook
GitBook is an amazing frontend style to present and organize contents (such as book chaptersand blogs) on Web. The typical to deploy GitBook atGithub Pagesis building HTML files locally and then push to Github repository, usually to thegh-pagesbranch. It's quite annoying to repeat such workload and make it hard for people do versioncontrol 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 templatefor Jekyll to rendering markdown documents to HTML, thus the whole site can be deployedtoGithub Pages without generating and uploading HTML bundle every time when there arechanges to the original repo.
This theme can be used just as otherJekyll themes and supportremote theme,seethe 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
_postsfolder. - Use as a remote theme in your
_config.yml(just like what we do for thissite itself),
remote_theme:sighingnow/jekyll-gitbook
This theme can be ran locally using Ruby and Gemfiles.
Testing your GitHub Pages site locally with Jekyll - GitHub
The search functionality in jekyll-gitbook theme is powered by thegitbook-plugin-search-pro plugin and is enabled by default.
https://sighingnow.github.io/jekyll-gitbook/?q=generated
The code highlight style is configurable the following entry in_config.yaml:
syntax_highlighter_style:colorful
The default code highlight style iscolorful, the full supported styles can be found fromthe rouge repository. Customizedstyle can be added to./assets/gitbook/rouge/.
The jekyll-gitbook theme leveragesjekyll-toc to generate theContents for the page.The TOC feature is not enabled by default. To use the TOC feature, modify the TOCconfiguration in_config.yml:
toc:enabled:trueh_min:1h_max:3
The jekyll-gitboook theme supports embedding theGoogle Analytics,CNZZ andApplication Insights website analytical tools with the followingminimal 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>"
Disqus comments can be enabled by adding the following configuration in_config.yaml:
disqushandler:"<YOUR DISQUS SHORTNAME>"
Jekyll'scollections is supported to organize the pages in a more fine-grained manner, e.g.,
collections:pages:output:truesort_by:datepermalink:/:collection/:year-:month-:day-:title:output_extothers:output:truesort_by:datepermalink:/:collection/:year-:month-:day-:title:output_ext
An optionalordered_collections key can be added to_config.yaml to control the order of collections in the sidebar:
ordered_collections: -posts -pages -others
If not specified, the order of collections would be decided by Jekyll. Note that the keyposts is a special collectionthat indicates the_posts pages of Jekyll.
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 theextra_csshas 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
/.
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;}
The jekyll-gitbook theme supports customized kramdown attributes ({: .block-tip },{: .block-warning },{: .block-danger }) like that displayed inthe 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
The jekyll-gitbook theme supports adding a cover image to a specific page by addingacover 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
This jekyll-theme supportsmermaid.js to render diagramsin markdown.
To enable the mermaid support, you need to setmermaid: true in the front matterof your post.
---mermaid:true---
The example can be previewed from
https://sighingnow.github.io/jekyll-gitbook/jekyll/2023-08-31-mermaid.html
This work is open sourced under the Apache License, Version 2.0.
Copyright 2019 Tao He.
About
Build Jekyll site with GitBook style!
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.