Table of Contents:

博客历险记

本文记录了俺的博客从无到有，从有到看着稍微顺眼的过程中遇到的一些问题和麻烦，以及俺是怎么解决处理的。点此查看博客

1.服务器搭建 + 域名

服务器选的是腾讯云的虚拟云主机，是在光棍节时候花了大价钱买的，差不多三年一千多大洋，选的服务器是最低配的，不过对于俺这个小博客是够用的了。

域名也是腾讯云注册的，注册的时候也没有多想起个啥域名好。就查了下看还有跟我同名的域名没，幸运的是还没被注册呢！于是就立马下单了。现在有点后悔用这个域名了，感觉不是很炫酷的。买域名倒是不麻烦，麻烦的是还得备案，下来得一个来月吧，现在也没有再注册个牛逼的域名然后再备案的雅致了。就先凑合着用这个域名了。
web服务器环境俺选的是apache+php+mysql，用的一个集成开发环境包叫xampp，傻瓜式的安装，一站式的服务，别提多省心了。像俺这种熟练工从安装到部署不到半小时就可以把环境弄搞定。
之后又设置了虚拟host，想着以后再搞个什么网站还可以搭在俺布好的这个环境中。设置步骤大致如下：

1.修改apache的httpd.conf使其支持vhost模块
* httpd.conf 打开 rewrite_module vhost
* AllowOverride 改成All

<Directory />
    AllowOverride All
     Require all granted
</Directory>

2.修改httpd-vhosts.conf，设置不同的域名对应的不同的web工程

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/opt/lampp/htdocs/wordpress"
    ServerName sunxvming.com
    ServerAlias www.sunxvming.com
    ErrorLog "logs/sunxvming.com-error_log"
    CustomLog "logs/sunxvming.com-access_log" common
</VirtualHost>

俺的小站的机密信息一下子暴露了可不少呀，各位大侠可别没事来攻击俺的网站玩哈。

2.WordPress语言包

从wordpress官网下载的wordpress包默认没有包含中文的语言包，可以通过以下方式设置中文语言：
1. 通过远程连接工具打开并编辑站点根目录下的wp-config.php文件。
2. 查找define('WPLANG', '');一行，在第二个参数处填入zh_CN，变成define('WPLANG', 'zh_CN');并保存文件。
3. 进入站点控制板，看到更新提示后进行升级即可。WordPress会自动从官方网站下载中文语言包并安装。

3.解决WordPress安装主题或插件需要FTP

使用SFTP连接到服务器，进入wp-content目录，新建tmp文件夹，设置文件夹的权限为777。返回网站根录，编辑wp-config.php，添加下列代码：

define('WP_TEMP_DIR',ABSPATH.'wp-content/tmp');
define("FS_METHOD","direct");
define("FS_CHMOD_DIR",0777);
define("FS_CHMOD_FILE",0777);

注意：要在定义ABSPATH的后面添加 defined('ABSPATH', xxx)
保存后设置wp-content目录中的plugins和themes文件夹权限为777，此时插件和主题已经可以直接更新了。注意操作顺序，先建立tmp，后设置权限为777，再修改wp-config.php配置文件

4.主题选择

wordpress默认的主题还是很丑的，更换主题是必然的选择。一开始是后台搜主题，看到还过得去的就更换主题试试。结果试了很多个主题都想不中。后来俺发现使用wordprss做博客的，在博客的底端会显示它所用的主题。形如：xxx by WordPress | Theme: xxx by xxx.
于是俺在看别人博客的时候会下意识的留意它的主题，有相中的俺就都后台下载了试试效果。终于在有一天碰到了一个俺比较喜欢的博客。
此博客界面清爽，排版流畅，字体娟秀，实属难得，于是就开始使用这个主题了。感谢四火的唠叨。

5.主题汉化

当你从wordpress官方下载主题后多半是英文的。但不要怕，wordpress是有语言国际化功能的。主题通会提供 pot文件, 通过pot文件
就可以很方便的进行汉化。只需要简单的三个步骤就可以进行汉化。

i.复制 .pot

首先要找到主题文件中的 .pot文件，一般是在主题下的 languages 目录，这里的完整路径是 /wp-content/themes/maxwell/languages/maxwell.pot
把这个文件复制一份，名字修改为 maxwell.po

ii.翻译maxwell.po文件

首先找到字符串 "Continue reading",然后进行修改。 msgid可以理解成原文， msgstr可以理解译文，这里就是中文。修改后应该是这个样子。

iii.生成mo文件

pot, po, mo 文件:
* pot可以理解成一个模板文件
* po是让人看的翻译文件，方便翻译人员进行翻译
* mo是让电脑看的文件。

msgfmt maxwell.po -o zh_CN.mo

msgfmt 命令可以吧po文件转换成mo文件， msgunfmt 可以吧mo文件转换成po文件

yum install gettext
msgfmt -o test.mo test.po
msgunfmt test.mo -o test.po

必须改成wp-config.php中define('WPLANG', 'zh_CN');定义的名字，即 zh_CN.mo

iv.好消息

上述步骤还比较麻烦，最主要的是你还的翻译语言包，英语不行的话这活儿还干不了呢。好消息是在wordpress官网是提供相应主题的多种语言包的，你只需要把中文的语言包下载下来扔到你的服务器上就可以了。步骤如下：
1. 到你使用的wordpress主题的首页找翻译的链接

2. 找到相应的国家语言

3. 导出翻译文件

6.后台编辑器

作为一个新时代的程序员，markdown那肯定是要熟练运用的。俺从插件里下载了几个markdown编辑器，对比了一下然后选择了WP Githuber MD这个插件，可以满足俺的大部分需求了。

7.代码高亮插件

使用markdown编辑器生成的页面中，插入的示例代码不会高亮显示。于是俺又得找一款代码高亮的插件了。搜索一番后选择了谷歌的google code prettify。但是markdown编辑器的代码片段生成的html格式是：

<pre>
 <code> </code>
</pre>

而google code prettify需要在<pre>标签或<code>标签中加上class='prettyprint'才能高亮显示代码。
于是俺就想什么才能在<pre>标签中加上这个类呢。最后想到的方法是在主题的模板文件的footer部位加上一段js代码来动态的向<pre>标签添加google code prettify的prettyprint类。于是就完美解决了。代码如下：

jQuery(document).ready(function(){
    jQuery('pre').each(function(){
        var el = jQuery(this).find('code');
        var code_block = el.html();
        if (el.length > 0) {
   jQuery(this).addClass('prettyprint').html(code_block);
        } else {
            jQuery(this).removeClass().addClass('prettyprint');
        }
    });
});

8.站点标题旁边的小图标

这个主题的站点标题是大字号的组标题加小子号的副标题，不过俺想在主标题的左侧加一个俺喜欢的小图标，做法也比较简单。用chorme浏览器F12工具，找到主标题的位置编辑源代码，然后添加如下代码：

<span><img width="60px" height="60px" src='俺的图片地址.jpg'></span>

然后又修改了下ccs的样式就搞定了。

9.设置文章摘要

WordPress的首页、分类和其它归档页，文章默认都是全文输出排列的。
看着非常不爽，遇到文章长一些且夹带着大量图片的，不仅页面速度打开慢，也不容易快速找到自己感兴趣的内容。于是去网上搜了一下发现wordpress有文章摘要的插件，于是安装了一个试了一下，效果还不错，插件的名字是WP-UTF8-Excerpt，推荐给同我有一样问题的朋友。

最终的俺的博客呈现的效果如下：

10.wordpress神奇的挂掉

在我一次狂按F5刷新的时候，wordpress迟迟没有反应，最终页面里显示建立数据库连接时出错，然后就啥反应都没有了。俺赶紧去服务器上看了看各个进程都还健在没，果然mysql的进程挂掉了。于是去查mysql的错误日志。于是找到了下面这一行：

说明mysql的连接给用完了。
后来去网上搜了搜，都说wordpress的并发量是相当的低。再加上俺的超低配服务器，1核，1G内存，1mbps(也就是每秒一百多k的带宽)，那就更不行了。
为了搞清楚俺的wordpress到底能支持多少并发，俺于是用webbench来压测了一下。先来了个10的并发，还凑活，来20个并发，嘿嘿，mysql又挂掉了。
问题是出在mysql上，那无法就是缓存和页面静态化，于是去看有没有这方面的插件，嘿，还真有。Super Cache,安装上，建立好缓存页面，再压测，哈哈，这回真就不崩了。

11.让wordpress飞起来

一开始俺的博客还是比较慢的，后来去搜了搜提高浏览速度的插件，配置了一番，页面明显快了好多。一下是俺具体用到的插件：
* Super Cache
 页面静态化后，又开启了gzip压缩，还有浏览器的304缓存
* Autoptimize
可以自动合并、压缩 CSS 和 JS 文件，减少请求数和文件体积，优化传输速度。它还有个图片懒加载的选项也给打开了。

12.将worldpress的博客改为纯静态的页面

先说说俺之前的博客的文章是怎么来的。
俺有记录笔记的习惯，比如网上看到有价值的文章，阅读电子书，自己动手实现某些技术都会记录在笔记软件中，用的是为知笔记。然后大部分的博客文章就是从这些笔记中选出来，然后再在WordPress的后台上进行编辑上传，然后一篇博文就产生了。
然后俺就想能不能直接将我所有的笔记直接导出来，然后直接生成html的页面，这样就方便多了。于是就开始了博客的改造工作。

最终找到的解决方案如下：
1. 将为知笔记的文章按markdown格式导出到本地
2. 从导出的笔记中，将所有图片提取出来
3. 用github做博客的图床，将所有markdown文件中图片的链接替换成正确的路径
4. 将导出的markdown格式的文章用pandoc+make工具转换成html文件
5. 将所有图片上传到github的my-blog工程的imgs下
6. 将所有文章上传到github上
7. 用github page托管自己的博客

13.github page绑定自己的域名

1. github中设置域名为自己的域名，设置完之后会自动在项目根目录中生成一个CNAME文件，文件中的内容为设定的域名
2. 在自己的域名后台管理页面添加CNAME记录
a. 先添加一个CNAME，主机记录写@，后面记录值写上你的http://xxxx.github.io
b. 再添加一个CNAME，主机记录写www，后面记录值也是http://xxxx.github.io
这样别人用www和不用www都能访问你的网站（其实www的方式，会先解析成 http://xxxx.github.io 后根据CNAME再变成http://xxx.com， 中间是经过一次转换的。上面，我们用的是CNAME别名记录，也有人使用A记录，后面的记录值是写github page里面的ip地址，但有时候IP地址会更改，导致最后解析不正确，所以还是推荐用CNAME别名记录要好些，不建议用IP。

14.最终效果

最终的纯静态的页面博客的效果如下：

首页：

文章页：