# wintersmith new wintersmith-site
# cd wintersmith-site
# wintersmith build (这个就是生成静态网站的命令。该命令在当前目录下,会生成
build目录,这个build目录就是网站的根目录,你可绑定一个域名到该目录。)发帖子的方法:as3:~/wintersmith-site# cd contents
as3:~/wintersmith-site/contents# ls
about.md archive.json articles authors css feed.json
as3:~/wintersmith-site/contents# cd articles
as3:~/wintersmith-site/contents/articles# ls
another-test hello-world markdown-syntax
bamboo-cutter let-me-have-a-test red-herring
as3:~/wintersmith-site/contents/articles# mkdir test2 (在~/wintersmith-site/contents/articles/下面新建一个以标题名为名称的目录。)as3:~/wintersmith-site/contents/articles# cd test2 (进入新建的目录)
as3:~/wintersmith-site/contents/articles/test2# nano index.md (在这个新建的目录里创建index.md文件,index.md的格式如下:---title: title namedate: 2013-10-13template: article.jade ---这里写正文。 然后
as3:~/wintersmith-site/contents/articles/test2# cd ~/wintersmith-site
as3:~/wintersmith-site# wintersmith build (每次新建帖子后,都要运行一次这条生成静态网站的命令。)
示例: http://as3.brite.biz:1133/ ,http://ws.brite.biz 项目地址: https://github.com/jnordberg/wintersmith(https://github.com/davidtucker/davidtucker-blog,某人的修改版。其示例:http://davidtucker.net/) 官网:http://wintersmith.io/ ----------------------------------- Wintersmith
When I researched Node JS static site generators Wintersmith (created by Johan Nordberg) quickly rose to the top. I did some initial research, and within thirty minutes I realized it would fit my needs well. It met my earlier criteria (for the most part) and provided a few examples that I could run with.
My main issue with the examples were that they were all done with Jade as the templating engine. I have worked with Jade before, and I'm not a big fan of it (which I realize is a discussion for another day), however I also knew that Wintersmith had a plugin API for templating. I assumed I could find something that would work well. After some initial investigation I settled on nunjucks and the wintersmith-nunjucks plugin by John Buckley. Nunjucks is based on the jinja2 templating engine in python and it also had similarities to Expression Engine's templates. In both cases it allowed for the clean separation of the presentation and logic layers.
Conclusion
With these elements in place, I was able to move forward to building the first version of my new site. In the upcoming posts in this series I will outline my development process, technical choices, and even my deployment choices and process.
----------------------------
automating-with-grunt
- There are many tasks for Grunt that have already been developed. This meant a lot less work to integrate with common things like minification, copying to a server, etc...
- There is an API exposed by Grunt to create custom tasks. This was key. This meant that if a task didn't currently exist, I could write it.
- There is a very active community both supporting the core project as well as creating third-party tasks. This meant less work for me each time I wanted to implement a new workflow step. Chances are, someone else had already solved that step.
- The build process is cross-platform. While this isn't a big issue for my personal site (as I use a Mac), I knew that a cross-platform build process would be important for other projects that I will do both for myself and for clients.
npm install -g grunt-cli
cd <yourProjectDir>
npm install grunt --save-dev
- It will install the Grunt command line module globally. This means
that after you install it, you can open your command line prompt and
type
grunt --versionand it should output your current command line module version and the current version of Grunt for that project (if you are in a project directory). - It will install the Grunt module locally in that directory. Also, by using
--save-dev, it will add Grunt to the list of development dependencies in yourpackage.jsonfile.
npm install grunt-contrib-cssmin --save-dev
module.exports = function(grunt) {
grunt.initConfig({
});
};
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
production: {
expand: true,
cwd: 'css',
src: ['*.css'],
dest: 'css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
grunt cssmin:production
Running "cssmin:production" (cssmin) task
File build/css/app.d40e49a5.cache.css created.
Done, without errors.
- I need to delete the contents of the build directory before I initiate a new build process. [see Grunt task in reference]
- I need to initiate the following actions for Wintersmith: launching the preview server, building for the staging environment, and building for the production environment. [see Grunt task in reference]
- I need to compile my SASS/Compass code to a standard file. In addition, I ned to be sure that it includes the Foundation framework. [see Grunt task in reference]
- I need to validate that my JavaScript code follows a set of best practices that I have defined and alert me if it does not meet the standards. [see Grunt task in reference]
- I need to utilize Browserify to manage dependencies between different logic groups of my JavaScript code using CommonJS modules and compile that to a single JavaScript file that I can load for my site. [see Grunt task in reference]
- I need to minify images that are included in my static site after the site is built but before it is deployed to the host. [see Grunt task in reference]
- I need to remove empty lines from HTML and XML files which are generated by Wintersmith. [see Grunt task in reference]
- I want to be able to automatically compile my SASS code or my JavaScript code with Browserify when any of those files in my
workdirectory changes. [see Grunt task in reference] - I want to be able to automatically compress and minify my JavaScript when I build for staging or production environments. [see Grunt task in reference]
- I want to be able to utilize a hash of my CSS/JS files' filename to help ensure that the viewers of my site don't end up loaded an older cached version of these files. [see Grunt task in reference]
- I want to minify all CSS files that are compiled from the SASS code before I deploy a build to the staging or production environments. [see Grunt task in reference]
- I want to be able to deploy to both a staging or production environment on Amazon S3. [see Grunt task in reference]
- I want to be able to automatically change the version number and tag production releases in my git repository. [see Grunt task in reference]