{"id":13756645,"url":"https://github.com/mmistakes/made-mistakes-jekyll","last_synced_at":"2025-12-16T18:20:13.489Z","repository":{"id":24741356,"uuid":"28153832","full_name":"mmistakes/made-mistakes-jekyll","owner":"mmistakes","description":"Deprecated source for mademistakes.com. Previously built with Jekyll, Gulp, and Netlify.","archived":true,"fork":false,"pushed_at":"2021-06-18T14:31:40.000Z","size":15559,"stargazers_count":443,"open_issues_count":2,"forks_count":189,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-09-28T06:41:54.535Z","etag":null,"topics":["algolia","gulp","jamstack","jamstack-site","jekyll","netlify","personal-website"],"latest_commit_sha":null,"homepage":"https://mademistakes.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmistakes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-17T20:17:35.000Z","updated_at":"2024-05-19T13:20:55.000Z","dependencies_parsed_at":"2022-08-17T17:25:16.797Z","dependency_job_id":null,"html_url":"https://github.com/mmistakes/made-mistakes-jekyll","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fmade-mistakes-jekyll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fmade-mistakes-jekyll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fmade-mistakes-jekyll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmistakes%2Fmade-mistakes-jekyll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmistakes","download_url":"https://codeload.github.com/mmistakes/made-mistakes-jekyll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235059234,"owners_count":18929279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algolia","gulp","jamstack","jamstack-site","jekyll","netlify","personal-website"],"created_at":"2024-08-03T11:00:50.322Z","updated_at":"2025-10-03T01:30:42.906Z","avatar_url":"https://github.com/mmistakes.png","language":"CSS","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# [Made Mistakes](https://mademistakes.com) Source Code\n\nThis is the source code of Made Mistakes, a personal blog and portfolio built \nwith [Jekyll](http://jekyllrb.com) [Gulp](http://gulpjs.com/), and \n[Netlify](https://www.netlify.com/).\n\n*Please note: Made Mistakes hasn't been \"themed\" like some of my other \n[Jekyll repos](https://mademistakes.com/work/jekyll-themes/) and isn't compatible \nwith the \"default\" GitHub Pages workflow without substantial alterations.*\n\n### Plugins used\n\n- [Jekyll Sitemap](https://github.com/jekyll/jekyll-sitemap) (GitHub Pages supported)\n- [Jemoji](https://github.com/jekyll/jemoji)\n- [Jekyll Paginate v2](https://github.com/sverrirs/jekyll-paginate-v2)\n- [Jekyll TOC](https://github.com/toshimaru/jekyll-toc)\n\n### Images\n\n[Made Mistakes](https://mademistakes.com) has a lot of image assets. \n`src/assets/images/` has been split into its [own repo](https://github.com/mmistakes/made-mistakes-images) and included as a Git submodule.\n\n`page.image.feature` should be placed in `src/assets/images/feature`. These \n`feature` images will be converted into various sizes to be responsively served \nby browsers that support the [`srcset` attribute](https://responsiveimages.org/).\n\n### Content helpers\n\n#### Notices\n\nCall-out text. Accepts the following types: `info`, `danger`, `warning`, and `success`. See [style guide](https://mademistakes.com/style-guide/) for visual examples.\n\n**Default notice example:**\n\n```liquid\n{% notice %}\nCall out some text. **Markdown** is acceptable.\n{% endnotice %}\n```\n\n**Danger notice example:**\n\n```liquid\n{% notice danger %}\n**Danger! Danger!** Use caution.\n{% endnotice %}\n```\n\n#### Figure\n\nEasily generate `figure` elements with optional `caption` and `class` parameters.\n\n**Examples:**\n\nIn simplest usage:\n\n```liquid\n{% figure %}\n![Image](/path/to/image.jpg)\n{% endfigure %}\n```\n\n```html\n\u003cfigure\u003e\n  \u003cimg src=\"/path/to/image.jpg\" alt=\"Image\" /\u003e\n\u003c/figure\u003e\n```\n\nIf a figure contains an image (or multiple images), the surrounding `\u003cp\u003e` will be stripped:\n\n```liquid\n{% figure %}\n![Image](/path/to/image.jpg)\n{% endfigure %}\n```\n\n```html\n\u003cfigure\u003e\n  \u003cimg src=\"/path/to/image.jpg\" alt=\"Image\" /\u003e\n\u003c/figure\u003e\n```\n\nYou can provide a caption. Any markdown will be rendered:\n\n```liquid\n{% figure caption:\"*Markdown* caption\" %}\n![Image](/path/to/image.jpg)\n{% endfigure %}\n```\n\n```html\n\u003cfigure\u003e\n  \u003cimg src=\"/path/to/image.jpg\" alt=\"Image\" /\u003e\n  \u003cfigcaption\u003e\u003cem\u003eMarkdown\u003c/em\u003e caption\u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\nYou can also provide a class name(es) for CSS styling:\n\n```liquid\n{% figure caption:\"A caption\" class:\"classname\" %}\n![Image](/path/to/image.jpg)\n{% endfigure %}\n```\n\n```html\n\u003cfigure class=\"classname\"\u003e\n  \u003cimg src=\"/path/to/image.jpg\" alt=\"Image\" /\u003e\n  \u003cfigcaption\u003eA caption\u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\nFinally, the caption parameter will accept liquid output markup:\n\n```liquid\n{% figure caption:\"{{ page.title }}\" %}\n![Image](/path/to/image.jpg)\n{% endfigure %}\n```\n\n```html\n\u003cfigure\u003e\n  \u003cimg src=\"/path/to/image.jpg\" alt=\"Image\" /\u003e\n  \u003cfigcaption\u003eThe title of my post\u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\n#### Lazyload\n\nLazyload images using [**lazysizes**](https://github.com/aFarkas/lazysizes) \nuntil they're actually needed for improved page performance.\n\n| Attribute  | Required     | Description                                                                                                                                             |\n|------------|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `data-src` | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally.                                                    |\n| `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`. |\n| `alt`      | Optional     | Image alternate text.                                                                                                                                   |\n\n**Example:**\n\n```liquid\n{% lazyload data-src=\"/assets/images/my-image.jpg\" src=\"/assets/images/my-image-low-quality.jpg\" alt=\"my lazyloaded image\" %}\n```\n\n#### Responsive video embed\n\nEmbed a video from YouTube or Vimeo that responsively sizes to fit the width of \nits parent using [`/_plugins/video_embed.rb`](src/_plugins.video_embed.rb).\n\n##### YouTube\n\nTo embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` \n(long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or \npage's main content you'd use: \n\n```liquid\n{% youtube XsxDH4HcOWA %}\n```\n\n##### Vimeo\n\nTo embed the following Vimeo video at url `https://vimeo.com/97649261` into a \npost or page's main content you'd use: \n\n```liquid\n{% vimeo 97649261 %}\n```\n\n### Local development\n\nLet Jekyll do what it does best and transform your content into HTML. Asset \nmanagement is handled by Gulp:\n\n- build `style.css` (preprocess SCSS, add vendor prefixes, concatenate, minify, \n  hash, and gzip)\n- build critical path CSS\n- build `index.js` (concatenate, minify, hash, and gzip)\n- optimize images\n- optimize and resize `feature` images\n- optimize and combine SVG icon set\n- serve site locally for testing with Browser Sync\n- deploy site to production server via Rsync\n- submit XML sitemap to Google \u0026 Bing\n\nDefault structure (paths can be modified in `gulpfile.js` and `_config.yml`):\n\n```bash\n├── gulp                      # =\u003e gulp tasks\n├── src                       # =\u003e source Jekyll files and assets\n|  ├── _includes\n|  ├── _layouts\n|  ├── _plugins\n|  ├── ...\n|  ├── _posts\n|  ├── assets\n|  |  ├── icons\n|  |  ├── images\n|  |  |   └── feature\n|  |  ├── javascript\n|  |  |   ├── plugins\n|  |  |   ├── vendor\n|  |  |   └── main.js\n|  |  ├── stylesheets\n|  |  |   ├── vendor\n|  |  |   ├── ...\n|  |  |   └── style.scss\n├── .editorconfig\n├── .gitignore\n├── _config.dev.yml\n├── _config.yml\n├── Gemfile\n├── gulpfile.js\n├── package.json\n├── rsync-credentials.json\n├── ...\n```\n\n## Getting started\n\n### Dependencies:\n\n- **Ruby**: \u003e2.1 with Bundler \u003e1.10\n- **Node**: \u003e4.2 and Yo \u003e1.7.0\n- **Yarn**\n- **Gulp**: Since the release candidate is running Gulp 4.0 you need to install \n  `gulp-cli`: `npm install gulp-cli -g`\n\n**Step 1:** Install [Bundler](http://bundler.io/), then run `bundle install`.\n\n**Step 2.** Install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/docs/install),\nthen run `yarn install`.\n\n**Step 3:** Install [node-gyp](https://github.com/nodejs/node-gyp#installation).\n\n**Step 4.** To start run `gulp`. A development version of the site should be \ngenerated and opened in a browser with Browser Sync at `http://localhost:4000`.\n\n## Usage\n\n### `gulp [--prod]`\n\nThis is the default command, and probably the one you'll use the most. This\ncommand will build your assets and site with development settings. You'll get\nsourcemaps, your drafts will be generated. As you are changing your posts, pages \nand assets they will automatically update and inject into your browser via \n[BrowserSync][browsersync].\n\n\u003e `--prod`\n\nOnce you are done and want to verify that everything works with production\nsettings you add the flag `--prod` and your assets will be optimized. Your CSS,\nJS and HTML will be minified and gzipped, plus the CSS and JS will be cache\nbusted. The images will be compressed and Jekyll will generate a site with all\nyour posts and no drafts.\n\n### `gulp build [--prod]`\n\nThis command is identical to the normal `gulp [--prod]` however it will not\ncreate a BrowserSync session in your browser.\n\n### `gulp (build) [--prod]` main subtasks\n\n\u003e `gulp jekyll [--prod]`\n\nWithout production settings Jekyll will only create both future posts and drafts. \nWith `--prod` none of that is true and it will generate all your posts.\n\n\u003e `gulp styles|scripts [--prod]`\n\nBoth your CSS and JS will have sourcemaps generated for them under development\nsettings. Once you generate them with production settings sourcemap generation\nis disabled. Both will be minified, gzipped and cache busted with production\nsettings.\n\n\u003e `gulp images:optimize`\n\nOptimizes standard images and copies to `/dist` folder.\n\n\u003e `gulp images:feature`\n\nSimilar to the previous task but for images in `src/assets/images/feature`. \nResizes each image into various sizes to be served responsively with `\u003cimg\u003e` \n`srcset` or `\u003cpicture\u003e` elements, optimizes, and then copies to `/dist` folder.\n\n\u003e `gulp html --prod`\n\n**Does nothing without `--prod`.** Minifies and gzips your HTML files.\n\n\u003e `gulp serve`\n\nIf you just want to watch your site you can run this command. If wanted you can\nalso edit the `serve` task to allow it to tunnel via [localtunnel][localtunnel]\nso people outside your local network can view it as well:\n\n```js\n  // tunnel: true,\n```\n\nYou can also change the behavior for how it opens the URL when you run `gulp\n[--prod]`, you can see the options [here][browsersync-open]:\n\n```js\n  // open: false,\n```\n\n### `gulp icons`\n\nSVG assets are optimized and smashed together into `assets/icons/icons.svg` and can \nbe referenced by name. To update or add new assets place appropriately named \n`.svg` files into the `src/assets/icons` folder.\n\n### `gulp deploy`\n\nWhen you're done developing and have built your site with either `gulp --prod`\nor `gulp build --prod` you can deploy your site with Rsync.\n\nIf you need any help with configuring it, checkout the [`gulp-rsync`][rsync] repo.\n\n\u003e `gulp submit:sitemap`\n\nSubmit sitemap XML file to Google and Bing.\n\n### `gulp check`\n\nBuilds site with production settings then tests HTML for broken links with \n[html-proofer][htmlproofer].\n\n### `gulp clean`\n\nDeletes your assets from their `.tmp` directory as well as in `dist` and deletes\nany gzipped files. **NOTE:** Does not delete your images from `.tmp` to reduce\nthe time to build your site due to image optimizations.\n\n### `gulp rebuild`\n\nOnly use this if you want to regenerate everything, this will delete everything \n(images, assets, your generated Jekyll site). You really shouldn't need to do\nthis unless you have phantom image assets floating around you want to clear.\n\n### `gulp critical`\n\nExtract critical path CSS from `home`, `archive`, `post`, and `page` layouts \nto inline via Jekyll `_includes`.\n\n**Note:** Clear `critical-\u003clayout\u003e.css` includes, run `gulp build`, then `gulp critical`.\n\n## Subtasks\n\nAll of the subtasks lives in their own files in the `gulp` directory and are\nnamed after what they do. You can edit or look at any of them to see how they\nactually work. They're all commented.\n\n## Inject more than one JavaScript file\n\nIf you want to split up your JavaScript files into say a `index.js` and a\n`vendor.js` file with files from [Bower][https://bower.io/] you can do this \nquite easily. Create a copy of the `scripts` gulp task and rename it to \n`scripts:vendor` and change the\n`gulp.src` files you need:\n\n```js\ngulp.src([\n  'bower_components/somelibrary.js/dist/somelibrary.js',\n  'bower_components/otherthing.js/dist/otherthing.js'\n])\n```\n\nand then change `.pipe(concat('index.js'))` into\n`.pipe(concat('vendor.js'))`. Then you go to the bottom of the gulpfile and\nchange the `assets` task:\n\n```js\ngulp.task('assets', gulp.series(\n  gulp.series('clean:assets'),\n  gulp.parallel('styles', 'scripts:vendor', 'scripts', 'fonts', 'images')\n));\n```\n\nNotice the `scripts:vendor` task that has been added. Also be aware that things\nare injected in alphabetical order, so if you need your vendor scripts before\nthe `index.js` file you have to either rename the `index.js` file or rename the\n`vendor.js` file. When you now run `gulp` or `gulp build` it will create a\n`vendor.js` file and automatically inject it at the bottom of your HTML. When\nrunning with `--prod` it'll automatically optimize as well.\n\nFor more advanced uses, refer to the [`gulp-inject`][inject] documentation on\nhow to create individual inject tags and inject specific files into them.\n\n**Gulp tasks inspired by [generator-jekyllized](https://github.com/sondr3/generator-jekyllized) by [Sondre Nilsen](https://github.com/sondr3).**\n\n[browsersync]: https://github.com/shakyShane/browser-sync\n[browsersync-open]: https://browsersync.io/docs/options/#option-open\n[gulp]: http://gulpjs.com/\n[inject]: https://github.com/klei/gulp-inject\n[jekyll-url]: http://jekyllrb.com/docs/github-pages/#project-page-url-structure\n[jekyll]: https://jekyllrb.com\n[localtunnel]: http://localtunnel.me/\n[rsync]: https://github.com/jerrysu/gulp-rsync\n[htmlproofer]: https://github.com/gjtorikian/html-proofer\n\n---\n\n### Posts and Pages\n\nComments are disabled by default. To enable add `comments: true` to the YAML \nFront Matter. Preferred method is to enable via YAML Front Matter defaults in `_config.yml`.\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2004-2019 Michael Rose\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nMade Mistakes incorporates icons from [The Noun Project](https://thenounproject.com/).\nIcons are distributed under Creative Commons Attribution 3.0 United States (CC BY 3.0 US).\nHome by Mahmure Alp from the Noun Project\n\nMade Mistakes incorporates photographs from [Unsplash](https://unsplash.com).\n\nMade Mistakes incorporates [Breakpoint](http://breakpoint-sass.com/).\nBreakpoint is distributed under the terms of the [MIT/GPL Licenses](http://opensource.org/licenses/MIT).\n\nMade Mistakes incorporates [Bigfoot](http://bigfootjs.com/),\nCopyright (c) 2013-2014, Chris Sauve.\nBigfoot is distributed under the terms of the MIT License](http://opensource.org/licenses/MIT).\n\nMade Mistakes incorporates [Lity](http://sorgalla.com/lity/),\nCopyright (c) 2015-2016, Jan Sorgalla.\nLity is distributed under the terms of the MIT License](http://opensource.org/licenses/MIT).\n\nMade Mistakes incorporates [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll),\nCopyright (c) 2019, Chris Ferdinandi.\nSmooth Scroll is distributed under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n\nMade Mistakes incorporates [Lazysizes](https://github.com/aFarkas/lazysizes),\nCopyright (c) 2015, Alexander Farkas.\nLazysizes is distributed under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n\nMade Mistakes incorporates [SVG for Everybody](https://jonathantneal.github.io/svg4everybody/),\nCopyright (c) Jonathan Neal.\nSVG for Everybody is distributed under the terms of the [CC0 1.0 Universal License](https://creativecommons.org/publicdomain/zero/1.0/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmistakes%2Fmade-mistakes-jekyll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmistakes%2Fmade-mistakes-jekyll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmistakes%2Fmade-mistakes-jekyll/lists"}