搭建Typecho博客的心得与极详细教程

接下来这篇教程出自我的个人blog：搭建Typecho博客的心得与极详细教程
同时欢迎访问我的网站：
https://xuanland.cn

---

本文讲述了2020.7中旬我将重心从CSDN博客平台转移到个人网站的历程（及教程），也是我在属于自己的网站上写下的第一篇文章~网上关于Typecho博客的搭建教程零零碎碎，所以也坚定了自己写一篇全攻略的决心。
如果你想从零开始搭建自己的专属博客，这篇文章——你选对了！

一、关于博客

• 之前小半年一直在用CSDN写博客，感觉CSDN是一个很强大的博客平台，内置markdown语法编辑器，不论是公式还是代码，写起来都得心应手。2020年7月10号左右写了106篇博客，开始决定搭建属于自己的博客平台，拥有一个属于自己的学习和生活空间，于是便在三天后有了这样一个网站。并不是说不再用CSDN写博客了，我承认CSDN的开放性和便利性都有着很大的优势，在那里我对计算机领域的各个方向进行了详细的分类（细化到每一种题型），而在个人网站中，我选择汇总一些最精华和宝贵的部分，用最满意的排版呈现出来，所以在这里我不会很频繁地更新博客，保证每一次更新的质量~我希望我的个人博客和我共同成长起来！
• 附CSDN博客链接：Mr.zwX csdnblog

---

二、Typecho blog的搭建教程

阿里云平台：aliyun.com

（一）服务器ECS(实例)

• 我们本地ip支持内网访问，而不支持公网访问，如何让大家可以在不同的电脑上访问到你的网页呢？我们需要服务器。之前做前后端分离的交互时，我们用到的方法是——内网穿透，也就是从本地ip（localhost）映射到一个可访问的url地址（当然是直接交给一些公司去做），从而前后端可以通过这样的映射关系交互起来（前端可能需要用到IIS发布），实现web页面的运转。
  有关内网穿透及本地服务器，我给出一个教程链接及我画的思维导图：把自己电脑做成web服务器&内网穿透并发布网页

• 我们需要搭一个网站可不能直接用内网穿透的方法了，这样不能直接通过该url访问到站点，所以我们需要一个云服务器。当然选择阿里云/腾讯云均可，因为同学的推荐，所以我果断选择了阿里云服务器。
• 购买服务器前在个人信息进行学生认证，然后在云翼计划中购买，在24周岁之前是114元/年，剩下了1k+rmb.

• 购买后能在ECS实例中看到自己的服务器运行情况，这个时候我们需要在镜像市场将Linux系统换源为宝塔系统，方便后续的操作。
  先停止实例的运行

• 在镜像市场一栏中找到宝塔Linux面板，选择最新版本即可

现在需要配置安全组，如下所示

• 点击 配置规则 ，对需要的接口进行接通处理。

• 和刚才同样的地方，我们点击远程连接ssh，选择WorkBench，可进行网页ssh链接操作（当然可以用ssh工具，比如Xshell等，我也可以选择了Linux Ubuntu中用ssh命令链接公网ip然后进入宝塔面板）默认端口是22

• 如果想用Ubuntu进行操作，那也是很方便的，打开终端，通过如下命令远程连接：

    ssh root@ip  --- > password ---> bt

• 于是可以通过这样的命令来修改面板的信息（我重置了一次用户名和密码）**一定要记清楚服务器和面板的用户名和密码，后面还有数据库的名称和密码！**接下来访问ip:8888即是宝塔默认路径，登录上去就可以进入后面要将到的宝塔操作了。

（二）域名

域名注册及备案

• 通俗来讲，域名就是访问网站该网址，在阿里云域名栏中输入想选的域名，比如我申请的http://xuanland.cn就是我的域名，支付成功后通过审核，进行备案，这里需要等待一段时间。因为域名注册和服务器同样是在阿里云平台氪金的，所以这里就不展开讲述了（像在某宝网购物一样就行了/doge）
• 然后买了域名后进行实名认证过程，这个过程不会太久，但是接下来我们需要备案，这个过程就比较繁琐了。我们在阿里云的app上选择备案，填写个人信息及网站信息。进行身份证拍照和个人人脸识别时**一定注意光线要好，底色为白色！**我就是这里被卡下来的，之后两天还需要上传手持户口簿照片、阿里云人工视频通话验证等。

域名解析

一切顺利后，我们只需要做一件事——等待域名备案通过，在阿里云中进行域名解析——指向公网ip地址。

• 解析时将该域名指向公网ip地址，参见：阿里云域名购买与DNS解析教程 注意：如果你希望输入的网址是xuanland.cn没有www，那么添加记录的时候填写**@ A**，反之则www A
  在cmd中输入ping (www.)xuanland.cn，即可呈现接收和发送数据包的情况，如果指向的ip正确且0%丢失，那么解析成功。

（三）宝塔面板

• 宝塔——我可以说是在整个搭建过程中作用最大的工具，亦或是说云服务器的“操作系统”。通过宝塔我们做哪些事情？整个需要Linux命令行操作服务器文件的过程全在宝塔可视化界面操作——像我们在Windows上用鼠标操作文件一样方便。所以我们可以很方便地在公网ip下添加站点（域名）、该ip下的文件…通俗地说，通过在宝塔中的文件操作，可以让我们的ip访问有东西可呈现——而要呈现的内容，也就是下一点讲到的Typecho.同时宝塔对云服务器及文件进行监控（这些都是常识性的操作拉，就自行研究哦）
• ip/8888 进入宝塔面板登录，配套安装LNMP，这四个字母其实是四个单词的缩写，看下图：

• 安装好这“四大神器”后，操作就很简单直接了，我们在网站栏添加域名，生成其对应文件夹，举个例子如下：

• 于是在文件栏中找到xuanland.cn，这个就是我们需要操作网站的文件夹！！！（后面称其为服务器文件）

（四）Typecho

Typecho的安装说明

• Typecho和WordPress都很强大，TC偏简洁风，WP偏繁琐，而喜欢比较高端页面的我还是选择了TC，专注于高质量的博客内容才是初心~下载Typecho链接：Typecho download 好不容易才找到一个打开速度过得去的下载页…100 YEARS LATER，下载好了…然后在本地将该zip解压，出现一个build文件夹，将其上传到服务器文件的xuanland.cn中，但是！**需要将build文件夹中的所有文件全部剪切到xuanland.cn直属文件夹下，然后删除build空文件夹！**好了，欧克了

网页端的初始化配置

• 既然前面已经在安全组开通了80端口（默认），那么直接输入公网ip地址吧，进入Typecho官方配置面板。

• 这里注意数据端口不改即可3306默认，数据库信息按自己创建的写，在后面需要再次注册一个管理员用户名&密码，所以一定注意记住密码呀，这里已经出现四次注册拉！！！，好了，话不多说，我也找回密码了两次，人不犯错，哪里记得清呢/手动doge，当然大家在注册的时候就用word记录下来最好。

Typecho的设置及模板

• 其实成功之后也就没有太多好讲的了，其实也就是我现在正在做的工作，在Typecho管理员权限内进行一些设置。关于网站主题模板，可以去Typecho主题模板站找合适的，也可以通过其他途径找喜欢的模板，自由发挥的时候到了✌但其实这几个步骤里我花时间最多的就是选模板，正如作者的那句话——我不喜欢做选择，但绝不后悔做出的选择。其实现在这个网站的风格已经非常符合我的审美了——简朴而高雅。放上一张可有可无的图——本文在电脑端口的截图：

• 模板的下载通常是从github克隆或者是百度云盘下载，得到的往往的一个压缩包.zip，我们在本地解压，然后在在宝塔面板的文件中把整个模板目录上传到www/wwwroot/xuanland.cn/usr/themes下，如果后缀有-master可能需要删除。最后在博客网站的外观设置中可以找到新加入的模板。
• 图片放在usr下即可，放在更外层的文件夹中貌似会找不到图片。
  其中plugins是插件的意思，但是需要注意仔细阅读模板的README，因为有些模板对插件和配置版本有限制！比如有个从WordPress移植到Typecho的模板就需要PHP7.0以上，在我这里使用的结果就是——500 ERROR!
• 头像设置——需要通过 全球通用头像网站Gravatar 上传头像图片，于是之后这个头像就跟随你绑定的邮箱走，包括你的个人网站头像及在评论别人文章时的头像。
  关于头像的设置，我觉得有必要在下面详细讲一讲！

（五）有关blog头像有必要讲一讲

• 首先要说的是，官方途径——打开 全球通用头像网站Gravatar ，然后注册绑定头像，于是头像跟随着你的邮箱走，在别人的评论区亦是如此。所以说，绑定头像是必要的！但是，在我们的个人blog中，存在一个重大问题——那就是从头像网站拉取你的头像速度太慢！极其影响观看效果，所以我们采取如下方法：
• 直接将我们网站中需要头像的地方，修改代码为静态链接即可！以本网站为例，首先修改每篇文章摘要处的头像代码index.php：
  将$this->author->gravatar这里更改，如下：

• 然后修改点击头像进入的author页面中的大头像，在index.php中：
  直接将getGravatar()这部分代码替换成静态链接：

• 最后将文章浏览页底部的头像换掉，在post.php中，和第一个方法相同：

注意class要按照原来的写，因为这样选择了对应的标签，大小位置合适。

• 这种静态链接的方式可以很快速拉取到头像，当然愿意换Gravatar镜像源的朋友们也可以自己换一换试试（我是觉得速度仍然不满意）
• 换镜像源方法：在网站根目录下找到config.inc.php文件，在最后添加如下代码进行全局配置：

/** 换Gravatar头像源 */
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://secure.gravatar.com/avatar/');

• 在主题的Utils.php文件中能找到getGravatar()函数，修改为国内镜像源：

• 总之，摸索着在代码文件中ctrl+F搜索关键词author->gravatar/getGravatar()，修改镜像源或者改静态链接头像。
• 附常用镜像源：

- gravatar官方www源 https://www.gravatar.com/avatar/
- gravatar官方cn源 https://cn.gravatar.com/avatar/
- gravatar官方en源 https://en.gravatar.com/avatar/
- gravatar官方secure源 https://secure.gravatar.com/avatar/
- V2EX源 https://cdn.v2ex.com/gravatar/
- Loli源 https://gravatar.loli.net/avatar/
- 极客族 https://sdn.geekzu.org/avatar/

（六）网站的伪静态处理

未经过伪静态处理的网址很冗长，包含了index.php/1.html，而我们只需要1.html。
去宝塔，然后教程如下图：

图中代码如下：

    if (!-e $request_filename) {
        rewrite ^(.*)$ /index.php$1 last;
    }

随后进入Typecho后台-设置-永久链接，打开地址重写，选用自己喜欢的风格即可。
于是网址便显得简洁一些：http://www.xuanland.cn/Life/36.html

（七）从http配置到https访问的SSL

首先在阿里云购买0元的云盾证书SSL，一定注意买0元的哈哈，下图所示：

然后填写个人信息，很快就可以成功申请到你的SSL，在证书列表中找到下载，然后选择你的服务器类型，我选择的Nginx，然后解压文件，找到KEY PEM，然后在宝塔中的网站中打开网站设置：

可是！我这里出现了Nginx报错！

来剖析一下这个报错——在www/server/panel/vhost/nginx/xuanland.cn.conf的第5行出现了有关serve_name的问题，那么我们进入Nginx配置文件下进行手动修改！

和朋友的代码对比中我发现了问题——serve_name需要在后面直接加上服务器的用户名：5 serve_name root即可！

回到Typecho的后台基本设置中，将网站链接修改为https://xuanland.cn即可访问了！再次访问的时候，网址前面的不安全已经消失在风里，手机访问也多了一个小绿锁，bingo！

如果并没有在网址前出现小绿锁，那么打开控制台f12，查看ERROR，将不安全的静态链接全部改掉！还要Typecho后台放的缩略图url也需要改！比如我将所有图片链接的http://ip/x.jpg改为了https://xuanland.cn/x.jpg，小绿锁出现！
参考资料：
宝塔面板一键部署SSL证书，免费配置https
为你的Typecho开启全站HTTPS

三、特别感谢

小扬Shaun和jason_xy的指导！

四、有关说明

• 如需转载，请先联系作者（联系方式于 顶部-我），谢谢支持！

• 如本文对您有帮助，希望在评论区留下您的足迹哦！

• 如果可以的话，请在自己的建好的博客附上本文教程的链接，谢谢支持~

• 欢迎互加友情链接：博主：Mr_zwX | 网址：https://xuanland.cn | 头像URL：https://xuanland.cn/usr/head.jpeg
  （并将您的昵称 blog网址 头像地址 一句话简介发送给我）