Repository files navigation

This is the source code of Made Mistakes, a personal blog and portfolio builtwithJekyllGulp, andNetlify.

Please note: Made Mistakes hasn't been "themed" like some of my otherJekyll repos and isn't compatiblewith the "default" GitHub Pages workflow without substantial alterations.

• Jekyll Sitemap (GitHub Pages supported)
• Jemoji
• Jekyll Paginate v2
• Jekyll TOC

Made Mistakes has a lot of image assets.src/assets/images/ has been split into itsown repo and included as a Git submodule.

page.image.feature should be placed insrc/assets/images/feature. Thesefeature images will be converted into various sizes to be responsively servedby browsers that support thesrcset attribute.

Call-out text. Accepts the following types:info,danger,warning, andsuccess. Seestyle guide for visual examples.

Default notice example:

{%notice %}Call out some text. **Markdown** is acceptable.{%endnotice %}

Danger notice example:

{%noticedanger %}**Danger! Danger!** Use caution.{%endnotice %}

Easily generatefigure elements with optionalcaption andclass parameters.

Examples:

In simplest usage:

{%figure %}![Image](/path/to/image.jpg){%endfigure %}

<figure><imgsrc="/path/to/image.jpg"alt="Image"/></figure>

If a figure contains an image (or multiple images), the surrounding<p> will be stripped:

{%figure %}![Image](/path/to/image.jpg){%endfigure %}

<figure><imgsrc="/path/to/image.jpg"alt="Image"/></figure>

You can provide a caption. Any markdown will be rendered:

{%figurecaption:"*Markdown* caption" %}![Image](/path/to/image.jpg){%endfigure %}

<figure><imgsrc="/path/to/image.jpg"alt="Image"/><figcaption><em>Markdown</em> caption</figcaption></figure>

You can also provide a class name(es) for CSS styling:

{%figurecaption:"A caption"class:"classname" %}![Image](/path/to/image.jpg){%endfigure %}

<figureclass="classname"><imgsrc="/path/to/image.jpg"alt="Image"/><figcaption>A caption</figcaption></figure>

Finally, the caption parameter will accept liquid output markup:

{%figurecaption:"{{page.title }}" %}![Image](/path/to/image.jpg){%endfigure %}

<figure><imgsrc="/path/to/image.jpg"alt="Image"/><figcaption>The title of my post</figcaption></figure>

Lazyload images usinglazysizesuntil they're actually needed for improved page performance.

Example:

{%lazyloaddata-src="/assets/images/my-image.jpg"src="/assets/images/my-image-low-quality.jpg"alt="my lazyloaded image" %}

Embed a video from YouTube or Vimeo that responsively sizes to fit the width ofits parent using/_plugins/video_embed.rb.

To embed the following YouTube video at urlhttps://www.youtube.com/watch?v=XsxDH4HcOWA(long version) orhttps://youtu.be/XsxDH4HcOWA (short version) into a post orpage's main content you'd use:

{%youtubeXsxDH4HcOWA %}

To embed the following Vimeo video at urlhttps://vimeo.com/97649261 into apost or page's main content you'd use:

{%vimeo97649261 %}

Let Jekyll do what it does best and transform your content into HTML. Assetmanagement is handled by Gulp:

• buildstyle.css (preprocess SCSS, add vendor prefixes, concatenate, minify,hash, and gzip)
• build critical path CSS
• buildindex.js (concatenate, minify, hash, and gzip)
• optimize images
• optimize and resizefeature images
• optimize and combine SVG icon set
• serve site locally for testing with Browser Sync
• deploy site to production server via Rsync
• submit XML sitemap to Google & Bing

Default structure (paths can be modified ingulpfile.js and_config.yml):

├── gulp# => gulp tasks├── src# => source Jekyll files and assets|  ├── _includes|  ├── _layouts|  ├── _plugins|  ├── ...|  ├── _posts|  ├── assets||  ├── icons||  ├── images|||   └── feature||  ├── javascript|||   ├── plugins|||   ├── vendor|||   └── main.js||  ├── stylesheets|||   ├── vendor|||   ├── ...|||   └── style.scss├── .editorconfig├── .gitignore├── _config.dev.yml├── _config.yml├── Gemfile├── gulpfile.js├── package.json├── rsync-credentials.json├── ...

• Ruby: >2.1 with Bundler >1.10
• Node: >4.2 and Yo >1.7.0
• Yarn
• Gulp: Since the release candidate is running Gulp 4.0 you need to installgulp-cli:npm install gulp-cli -g

Step 1: InstallBundler, then runbundle install.

Step 2. InstallNode.js andYarn,then runyarn install.

Step 3: Installnode-gyp.

Step 4. To start rungulp. A development version of the site should begenerated and opened in a browser with Browser Sync athttp://localhost:4000.

This is the default command, and probably the one you'll use the most. Thiscommand will build your assets and site with development settings. You'll getsourcemaps, your drafts will be generated. As you are changing your posts, pagesand assets they will automatically update and inject into your browser viaBrowserSync.

--prod

Once you are done and want to verify that everything works with productionsettings you add the flag--prod and your assets will be optimized. Your CSS,JS and HTML will be minified and gzipped, plus the CSS and JS will be cachebusted. The images will be compressed and Jekyll will generate a site with allyour posts and no drafts.

This command is identical to the normalgulp [--prod] however it will notcreate a BrowserSync session in your browser.

gulp jekyll [--prod]

Without production settings Jekyll will only create both future posts and drafts.With--prod none of that is true and it will generate all your posts.

gulp styles|scripts [--prod]

Both your CSS and JS will have sourcemaps generated for them under developmentsettings. Once you generate them with production settings sourcemap generationis disabled. Both will be minified, gzipped and cache busted with productionsettings.

gulp images:optimize

Optimizes standard images and copies to/dist folder.

gulp images:feature

Similar to the previous task but for images insrc/assets/images/feature.Resizes each image into various sizes to be served responsively with<img>srcset or<picture> elements, optimizes, and then copies to/dist folder.

gulp html --prod

Does nothing without--prod. Minifies and gzips your HTML files.

gulp serve

If you just want to watch your site you can run this command. If wanted you canalso edit theserve task to allow it to tunnel vialocaltunnelso people outside your local network can view it as well:

// tunnel: true,

You can also change the behavior for how it opens the URL when you rungulp [--prod], you can see the optionshere:

// open: false,

SVG assets are optimized and smashed together intoassets/icons/icons.svg and canbe referenced by name. To update or add new assets place appropriately named.svg files into thesrc/assets/icons folder.

When you're done developing and have built your site with eithergulp --prodorgulp build --prod you can deploy your site with Rsync.

If you need any help with configuring it, checkout thegulp-rsync repo.

gulp submit:sitemap

Submit sitemap XML file to Google and Bing.

Builds site with production settings then tests HTML for broken links withhtml-proofer.

Deletes your assets from their.tmp directory as well as indist and deletesany gzipped files.NOTE: Does not delete your images from.tmp to reducethe time to build your site due to image optimizations.

Only use this if you want to regenerate everything, this will delete everything(images, assets, your generated Jekyll site). You really shouldn't need to dothis unless you have phantom image assets floating around you want to clear.

Extract critical path CSS fromhome,archive,post, andpage layoutsto inline via Jekyll_includes.

Note: Clearcritical-<layout>.css includes, rungulp build, thengulp critical.

All of the subtasks lives in their own files in thegulp directory and arenamed after what they do. You can edit or look at any of them to see how theyactually work. They're all commented.

If you want to split up your JavaScript files into say aindex.js and avendor.js file with files from [Bower][https://bower.io/] you can do thisquite easily. Create a copy of thescripts gulp task and rename it toscripts:vendor and change thegulp.src files you need:

gulp.src(['bower_components/somelibrary.js/dist/somelibrary.js','bower_components/otherthing.js/dist/otherthing.js'])

and then change.pipe(concat('index.js')) into.pipe(concat('vendor.js')). Then you go to the bottom of the gulpfile andchange theassets task:

gulp.task('assets',gulp.series(gulp.series('clean:assets'),gulp.parallel('styles','scripts:vendor','scripts','fonts','images')));

Notice thescripts:vendor task that has been added. Also be aware that thingsare injected in alphabetical order, so if you need your vendor scripts beforetheindex.js file you have to either rename theindex.js file or rename thevendor.js file. When you now rungulp orgulp build it will create avendor.js file and automatically inject it at the bottom of your HTML. Whenrunning with--prod it'll automatically optimize as well.

For more advanced uses, refer to thegulp-inject documentation onhow to create individual inject tags and inject specific files into them.

Gulp tasks inspired bygenerator-jekyllized bySondre Nilsen.

Comments are disabled by default. To enable addcomments: true to the YAMLFront Matter. Preferred method is to enable via YAML Front Matter defaults in_config.yml.

The MIT License (MIT)

Copyright (c) 2004-2019 Michael Rose

Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.

Made Mistakes incorporates icons fromThe Noun Project.Icons are distributed under Creative Commons Attribution 3.0 United States (CC BY 3.0 US).Home by Mahmure Alp from the Noun Project

Made Mistakes incorporates photographs fromUnsplash.

Made Mistakes incorporatesBreakpoint.Breakpoint is distributed under the terms of theMIT/GPL Licenses.

Made Mistakes incorporatesBigfoot,Copyright (c) 2013-2014, Chris Sauve.Bigfoot is distributed under the terms of the MIT License](http://opensource.org/licenses/MIT).

Made Mistakes incorporatesLity,Copyright (c) 2015-2016, Jan Sorgalla.Lity is distributed under the terms of the MIT License](http://opensource.org/licenses/MIT).

Made Mistakes incorporatesSmooth Scroll,Copyright (c) 2019, Chris Ferdinandi.Smooth Scroll is distributed under the terms of theMIT License.

Made Mistakes incorporatesLazysizes,Copyright (c) 2015, Alexander Farkas.Lazysizes is distributed under the terms of theMIT License.

Made Mistakes incorporatesSVG for Everybody,Copyright (c) Jonathan Neal.SVG for Everybody is distributed under the terms of theCC0 1.0 Universal License.