Do Note

这一篇文章可以说是上一篇日志：静态网站系统的构建与思考的具体实现。
在经历了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或者双部署,这里就不再赘述。