taohui.org.cn建站历程

一直以来都在Qzone、CSDN等上面写博客，偶尔有些想法就在Paas平台上搭建服务，新浪和曾经的google上都用过其appengine。可是在别人的平台上写东西，总归有些不方便，有受制于人的感觉。《深入理解Nginx》这本书的在线支持站点，当时因为时间紧，就随便在weebly平台弄了个下载示例代码和写作勘误的页面，毕竟离有效的在线支持网站还是有差距的，至少读者不容易在网站上反馈。想到毕竟在阿里云的弹性计算工作，总不能都不用自己开发的产品吧？于是就买了阿里云的低端服务器，开始了我的第一次完整的建站历程。

作为一个10年互联网后台开发经验的程序员，对于后台开发自然没有问题，可是仔细查了查自己的知识储备与建站所需的知识点，还真是不太匹配。我所熟悉的大规模分布式、高性能服务器设计，其实在流量极小的个人站点上用不上什么，小站点更强调的快速堆砌功能反而是我欠缺的。前端网页设计经验的缺乏其实是最大难题，对于HTTP协议和基本的HTML知识虽然熟，可是最需要了解的CSS、JQuery、Javascript等却几乎就是门外汉。怎么入手呢？

先选定语言吧。虽然长年在C和C++上打滚，但对python并不陌生，尤其是非常喜欢它的语法，很漂亮！更重要的一点是，它的开发效率正是这种小站点所需要的，运行效率差点反而无所谓。选定python，就选择了一条不断“找前人肩膀站立”之路了，不像C语言的项目常常需要“自己动手、丰衣足食”的完成各种组件，python项目就是找各种已完成组件，找到其相应的、与自己软件匹配版本的使用方法。

先要选定web框架，而得到广泛应用的django就迈入了眼帘。现在它已经发展到了django1.6版本，就用最新的了，后面发现其新版本往往不兼容老版本上的组件，这好像是python世界的惯例，真够BT的（所以，virtualEnv才有市场，所以才需要在每个python工程上使用virtualEnv虚拟python环境，以支持多个项目下同一个python组件的不同版本并行存在）。有了django，其实很多web开发的组件都具备了。首先，django是一个“关系数据库驱动”的WEB框架，可见，其先天就是为小站点而生。安装了mysql-python库后，就可以利用django的框架来快速操作mysql数据库了。django的模板系统也是必用的，它将表现层与业务层分离，即，将html与数据分离了，它的各种用法可以在djangobook中找到，当然，这本书的中文版有些老了，1.6的django需要找英文资料。有了模板和数据库的MTV架构，站点已经可以慢慢的边coding边调试了，我们再来看环境。

阿里云服务器实在是小站点的首选，我真不是在做广告：-）

1、足够便宜。最低配是每月55元，年付费还能便宜点。在最低配上现在负载都达不到0.1。

2、带宽不是按量计费的，而是限定了带宽的速度上限。对于无法预估流量的新网站，还是适合的。而且，我可以把图片等耗流量的文件放在服务器上，而不用去考虑为了计费去把图片放在其他平台上，增加复杂度。

3、IO虽然差，可是可靠性高，写磁盘时是强制3份数据写成功，潜台词就是我不用每天备份mysql数据、静态图片等资源了。这种小站点也用不到什么磁盘IO。

4、如果真的站点访问量上来了，服务器资源不够了，加钱在线升级服务器配置呗。

5、云监控是免费的。很有用的东东，关键是不怎么消耗本就是低端服务器的linux资源，后文再详述。

6、带宽稳定。阿里巴巴的ABTN骨干网络还是很靠谱的，对电信、联通网络的支持都很好。

7、备案方便，后文再详述。

购买阿里云服务器当然选择了linux系统，稳定高效的无二选择，随系统阿里云对linux赠送了20G的系统盘。一般来说是够用了，主要是目前我们在做云磁盘，使得用户购买的数据盘以后可以脱离虚拟机而存在。我希望一些数据还是放在数据盘方便以后的管理，就又买了块数据盘。需要注意的是，拿到root及密码、公网IP的服务器，SSH登上去会找不到数据盘，至少从容量上是找不到的，这是因为需要手工挂载。这个真的是阿里云弹性计算需要改进的地方。挂载方式在阿里云官网FAQ里都有。

接下来，就是要充分使用云主机了。目前云盾和云监控是免费的，云盾自动生效，而云监控是要安装一个agent在自己的服务器上，这个agent会定期的上报一些检查信息到云监控服务里，这样从WEB管理控制台上就可以设置监控阀值。每个月有1000条免费通知短信，当服务器的监控项发生变化时，例如进程挂掉、磁盘写满等，就可以及时手机得到通知了。

下面开始讨论网站框架，如下图所示：

前端放Nginx基本是必须的，django没有并发处理能力，而Nginx可以处理十万百万级的并发连接。静态文件特别是大量的图片都交由Nginx加本地磁盘处理，其执行效率不用担心，至少在现在的访问量下是无所谓的。Nginx的access访问日志很关键，它可以给出很有意义的数据分析，所以，慎重设置它的格式，把想统计的信息都记录下来。然后安装awstats这个软件，配置好解析access日志的格式。将access按天来切分文件是个很好的处理方式，awstats的crontab脚本会分析、累加每个过去日子的统计结果，使在页面上可以看到网站的运行情况。

如果是图片服务器，Nginx还可以承担更重要的责任，我们常见的缩略图功能就很有必要。原始图片可能以M为单位，传输这样的图片然后在浏览器上压缩为缩略图，这显示会耗尽我们本就不多的带宽。将Nginx的proxy cache功能和image filter引入，就可以把图片在服务器端压缩后再缓存到硬盘里，下次拉取只取压缩过的图片，减少带宽的损耗。实际上image filter模块功能很弱，只支持一种压缩率，而Nginx的rewriter模块提供了脚本式的变量赋值功能，综合起来就可以很方便的提供各种压缩分辨率，例如下面这段配置，就可以根据URI内容来指定分辨率，并将压缩图缓存之：

<span class="name" style="box-sizing: border-box;">location</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">static</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">resize</span> <span class="punctuation" style="box-sizing: border-box;">{</span><span class="name" style="box-sizing: border-box;">alias</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">mnt</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">nginx</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">resize_image</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">width</span> <span class="literal number integer" style="box-sizing: border-box;">550</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">height</span> <span class="literal number integer" style="box-sizing: border-box;">500</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">dimens</span> <span class="literal string" style="box-sizing: border-box; color: rgb(12, 84, 4);">""</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">if</span> <span class="punctuation" style="box-sizing: border-box;">(</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">uri</span> <span class="operator" style="box-sizing: border-box;">~*</span> <span class="literal string" style="box-sizing: border-box; color: rgb(12, 84, 4);">"^/static/resize_(\d+)x(\d+)/(.*)"</span> <span class="punctuation" style="box-sizing: border-box;">)</span> <span class="punctuation" style="box-sizing: border-box;">{</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">width</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="literal number integer" style="box-sizing: border-box;">1</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">height</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="literal number integer" style="box-sizing: border-box;">2</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">image_path</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="literal number integer" style="box-sizing: border-box;">3</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">demins</span> <span class="literal string" style="box-sizing: border-box; color: rgb(12, 84, 4);">"_$1x$2"</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="punctuation" style="box-sizing: border-box;">}</span><span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">if</span> <span class="punctuation" style="box-sizing: border-box;">(</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">uri</span> <span class="operator" style="box-sizing: border-box;">~*</span> <span class="literal string" style="box-sizing: border-box; color: rgb(12, 84, 4);">"^/static/resize/(.*)"</span> <span class="punctuation" style="box-sizing: border-box;">)</span> <span class="punctuation" style="box-sizing: border-box;">{</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">image_path</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="literal number integer" style="box-sizing: border-box;">1</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="punctuation" style="box-sizing: border-box;">}</span><span class="name" style="box-sizing: border-box;">set</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">image_uri</span> <span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">static</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">image_resize</span><span class="operator" style="box-sizing: border-box;">/</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">image_path</span><span class="operator" style="box-sizing: border-box;">?</span><span class="name" style="box-sizing: border-box;">width</span><span class="operator" style="box-sizing: border-box;">=</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">width</span><span class="operator" style="box-sizing: border-box;">&</span><span class="name" style="box-sizing: border-box;">height</span><span class="operator" style="box-sizing: border-box;">=</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">height</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">if</span> <span class="punctuation" style="box-sizing: border-box;">(</span><span class="operator" style="box-sizing: border-box;">!-</span><span class="name" style="box-sizing: border-box;">f</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">request_filename</span><span class="punctuation" style="box-sizing: border-box;">)</span> <span class="punctuation" style="box-sizing: border-box;">{</span><span class="name" style="box-sizing: border-box;">proxy_pass</span> <span class="name" style="box-sizing: border-box;">http</span><span class="operator" style="box-sizing: border-box;">:</span><span class="comment single" style="box-sizing: border-box; color: rgb(92, 101, 118);">//127.0.0.1:9000/$image_uri;
</span>                <span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">break</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="punctuation" style="box-sizing: border-box;">}</span><span class="name" style="box-sizing: border-box;">proxy_store</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">mnt</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">nginx</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">resize</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">demins</span><span class="operator" style="box-sizing: border-box;">/</span><span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">image_path</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">proxy_store_access</span> <span class="name" style="box-sizing: border-box;">user</span><span class="operator" style="box-sizing: border-box;">:</span><span class="name" style="box-sizing: border-box;">rw</span> <span class="name" style="box-sizing: border-box;">group</span><span class="operator" style="box-sizing: border-box;">:</span><span class="name" style="box-sizing: border-box;">rw</span> <span class="name" style="box-sizing: border-box;">all</span><span class="operator" style="box-sizing: border-box;">:</span><span class="name" style="box-sizing: border-box;">r</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">proxy_temp_path</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">mnt</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">tmp</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">images</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">proxy_set_header</span> <span class="name" style="box-sizing: border-box;">Host</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">host</span><span class="punctuation" style="box-sizing: border-box;">;</span>
<span class="punctuation" style="box-sizing: border-box;">}</span><span class="name" style="box-sizing: border-box;">location</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">static</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">image_resize</span> <span class="punctuation" style="box-sizing: border-box;">{</span><span class="name" style="box-sizing: border-box;">alias</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">mnt</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">images</span><span class="operator" style="box-sizing: border-box;">/</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">image_filter</span> <span class="name" style="box-sizing: border-box;">resize</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">arg_width</span> <span class="error" style="box-sizing: border-box; color: red; font-weight: bold; font-family: sans-serif;">$</span><span class="name" style="box-sizing: border-box;">arg_height</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">image_filter_jpeg_quality</span> <span class="literal number integer" style="box-sizing: border-box;">75</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">allow</span> <span class="literal number float" style="box-sizing: border-box;">127.0.0.0</span><span class="operator" style="box-sizing: border-box;">/</span><span class="literal number integer" style="box-sizing: border-box;">8</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">deny</span> <span class="name" style="box-sizing: border-box;">all</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="name" style="box-sizing: border-box;">error_log</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">tmp</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">test</span><span class="punctuation" style="box-sizing: border-box;">.</span><span class="name" style="box-sizing: border-box;">log</span> <span class="name" style="box-sizing: border-box;">debug</span><span class="punctuation" style="box-sizing: border-box;">;</span>
<span class="punctuation" style="box-sizing: border-box;">}</span><span class="name" style="box-sizing: border-box;">location</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="keyword" style="box-sizing: border-box; color: rgb(59, 13, 6); font-weight: bold;">static</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">image</span> <span class="punctuation" style="box-sizing: border-box;">{</span><span class="name" style="box-sizing: border-box;">alias</span> <span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">mnt</span><span class="operator" style="box-sizing: border-box;">/</span><span class="name" style="box-sizing: border-box;">images</span><span class="operator" style="box-sizing: border-box;">/</span><span class="punctuation" style="box-sizing: border-box;">;</span><span class="punctuation" style="box-sizing: border-box;">}</span>

django定位为处理动态内容，其实也就是除了静态文件外的所有URL。由django的模板设计HTML，而由mysql里的数据来渲染模板输出HTML页面。这套系统在django book中有详细描述，这里不提。同时，mysql的访问速度是较慢的，用全内存的memcached服务来缓存mysql表数据也是一个很好的选择。django book里仍然有说过用法。

站长管理站点内容时，使用admin功能来直接修改mysql数据库是个几乎最佳选择。django先天对此支持的极好。所以，站点内容尽量向mysql里放吧，这样可以完全在web页面上来管理站点，而不用ssh登上后操作。

对于我最不熟悉的CSS就完全靠bootstrap了。这套系统把常见的CSS、js、jquery都封装成各种CSS类了，使用起来很简单，轻松把一些复杂的页面功能搞定。

如果是博客，那么评论系统就非常重要。当然，自己搞一个用户系统肯定不靠谱，多少用户会在一个小站点上在注册用户记住密码呢？使用已有的如微博、QQ等帐户系统肯定是利人利己的。基于这样的登陆系统再存储评论数据当然是王道，可是时间有限啊，实在没功夫了，这时看到了多说，这个平台就是为小站点们创建的，它把各站点的评论数据放在它的数据库里，这也是多说能拿风投的核心竞争力了吧？使用多说很方便，直接复制一些代码就搞定了。

怎样录入博客呢？输入字符串加回车？太简单了，这样的博客太难看。输入HTML代码？太复杂了，每篇博客使用html的各种标签，效率太低了。于是，在python世界就主推了一个文档语言，叫做reStructureText格式，简写为RST格式。使用它来录入博客内容，再用一些python库将RST格式转到HTML格式即可。在django1.6中，我使用了rstify库来完成转换工作。

一个技术站点最重要的就是展示源代码了。如果能把源代码按语法来展示，类似“printf“这样的关键字高亮显示，岂不是很好？已经有pygments库完成这件事了，同时，rstify就集成了这一功能，使得在rst格式的输入中直接在HTML加CSS指定样式里可以高亮显示源码。

最后说说备案那些事。web服务调试通过，域名也买好了，可是用公网IP访问就是好的，用taohui.org.cn域名访问却总是失败！查看access日志看到错误码是499，很诡异，这是客户端程序主动关连接，可能吗？客户端是浏览器，不会干这事的。那一定是云主机前端的网络出问题了。查了下才发现，原来是国内的Iaas提供商都强制域名必须先在国家备案才允许访问！于是开始查如何备案。阿里云的备案算是非常替小站长考虑了，一系列流程都可以在家用电脑搞定，发拍照的备案幕布速度很快，基本一周搞定，域名可以使用了。

到此，简单的博客已经有了。选用django作为web实现，就是在不断的选择”前人成果“来实现功能，python确实担当得起。这里很多参考了https://github.com/the5fire/django_selfblog开源博客的实现，感谢这位同学的无私分享。其实这个网站的定位并不只是博客，后续我会再修改当前架构，以适应它的定位：展示我的各种想法。未来准备先上一个”孕妈“应用，首先帮助媳妇将养身体：-）