先安装nodejs环境。
apt-get install libfontconfig1 libfontconfig1-dev -y
npm install -g gulp
cd /usr/local
mkdir static-site-by-gulp-site-generator
cd static-site-by-gulp-site-generator
root@localhost:/usr/local/static-site-by-gulp-site-generator# git clone https://github.com/ducksoupdev/gulp-site-generator
root@localhost:/usr/local/static-site-by-gulp-site-generator# ls
gulp-site-generator
root@localhost:/usr/local/static-site-by-gulp-site-generator# node gulp-site-generator/install
(此命令生成了gulpfile.js package.json site.json src)
8 directories created and 18 files installed!
Run 'npm install' then 'gulp' to get started
root@localhost:/usr/local/static-site-by-gulp-site-generator# ls
gulpfile.js gulp-site-generator package.json site.json src
root@localhost:/usr/local/static-site-by-gulp-site-generator# npm install
root@localhost:/usr/local/static-site-by-gulp-site-generator# gulp
(此即生成/更新静态网站的根目录的命令)
root@localhost:/usr/local/static-site-by-gulp-site-generator# ls
build gulp-site-generator package.json src
gulpfile.js node_modules site.json
(生成了build目录)
root@localhost:/usr/local/static-site-by-gulp-site-generator# cd build
root@localhost:/usr/local/static-site-by-gulp-site-generator/build# ls
about date index page sample-blog-post
css images index.html rss.xml
root@localhost:/usr/local/static-site-by-gulp-site-generator/build#
(可见/usr/local/static-site-by-gulp-site-generator/build就是静态网站的根目录)
新建源帖:
root@localhost:/usr/local/static-site-by-gulp-site-generator/build# cd ../src/content/posts
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# ls
sample-blog-post.md
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# nano test-1.md
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# cat test-1.md
---
slug: test-1
title: 测试1
template: post.hbs
date: 2016-12-13 12:33:00
author: 'brite fisherman'
---
这是测试1.
看看如何?
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# cd ../../..
root@localhost:/usr/local/static-site-by-gulp-site-generator# nano site.json
(修改"maxItems"的值为3,意思是每页只显示3个帖子)
root@localhost:/usr/local/static-site-by-gulp-site-generator# gulp
演示网站:http://gsg.bright.biz.st/
项目地址:https://github.com/ducksoupdev/gulp-site-generator
不过以上的网站http://gsg.bright.biz.st/的效果有点简陋(网站没有css),我们搭建一个更漂亮的网站如下:
cd /usr/local
git clone https://github.com/ducksoupdev/gulp-site-generator-example
cd gulp-site-generator-example
root@localhost:/usr/local/gulp-site-generator-example# ls
bower.json gulpfile.js package.json site.json tools
README.md src
root@localhost:/usr/local/gulp-site-generator-example# npm install
root@localhost:/usr/local/gulp-site-generator-example# git clone https://github.com/ducksoupdev/gulp-site-generator tools
root@localhost:/usr/local/gulp-site-generator-example# npm install -g bower
root@localhost:/usr/local/gulp-site-generator-example# bower install --allow-root
root@localhost:/usr/local/gulp-site-generator-example# gulp
root@localhost:/usr/local/gulp-site-generator-example# ls
bower.json gulpfile.js package.json site.json tools
build node_modules README.md src
(生成了build目录)
root@localhost:/usr/local/gulp-site-generator-example# cd build
root@localhost:/usr/local/gulp-site-generator-example/build# ls
about page sample-blog-post-4
css rss.xml sample-blog-post-5
date sample-blog-post sample-blog-post-6
favicon.ico sample-blog-post-10 sample-blog-post-7
gulp-site-generator sample-blog-post-11 sample-blog-post-8
images sample-blog-post-12 sample-blog-post-9
index sample-blog-post-13 tag
index.html sample-blog-post-2
js sample-blog-post-3
root@localhost:/usr/local/gulp-site-generator-example/build#
(可见 /usr/local/gulp-site-generator-example/build就是静态网站的根目录)
新建源帖:
root@localhost:/usr/local/gulp-site-generator-example/build# cd ..
root@localhost:/usr/local/gulp-site-generator-example# cd src/content/posts
root@localhost:/usr/local/gulp-site-generator-example/src/content/posts# nano test-1.md
root@localhost:/usr/local/gulp-site-generator-example/src/content/posts# cat test-1.md
---
slug: test-1
title: 测试1
template: post.hbs
date: 2016-12-18 15:29:00
author: brite fisherman
tags: misc
---
这是测试1.
看看如何?
root@localhost:/usr/local/gulp-site-generator-example/src/content/posts# cd ../../..
root@localhost:/usr/local/gulp-site-generator-example# gulp
演示网站:http://gsge.bright.biz.st/, http://ducksoupdev.github.io/gulp-site-generator-example
项目地址:https://github.com/ducksoupdev/gulp-site-generator-example
注意:我是在kvm vps上搭建成功的,在openvz vps上搭建失败,不知为何?
apt-get install libfontconfig1 libfontconfig1-dev -y
npm install -g gulp
cd /usr/local
mkdir static-site-by-gulp-site-generator
cd static-site-by-gulp-site-generator
root@localhost:/usr/local/static-site-by-gulp-site-generator# git clone https://github.com/ducksoupdev/gulp-site-generator
root@localhost:/usr/local/static-site-by-gulp-site-generator# ls
gulp-site-generator
root@localhost:/usr/local/static-site-by-gulp-site-generator# node gulp-site-generator/install
(此命令生成了gulpfile.js package.json site.json src)
8 directories created and 18 files installed!
Run 'npm install' then 'gulp' to get started
root@localhost:/usr/local/static-site-by-gulp-site-generator# ls
gulpfile.js gulp-site-generator package.json site.json src
root@localhost:/usr/local/static-site-by-gulp-site-generator# npm install
root@localhost:/usr/local/static-site-by-gulp-site-generator# gulp
(此即生成/更新静态网站的根目录的命令)
root@localhost:/usr/local/static-site-by-gulp-site-generator# ls
build gulp-site-generator package.json src
gulpfile.js node_modules site.json
(生成了build目录)
root@localhost:/usr/local/static-site-by-gulp-site-generator# cd build
root@localhost:/usr/local/static-site-by-gulp-site-generator/build# ls
about date index page sample-blog-post
css images index.html rss.xml
root@localhost:/usr/local/static-site-by-gulp-site-generator/build#
(可见/usr/local/static-site-by-gulp-site-generator/build就是静态网站的根目录)
新建源帖:
root@localhost:/usr/local/static-site-by-gulp-site-generator/build# cd ../src/content/posts
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# ls
sample-blog-post.md
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# nano test-1.md
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# cat test-1.md
---
slug: test-1
title: 测试1
template: post.hbs
date: 2016-12-13 12:33:00
author: 'brite fisherman'
---
这是测试1.
看看如何?
root@localhost:/usr/local/static-site-by-gulp-site-generator/src/content/posts# cd ../../..
root@localhost:/usr/local/static-site-by-gulp-site-generator# nano site.json
(修改"maxItems"的值为3,意思是每页只显示3个帖子)
root@localhost:/usr/local/static-site-by-gulp-site-generator# gulp
演示网站:http://gsg.bright.biz.st/
项目地址:https://github.com/ducksoupdev/gulp-site-generator
不过以上的网站http://gsg.bright.biz.st/的效果有点简陋(网站没有css),我们搭建一个更漂亮的网站如下:
cd /usr/local
git clone https://github.com/ducksoupdev/gulp-site-generator-example
cd gulp-site-generator-example
root@localhost:/usr/local/gulp-site-generator-example# ls
bower.json gulpfile.js package.json site.json tools
README.md src
root@localhost:/usr/local/gulp-site-generator-example# npm install
root@localhost:/usr/local/gulp-site-generator-example# git clone https://github.com/ducksoupdev/gulp-site-generator tools
root@localhost:/usr/local/gulp-site-generator-example# npm install -g bower
root@localhost:/usr/local/gulp-site-generator-example# bower install --allow-root
root@localhost:/usr/local/gulp-site-generator-example# gulp
root@localhost:/usr/local/gulp-site-generator-example# ls
bower.json gulpfile.js package.json site.json tools
build node_modules README.md src
(生成了build目录)
root@localhost:/usr/local/gulp-site-generator-example# cd build
root@localhost:/usr/local/gulp-site-generator-example/build# ls
about page sample-blog-post-4
css rss.xml sample-blog-post-5
date sample-blog-post sample-blog-post-6
favicon.ico sample-blog-post-10 sample-blog-post-7
gulp-site-generator sample-blog-post-11 sample-blog-post-8
images sample-blog-post-12 sample-blog-post-9
index sample-blog-post-13 tag
index.html sample-blog-post-2
js sample-blog-post-3
root@localhost:/usr/local/gulp-site-generator-example/build#
(可见 /usr/local/gulp-site-generator-example/build就是静态网站的根目录)
新建源帖:
root@localhost:/usr/local/gulp-site-generator-example/build# cd ..
root@localhost:/usr/local/gulp-site-generator-example# cd src/content/posts
root@localhost:/usr/local/gulp-site-generator-example/src/content/posts# nano test-1.md
root@localhost:/usr/local/gulp-site-generator-example/src/content/posts# cat test-1.md
---
slug: test-1
title: 测试1
template: post.hbs
date: 2016-12-18 15:29:00
author: brite fisherman
tags: misc
---
这是测试1.
看看如何?
root@localhost:/usr/local/gulp-site-generator-example/src/content/posts# cd ../../..
root@localhost:/usr/local/gulp-site-generator-example# gulp
演示网站:http://gsge.bright.biz.st/, http://ducksoupdev.github.io/gulp-site-generator-example
项目地址:https://github.com/ducksoupdev/gulp-site-generator-example
注意:我是在kvm vps上搭建成功的,在openvz vps上搭建失败,不知为何?