-
-
Notifications
You must be signed in to change notification settings - Fork 10k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve theme docs #5690
Improve theme docs #5690
Changes from 5 commits
11b4ae0
a6d3570
938388a
c317161
90da02b
234ed44
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,28 +4,41 @@ title: Themes | |
permalink: /docs/themes/ | ||
--- | ||
|
||
Jekyll has an extensive theme system, which allows you to leverage community-maintained templates and styles to customize your site's presentation. Jekyll themes package layouts, includes, and stylesheets in a way that can be overridden by your site's content. | ||
Jekyll has an extensive theme system that allows you to leverage community-maintained templates and styles to customize your site's presentation. Jekyll themes package up layouts, includes, and stylesheets in a way that can be overridden by your site's content. | ||
|
||
## Installing a theme | ||
## Understanding gem-based themes | ||
|
||
1. To install a theme, first, add the theme to your site's `Gemfile`: | ||
When you [create a new Jekyll site](/docs/quickstart) (by running the `jekyll new <PATH>` command), Jekyll installs a site that uses a gem-based theme called [Minima](https://github.com/jekyll/minima). | ||
|
||
gem 'my-awesome-jekyll-theme' | ||
With gem-based themes, some of the site's directories (such as the `assets`, `_layouts`, `_includes`, and `_sass` directories) are stored in the theme-gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll's build process. | ||
|
||
2. Save the changes to your `Gemfile` | ||
3. Run the command `bundle install` to install the theme | ||
4. Finally, activate the theme by adding the following to your site's `_config.yml`: | ||
In the case of Minima, you see only the following files in your Jekyll site directory: | ||
|
||
theme: my-awesome-jekyll-theme | ||
``` | ||
├── Gemfile | ||
├── Gemfile.lock | ||
├── _config.yml | ||
├── _posts | ||
│ └── 2016-12-04-welcome-to-jekyll.markdown | ||
├── about.md | ||
└── index.md | ||
``` | ||
|
||
You can have multiple themes listed in your site's Gemfile, but only one theme can be selected in your site's `_config.yml`. | ||
{: .note .info } | ||
The `Gemfile` and `Gemfile.lock` files are used by Bundler to keep track of the required gems and gem versions you need to build your Jekyll site. | ||
|
||
Gem-based themes make it easy for theme developers to make updates available to anyone who has the theme gem. When there's an update, theme developers push the update to RubyGems. | ||
|
||
If you have the theme gem, you can (if you desire) run `bundle update` to update all gems in your project. Or you can run `bundle update <theme>`, replacing `<theme>` with the theme name, such as `minima`, to just update the theme gem. Any new files or updates the theme developer has made (such as to stylesheets or includes) will be pulled into your project automatically. | ||
|
||
The goal of gem-based themes is to allow you to get all the benefits of a robust, continually updated theme without having all the theme's files getting in your way and over-complicating what might be your primary focus: creating content. | ||
|
||
## Overriding theme defaults | ||
|
||
Jekyll themes set default layouts, includes, and stylesheets, that can be overridden by your site's content. For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` folder (e.g., `_layouts/page.html`). | ||
Jekyll themes set default layouts, includes, and stylesheets. However, you can override any of the theme defaults with your own site content. | ||
|
||
Jekyll will look first to your site's content, before looking to the theme's defaults, for any requested file in the following folders: | ||
For example, if your selected theme has a `page` layout, you can override the theme's layout by creating your own `page` layout in the `_layouts` directory (that is, `_layouts/page.html`). | ||
|
||
Jekyll will look first to your site's content before looking to the theme's defaults for any requested file in the following folders: | ||
|
||
* `/assets` | ||
* `/_layouts` | ||
|
@@ -35,13 +48,108 @@ Jekyll will look first to your site's content, before looking to the theme's def | |
Refer to your selected theme's documentation and source repository for more information on what files you can override. | ||
{: .note .info} | ||
|
||
To locate theme's files on your computer, run `bundle show` followed by | ||
the name of the theme's gem, e.g. `bundle show minima` for default Jekyll's | ||
theme. Then copy the files you want to override, from the returned path to your root folder. | ||
To locate theme's files on your computer: | ||
|
||
1. Run `bundle show` followed by the name of the theme's gem, e.g., `bundle show minima` for default Jekyll's theme. | ||
|
||
The location of the theme gem is returned. For example, minima is located in `/usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0` when using the system Ruby installation on a Mac. | ||
|
||
2. Change to the directory's location and open the directory in Finder or Explorer: | ||
|
||
``` | ||
cd /usr/local/lib/ruby/gems/2.3.0/gems/minima-2.1.0 | ||
open . | ||
# for Windows, use "explorer ." | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why not There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "open" doesn't work on the Windows command terminal (at least not mine, and I have a Windows 10 PC. "explorer" does work, though. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. added examples for each OS. On MacOS you can simply |
||
``` | ||
|
||
A Finder or Explorer window opens showing the theme's files and directories. The Minima theme gem contains these files: | ||
|
||
``` | ||
├── LICENSE.txt | ||
├── README.md | ||
├── _includes | ||
│ ├── disqus_comments.html | ||
│ ├── footer.html | ||
│ ├── google-analytics.html | ||
│ ├── head.html | ||
│ ├── header.html | ||
│ ├── icon-github.html | ||
│ ├── icon-github.svg | ||
│ ├── icon-twitter.html | ||
│ └── icon-twitter.svg | ||
├── _layouts | ||
│ ├── default.html | ||
│ ├── home.html | ||
│ ├── page.html | ||
│ └── post.html | ||
├── _sass | ||
│ ├── minima | ||
│ │ ├── _base.scss | ||
│ │ ├── _layout.scss | ||
│ │ └── _syntax-highlighting.scss | ||
│ └── minima.scss | ||
└── assets | ||
└── main.scss | ||
``` | ||
|
||
With a clear understanding of the theme's files, you can now override any theme file by creating a similarly named file in your Jekyll site directory. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Perhaps an example here would be useful. The user may still be wondering what the full path is they need to create in their site. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. good call. updated. |
||
|
||
Let's say you want to override Minima's footer. In your Jekyll site, create an `_includes` folder and add a file in it called `footer.html`. Jekyll will now use your site's `footer.html` file instead of the `footer.html` file from the Minima theme gem. | ||
|
||
## Converting gem-based themes to regular themes | ||
|
||
Suppose you want to get rid of the gem-based theme and convert it to a regular theme, where all files are present in your Jekyll site directory, with nothing stored in the theme gem. | ||
|
||
To do this, copy the files from the theme gem's directory into your Jekyll site directory. (For example, copy them to `/myblog` if you created your Jekyll site at `/myblog`. See the previous section for details.) | ||
|
||
Then modify the Gemfile and configuration to remove references to the theme gem. For example, to remove Minima: | ||
* Open `Gemfile` and remove `gem "minima", "~> 2.0"`. | ||
* Open `_config.yml` and remove `theme: minima`. | ||
|
||
Now `bundle update` will no longer get updates for the theme gem. | ||
|
||
## Installing a gem-based theme {#installing-a-theme} | ||
|
||
The `jekyll new <PATH>` command isn't the only way to create a new Jekyll site with a gem-based theme. You can also find gem-based themes online and incorporate them into your Jekyll project. | ||
|
||
For example, search for [jekyll theme on RubyGems](https://rubygems.org/search?utf8=%E2%9C%93&query=jekyll-theme) to find other gem-based themes. (Note that not all themes are using `jekyll-theme` as a convention in the theme name.) | ||
|
||
## Creating a theme | ||
To install a gem-based theme: | ||
|
||
Jekyll themes are distributed as Ruby gems. Don't worry, Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: | ||
1. Add the theme to your site's `Gemfile`: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this clear line before the start of a fenced-code block is not needed actually.. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i see. i thought it was needed. however, without it, the spacing seems too smushed together. |
||
```sh | ||
gem 'my-awesome-jekyll-theme' | ||
``` | ||
|
||
2. Install the theme: | ||
|
||
```sh | ||
bundle install | ||
``` | ||
|
||
3. Add the following to your site's `_config.yml` to activate the theme: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
```sh | ||
theme: my-awesome-jekyll-theme | ||
``` | ||
|
||
4. Build your site: | ||
|
||
```sh | ||
bundle exec jekyll serve | ||
``` | ||
|
||
You can have multiple themes listed in your site's `Gemfile`, but only one theme can be selected in your site's `_config.yml`. | ||
{: .note .info } | ||
|
||
If you're publishing your Jekyll site on [GitHub Pages](https://pages.github.com/), note that GitHub Pages supports only some gem-based themes. See [Supported Themes](https://pages.github.com/themes/) in GitHub's documentation to see which themes are supported. | ||
|
||
## Creating a gem-based theme | ||
|
||
If you're a Jekyll theme developer (rather than just a consumer of themes), you can package up your theme in RubyGems and allow users to install it through Bundler. | ||
|
||
If you're unfamiliar with creating Ruby gems, don't worry. Jekyll will help you scaffold a new theme with the `new-theme` command. Just run `jekyll new-theme` with the theme name as an argument: | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This section had some changes requested in the previous PR.. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Pathawkes had said:
Also, you wrote:
Actually, I don't really mean to make controversial changes here. My main changes were in another part of this file. But I made an update to this paragraph just now to change "distributing" to "creating" and also capitalized "Ruby." Isn't Ruby capitalized, just as Java, Python, or other programming languages? Also, the phrase "don't worry" is short enough to stand on its own. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yes Ruby should be capitalized 👍 |
||
```sh | ||
jekyll new-theme my-awesome-theme | ||
|
@@ -61,7 +169,7 @@ Your new Jekyll theme, my-awesome-theme, is ready for you in /path/to/my-awesome | |
For help getting started, read /path/to/my-awesome-theme/README.md. | ||
``` | ||
|
||
Add your template files in the corresponding folders, complete the `.gemspec` and the README files according to your needs. | ||
Add your template files in the corresponding folders. Then complete the `.gemspec` and the README files according to your needs. | ||
|
||
### Layouts and includes | ||
|
||
|
@@ -71,13 +179,29 @@ For example, if your theme has a `/_layouts/page.html` file, and a page has `lay | |
|
||
### Assets | ||
|
||
Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You may ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: if the file has [YAML front matter]({{ site.baseurl }}/docs/frontmatter/) at the top, then it will be rendered. If it does not have YAML front matter, it will simply be copied over into the resulting site. This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. | ||
Any file in `/assets` will be copied over to the user's site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc. These files behave just like pages and static files in Jekyll: | ||
|
||
* If the file has [YAML front matter](../docs/frontmatter/) at the top, it will be rendered. | ||
* If the file does not have YAML front matter, it will simply be copied over into the resulting site. | ||
|
||
This allows theme creators to ship a default `/assets/styles.scss` file which their layouts can depend on as `/assets/styles.css`. | ||
|
||
All files in `/assets` will be output into the compiled site in the `/assets` folder just as you'd expect from using Jekyll on your sites. | ||
|
||
### Stylesheets | ||
|
||
Your theme's stylesheets should be placed in your theme's `/_sass` folder, again, just as you would when authoring a Jekyll site. Your theme's styles can be included in the user's stylesheet using the `@import` directive. | ||
Your theme's stylesheets should be placed in your theme's `_sass` folder, again, just as you would when authoring a Jekyll site. | ||
|
||
``` | ||
_sass | ||
├── jekyll-theme-my-awesome-theme.scss | ||
``` | ||
|
||
Your theme's styles can be included in the user's stylesheet using the `@import` directive. | ||
|
||
```css | ||
{% raw %}@import "{{ site.theme }}";{% endraw %} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. while I'm 👍 on the use of |
||
``` | ||
|
||
### Documenting your theme | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated, but why capitalize "site" here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no particular reason.
site
is just as valid asSite
in this context