A powerful generator for creating static page base on yeogurt.
generator-ky is an opinionated generator for web development. Tools for building a great experience across many devices. A solid starting point for both professionals and newcomers to the industry.
- Author name
- Author email
- Project name
- Pug for templating
- Sass (via node-sass)
- Browsersync or Webpack for bundle
- Karma for running unit tests
At present, I officially aim to support the last two versions of the following browsers:
- Internet Explorer
This is not to say that generator-ky cannot be used in browsers older than those reflected, but merely that my focus will be on ensuring our layouts work great in the above.
NOTE: For OSX users You may have some issues compiling code during installation of packages. Please install Xcode from App Store first. After Xcode is installed, open Xcode and go to Preferences -> Download -> Command Line Tools -> Install to install command line tools.
NOTE: For Windows users You may have some issues compiling BrowserSync during installation of packages. Please go to http://www.browsersync.io/docs/#windows-users for more information on how to get all the needed dependencies.
Bring up a terminal and type
Node should respond with a version at or above 10.x.x.
If you need to install Node, go to nodejs.org and click on the big green Install button.
Bring up a terminal and type
If Gulp is installed it should return a version number at or above 4.x.x.
If you need to install/upgrade Gulp, open up a terminal and type in the following:
$ npm install --global gulp
$ npm install --global gulp-cli
This will install Gulp globally. Depending on your user account, you may need to configure your system to install packages globally without administrative privileges.
Once you have Node installed, make sure you have these tools by opening up a terminal/command prompt and entering following commands:
||at or above
If you get any errors and/or you're version(s) are too low, you should run
npm install -g yo.
This will install both tools and update them to their latest versions.
Now that you have all the needed dependencies, you can install this generator with the following command:
npm install -g generator-ky
That completes installation! So at this point you should have all the needed tools to start working Ky.
When starting a new project, you will want to: open up a terminal/command prompt, make a new directory, and navigate into it.
mkdir my-new-project && cd $_
then, run the Ky generator.
Optionally, you can skip the automated installation of npm packages by passing in
--skip-install. The main reason to use this is if you have spotty/no internet connection, but would still like to generate your project.
yo ky --skip-install
Follow all the prompts and choose what suits you most for the project you would like to create. When you finish with all of the prompts, your project scaffold will be created and all dependencies will be installed.
NOTE: If you used the
--skip-installoption, no dependencies will have been installed and your gulp tasks will NOT work. You will need to run
npm installin your project's root directory in order to get started running automated tasks
Once everything is installed, you will see a project structure like below:
Now you can run the following npm scripts:
Build and optimize the current project, ready for deployment. This includes linting as well as image, script, stylesheet and HTML optimization and minification. Also, a browsersync script will be automatically generated, which will take care of precaching your sites' resources.
$ npm start
Serve the Fully Built & Optimized Site.
npm run build task creates the
build/ folder in the root of the project with build files only. It will help you to create clear instances of code for the production or further implementation.
npm run buildnpm run serve:prod
config.json file, within the root of the generated project, you have the ability to configure some project settings:
|host||Host URL of the development server (browserSync)|
|port||Port of the development server (browserSync)|
|baseUrl||Root directory of your site|
|source||Source folder for all development files (default location for page subgenerator)|
|destination||Build folder where production version of site is generated|
|temporary||Temporary folder where development server files are generated|
Folders relative to the
app configured directory
|data||Data folder where JSON files are loaded into templates|
|styles||Styles folder where all stylesheet files are located (main stylesheet must be in root of this folder)|
|pages||Pages folder where all reusable code should live (default location for pages subgenerator)|
|component||Componets folder where all reusable code should live (default location for components subgenerator)|
Files that should be searched for and created by build tasks.
File strings and Globs can be used to process desired file(s).
main**.js will process all files that start with
main and end with
|script||Tells browserify/webpack what file(s) to bundle and generate at your desired build target|
|css||Tells your stylesheet preprocessor (Sass) what file(s) to generate at your desired build target|
|Easy start||All setting of gulp task is in
|browserSync||Browsersync can watch your files as you work. Changes you make will eith|
|done||Notify that the
|eslint||Need to lint js files.|
|images||Copy images to
|rev||Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css|
|sass||Compile sass file|
|sitemap||Make sitemap on
|size||Log file's size of the
|sprite||Convert a set of images into a spritesheet and CSS variable|
npm run build
Starts up a development server that watches files and automatically reloads them to the browser when a change is detected.
Extra Task Target(s)
||starts up a server that loads a production version of the site|
||starts up a server and opens it within your default browser|
Extra Task Target(s)
--debug option to any npm script displays extra debugging information (ex. data being loaded into your templates)
Note: Generators need to be run from the root directory of your app.
Creates a new page.
$ yo ky:page contact
With custom path
$ yo ky:page demo-page/about --custom
Creates a new component.
$ yo ky:component pages/components/header
If you find yourself running into issues during installation or running the tools, open an issue. I would be happy to discuss how they can be solved.
- Github: @ngocsangyem
Show your support
Give a ⭐️ if this project helped you!