Repository files navigation

I've since stopped using Jekyll and consequently have neither the time nor needto maintain this package, I would however love it if someone who either found thisgenerator useful or wants to help to take over the responsibility in maintainingit. Hit me up on Twitter (@sondr3), Keybase (@sondre) or the mail in my GitHubprofile, I'll be more than happy to help you get up and running! :)

NOTE: Currently using gulp 4.0 which is in beta!

generator-jekyllized is a very opinionatedYeoman generator builtwithJekyll andgulp. You will be able to quickly scaffoldyour site and start developing. As you are working on your site your assets willautomatically be updated and injected into your browser as well as your posts.When you are done developing and want to publish it you are two commands awayfrom having everything optimized and published.

Rapidly prototype

While developing locally everything you change will automatically be updated andinjected into your browser. Changing your SCSS or JavaScript files willautomatically updated them, create sourcemaps and inject them. Writing orediting posts and pages for your website will do the same. Simple and effective.

Jekyll

Built on top of Jekyll 3, you get a mature and stable base with the full powerthat Jekyll brings you. You'll have sitemaps, Atom feeds generated and SEO metadata tags added to your posts and pages.

Optimize your assets

When you are done developing you can have your assets optimized and injectedcorrectly into your HTML. Your assets will be minified, compressed with gzip,cache busted and otherwise optimized. Your images will be run throughcompressors to save space and even your HTML will be minified.

Deploying

Finally, once everything is done and you are ready to publish your site, you cando it via either Amazon S3, Github Pages or Rsync. With a single command yournew/updated site is uploaded to your platform of choice.

• 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 installgulp-cli:npm install gulp-cli -g
• Jekyllized: Then install Jekyllized:npm install generator-jekyllized -g

• Scaffold: Runyo jekyllized in the directory you want scaffold your sitein
• Start: Rungulp and watch the magic unfold

To update the generator, runnpm update -g generator-jekyllized and then runyo jekyllized:update and it will update your packages and gulp tasks. You canskip installing dependencies by running it with--skip-install.NOTE:Updating will overwrite any changes you've done to your gulp tasks andpackage.json, so back them up before running it! It will ask before overwritingthough, so you can see the diff before applying it.

This is the default command, and probably the one you'll use the most. Thiscommand will build your assets and site with development settings. You'll getsourcemaps, your drafts will be generated and you'll only generate the last 10posts (for speed). As you are changing your posts, pages and assets they willautomatically update and inject into your browser viaBrowserSync.

--prod

Once you are done and want to verify that everything works with productionsettings 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 cachebusted. The images will be compressed and Jekyll will generate a site with allyour posts and no drafts.

This command is identical to the normalgulp [--prod] however it will notcreate a BrowserSync session in your browser.

gulp jekyll [--prod]

Without production settings Jekyll will only create the 10 latest posts and willcreate both future posts and drafts. With--prod none of that is true and itwill generate all your posts.

gulp styles|scripts [--prod]

Both your CSS and JS will have sourcemaps generated for them under developmentsettings. Once you generate them with production settings sourcemap generationis disabled. Both will be minified, gzipped and cache busted with productionsettings.

gulp images

Optimizes and caches your images. This is a set it and forget it command for themost part.

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 canalso edit theserve task to allow it to tunnel vialocaltunnelso people outside your local network can view it as well:

// tunnel: true,

You can also change the behaviour for how it opens the URL when you rungulp [--prod], you can see the optionshere:

// open: false,

When you're done developing and have built your site with eithergulp --prodorgulp build --prod you can deploy your site to either Amazon S3, GithubPages or with Rsync.

Amazon S3 and Rsync

If you chose either of these two, you'll have a[rsync/aws]-credentials.jsonfile in your root folder that you have to fill out. It should be pretty selfexplanatory, however, if you need any help with configuring it, you should checkout either thegulp-awspublish repo orgulp-rsyncrepo for help.

Github Pages

If you chose to upload to Github Pages there's no configuration besides startinga git repo in your folder, setting anorigin remote repo and rungulp deploy. Your site will be automatically pushed to Github. See theFAQ for configuring personal repos vs project repos.

Lints your JavaScript files using ESLint with XO Space settings and runjekyll doctor to look for potential errors.

Deletes your assets from their.tmp directory as well as indist and deletesany gzipped files.NOTE: Does not delete your images from.tmp to reducethe time to build your site due to image optimizations.

Only use this if you want to regenerate everything, this will delete everythinggenerated. Images, assets, your Jekyll site. You really shouldn't need to dothis.

All of the subtasks lives in their own files in thegulp directory and arenamed after what they do. You can edit or look at any of them to see how theyactually work. They're all commented.

Inject more than one JavaScript file

If you want to split up your JavaScript files into say aindex.js and avendor.js file with files from [Bower][bower] you can do this quite easily. Create acopy of thescripts gulp task and rename it toscripts:vendor and change thegulp.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 andchange theassets task:

gulp.task('assets',gulp.series(gulp.series('clean:assets'),gulp.parallel('styles','scripts:vendor','scripts','fonts','images')));

Notice thescripts:vendor task that has been added. Also be ware that thingsare injected in alphabetical order, so if you need your vendor scripts beforetheindex.js file you have to either rename theindex.js file or rename thevendor.js file. When you now rungulp orgulp build it will create avendor.js file and automatically inject it at the bottom of your HTML. Whenrunning with--prod it'll automatically optimize and such as well.

For more advanced uses, refer to thegulp-inject documentation onhow to create individual inject tags and inject specific files into them.

Github Pages configuration

By default if you select Github Pages as your deployment option your site willbe pushed to agh-pages branch, this works fine for any project pages butwon't work for your personal repo. If you want to use ausername.github.iosite all you have to do is to uncomment thebranch line.

gulp.task('upload',(done)=>{ghPages.publish(path.join(__dirname+'/../../','dist'),{dotfiles:true,// branch: "master"},done);});

You might also have to configure the URL for your site if you want to use GithubPages. Luckily the Jekyll documentationhas you covered.

Why don't you support Stylus/LESS/Angular/etc

Because I've never used them nor do I have any plans of using them. Furthermore,they're a bit outside what I want with this generator anyways. I want a lean,simple and opinionated generator, not a big complicated one.

See thecontribution docs.

MIT © Sondre Nilsen (https://github.com/sondr3)