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

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

技术杂谈小彩虹2021-07-12 11:30:1580A+A-

接下来这篇教程出自我的个人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

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

先停止实例的运行

请输入图片描述

请输入图片描述

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

请输入图片描述

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

请输入图片描述

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

请输入图片描述

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

请输入图片描述 请输入图片描述

  • 如果想用Ubuntu进行操作,那也是很方便的,打开终端,通过如下命令远程连接:
    ssh root@ip  --- > password ---> bt

请输入图片描述

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

(二)域名

域名注册及备案

  • 通俗来讲,域名就是访问网站该网址,在阿里云域名栏中输入想选的域名,比如我申请的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

三、特别感谢

小扬Shaunjason_xy的指导!

四、有关说明

  • 如需转载,请先联系作者(联系方式于 顶部-我),谢谢支持!
  • 如本文对您有帮助,希望在评论区留下您的足迹哦!
  • 如果可以的话,请在自己的建好的博客附上本文教程的链接,谢谢支持~
  • 欢迎互加友情链接:博主:Mr_zwX | 网址:xuanland.cn | 头像URL:xuanland.cn/usr/head.jp…

(并将您的昵称 blog网址 头像地址 一句话简介发送给我)

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们