基于HEXO静态博客生成系统的站点建设

这一篇文章可以说是上一篇日志:静态网站系统的构建与思考具体实现
在经历了2009年至今的若干次网站迁徙和改版之后,三年前就对自己持有的域名作出了重新规划,原则就是只记录精品信息,一些生活中的琐碎由第三方SNS来消化(有响应群体更容易产生互动)。但是再琐碎也是生活的一部分,第三方平台在一次又一次的变化中,曾经的记录也随之流失。几经思考后,既不想丢失数据,又不想产生开销,所以寻求了一套免费建站方案,具体实施如下:
1. 域名
顶级域名基本就不要想了,如果不介意经常重新注册,可以考虑TK那一类的。最后我选择的是eu.org二级域名,这个后缀的域目前已经被Q,所以需要使用https访问模式,果断上cloudflare
2. 空间
免费的虚拟主机一搜一大片儿,根据以往经验,速度和性能简直惨不忍睹,而且动不动就被Q被封。所以要找就要找大企业下的免费方案,比如众多的PaaS,其中Github作为程序猿的地盘还是挺厚道的,就暂时用它好了。
3. 构架程序
空间已经是静态的了,那么程序就不可能是WP或者其他的PHP/ASP,找用户数量多的例如HEXO算是稳妥的选择。为了拉近和动态网站的差距,除去使用NEXT主题并采用第三方评论系统“多说”,又做了如下设置:
a) 修正feed中的相对路径
因为主要内容还是以图片居多,所以挂了一个专门放置图片的文件下在根目录下,在编辑日志时可以用相对路径插入图片(使用相对路径的好处是今后若是更换域名,站点文件不需做变动)。那么问题随之而来,在使用hexo-generator-feed产生feed后,其中的图片仍旧以相对路径出现,给之后使用IFTTT同步至blogger和facebook带来了不便,所以使用replace插件来修复feed。
先安装replace
npm install replace
新建一个rss.js文件

var replace = require(“replace”);
replace({
regex: “/p/”, //存放图片的相对路径
replacement: “http://domain/p/”, //存放图片的绝对路径
paths: [‘./public/atom.xml’], //feed文件所在路径
recursive: true,
silent: true,
});

最后每次生成完网站后,执行node rss.js即可。
为了调试和上传方便,分别写了两个脚本,完美滴实现了程序桌面化XDDDDDDDD

//debug.sh
hexo clean
hexo g
node rss.js
hexo s

//run.sh
hexo clean
hexo g
node rss.js
hexo d

b) 实现相册功能
因为有好多图片是存在在lofter的,所以先把图片下载下来。
新建一个lofterphoto.js

//依赖模块
var fs = require(‘fs’);
var request = require(“request”);
var cheerio = require(“cheerio”);
var mkdirp = require(‘mkdirp’);
var http = require(‘http’);
var urlparse = require(‘url’).parse;

//目标网址
var url = ‘http://xxxxxx.lofter.com/?page=’;

//本地存储目录
var dir = ‘./images’;

//创建目录
mkdirp(dir, function (err) {
if (err) {
console.log(err);
}
});

function sleep(milliSeconds) {
var startTime = new Date().getTime();
while (new Date().getTime() < startTime + milliSeconds); }; //发送请求 var getFile = function (url, i, max) { if (i > max)return;
request(url + i, function (error, response, body) {
if (!error && response.statusCode == 200) {
var $ = cheerio.load(body);
$(‘.img img’).each(function () {
var src = $(this).attr(‘src’);
getDetailFile($(this).parent().attr(‘href’));
console.log(‘正在下载’ + src);
var name = src.match(‘[^=/]\\w*\\.jpg\\w*’)[0];
saveImg(src,dir, name);
// sleep(2000);
});
i++;
getFile(url,i,max);

}
});
};

var getDetailFile = function (url){
request(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
var $ = cheerio.load(body);
$(‘.img img’).each(function () {
var src = $(this).attr(‘src’);
console.log(‘正在下载detail’ + src);
saveImg(src,dir, Math.floor(Math.random() * 100000) + src.substr(-4, 4));

});
}
});
}

function saveImg(url, dir,name){
sleep(500);
http.get(url, function(res){
res.setEncoding(‘binary’);
var data=”;
res.on(‘data’, function(chunk){
data+=chunk;
});
res.on(‘end’, function(){
fs.writeFile(dir + “/”+name, data, ‘binary’, function (err) {
if (err) throw err;
console.log(‘file saved ‘+name);
});
});
}).on(‘error’, function(e) {
console.log(‘error’+e)
});
}
var i = 1;
getFile(url, i, 100);

然后我为了省事儿,直接用了一个相册生成器VisualLightBox产生一个网页,将网页中的主体代码复制到HEXO下新建page的index.md文件里,重命名并删除原先产生的index.html文件,而后在CSS里找到定义DIV的那段代码,修改width为auto。这样页面就成了自适应的,无论在PC上还是手机上都能顺畅浏览。


至于如何搭建HEXO,如何部署到Github或者双部署,这里就不再赘述。

You may also like

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.