把家搬到阿里云OSS上

动机

阿里云提供了0.9元的oss和cdn两年试用

步骤

先开个玩笑

有一个问题,是说把大象放到冰箱需要几个步骤?答案是一共3步,开门,放进去,关上。

那么迁移也需要三个步骤,下线,迁移,上线。

咳 以上纯属说笑,有不少步骤,需要记录一下的。

为什么放在oss上

  1. 速度:我之前网站托管在国外一台虚拟主机上,速度较慢,放在aliyun的iss上,速度还是杠杠的。

  2. 价格:虽然虚拟主机到2018年才到期,但是这次的活动好便宜好便宜的。才0.9元/2年,空间是20g还是40g来着,对于一个静态网站来说足够了。

  3. 可行:因为hexo是输出静态页面的,所以将页面放在oss上成为了可能。

  4. 备案:我的域名曾经手贱备过案了,所以放阿里云成为了可能。

难点

  1. oss不支持自动解析目录下的index.html文件
    oss是不支持将/tag/ 解析为 /tag/index.html的,也就是说不作处理,根本访问不到除了首页外的其他页面,因为HEXO自动解析的地址都是形如 xxxx.com/tag/ 这种样子的

    这个问题网上有多种解决方案,一种是在生成时候解决,一种是使用js进行a标签的替换,试验后发现第一种改动较大,所以使用了后一种办法,参考了用阿里云CDN-OSS-ECS搭建Hexo博客/

    新建了文件,内容抄自以上的blog

    ···

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    $(function(){
    $("a").each(function(index, element) {
    var currHref = $(element).attr("href");
    //console.log("href: "+currHref);
    if(typeof(currHref) === "undefined"){//排除无链接的a标签
    return true;
    }else if(currHref.substring(0,7) === "http://" || currHref.substring(0,8) === "https://"){//排除已有完整路径的链接
    return true;
    }else if(currHref.substring(0, 1) === "#"){//排除页内导航链接
    return true;
    }
    var preHref = "", endHref = "";
    if(currHref.indexOf("#", 0) !== -1){//对有“#”的链接,将前后部分分别提取出来
    preHref = currHref.split("#")[0];
    endHref = "#" + currHref.split("#")[1];
    }else{//处理没“#”的链接
    preHref = currHref;
    }
    if(preHref.indexOf("/", 0) !== -1){//排除已指向站内具体文件的链接
    var tmpHref = preHref.split("/");
    if(tmpHref.length > 1 && tmpHref[tmpHref.length - 1].indexOf(".", 0) !== -1){
    return true;
    }
    }
    if(preHref.substr(preHref.length-1,1) !== "/"){//末尾先添上“/”
    preHref = preHref + "/";
    }
    $(element).attr("href", preHref + "index.html" + endHref);
    //console.log("modified: " + preHref + "index.html" + endHref);
    });
    });

    我使用next主题,将文件放在了themes\next\source\js\src\oss_parse.js这里

    然后关于引入,我开始在页面开头引入,猜怎么样? 报未找到$ 。做下处理

    themes\next\layout\_layout.swig中 标签上方添加了

    1
    {% include '_partials/custom-endofpage.swig' %}

    然后新建了themes\next\_partials\custom-endofpage.swig文件,内容为:

    1
    2
    3
    4
    {#
    增加 为处理oss调用index.html问题
    #}
    <script src="{{ url_for(theme.js) }}/src/oss_parse.js?v={{ theme.version }}"></script>

  2. oss部署问题

    这个问题,我开始先研究oss的自动写入代码,准备自己写一个自动上传的,结果做了一小半了,忽然发现了插件 hexo-deployer-aliyun 这个插件可以直接推送网站到阿里云oss,嗯~~~Nice

    先安装:

    npm install hexo-deployer-aliyun –save

    然后再到_config.yml.

    配置相应的内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    \# You can use this:
    deploy:
    type: aliyun
    bucket: <yourBucketName>
    region: <yourOSSregion>
    accessKeyId: <yourAccessKeyId>
    accessKeySecret: <yourAccessKeySecret>

    PS:这样部署就可以收工了,我实际使用时,是把这个插件的代码扒了下来,然后将accessKeyId等信息,写到了一个不会提交到github的文件中去了。因为我的项目是提到了github上面的,这样更安全一点

  3. 设置CDN

    本来还觉得应该很麻烦,结果aliyun弄得已经很智能了,只要将相应的CNAME设置好就行。不过这个我还要吐槽一点:

    我域名不是在aliyun上面的,但是因为速度我使用了aliyun的DNS:233.5.5.5

    我设置了自动配置CDN后,发现网站上不去了,直接ping不通,提示无dns解析,然而从我的服务器上可以上去,确定了是DNS服务器的问题。然后找到aliyun的域名处,发现多了两个异常的针对我的域名的解析,删掉就好了。这里不得不吐槽一下。

坚持原创技术分享,您的支持将鼓励我继续创作!