CSS HTML JavaScript Ruby Algolia Jekyll netlify jamstack personal-website Gulp jamstack-site
Need help with made-mistakes-jekyll?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
mmistakes

Description

Source for my website and blog (Jekyll + Gulp + Netlify)

435 Stars 202 Forks MIT License 4.5K Commits 0 Opened issues

Services available

Need anything else?

Made Mistakes Source Code

This is the source code of Made Mistakes, a personal blog and portfolio built with Jekyll Gulp, and Netlify.

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

Plugins used

Images

Made Mistakes has a lot of image assets.

src/assets/images/
has been split into its own repo and included as a Git submodule.

page.image.feature
should be placed in
src/assets/images/feature
. These
feature
images will be converted into various sizes to be responsively served by browsers that support the
srcset
attribute
.

Content helpers

Notices

Call-out text. Accepts the following types:

info
,
danger
,
warning
, and
success
. See style guide for visual examples.

Default notice example:

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

Danger notice example:

{% notice danger %}
**Danger! Danger!** Use caution.
{% endnotice %}

Figure

Easily generate

figure
elements with optional
caption
and
class
parameters.

Examples:

In simplest usage:

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

If a figure contains an image (or multiple images), the surrounding

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

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

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

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

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

Finally, the caption parameter will accept liquid output markup:

{% figure caption:"{{ page.title }}" %}
![Image](/path/to/image.jpg)
{% endfigure %}
Image
The title of my post

Lazyload

Lazyload images using lazysizes until they're actually needed for improved page performance.

| Attribute | Required | Description | |------------|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| |

data-src
| Required | Full path to image eg:
/assets/images/filename.jpg
. Use absolute URLS for those hosted externally. | |
src
| Optional | Full path to low-quality image eg:
/assets/images/filename.jpg
. Use absolute URLS for those hosted externally. Defaults to inline transparent
.gif
. | |
alt
| Optional | Image alternate text. |

Example:

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

Responsive video embed

Embed a video from YouTube or Vimeo that responsively sizes to fit the width of its parent using

/_plugins/video_embed.rb
.

YouTube

To embed the following YouTube video at url

https://www.youtube.com/watch?v=XsxDH4HcOWA
(long version) or
https://youtu.be/XsxDH4HcOWA
(short version) into a post or page's main content you'd use:
{% youtube XsxDH4HcOWA %}
Vimeo

To embed the following Vimeo video at url

https://vimeo.com/97649261
into a post or page's main content you'd use:
{% vimeo 97649261 %}

Local development

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

  • build
    style.css
    (preprocess SCSS, add vendor prefixes, concatenate, minify, hash, and gzip)
  • build critical path CSS
  • build
    index.js
    (concatenate, minify, hash, and gzip)
  • optimize images
  • optimize and resize
    feature
    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 in

gulpfile.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
├── ...

Getting started

Dependencies:

  • 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 install
    gulp-cli
    :
    npm install gulp-cli -g

Step 1: Install Bundler, then run

bundle install
.

Step 2. Install Node.js and Yarn, then run

yarn install
.

Step 3: Install node-gyp.

Step 4. To start run

gulp
. A development version of the site should be generated and opened in a browser with Browser Sync at
http://localhost:4000
.

Usage

gulp [--prod]

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

--prod

Once you are done and want to verify that everything works with production settings 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 cache busted. The images will be compressed and Jekyll will generate a site with all your posts and no drafts.

gulp build [--prod]

This command is identical to the normal

gulp [--prod]
however it will not create a BrowserSync session in your browser.

gulp (build) [--prod]
main subtasks

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 development settings. Once you generate them with production settings sourcemap generation is disabled. Both will be minified, gzipped and cache busted with production settings.

gulp images:optimize

Optimizes standard images and copies to

/dist
folder.

gulp images:feature

Similar to the previous task but for images in

src/assets/images/feature
. Resizes each image into various sizes to be served responsively with
srcset
or
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 can also edit the

serve
task to allow it to tunnel via localtunnel so 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 run

gulp
[--prod]
, you can see the options here:
  // open: false,

gulp icons

SVG assets are optimized and smashed together into

assets/icons/icons.svg
and can be referenced by name. To update or add new assets place appropriately named
.svg
files into the
src/assets/icons
folder.

gulp deploy

When you're done developing and have built your site with either

gulp --prod
or
gulp build --prod
you can deploy your site with Rsync.

If you need any help with configuring it, checkout the

gulp-rsync
repo.

gulp submit:sitemap

Submit sitemap XML file to Google and Bing.

gulp check

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

gulp clean

Deletes your assets from their

.tmp
directory as well as in
dist
and deletes any gzipped files. NOTE: Does not delete your images from
.tmp
to reduce the time to build your site due to image optimizations.

gulp rebuild

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 do this unless you have phantom image assets floating around you want to clear.

gulp critical

Extract critical path CSS from

home
,
archive
,
post
, and
page
layouts to inline via Jekyll
_includes
.

Note: Clear

critical-.css
includes, run
gulp build
, then
gulp critical
.

Subtasks

All of the subtasks lives in their own files in the

gulp
directory and are named after what they do. You can edit or look at any of them to see how they actually work. They're all commented.

Inject more than one JavaScript file

If you want to split up your JavaScript files into say a

index.js
and a
vendor.js
file with files from [Bower][https://bower.io/] you can do this quite easily. Create a copy of the
scripts
gulp task and rename it to
scripts:vendor
and change the
gulp.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 and change the
assets
task:
gulp.task('assets', gulp.series(
  gulp.series('clean:assets'),
  gulp.parallel('styles', 'scripts:vendor', 'scripts', 'fonts', 'images')
));

Notice the

scripts:vendor
task that has been added. Also be aware that things are injected in alphabetical order, so if you need your vendor scripts before the
index.js
file you have to either rename the
index.js
file or rename the
vendor.js
file. When you now run
gulp
or
gulp build
it will create a
vendor.js
file and automatically inject it at the bottom of your HTML. When running with
--prod
it'll automatically optimize as well.

For more advanced uses, refer to the

gulp-inject
documentation on how to create individual inject tags and inject specific files into them.

Gulp tasks inspired by generator-jekyllized by Sondre Nilsen.


Posts and Pages

Comments are disabled by default. To enable add

comments: true
to the YAML Front Matter. Preferred method is to enable via YAML Front Matter defaults in
_config.yml
.

License

The MIT License (MIT)

Copyright (c) 2004-2019 Michael Rose

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

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

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 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 THE SOFTWARE.

Made Mistakes incorporates icons from The 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 from Unsplash.

Made Mistakes incorporates Breakpoint. Breakpoint is distributed under the terms of the MIT/GPL Licenses.

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

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

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

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.