Pages

Saturday, 17 December 2016

搭建基于nodejs的静态博客程序gulp-site-generator(这个很不错,支持分页)

先安装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上搭建失败,不知为何?