Made Mistakes Source Code
This is the source code of Made Mistakes, a personal blog and portfolio built with Jekyll, Gulp, and Travis CI.
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
- Jekyll Sitemap (GitHub Pages supported)
- Jekyll Archives
- Jemoji
- Jekyll Paginate v2
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.
Include Parameter | Required | Description |
---|---|---|
type |
Optional | Notice type. Defaults to info , see style guide for examples. |
content |
Required | Notice text. Markdown allowed and encouraged. |
Example:
{% include notice type="danger" content="**This has been deprecated**." %}
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:lazyload
Creates a "low-quality" version of all images in src/assets/images/lazyload
for lazyloading and copies it and the original to /dist
folder after being
optimized.
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 <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 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-<layout>.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 ware 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
.