2
2
3
3
[ ![ NPM version] ( https://badge.fury.io/js/generator-jekyllized.png )] ( http://badge.fury.io/js/generator-jekyllized ) [ ![ Coverage Status] ( https://coveralls.io/repos/sondr3/generator-jekyllized/badge.png )] ( https://coveralls.io/r/sondr3/generator-jekyllized ) [ ![ Code Climate] ( https://codeclimate.com/github/sondr3/generator-jekyllized/badges/gpa.svg )] ( https://codeclimate.com/github/sondr3/generator-jekyllized )
4
4
5
- ### Development is happening on the [ beta] [ beta ] branch!
6
-
7
5
* Waiting on Gulp 4.0 to be released for the beta to go back to being the main
8
6
version of Jekyllized. If you want to try it as it is right now you can install
9
7
it from NPM under the ` next ` tag. Just read the installation instructions!*
10
8
11
- ## Overview
9
+ ## Introduction
12
10
13
- Jekyllized is a very opinionated [ Yeoman] [ yeoman ] generator for very quickly and
14
- effortlessly allowing you to build [ Jekyll] [ jekyll ] based sites with
15
- [ Gulp ] [ gulp ] . Get started using [ Yo ] [ yo ] to scaffold your site and start
16
- developing. Your assets are automatically updated when developing and injected
17
- into your browser with [ BrowserSync ] [ browsersync ] and are also optimized when
18
- you're ready to publish .
11
+ ` generator-jekyllized ` is a very opinionated [ Yeoman] [ yeoman ] generator built
12
+ with [ Jekyll] [ jekyll ] and [ gulp ] [ gulp ] . You will be able to quickly scaffold
13
+ your site and start developing. As you are working on your site your assets will
14
+ automatically be updated and injected into your browser as well as your posts.
15
+ When you are done developing and want to publish it you are two commands away
16
+ from having everything optimized and published .
19
17
20
18
## Features
21
19
> Rapidly prototype
22
20
23
- When developing locally all your changes are automatically injected into your
24
- browser. Change the background color of your website in SCSS and it will
25
- automatically be built by [ libsass] [ libsass ] , prefixed with
26
- [ AutoPrefixer] [ autoprefixer ] and have source maps included. JavaScript is the
27
- same, the changes are automatically injected and source maps are included.
28
- Jekyll is also automatically reloaded when you change something in a post, and
29
- the browser updates accordingly. Simple and rapid prototyping.
21
+ While developing locally everything you change will automatically be updated and
22
+ injected into your browser. Changing your SCSS or JavaScript files will
23
+ automatically updated them, create sourcemaps and inject them. Writing or
24
+ editing posts and pages for your website will do the same. Simple and effective.
30
25
31
26
> Jekyll
32
27
33
- Built on top of a modern and mature base, you get the full power of Jekyll to
34
- power your site. Automatically have a sitemap and Atom feed generated, archives
35
- for your tags and categories and more .
28
+ Built on top of Jekyll 3, you get a mature and stable base with the full power
29
+ that Jekyll brings you. You'll have sitemaps and Atom feeds generated, archives
30
+ for your posts created and SEO meta data tags added to your posts and pages .
36
31
37
32
> Optimize your assets
38
33
39
- Done with developing and ready for publishing? Jekyllized has you covered there
40
- as well, running the generator with ` --prod ` makes everything run with
41
- production settings: optimize, minify, gzip and cache bust your CSS and JS. Gzip
42
- and minify your HTML. Optimize your images .
34
+ When you are done developing you can have your assets optimized and injected
35
+ correctly into your HTML. Your assets will be minified, compressed with gzip,
36
+ cache busted and otherwise optimized. Your images will be run through
37
+ compressors to save space and even your HTML will be minified .
43
38
44
39
> Deploying
45
40
46
- Support for deploying to either Amazon S3, Github Pages or via Rsync, you're
47
- covered when everything is ready. Run a single command after your site is build
48
- with production settings (` gulp deploy ` ) and your site is uploaded to your
49
- choice of platform.
41
+ Finally, once everything is done and you are ready to publish your site, you can
42
+ do it via either Amazon S3, Github Pages or Rsync. With a single command your
43
+ new/updated site is uploaded to your platform of choice.
50
44
51
45
## Getting started
52
46
@@ -61,62 +55,74 @@ choice of platform.
61
55
generator-jekyllized@next -g`
62
56
63
57
#### Install
64
- * ** Scaffold:** Run ` yo jekyllized ` in the directory you want your site to
65
- scaffold in
66
- * ** Start:** Run ` gulp ` and watch the magic unfold and/or look at the
67
- [ FAQ] [ frequentlyasked ]
68
- for more options.
58
+ * ** Scaffold:** Run ` yo jekyllized ` in the directory you want scaffold your site
59
+ in
60
+ * ** Start:** Run ` gulp ` and watch the magic unfold
69
61
70
62
## Usage
71
63
72
64
#### ` gulp [--prod] `
73
65
74
- Running this will build your assets, copy your images and fonts, build your site
75
- and start a BrowserSync session in your browser. Any change you make to (pretty
76
- much) any file in the ` src ` directory will have the associated change be
77
- automatically updated, built and pushed to your browser. By default all
78
- optimizations are disabled, and source maps are enabled for easy debugging.
66
+ This is the default command, and probably the one you'll use the most. This
67
+ command will build your assets and site with development settings. You'll get
68
+ sourcemaps, your drafts will be generated and you'll only generate the last 10
69
+ posts (for speed). As you are changing your posts, pages and assets they will
70
+ automatically update and inject into your browser via
71
+ [ BrowserSync] [ browsersync ] .
72
+
73
+ > ` --prod `
79
74
80
- When you run the command with ` --prod ` you are changing into production
81
- settings. It's mostly the same as the default, however all your CSS and JS are
82
- minifed, gzipped, cache busted and your HTML is minified as well and source maps
83
- are disabled. Use when you're done developing locally to verify that nothing is
84
- broken and that everything works .
75
+ Once you are done and want to verify that everything works with production
76
+ settings you add the flag ` --prod ` and your assets will be optimized. Your CSS,
77
+ JS and HTML will be minified and gzipped, plus the CSS and JS will be cache
78
+ busted. The images will be compressed and Jekyll will generate a site with all
79
+ your posts and no drafts .
85
80
86
81
#### ` gulp build [--prod] `
87
82
88
- This command is identical to the ` gulp ` command, the only difference is that it
89
- doesn't create a BrowserSync session in your browser.
83
+ This command is identical to the normal ` gulp [--prod] ` however it will not
84
+ create a BrowserSync session in your browser.
90
85
91
86
#### ` gulp (build) [--prod] ` main subtasks
92
- When run without ` --prod ` both ` styles ` and ` scripts ` will create a sourcemap
93
- and will not optimize/minify etc any of your assets. With ` --prod ` it will not
94
- create sourcemaps.
95
-
96
87
> ` gulp jekyll [--prod] `
97
88
98
- Builds your site with either development settings or production settings,
99
- depending on whether ` --prod ` is true or not.
100
-
101
- > ` gulp styles [--prod] `
89
+ Without production settings Jekyll will only create the 10 latest posts and will
90
+ create both future posts and drafts. With ` --prod ` none of that is true and it
91
+ will generate all your posts.
102
92
103
- Creates a ` style.css ` file from your SASS via ` libsass ` and uses AutoPrefixer to
104
- add prefixes automatically. If you are working on your site it will inject the
105
- updated CSS into your website. When run with ` --prod ` it will also minify, gzip
106
- and cache bust it.
93
+ > ` gulp styles|scripts [--prod] `
107
94
108
- > ` gulp scripts [--prod] `
109
-
110
- Essentially the same as with your styles, only with your JavaScript.
95
+ Both your CSS and JS will have sourcemaps generated for them under development
96
+ settings. Once you generate them with production settings sourcemap generation
97
+ is disabled. Both will be minified, gzipped and cache busted with production
98
+ settings.
111
99
112
100
> ` gulp images `
113
101
114
- Optimizes and caches your images.
102
+ Optimizes and caches your images. This is a set it and forget it command for the
103
+ most part.
115
104
116
105
> ` gulp html --prod `
117
106
118
107
** Does nothing without ` --prod ` .** Minifies and gzips your HTML files.
119
108
109
+ > ` gulp serve `
110
+
111
+ If you just want to watch your site you can run this command. If wanted you can
112
+ also edit the ` serve ` task to allow it to tunnel via [ localtunnel] [ localtunnel ]
113
+ so people outside your local network can view it as well:
114
+
115
+ ``` js
116
+ // tunnel: true,
117
+ ```
118
+
119
+ You can also change the behaviour for how it opens the URL when you run `gulp
120
+ [ --prod] `, you can see the options [ here] [ browsersync-open ] :
121
+
122
+ ``` js
123
+ // open: false,
124
+ ```
125
+
120
126
#### ` gulp deploy `
121
127
122
128
When you're done developing and have built your site with either ` gulp --prod `
@@ -242,9 +248,9 @@ Pages. Luckily the Jekyll documentation [has you covered][jekyll-url].
242
248
243
249
> Why don't you support Stylus/LESS/Angular/etc
244
250
245
- Because I've never used them nor do I have any plans to use them. If you want to
246
- you can create a pull request for them and I'll have a look and see whether
247
- it'll work or not.
251
+ Because I've never used them nor do I have any plans of using them. Furthermore,
252
+ they're a bit outside what I want with this generator anyways. I want a lean,
253
+ simple and opinionated generator, not a big complicated one .
248
254
249
255
## Contributing
250
256
@@ -256,12 +262,9 @@ See the [contribution][contribute] docs.
256
262
257
263
MIT © Sondre Nilsen (https://github.com/sondr3 )
258
264
259
- [ autoprefixer ] : https://github.com/ai/autoprefixer
260
265
[ awspublish ] : https://github.com/pgherveou/gulp-awspublish
261
- [ beta ] : https://github.com/sondr3/generator-jekyllized/tree/beta
262
- [ bower ] : http://bower.io/
263
266
[ browsersync ] : https://github.com/shakyShane/browser-sync
264
- [ bundler ] : http ://bundler .io
267
+ [ browsersync-open ] : https ://browsersync .io/docs/options/#option-open
265
268
[ contribute ] : https://github.com/sondr3/generator-jekyllized/blob/beta/CONTRIBUTING.md
266
269
[ changelog ] : https://github.com/sondr3/generator-jekyllized/blob/master/CHANGELOG.md
267
270
[ frequentlyasked ] : https://github.com/sondr3/generator-jekyllized#frequently-asked-questions
@@ -271,9 +274,6 @@ MIT © Sondre Nilsen (https://github.com/sondr3)
271
274
[ jekyll-url ] : http://jekyllrb.com/docs/github-pages/#project-page-url-structure
272
275
[ jekyll ] : https://jekyllrb.com
273
276
[ libsass ] : https://github.com/hcatlin/libsass
274
- [ nodejs ] : http://nodejs.org/
275
- [ redcarpet ] : https://github.com/vmg/redcarpet
277
+ [ localtunnel ] : http://localtunnel.me/
276
278
[ rsync ] : https://github.com/jerrysu/gulp-rsync
277
- [ rubylang ] : http://www.ruby-lang.org/
278
279
[ yeoman ] : http://yeoman.io
279
- [ yo ] : https://github.com/yeoman/yo
0 commit comments