Starting a blog to share your new coding knowledge with the world? Use this tutorial to get started.
Other Technologies Used
- Node and NPM installed.
- I recommend
brew install nvmon Mac OS X instead of
brew install node. See the nvm README for more details.
- Yeoman and Grunt installed:
npm install -g yo grunt-cli
How I made this app
Grab my copy of generator-browserify (until this pull request is closed).
npm -g install ivanoats/generator-browserify.git
Generate the app skeleton
mkdir blog && cd blog yo browserify
- Choose Grunt as the build system.
- Choose Foundation as the front-end framework.
- Yes, you’d like to include Modernizr to support your grand-dad on IE8.
- No, let’s skip Jade templating for now.
- Choose Libsass as the Sass compiler so that you don’t need a Ruby dependency in your project
You’ll see a lot of text scroll by, and on my system I saw the last lines like this:
[email protected] node_modules/grunt-sass ├── [email protected] └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
Your directory listing should look something like this:
total 80 drwxr-xr-x 13 ivan staff 442 Apr 17 12:40 . drwxr-xr-x 256 ivan staff 8704 Apr 17 12:36 .. -rw-r--r-- 1 ivan staff 42 Apr 16 15:14 .bowerrc -rw-r--r-- 1 ivan staff 214 Apr 16 15:14 .editorconfig -rw-r--r-- 1 ivan staff 11 Apr 16 15:14 .gitattributes -rw-r--r-- 1 ivan staff 65 Apr 16 15:14 .gitignore -rw-r--r-- 1 ivan staff 390 Apr 16 15:14 .jshintrc -rw-r--r-- 1 ivan staff 11094 Apr 17 12:40 Gruntfile.js drwxr-xr-x 7 ivan staff 238 Apr 17 12:40 app -rw-r--r-- 1 ivan staff 213 Apr 16 15:14 bower.json drwxr-xr-x 2 ivan staff 68 Apr 17 12:40 dist drwxr-xr-x 32 ivan staff 1088 Apr 17 12:40 node_modules -rw-r--r-- 1 ivan staff 1277 Apr 17 12:40 package.json
grunt serve to launch the app in a web browser. You should see something like this:
That’s great but let’s start with a simpler blog layout: Go to Foundation HTML Templates and download the blog layout HTML. Put that in the body tag of
app/index.html in your project.
You can now start customizing your blog with the following files:
Here’s what I did:
Go to town! This generator also includes BackboneJS so you can even make your blog a single-page app.
Tested Pull-Requests welcome! I will list you as a contributor.