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 "themed" like some of my other Jekyll repos and isn't compatible with the "default" GitHub Pages workflow without substantial alterations.
- Jekyll Sitemap (GitHub Pages supported)
- Jekyll Archives
- Jekyll Related Posts
- Jemoji
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.feature.images 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 srcset attribute.
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
featureimages - optimize and combine SVG icon set
- serve site with Browser Sync
- deploy site to production via Rsync
- submit XML sitemap to Google & Bing
Default structure (modify paths in gulpfile.js and _config.yml if altered):
├── 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.0 with Bundler >1.10
- Node: >4.2 and Yo >1.7.0
- 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 GraphicsMagick.
apt-get install graphicsmagick
brew install graphicsmagick
Decide upon Q8 or Q16:
A Q8 version is fine for processing typical photos intended for viewing on a computer screen. If you are dealing with film, scientific, or medical images, use ICC color profiles, or deal with images that have limited contrast, then the Q16 version is recommended.
Download and Install, be sure that "Update executable search path" is checked during installation.
Step 3. Install Node.js, then run npm install.
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.
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.
This command is identical to the normal gulp [--prod] however it will not
create 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 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
Optimizes and caches your images. This is a set it and forget it command for the most part.
gulp images
Similar to the previous task but for feature images. Resizes each image into various
sizes to be served responsively with <img> srcset or <picture> elements.
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,SVG assets are optimized and smashed together into _includes/icons.svg and can be referenced by name.
To update or add new assets place appropriately named .svg files into the src/assets/svg folder.
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.
Runs bundle exec jekyll doctor to look for potential errors.
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.
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.
Extract critical path CSS from article, glitch, and archive pages to inline
via Jekyll _includes.
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.
If you want to split up your JavaScript files into say a index.js and a
vendor.js file with files from [Bower][bower] 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.
The home and 404 error pages are made up of three parts:
-
Page Content:
_pages/home.mdand_pages/404.md. -
Glitch Layout:
_layouts/glitch.htmlis a stripped down version of the default layout with the.mastheadand.colophonremoved from view. Used for the home and 404 error pages. -
Glitch Stylesheet:
assets/stylesheets/glitch-critical.scssis slimmed down version of the site stylesheet.
The animated text typing effect is achieved with Typed.js. Text strings should be modified in assets/javascripts/glitch.js and match markup found in _pages/home.md and _pages/404.md.
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.