Coder Social home page Coder Social logo

jamesnocentini / made-mistakes-jekyll Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mmistakes/made-mistakes-jekyll

0.0 1.0 0.0 12.36 MB

:ghost: Source for my website and blog (Jekyll + Gulp + Travis CI)

Home Page: https://mademistakes.com

License: MIT License

Ruby 2.84% JavaScript 28.60% ApacheConf 16.35% HTML 24.95% CSS 27.26%

made-mistakes-jekyll's Introduction

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

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.0 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

Runs bundle exec jekyll doctor to look for potential errors.

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.

made-mistakes-jekyll's People

Contributors

mmistakes avatar gbbns avatar nhoizey avatar parvjain avatar

Watchers

James Nocentini avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.