title: "Minimal-Mistakes-Jekyll - Setup and Configuration"
description: "Contributing to the websites of DIDecentral via GitHub, Jekyll and Minimal Mistakes."
excerpt: >
This is to help anyone to understand how we're using Minimal Mistakes to publish this and other web-sites. For contributors, or your own use, outside of this organization.
header:
caption: "Minimal Mistakes Setup and [Quick-Start](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/)."
This guide should make it easier for contributors to understand how this site works. It should also be useful as a way to learn the basics of using Jekyll with the Minimal Mistakes theme, to publish a website via GitHub pages.
However, I've used Minimal Mistakes to publish large websites and small web-sites. It really works. It works well. Even before you know how to use all of it's features, its a really reliable framework.
It supports an incredible variety of functions that simply work. So for building public-domain educational resources, it makes sense for me to stick with what's tried and true. I've tried to find other themes that offer a comprable feature set, and it's not easy.
Much respect to [Michael Rose](https://mademistakes.com/)!!
I've used a few of his themes; they are well put together, often ported to other SSGs besides Jekyll, and really a class of their own when it comes to Jekyll themes.
You must have installed [Git](https://web-work.tools/command-line-git-ssh/),` and the [Ruby Bundler](https://bundler.io/).
I'll also recommend using [VSCode](https://web-work.tools/content-creation/), because it's fully integrated with `git`, so that you don't have to worrying about learning git commands.
Also, I usually create a new repository on github, first. Then I clone it locally, again, avoiding the terminal. Meaning we can learn git in more depth, at our leisure.
| └── ui-text.yml # text used throughout the theme's UI
├── _includes
| ├── analytics-providers # snippets for analytics (Google and custom)
| ├── comments-providers # snippets for comments
| ├── footer # custom snippets to add to site footer
| ├── head # custom snippets to add to site head
| ├── feature_row # feature row helper
| ├── gallery # image gallery helper
| ├── group-by-array # group by array helper for archives
| ├── nav_list # navigation list helper
| ├── toc # table of contents helper
| └── ...
├── _layouts
| ├── archive-taxonomy.html # tag/category archive for Jekyll Archives plugin
| ├── archive.html # archive base
| ├── categories.html # archive listing posts grouped by category
| ├── category.html # archive listing posts grouped by specific category
| ├── collection.html # archive listing documents in a specific collection
| ├── compress.html # compresses HTML in pure Liquid
| ├── default.html # base for all other layouts
| ├── home.html # home page
| ├── posts.html # archive listing posts grouped by year
| ├── search.html # search page
| ├── single.html # single document (post/page/etc)
| ├── tag.html # archive listing posts grouped by specific tag
| ├── tags.html # archive listing posts grouped by tags
| └── splash.html # splash page
├── _sass # SCSS partials
├── assets
| ├── css
| | └── main.scss # main stylesheet, loads SCSS partials from _sass
| ├── images # image assets for posts/pages/collections/etc.
| ├── js
| | ├── plugins # jQuery plugins
| | ├── vendor # vendor scripts
| | ├── _main.js # plugin settings and other scripts to load after jQuery
| | └── main.min.js # optimized and concatenated script file loaded before </body>
├── _config.yml # site configuration
├── Gemfile # gem file dependencies
├── index.html # paginated home page showing recent posts
└── package.json # NPM build scripts
```
### CSS - Stylesheets
At the moment, I'm quite CSS agnostic. One thing at a time.. However, if you wanted to add a little style to the page, the community might appreciate that.
| | └── main.scss # main stylesheet, loads SCSS partials in _sass
```
>To make basic tweaks to theme’s style Sass variables can be overridden by adding to `<your_project>/assets/css/main.scss`. For instance, to change the link color used throughout the theme add:
There are a number of other variables, you may find by following the link. These are the variables I have changed, so far. Before messing with CSS please check the variables, to be sure you aren't doing too much work!
### Changing the Font-Size
* [Upgrade-friendly way of adjusting font sizes globally](https://github.com/mmistakes/minimal-mistakes/issues/1219)
>So what you can do is add any overriding/new CSS after the @import minimal-mistakes;, in your case:
```
{% raw %}
@import "minimal-mistakes";
html {
font-size: 16px; // change to whatever
@include breakpoint($medium) {
font-size: 18px; // change to whatever
}
@include breakpoint($large) {
font-size: 20px; // change to whatever
}
@include breakpoint($x-large) {
font-size: 22px; // change to whatever
}
}
{% endraw %}
```
Because this theme is entirely responsive, if you want to change the font-size, you should do it like so.
## Minimal Mistakes Initial Setup
I clone minimal-mistakes into the same directory as whatever website I'm working on, so they are right next to eachother.
Then I copy over these files and directories to the folder that is linked to the github repository where I want to be able to publish it from.
According to the quickstart guide, when forking these can be safely deleted:
```
.editorconfig
.gitattributes
.github
.git
/docs
/test
CHANGELOG.md
minimal-mistakes-jekyll.gemspec
README.md
screenshot-layouts.png
screenshot.png
```
I've moved /docs and /test to /example-site, and added .git, since we're cloning the project, but not forking it, we won't be keeping them linked and can also remove the .git file, and then copied everything that's left over to my project directory, that has its own history and .git files.
I might delete some of the layouts and includes, later. test push I'm pretty sure all I need is a `gem-file` and `_config.yml`. The Gem Install means that GitHub will use a Ruby Gem Package that contains everything needed to run the website. You only need the files that you want to customize or configure somehow. For me, I usually need to change the head, and footer, as well as the social share, but I also change the home layout.. well you see it's easier to just have them all, if you want to customize, at all.
I'm just starting to get comfortable existing with CSS, I've even edited some _scss files, now and again, producing the desired effect. However, that's not my strength.
### Gemfile
The gem-file must be properly set up to build and test your changes locally. Not necessary for minor changes, but if you get very deep into working on a web-site, you'll not want to depend on live testing every change ;)
I'm following instructions from [Minimal-Mistakes Quick-Start Guide](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/), but also I've figured some of this out as I go.
Change the Gemfile so it looks like so:
```
gem "github-pages", group: :jekyll_plugins
# To upgrade, run `bundle update`.
gem "github-pages", group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-paginate"
gem "jekyll-sitemap"
gem "jekyll-gist"
gem "jekyll-feed"
gem "jemoji"
gem "jekyll-include-cache"
gem "jekyll-redirect-from"
gem "jekyll-mentions"
gem "html-proofer"
end
```
Every plugin listed in your _config.yml should be also listed in your gem-file, if you want it to work locally, and if your features depend on some of these plugins, then its best to put them in the gemfile as well.
Then, once saved, run the bundle command in the root directory of your project.
`bundle install`
then
`bundle update`
then
`bundle exec jekyll serve`
if all went well you should be looking at a screen like this:
### _config.yml
We'll aim to keep this page updated with whatever is the most recent configuration, with notes of explanation when necessary.
I don't have comments on this site, I just tested them out on the 'community site'. I *will* set this up for Algolia Search, soon, and provide the deets on that.
```yaml
# Social Sharing
twitter:
username : "infominer33"
site: "didecentral"
# description : "Resources for Creating a Vendor Agnostic, User-Controlled, Identity Layer for the Internet."
I just went to [fontawesome.com](https://fontawesome.com) and it's pretty simple to try and match above formula without thinking too deeply on the matter.
### _config.yml - Permalink Defaults
The permalink default defines permalinks, in the case that they are not defined within a post.
This is the code that makes social share and donation button on each page. The Bitcoin, Tippin.me, and DOGE addresses are specific for DIDecentral, and currently under @infominer33's control.
If you copy that part to get the reddit button included with the others, you might find that you are missing the actual button.
just head over to buttons.css :rofl: (idk why that's so funny to me)
```
/* button colors */
$buttoncolors:
(primary, $primary-color),
(inverse, #fff),
(light-outline, transparent),
(success, $success-color),
(warning, $warning-color),
(danger, $danger-color),
(info, $info-color),
(facebook, $facebook-color),
(twitter, $twitter-color),
(linkedin, $linkedin-color),
(reddit, $reddit-color);
```
Because the Reddit Color is already defined in [_variables.scss](https://github.com/didecentral/community-website/blob/master/_sass/minimal-mistakes/_variables.scss), all you need to do is reference it here.
## Author vs Authors
There are two variables that must always be considered.
Author, is for the initial or primary author.
Authors is for all the people who have contributed to that document.
So if you make a new post be sure to set both in your front-matter
```yaml
---
title: "Your Awesome Post"
author: "AwesomeYou"
authors: ["AwesomeYou"]
---
```
Then if I came and touched up your post, I would add myself to the authors:
```yaml
---
title: "Your Awesome Post"
author: "AwesomeYou"
authors: ["AwesomeYou","infominer33"]
---
```
Every post and page should have these, but I'm used to being the only author, so that will require some work, or maybe will leave old articles alone... not sure
### Authors Code
This was really crudely hacked together from the other lists in this section.
