Welcome to the first Mini Code Adventure, a new series of blog posts and videos that highlight fun and exciting projects that you get running in minutes.
We recommend you have a basic understanding of HTML, JavaScript and NodeJs to proceed. We also assume you already have NodeJS installed, so make sure you have it installed! Now that we’ve gotten that out of the way, lets…
Make a Website with Yeoman!
Yeoman is a scaffolding tool for rapidly generating new projects AND workflows. There are over 5,000 “generators” available, including ones for asp.net, Chrome Extensions, and Electron.
For our first project we are going to use Yeoman to quickly create a website AND workflow. This is a fantastic starting point for a new website and we’ll be making use of Yeoman in future projects.
Yeoman guides you through creating a new project AND workflow
Here are the commands, with a short description to the right. (Watch the video for a better explanation of what these commands are doing, or go clone the project to skip the commands and play with the output)
|
1 2 3 4 |
npm install -g yo npm install -g generator-webapp yo webapp #Note: Make sure you're in a good dir! gulp serve |
Running “gulp” kicks starts the workflow: downloading additional packages, compiling some necessary files, starting a webserver, firing up a browser pointed to the new site, and even setting up a watcher that will automatically reload the browser whenever we make a change.
Not too shabby for four commands, eh? So…
Voila, Nice looking website!
Congratulations, you have a website! Now what?
Yeoman already set you up with a .gitignore file, so it’s not a bad idea to git init and commit before you start tinkering around in the app folder.
Any changes you make will automatically be reflected in the browser. The Bootstrap website has fantastic examples of how to write great looking (in every sense) HTML.
Once you’ve got something interesting, you can host it for pennies a month, or you can couple it with other technologies to build your own SPA, or Mobile App. Who knows, you could make the next MySpace.
So, that’s it for this session. Go forth, explore, make cool stuff!
