Made Mistakes Source Code
This is the source code of Made Mistakes, a personal blog and portfolio built with Jekyll and a starter I call Skinny Bones.
Please note: Made Mistakes hasn't been completely "themed" like some of my other Jekyll repos and isn't GitHub Pages compatible. In some cases the Jekyll plugins may be safe to remove without breaking things while others may not fare as well.
The two biggies likely to cause the most headaches are Jekyll Archives and Jekyll Assets. Archives auto-generates all of the tag pages so you'll need an alternative solution or just go without them if you turn that baby off.
Jekyll Assets is used to build, concatenate, MD5 fingerprint, and minify stylesheets and JavaScript. All of this can be done with Grunt/Gulp instead if you prefer that workflow or you could simplify things and use Jekyll to pre-process your Sass partials. Either way it's doable with minor edits.
- Jekyll Sitemap (GitHub Pages supported)
- Jekyll Archives
- Jekyll Assets
- Jekyll Related Posts
- Jekyll Picture Tag
Made Mistakes has a lot of image assets. images/ has been split into its own repo to reduce the size of this repo.
To generate responsively sized images and necessary <picture> element markup use the {% picture %} tag. These images should be placed in images/_originals along with a copy in images. The _originals will be converted into various sizes specified in _config.yml while the ones in images will remain untouched to be used in XML feeds, social sharing cards, etc.
Make sure ImageMagick is installed for the Jekyll picture-tag plugin to work properly. Download the Windows install binary or brew install imagemagick on Mac OS X.
- Install dependencies
bundle install - Run Jekyll server to preview
bundle exec jekyll serve --config _config.dev.yml --no-watch. Good idea to disable auto-regeneration since the site is quite large and takes a few minutes to compile.
The home page is made up of three parts:
<root>/index.md: here you will find the content that makes up the home page. It's 99% HTML to get the desired markup but the same result could probably be achieved with Kramdown if you add {: .class-name} to each of the required elements.
The word slide effect is achieved with some JavaScript and wrapping each of the adjectives in <b></b> elements inside of .home__words-wrapper. When JavaScript is disabled only the first word is visible.
_layouts/home.html: stripped down version of the default layout with the .masthead and .colophon removed.
_sass/_home.scss: home page specific styles.
To include the Featured Posts widget at the top of an archive page add the following to its YAML Front Matter and customize as necessary.
feature:
visible: true
headline: "Featured Articles"
category: articles
By default social sharing and Google AdSense are enabled on all posts and pages. To disable add share: false or ads: false to the YAML Front Matter.
Comments are disabled by default. To enable add comments: true to the YAML Front Matter.
To easily add inline SVG icons to a post or page use the following include being sure to specify the icon by name.
{% include icon.html name="wink" %}
| Name | Description |
|---|---|
| amazon | Amazon logo |
| bitcoin | BitCoin logo |
| blank | blank face |
| comments | chat bubble |
| deal-with-it | sunglasses face |
| dollar-sign | dollar sign in circle |
| Facebook square logo | |
| github | GitHub octocat logo |
| google-plus | G+ logo |
| Instagram logo | |
| meh | indifferent face |
| paypal | PayPal logo |
| rss | RSS icon |
| smile | smiley face |
| tumblr | Tumblr logo |
| Twitter logo | |
| wink | wink face |
| youtube | YouTube logo |