博客历险记

内容纲要

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

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文件

msgfmt maxwell.po -o zh_CN.mo
msgfmt 可以把 po文件修改成 mo文件。

pot, po, mo 文件。pot可以理解成一个模板文件,po是让人看的翻译文件,方便翻译人员进行翻译,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 文件,减少请求数和文件体积,优化传输速度。它还有个图片懒加载的选项也给打开了。