网站使用Hexo进行静态网页生成，使用七牛做图片的CDN，同时挂载在gitcafe和github上，但是smilelab.uestc.edu.cn指向smilelab.gitcafe.io，smilelab.github.io仅作发布测试用。
使用Hexo生成静态网页有以下好处：
- 使用Markdown便捷内容，简单便捷
- 使用ejs模板语言做布局，容易入门
ubuntu14.04 x64
- 安装NodeJS，推荐从官网下载二进制包，解压到/usr/local/目录下
- 安装git：sudo apt-get install git
- cd smile_lab/
- 安装hexo：sudo npm install hexo --no-optional （这一步通常需要翻墙，可以使用shadowsocks+tsocks配合）
- npm install （这一步同样需要翻墙）
- 测试是否安装成功：hexo g，生成静态网页，如果这一步没有出错，则说明已经安装成功
因为shadowsocks是socks5技术，系统并不支持socks5的全局转发，所以需要tsocks工具把所有的网络请求转换成socks5后再出去。
sudo add-apt-repository ppa:hzwhuang/ss-qt5
sudo apt-get update
sudo apt-get install shadowsocks-qt5 tsocks
然后在dash中打开shadowsocks-qt5，配置并连接到远程，本地端口设置为1080；编辑/etc/tsocks.conf文件：
local = 192.168.0.0/255.255.255.0
local = 10.0.0.0/255.0.0.0
server = 127.0.0.1
server_type = 5
server_port = 1080
在需要翻墙的命令前加上tsocks。如npm install这一条命令需要翻墙，则变成tsocks npm install.
以下是整个网站的所有文件目录：
.
├── README.md 本文件
├── _config.yml 关于网站的全局变量配置
├── db.json 生成静态网页时需要的db，不需要理会
├── debug.log
├── logo-header.png logo
├── node_modules 安装的hexo环境，不必理会
├── package.json hexo环境，不必理会
├── public 生成静态网页后，静态网页的存放目录
├── scaffolds hexo预定义的模板，不必理会
├── source 网站所有内容的存放目录，这是最关键的目录
└── themes 网站主题存放目录，对于需要修改主题的，可以在这个目录下完成
基本上，主要关注两个目录即可：即source和themes。下面分别介绍这两个目录。
这是source目录的结构**（注意与网站的链接对应）**：
.
├── contact 联系我们
│ └── index.md 主页/contact的主要内容
├── en 英文版面，结构与上一层完全一样
│ ├── contact
│ ├── images
│ ├── index.md 英文版面的主页
│ ├── joining_us
│ ├── members
│ ├── news
│ ├── publications
│ └── research
├── google15ebd55a83bf26a9.html 用来做google搜索优化的文件，不必理会
├── images
├── index.md 这是我们网站主页的内容
├── joining_us
│ └── index.md
├── members
├── news
│ └── index.md
├── publications
│ └── index.md
├── research
│ └── index.md
└── robots.txt 为搜索引擎提供支持
这里的所有文件都是使用markdown语言进行编辑，关于markdown语言，稍后会有相应的解释。
**但是需要注意到en/目录下，所有的md文件在front-matter区域都有layout: layout_en来标记该md文件使用layout_en模板进行生成。**至于为什么需要这么做，稍后会有解释。
themes目录下，在我们的网站中是这样的结构：
.
└── hueman
├── Gruntfile.js
├── LICENSE
├── README.md
├── _config.yml 该主题的全局设置
├── _config.yml.example 一个example，不必理会
├── languages 多语言支持
├── layout 各种布局模板
├── package.json
├── scripts 各种js脚本集合
└── source 布局相关的css文件
因为我们使用了hueman这个主题，因此在themes目录下仅有这个目录。当然如果我们需要更换主题，只需要把新主题拷入该目录，然后在根目录的_config.yml中修改themes的值即可。
需要注意的是，为了做多语言支持，除了在languages目录下定义对应的字符串外，我对layout/layout.ejs文件做了修改。因为layout.ejs是模板生成的入口，也就是说其他任何模板都会在最外层套上layout.ejs。
注意到我们网站最顶部的menu button与/source目录中的md文件没有任何关系，那么这些button是如何识别/source目录中的md文件对应的语言呢？
在/source目录下，所有的md文件默认使用page.ejs模板进行生成，在page.ejs外层再套上layout.ejs，拼装后生成html文件。于是，我们可以这样做：
- 在layout.ejs文件中，仅作为入口：<%- body %>
- 修改page.ejs文件，这是默认的中文页面模板，注意到menu button在_partial/header.ejs中的定义
- 新增layout_en.ejs文件，这是默认的英文模板，注意到menu button在_partial/header_en.ejs文件中的定义
- 修改languages目录中的文件，新增不同语言的menu button的链接定义
编辑网站内容主要针对source目录。
关于markdown语言，可以简单的从这个网页了解到markdown的一切：http://wowubuntu.com/markdown/
这里我仅列出几个需要注意的地方：
- 在我们的环境中，所有的标题，在若干个
#的后面，需要留出一个空格 - source目录中，可以看到几乎每个文件头部都有front-matter，这官方的解释： Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：
title: Hello World
date: 2013/7/13 20:46:25
---
这就是一个简单的front-matter，用于定义该文件的一些变量，具体有什么变量可以从这里查看：https://hexo.io/zh-cn/docs/front-matter.html
需要注意的是，所有的英文版面，都需要加上layout: layout_en变量声明！
- 为了加快网站的访问速度，目前把所有的图片都传上了七牛，然后在七牛中生成对应的外链，最后把外链插入到markdown文本中，具体过程在稍后解释
- 目前所有的markdown文件的文件名都是index.md，具体是根据文件夹做链接映射
- 英文版面的内容
- 规范图片尺寸
- google、baidu的搜索优化