|
|
@ -27,17 +27,17 @@ If you are creating a new Jekyll site using Minimal Mistakes follow these steps:
|
|
|
|
|
|
|
|
|
|
|
|
1. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
|
|
|
|
1. Fork the [Minimal Mistakes repo](http://github.com/mmistakes/minimal-mistakes/fork).
|
|
|
|
2. Clone the repo you just forked and rename it.
|
|
|
|
2. Clone the repo you just forked and rename it.
|
|
|
|
3. [Install Bundler](http://bundler.io) `gem install bundler` and Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), [Bourbon](http://bourbon.io), etc)
|
|
|
|
3. [Install Bundler](http://bundler.io) `gem install bundler` and Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), etc)
|
|
|
|
4. Update `config.yml`, add navigation, and replace demo posts and pages with your own. Full details below.
|
|
|
|
4. Update `config.yml`, add navigation, and replace demo posts and pages with your own. Full details below.
|
|
|
|
|
|
|
|
|
|
|
|
If you want to use Minimal Mistakes with an existing Jekyll site follow these steps:
|
|
|
|
If you want to use Minimal Mistakes with an existing Jekyll site follow these steps:
|
|
|
|
|
|
|
|
|
|
|
|
1. [Download Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes/archive/master.zip) and unzip.
|
|
|
|
1. [Download Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes/archive/master.zip) and unzip.
|
|
|
|
2. Rename `minimal-mistakes-master` to something meaningful ie: `new-site`
|
|
|
|
2. Rename `minimal-mistakes-master` to something meaningful ie: `new-site`
|
|
|
|
3. Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), [Bourbon](http://bourbon.io), etc)
|
|
|
|
3. Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), etc)
|
|
|
|
4. Remove demo posts and pages add replace with your own posts, pages, and any other content you want to move over.
|
|
|
|
4. Remove demo posts/pages and replace with your own posts, pages, and any other content you want to move over.
|
|
|
|
5. Update posts and pages YAML to match variables used by Minimal Mistakes. Full details below.
|
|
|
|
5. Update posts' and pages' YAML to match variables used by Minimal Mistakes. Full details below.
|
|
|
|
6. Update `config.yml` and add navigation links. Full details below.
|
|
|
|
6. Update `_config.yml` and add navigation links. Full details below.
|
|
|
|
|
|
|
|
|
|
|
|
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you won't want.
|
|
|
|
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you won't want.
|
|
|
|
{: .notice}
|
|
|
|
{: .notice}
|
|
|
@ -66,6 +66,8 @@ minimal-mistakes/
|
|
|
|
| └── post.html # single post layout
|
|
|
|
| └── post.html # single post layout
|
|
|
|
├── _posts/ # MarkDown formatted posts
|
|
|
|
├── _posts/ # MarkDown formatted posts
|
|
|
|
├── _sass/ # Sass stylesheets
|
|
|
|
├── _sass/ # Sass stylesheets
|
|
|
|
|
|
|
|
├── _templates/ # used by Octopress to define YAML variables for new posts/pages
|
|
|
|
|
|
|
|
├── about/ # sample about page
|
|
|
|
├── assets/
|
|
|
|
├── assets/
|
|
|
|
| ├── css/ # compiled stylesheets
|
|
|
|
| ├── css/ # compiled stylesheets
|
|
|
|
| ├── fonts/ # webfonts
|
|
|
|
| ├── fonts/ # webfonts
|
|
|
@ -77,11 +79,10 @@ minimal-mistakes/
|
|
|
|
| └── less/
|
|
|
|
| └── less/
|
|
|
|
├── images/ # images for posts and pages
|
|
|
|
├── images/ # images for posts and pages
|
|
|
|
├── 404.md # 404 page
|
|
|
|
├── 404.md # 404 page
|
|
|
|
├── about.md # sample about page
|
|
|
|
|
|
|
|
├── feed.xml # Atom feed template
|
|
|
|
├── feed.xml # Atom feed template
|
|
|
|
├── index.md # sample homepage. lists 5 latest posts
|
|
|
|
├── index.md # sample homepage. lists 5 latest posts
|
|
|
|
├── posts.md # sample post index page. lists all posts in reverse chronology
|
|
|
|
├── posts/ # sample post index page. lists all posts in reverse chronology
|
|
|
|
└── theme-setup.md # theme setup page. safe to remove
|
|
|
|
└── theme-setup/ # theme setup page. safe to remove
|
|
|
|
{% endhighlight %}
|
|
|
|
{% endhighlight %}
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
@ -102,7 +103,7 @@ Example `title: My Awesome Site`
|
|
|
|
|
|
|
|
|
|
|
|
#### url
|
|
|
|
#### url
|
|
|
|
|
|
|
|
|
|
|
|
Used to generate absolute urls in `sitemap.xml`, `atom.xml`, and for generating canonical URLs in `<head>`. When developing locally either comment this out or use something like `http://localhost:4000` so all assets load properly. *Don't include a trailing `/`*.
|
|
|
|
Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for generating canonical URLs in `<head>`. When developing locally either comment this out or use something like `http://localhost:4000` so all assets load properly. *Don't include a trailing `/`*.
|
|
|
|
|
|
|
|
|
|
|
|
Examples:
|
|
|
|
Examples:
|
|
|
|
|
|
|
|
|
|
|
@ -211,7 +212,45 @@ image:
|
|
|
|
|
|
|
|
|
|
|
|
### Thumbnails for OG and Twitter Cards
|
|
|
|
### Thumbnails for OG and Twitter Cards
|
|
|
|
|
|
|
|
|
|
|
|
Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *_head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
|
|
|
|
Feature and thumbnail images are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) as well. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Pro-Tip**: You need to [apply for Twitter Cards](https://dev.twitter.com/docs/cards) before they will begin showing up when links to your site are shared.
|
|
|
|
|
|
|
|
{:.notice}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Author Override
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
By making use of data files you can assign different authors for each post.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Start by modifying `authors.yml` file in the `_data` folder and add your authors using the following format.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% highlight yaml %}
|
|
|
|
|
|
|
|
# Authors
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
billy_rick:
|
|
|
|
|
|
|
|
name: Billy Rick
|
|
|
|
|
|
|
|
web: http://thewhip.com
|
|
|
|
|
|
|
|
email: billy@rick.com
|
|
|
|
|
|
|
|
bio: "What do you want, jewels? I am a very extravagant man."
|
|
|
|
|
|
|
|
avatar: bio-photo-2.jpg
|
|
|
|
|
|
|
|
twitter: extravagantman
|
|
|
|
|
|
|
|
google:
|
|
|
|
|
|
|
|
plus: +BillyRick
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
cornelius_fiddlebone:
|
|
|
|
|
|
|
|
name: Cornelius Fiddlebone
|
|
|
|
|
|
|
|
email: cornelius@thewhip.com
|
|
|
|
|
|
|
|
bio: "I ordered what?"
|
|
|
|
|
|
|
|
avatar: bio-photo.jpg
|
|
|
|
|
|
|
|
twitter: rhymeswithsackit
|
|
|
|
|
|
|
|
google:
|
|
|
|
|
|
|
|
plus: +CorneliusFiddlebone
|
|
|
|
|
|
|
|
{% endhighlight %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
To assign Billy Rick as an author for our post. We'd add the following YAML front matter to a post:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% highlight yaml %}
|
|
|
|
|
|
|
|
author: billy_rick
|
|
|
|
|
|
|
|
{% endhighlight %}
|
|
|
|
|
|
|
|
|
|
|
|
### Table of Contents
|
|
|
|
### Table of Contents
|
|
|
|
|
|
|
|
|
|
|
@ -246,7 +285,7 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
|
|
|
|
|
|
|
|
|
|
|
|
## Further Customization
|
|
|
|
## Further Customization
|
|
|
|
|
|
|
|
|
|
|
|
Jekyll 2.0 added support for Sass files making it much easier to modify a theme's fonts and colors. By editing values found in `_sass/variables.scss` you can fine tune the site's colors and typography.
|
|
|
|
Jekyll 2.x added support for Sass files making it much easier to modify a theme's fonts and colors. By editing values found in `_sass/variables.scss` you can fine tune the site's colors and typography.
|
|
|
|
|
|
|
|
|
|
|
|
For example if you wanted a red background instead of white you'd change `$bodycolor: #fff;` to `$bodycolor: $cc0033;`.
|
|
|
|
For example if you wanted a red background instead of white you'd change `$bodycolor: #fff;` to `$bodycolor: $cc0033;`.
|
|
|
|
|
|
|
|
|
|
|
@ -256,7 +295,7 @@ To modify the site's JavaScript files I setup a Grunt build script to lint/conca
|
|
|
|
npm install
|
|
|
|
npm install
|
|
|
|
{% endhighlight %}
|
|
|
|
{% endhighlight %}
|
|
|
|
|
|
|
|
|
|
|
|
From the theme's root, use `grunt` concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt watch` in combination with `jekyll build --watch` to watch for updates JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
|
|
|
|
From the theme's root, use `grunt` concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt dev` in combination with `jekyll build --watch` to watch for updates JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|