基于阿里云ECS搭建hexo博客

  很早之前就想写博客记录来记录自己的学习以及生活.虽然,网上有很多第三方的博客网站,感觉不太适合自己.直到看到hexo这个博客框架.就想着折腾一番,拥有属于自己的一片天地.作为一个"伪程序员",当博客加载成功那一刻,实在是按捺不住激动的心情,“Hello world, hexo !!!”,首篇博客仅记录一下折腾过程,并纪念博客之旅的开始.

一. 说明:

  涉及一些软件的安装和配置可能没有作详细说明,请具体查看官方文档…~~(@ >@)~

  • 本地环境:
    • 前提条件 :
         安装 Node.js
         安装 git,用于向服务器推送网站文件.
    • Hexo安装和基本使用 :
      1. 安装Hexo: npm install -g hexo
      2. 新建blog文件夹: cd < blog文件夹>
      3. 初始化blog: hexo init
      4. 安装依赖: npm install
      5. 生成静态页面: hexo g 执行 hexo s启动本地服务
        浏览器打开http://localhost:4000 ,就可以查看本地生成的静态博客页面 .
  • Server端 (阿里云ECS )环境:
    • 前提条件 :

         安装宝塔面板,(鼠标点一点,轻松搭建LAMP环境,配置网站信息,感觉很适合我这种渣渣"伪程序员")

      1
      $ yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh #安装宝塔面板

         搭建 git服务器,创建git用户,并创建裸仓库,用于作为网站文件同步目录.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      $ adduser git #创建git用户
      $ passwd git #设置用户密码
      $ mkdir .ssh && chmod 700 .ssh #创建ssh目录,用于存放公钥文件
      $ touch .ssh/authorized_keys #创建保存公钥的文件,保存本地公钥到此文件
      $ su git #切换到git用户
      $ sudo mkdir blog.git # 创建用于存放仓库的文件夹
      $ git init --bare blog.git #初始化裸仓库
      $ vi blog.git/hooks/post-receive #设置钩子,用于自动更新网站文件
      #写入内容,下方为我的网站运行目录
      #!/bin/sh
      git --work-tree=/www/wwwroot/hexo(网站目录) --git-dir=/home/git/blog.git(同步内容目录) checkout -f
      $ chmod +x post-receive #赋予执行的权限

      出于安全考虑,可以禁用git用户的shell登录权限,在/etc/passwd文件中找到类似行:git:x:1001:1001:,,,:/home/git:/bin/bash并将其改为:
      git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell

      由于LNMP使用的是www用户,而git使用的是git用户,在更新博客时可能会产生冲突.如果有冲突,可以考虑新建一个组www-git,将两个用户同时的加入该组,并将网站目录的所有权更改为www-git组。

      1
      2
      3
      4
      5
      $ groupadd www-git
      $ useradd -g www-git www
      $ useradd -g www-git git
      $ chgrp www-git 网站目录
      $ chmod -R 775 网站目录

二. 更换Hexo默认主题以及配置

1. 更换主题

  默认主题是landscape,在themes文件夹下,我使用的是这一个简洁优雅的主题(如该主题开发者Litten所说 yilia).下载之后放到themes文件夹下即可:git clone git@github.com:litten/hexo-theme-yilia.git

2.主题的配置
1). 主题的基本配置
  • 部署配置
    使用hexo deploy或hexo d命令,即可推送到服务器的git仓库中,由于前面已经实现了钩子函数,会自动把网站文件更新到网站目录.通过你的域名或者ip访问网站,就可以看到刚才发布的内容.
1
2
3
4
deploy:
type: git
repository: ssh://git@ip:port/网站目录
branch: master
  • 参考hexo config官方文档,设置其余基本配置.
    hexo配置图片
2). 网站访问量配置

  使用不蒜子第三方的统计插件,网址:http://ibruce.info/2015/04/04/busuanzi/
在themes\yilia\layout_partial下的footer.ejs中加入如下代码:

1
2
3
4
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_uv">
本站总访客数<span id="busuanzi_value_site_uv"> </span>人次
</span>
3). 文章目录实现参考blog
  • 添加css样式
    打开themes\yilia\source下的main.234bc0.css文件,添加如下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 新添加的 */
    #container .show-toc-btn,#container .toc-article{display:block}
    .toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
    .toc-article li ol, .toc-article li ul {
    margin-left: 30px;
    }
    .toc-article ol, .toc-article ul {
    margin: 10px 0;
    }
  • 修改article.ejs文件
    在需要显示文章目录的文章中,在每篇文章开头加入: toc: true
    打开themes\yilia\layout_partial文件夹下的article.ejs文件
    在 <% } %>下面加入如下内容(注意位置)

    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
    <!-- 目录内容 -->
    <% if (!index && post.toc){ %>
    <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
    <span class="btn-bg"></span>
    <span class="btn-text">文章导航</span>
    </p>
    <div id="toc-article" class="toc-article">
    <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
    </div>
    <script type="text/javascript">
    function showToc(){
    var toc_article = document.getElementById("toc-article");
    var show_toc_btn = document.getElementById("show-toc-btn");
    toc_article.setAttribute("style","display:block");
    show_toc_btn.setAttribute("style","display:none");
    };
    function showBtn(){
    var toc_article = document.getElementById("toc-article");
    var show_toc_btn = document.getElementById("show-toc-btn");
    toc_article.setAttribute("style","display:none");
    show_toc_btn.setAttribute("style","display:block");
    };
    </script>
    <% } %>
    <!-- 目录内容结束 -->