Debian11部署typecho(博客迁移)

#### 前言

之前一直用的是Hexo，纯静态博客胜在节省，随便找一个托管平台就行，比如Github。

缺点也很明显，访问速度完全依赖于托管平台，尤其是Github这种原本访问困难的平台，会很影响访问效率；要嵌入评论功能很麻烦，撰写文章需要每个终端设备都要部署nodejs环境再手动push，虽然可以通过Git管理自动推送更新发布整个网站，但整体来说不如直接通过网页后端管理方便简单。

期间有考虑过转为Wordpress，后来又怕过于臃肿，万一哪一天服务器不续费了迁移又麻烦。

趁着这次腾讯云轻量应用服务器打折，租了个性能还不错的配置，顺便把博客平台也迁移至typecho。

#### 运行环境

```plaintext
系统: Debian 11.1
Mariadb: v10.5.12
PHP: v7.4.28
Nginx: v1.18.0
typecho: v1.2.0-rc2
```

#### 安装依赖

参照以下文章即可

[post cid="30" cover="" size="small"/]

其中根据需要将数据库对应修改为typecho即可

#### 部署Typecho

[官方正式版下载地址](https://typecho.org/download)

下载后解压，以 `/var/www/typecho`路径为例

```bash
# 创建文件夹
mkdir /var/www/typecho
# 使用wget下载压缩包
wget https://github.com/typecho/typecho/releases/download/ci/typecho.zip
# 解压
unzip typecho.zip
# 为了防止权限出现问题, 修改全部文件的权限
chmod 777 -R /var/www/typecho
```

文件结构如下

```
/var/www/typecho
├── admin
├── config.inc.php
├── index.php
├── install
├── install.php
├── LICENSE.txt
├── sw.min.js
├── usr
└── var
```

#### 配置

部署完成后通过浏览器访问开始配置Typecho

##### 开始配置

如果此前解压部署文件的时候没有改权限，这里会提示 `/usr/uploads`无权限写入

![](/usr/uploads/images/Debian11部署typecho-博客迁移/typecho-配置开始.png)

##### 连接数据库

在安装依赖Mariadb过程中安装pdo_mysql，这里数据库适配器则会自动识别出来提供选择

![](/usr/uploads/images/Debian11部署typecho-博客迁移/typecho-连接数据库.png)

##### 配置管理员账号

![](/usr/uploads/images/Debian11部署typecho-博客迁移/typecho-配置管理员账号.png)

点击 `继续安装`后即可通过浏览器访问进入博客主页，可以进一步配置、管理博客

#### 自动备份

按需修改，默认定期备份到/var/www/typecho/backup内，按7天循环删除过期备份

```bash
#!/bin/bash
DB_BKP_USER="db_user"     # Enter the username for backup
DB_BKP_PASS="db_user_pass"        # Enter the password of the backup user
DB_BKP_DEST="/var/www/typecho/backup/db" # Enter the Backup directory,change this if you have someother location
FILE_BKP_DEST="/var/www/typecho/backup/file"
BKP_LOG_PATH="/var/www/typecho/backup/log"
BKP_DAYS="7" # Enter how many days backup you want
MYSQL_HOST="localhost"
BKP_DATE="$(date +"%d-%m-%Y-%H:%M:%S-%a")";
IGNORE_DB="information_schema mysql performance_schema"
[ ! -d $DB_BKP_DEST ] && mkdir -p $DB_BKP_DEST || :
[ ! -d $FILE_BKP_DEST ] && mkdir -p $FILE_BKP_DEST || :
[ ! -d $BKP_LOG_PATH ] && mkdir -p $BKP_LOG_PATH || :
MYSQL="$(which mysql)"
MYSQLDUMP="$(which mysqldump)"
GZIP="$(which gzip)"
TAR="$(which tar)"

echo -e "################\n备份时间为${BKP_DATE}################" >> ${BKP_LOG_PATH}/backup.log
echo -e "################\n备份时间为${BKP_DATE}################"

# backup database
DB_LIST="$($MYSQL -u $DB_BKP_USER -h $MYSQL_HOST -p$DB_BKP_PASS -Bse 'show databases')"
DB_LIST_PRINT="$($MYSQL -u $DB_BKP_USER -h $MYSQL_HOST -p$DB_BKP_PASS -Bse 'show databases' | tr '\n' ',' | sed 's/.$//')"

echo -e "尝试备份数据库列表: ${DB_LIST_PRINT}" >> ${BKP_LOG_PATH}/backup.log
echo -e "尝试备份数据库列表: ${DB_LIST_PRINT}"

for db in $DB_LIST
	do
	skipdb=-1
	if [ "$IGNORE_DB" != "" ];
	then
		for i in $IGNORE_DB
		do
	   	[ "$db" == "$i" ] && skipdb=1 || :
		done
	fi

if [ "$skipdb" == "1" ] ; then
		echo -e "忽略数据库: $db" >> ${BKP_LOG_PATH}/backup.log
		echo -e "忽略数据库: $db"
	fi
	 
	if [ "$skipdb" == "-1" ] ; then
		DB_BKP_FILENAME="$DB_BKP_DEST/$db.$BKP_DATE.gz"
		echo -e "备份数据库: $db 到 $DB_BKP_FILENAME" >> ${BKP_LOG_PATH}/backup.log
		echo -e "备份数据库: $db 到 $DB_BKP_FILENAME"
		$MYSQLDUMP -u $DB_BKP_USER -h $MYSQL_HOST -p$DB_BKP_PASS $db | $GZIP -9 > $DB_BKP_FILENAME
	fi
done

# backup usr
FILE_BKP_FILENAME="$FILE_BKP_DEST/usr.$BKP_DATE.tar.gz"
$TAR -czPf  $FILE_BKP_FILENAME /var/www/typecho/usr
echo -e "备份文件: usr 到 $FILE_BKP_FILENAME" >> ${BKP_LOG_PATH}/backup.log
echo -e "备份文件: usr 到 $FILE_BKP_FILENAME"

# clean expire backups
echo -e "清理过期备份..." >> ${BKP_LOG_PATH}/backup.log
echo -e "清理过期备份..."
find $DB_BKP_DEST -type f -mtime +$BKP_DAYS -delete
find $FILE_BKP_DEST -type f -mtime +$BKP_DAYS -delete

echo -e "################备份结束################\n\n" >> ${BKP_LOG_PATH}/backup.log
echo -e "################备份结束################\n\n"
```

#### 额外设置/美化

[Handsome主题官方页面](https://www.ihewro.com/archives/489/)

本站使用Handsome主题，需要付费授权使用，终身88元

主题购买授权后即可使用，具体使用文档需要付费后通过用户中心才能访问查看，下面内容只讲述部分美化内容

[插件Github地址](https://github.com/Yves-X/Copyright-for-Typecho)

下载 `plugin.php`到 `usr/uploads/plugins/Copyright`，在typecho插件中启用

其中声明可以使用html代码，比如:

```html
本文采用 <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank" title="版权声明协议"><span>知识共享署名-非商业性使用 4.0 国际许可协议</span></a> 进行许可。<br/>您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
```

##### 博客底部左侧添加ICP备案号

`开发者设置-博客底部左侧信息`

```html
<div class="github-badge">
  <a href="https://beian.miit.gov.cn" target="_blank" title="备案号">
    <span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">2022020467号-1</span>
  </a>
</div>
```

##### 博客底部右侧添加版权信息

开发者设置-博客底部右侧信息

```html
<div class="github-badge">
<a href="https://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-green">Handsome</span>
</a>
</div>
```

这样会和原来主题的底部信息重复，修改 `usr/uploads/themes/handsome/component/footer.php`

```php-template
<footer id="footer" class="app-footer" role="footer">
    <div class="padder-sm bg-white footer_wrapper box-shadow-wrap-normal b-normal">
        <div class="pull-right hidden-xs text-ellipsis">
             <?php $this->options->BottomInfo();?>
            <?php /////////// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解/////////?>
           <!-- <a href="https://typecho.org/" style="margin-left: 5px" target="_blank">
                <svg style="width: 16px;height: 16px;vertical-align: -4px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="26px" viewBox="0 0 30 26" version="1.1">
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

<path d="M13,26 C3.36833333,26 0,22.631 0,13 C0,3.36866667 3.36833333,0 13,0 C22.6316667,0 26,3.36866667 26,13 C26,22.631 22.6316667,26 13,26 Z M6,9 L20,9 L20,7 L6,7 L6,9 Z M6,14 L16,14 L16,12 L6,12 L6,14 Z M6,19 L18,19 L18,17 L6,17 L6,19 Z" id="icon" fill="#000000" sketch:type="MSShapeGroup"/>
                    </g>
                </svg>
            </a>
            <a class="highlightlink" href="https://www.ihewro.com/archives/489/" target="_blank">
                <span>Theme by handsome</span>
            </a> -->
            <?php ////////////////////////////////////////////////////////////////// ?>
        </div>
        <span class="text-ellipsis">© <?php echo date("Y"); ?> All rights reserved.
                <?php $this->options->BottomleftInfo(); ?>
        </span>
    </div>

</footer>
```

##### 自定义CSS

`开发者设置-自定义CSS`

```css
/* 自定义github badge样式 */

.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 14px;
  background-color: #abbac3;
  margin-bottom: 10px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 6px 6px 6px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 6px 6px 6px 6px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

/* 首页文章图片获取焦点放大 */
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
    transform: translateY(-1opx);
    box-shadow: 0 8px 10px 「gba(73，90，47，0.47);
}

/* panel阴影, 阴影颜色修改rgba后面的值 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(80, 80, 80, 0.35);
}

/* 如果也想使盒子四周也有阴影，加上以下代码 */
.app.container {
    box-shadow: 0 0 30px rgba(80, 80, 80, 0.35);
}

/* 粗斜体上色 */
strong {
  color: #f26522;
}

em {
  font-style: normal;
  color: #fcaf17;
}
```

##### 自定义Javascript

特定日期全站灰色

```javascript
//网站变灰
    ncov_gray();

function ncov_gray() {
        var date = new Date();
        this.year = date.getFullYear();
        this.month = date.getMonth() + 1;
        this.date = date.getDate();

var currentTime = this.month + "." + this.date;
        if (currentTime == "12.13") { //如果需要添加日期, 添加||条件判断即可
            $("html").css("filter", "grayscale(1)");
        }
    }
```

网页标题调皮化

```javascript
//网页标题调皮化
var OriginTitile=document.title;
var st;
document.addEventListener(
    'visibilitychange',function()
    {
        if(document.hidden){
            document.title="等你回来哟(๑•̀ㅂ•́)و✧";
            clearTimeout(st);
            console.log('hide');
        }
        else{
            document.title="欢迎回来ヾ(≧▽≦*)o";
            console.log('show');
            st=setTimeout(function(){document.title=OriginTitile;},2000);
            console.log('endChange=');
        }
    }
);
```

##### 评论输入框添加打字特效

[原文地址](https://moe.best/modification/js-input-effect.html)

###### 上传js文件

添加以下内容到 `usr/uploads/js/commentTyping.js`

```
(function webpackUniversalModuleDefinition(root, factory) {
    if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
    else if (typeof define === 'function' && define.amd) define([], factory);
    else if (typeof exports === 'object') exports["POWERMODE"] = factory();
    else root["POWERMODE"] = factory()
})(this, function() {
    return (function(modules) {
        var installedModules = {};
        function __webpack_require__(moduleId) {
            if (installedModules[moduleId]) return installedModules[moduleId].exports;
            var module = installedModules[moduleId] = {
                exports: {},
                id: moduleId,
                loaded: false
            };
            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
            module.loaded = true;
            return module.exports
        }
        __webpack_require__.m = modules;
        __webpack_require__.c = installedModules;
        __webpack_require__.p = "";
        return __webpack_require__(0)
    })([function(module, exports, __webpack_require__) {
            'use strict';
            var canvas = document.createElement('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight
            });
            document.body.appendChild(canvas);
            var context = canvas.getContext('2d');
            var particles = [];
            var particlePointer = 0;
            var frames = 120;
            var framesRemain = frames;
            var rendering = false;
            POWERMODE.shake = true;

###### 修改主题设置

然后在 `开发者设置-自定义输出body尾部的HTML代码`添加以下内容

```
<script type="text/javascript" src="/usr/uploads/js/commentTyping.js"></script>
```