博客优化-利用tinify进行图片无损压缩 前言{callout color="#f0ad4e"}博客搭建有一段时间了，随着内容的增多，感觉在打开的时候加载时间越来越长。所以就想优化一下，特此记录优化过程。{/callout}分析{callout color="#f0ad4e"} PageSpeed 是我经常用的用来分析页面加载时间比较喜欢的一个用具。 使用也很简单，输入域名点击分析即可。{/callout}{card-default label="分析结果" width="90%"}{/card-default}{message type="error" content="优化建议第一项就是图片大小。而博主上传的图片也没有经过压缩过。是应该优化一下了。"/}图片压缩脚本{callout color="#f0ad4e"}参考网上的压缩脚本，改了一下，更适合自己使用。利用tinify模块做图片压缩效果很好，就是每月有500次使用限制。目前博主的内容不多，完全够用。tinify的key申请地址 {/callout}{message type="success" content="压缩脚本内容，"/}隐藏内容，请前往内页查看详情{message type="success" content="运行脚本，自动记录断点，中断后重新运行即可。"/}python3 img_cop.py{card-default label="运行过程" width="75%"}{/card-default}压缩效果{message type="success" content="压缩效果很明显，肉眼也看不出区别"/}{card-default label="大小对比" width="75%"}{/card-default}访问效果对比{message type="success" content="再次运行PageSpeed，对比效果。由9s降到了4s"/}{card-default label="对比效果" width="90%"}{/card-default}

基于typecho+webstack的导航栏系统部署与使用 前言{callout color="#f0ad4e"}chrome收藏夹里收藏的东西越来越多，找了一款开源的导航栏系统来整理自己的标签。{/callout}参考：关于 WebStack_钻芒二开版部署{callout color="#f0ad4e"}在 从零开始-搭建Typecho+Joe主题的博客 基础上操作，准备一个新的域名用来做网址导航。{/callout}源码获取源码获取升级php{message type="success" content="导航栏系统使用的是typecho1.20，要求php-fpm版本7.2以上。重新构建php"/}{card-describe title="卡片描述"}FROM php:7.4-fpm # Install modules RUN sed -i "s@http://deb.debian.org@http://mirrors.aliyun.com@g" /etc/apt/sources.list && \ rm -Rf /var/lib/apt/lists/* && \ apt-get update && apt-get install -y \ libfreetype6-dev \ librabbitmq-dev \ libssh-dev \ libjpeg62-turbo-dev \ libmcrypt-dev \ libicu-dev \ libxml2-dev \ libssl-dev \ git \ wget \ ssh \ libpcre3-dev \ --no-install-recommends RUN docker-php-ext-install bcmath intl mysqli pdo_mysql exif xmlrpc RUN apt-get purge -y g++ \ && apt-get autoremove -y \ && rm -r /var/lib/apt/lists/* \ && rm -rf /tmp/* COPY composer.phar /usr/local/bin/composer RUN chmod +x /usr/local/bin/composer RUN usermod -u 1000 www-data EXPOSE 9000 CMD ["php-fpm"]{/card-describe}{card-describe title="重新构建"}docker-compose up --build php{/card-describe}配置nginx{card-describe title="后端配置"}# Appadmin server { listen 81; server_name 0.0.0.0; root /www/web/typecho-nav/; server_tokens off; include none.conf; index index.php index.html index.htm; access_log /www/web_logs/access2.log wwwlogs; error_log /www/web_logs/error2.log notice; client_max_body_size 50m; location ~ \.php$ { fastcgi_pass php:9000; fastcgi_index index.php; include fcgi.conf; fastcgi_buffers 8 4K; fastcgi_buffer_size 4K; } location ~* \.(eot|ttf|woff|woff2|svg)$ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } }{/card-describe}{card-describe title="前端代理"}upstream nav-backend { server 172.17.0.10:8083 weight=1 fail_timeout=10s max_fails=1 ; } server { listen 443 ssl http2; server_name nav.itbunan.xyz; server_tokens off; ssl_certificate /etc/nginx/cert/nav.itbunan.xyz_bundle.crt; ssl_certificate_key /etc/nginx/cert/nav.itbunan.xyz.key; ssl_protocols TLSv1.2 TLSv1.3; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload"; listen 80; if ($scheme = http) { return 301 https://$host:443$request_uri; } location / { proxy_pass http://nav-backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Host $http_host; proxy_set_header X-Forwarded-Port $server_port; proxy_set_header X-Forwarded-Proto $scheme; proxy_cookie_path / "/; httponly; secure; SameSite=Lax"; proxy_redirect http:// https://; add_header Content-Security-Policy upgrade-insecure-requests; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET,POST,DELETE'; add_header 'Access-Control-Allow-Header' 'Content-Type,*'; } }{/card-describe}{message type="success" content="重启nginx服务"/}访问并配置https://nav.itbunan.xyz {message type="success" content="安装时，和博客公用同一个数据库。以不同的前缀进行区分。"/}{card-default label="导航栏" width="75%"}{/card-default}优化{message type="success" content="因为调用第三方接口,有时候欧刷新导航栏出现图标加载失败的情况。"/}{callout color="#f0ad4e"}解决办法：部署自己的接口，将图标缓存到自己的服务器上。参考： ico获取api {/callout}FAQ{message type="success" content="部署api接口后, 刷新页面出现超时，经过分析，php-fpm问题。"/}{card-describe title="解决办法"};优化php-fpm进程配置 [www] user = www-data group = www-data listen = 127.0.0.1:9000 pm = static pm.max_children = 50 pm.start_servers = 10 pm.min_spare_servers = 10 pm.max_spare_servers = 35 pm.max_requests = 1000 request_terminate_timeout = 180 request_slowlog_timeout = 30 slowlog = /logs/www-slow.log{/card-describe}

Joe主题首页文章列表不显示 问题描述{message type="success" content="今天莫名其妙的主题首页文章列表一直显示加载中，加载不出来。"/}{card-default label="问题截图" width="75%"}{/card-default}解决办法{message type="success" content="想了很多办法没有解决，查看更新日志。有一条，关闭typecho的debug模式。突然想到昨天调试其他功能打开了debug！关闭debug后，恢复正常！"/}//config.inc.php 配置 //define('__TYPECHO_DEBUG__', TRUE);{message type="info" content="注释后，恢复正常"/}{card-default label="正常截图" width="75%"}{/card-default}

typecho博客配置腾讯云对象存储COS加速 前言{callout color="#f0ad4e"}采用Joe主题的typecho的博客运行也有一段时间了。最近发现访问不太稳定，等很长时间都打不开，用chrome调试工具发现cdn.jsdelivr.net长时间加载不出来，还有随着文章越来越多，文章图片的加载也有点慢。正好，腾讯腾讯云赠送了半年的COS对象存储，用来做博客加速刚刚好。{/callout}腾讯COS设置{message type="success" content="创建存储桶"/}{card-default label="存储桶" width="80%"}{/card-default}{message type="success" content="回源设置"/}{card-default label="回源设置" width="80%"}{/card-default}typecho设置{message type="success" content="根目录下的config.inc.php"/}/* 定义插件cdn目录(相对路径) */ define('__TYPECHO_CDN_DIR__', 'https://myblog-1306181120.cos.ap-shanghai.myqcloud.com/');{message type="success" content="修改 var/Widget/Options.php "/} /** * 获取模板路径 * * @access protected * @return string */ protected function ___themeUrl() { return defined('__TYPECHO_THEME_URL__') ? __TYPECHO_THEME_URL__ : //Typecho_Common::url(__TYPECHO_THEME_DIR__ . '/' . $this->theme, $this->siteUrl); Typecho_Common::url(__TYPECHO_THEME_DIR__ . '/' . $this->theme, __TYPECHO_CDN_DIR__); } /** * 获取插件路径 * * @access protected * @return string */ protected function ___pluginUrl() { return defined('__TYPECHO_PLUGIN_URL__') ? __TYPECHO_PLUGIN_URL__ : //Typecho_Common::url(__TYPECHO_PLUGIN_DIR__, $this->siteUrl); Typecho_Common::url(__TYPECHO_PLUGIN_DIR__, __TYPECHO_CDN_DIR__); }FAQJoe主题js本地化设置{message type="success" content="最近cdn.jsdelivr.net非常慢，替换国内的源"/}# 进入主题目录 cd usr/themes/Joe/ grep 'cdn.jsdelivr.net' -rl * | xargs sed -i 's/cdn.jsdelivr.net/static.4ce.cn/g'{message type="error" content="static.4ce.cn 也不好用。那直接下载到服务器，完全本地化吧"/}{callout color="#f0ad4e"}将所有关于jsdelivr.net静态资源url收集到res.txt文件内去掉域名，只留下目录结构和文件名通过脚本getres.sh下载静态文件，并保留目录结构替换代码中的链接{/callout}{message type="success" content="getres.sh脚本内容"/}隐藏内容，请前往内页查看详情json静态文件{message type="success" content="切换到腾讯云COS加速以后,部分资源出现CORS错误，需要设置跨域访问"/}{card-default label="跨域" width="75%"}{/card-default}

typecho博客每日备份并利用bypy上传到百度网盘 前言{callout color="#f0ad4e"}随着博客运行的时间越来越长，每天整理技术笔记，发布文章。所用的时间和精力也越来越多。担心某天不管是因为误操作还是发生不可控的故障造成数据丢失。竹篮打水一场空，就不好了。于是就想讲数据每日自动备份一次，然后利用bypy上传到百度网盘。{/callout}{card-default label="备份数据" width="80%"}{/card-default}bypy#安装 pip3 install bypy #授权,输入授权码 bypy info bypy list #显示文件列表 bypy upload /data/db-backup/myblog_20220331.gz #上传特定文件 bypy upload #上传当前目录{card-default label="授权" width="80%"}{/card-default}备份备份脚本(databack.sh)隐藏内容，请前往内页查看详情手动备份sh databack.sh计划任务10 3 * * * flock -xn /tmp/databack.lock -c 'sh /opt/databack/databack.sh'备份可用行验证{callout color="#f0ad4e"}登录百度网盘，将备份文件下载下来。然后通过腾讯云购买一台全新的vps（竞价实例，按量计费），做完测试可以删除。将备份文件上传到新买的vps。 vps购买链接 {/callout}搭建环境参考我的另一片文章： 从零开始-搭建Typecho+Joe主题的博客导入数据# 解压 tar xvf typecho_all_20220401.tgz # 数据导入 mv opt/project/myblog/app/typecho/ /opt/myblog/app/ gzip -d myblog_20220401.gz mysql -umbguser -pmb@123 -h172.16.4.10 myblog < myblog_20220401修改配置vim /opt/myblog/app/typecho/config.inc.php{card-describe title="内容"}$db->addServer(array ( 'host' => '172.17.0.10', 'user' => 'mbguser', 'password' => 'mb@123', 'charset' => 'utf8', 'port' => '3306', 'database' => 'myblog', ), Typecho_Db::READ | Typecho_Db::WRITE); Typecho_Db::set($db);{/card-describe}测试访问绑定host，然后访问 https://itbunan.xyz 如果可以正常显示，说明没有问题。

从零开始搭建Typecho+Joe主题的博客 {card-default label="主题效果" width="75%"}{/card-default}前言{alert type="info"}Typecho是最近比较火的博客系统，见到的第一眼就被它的简洁吸引。打算折腾一下了。Joe主题又是我非常喜欢的一款主题。下面记录一下从零开始搭建博客的整个过程。完成后和本站相同的效果。{/alert}我的同款主题博客IT不难技术家园: https://www.itbunan.xyz准备资源要搭建自己的博客，需要一台vps，一个域名。因为开始，博客也没有什么人访问。完全可以使用阿里云 或者 腾讯云 最低配版的主机。域名便宜的几块钱一年时间。如果不想做备案的话，可以选择香港节点，这样就免去了备案，网络速度也很快。云主机阿里云主机购买链接{card-default label="配置推荐" width="30%"}{/card-default}腾讯云主机推荐购买链接{card-default label="配置推荐" width="30%"}{/card-default}{message type="warning" content="在购买云主机后，操作系统选择 centos7.9即可。"/}域名 注册阿里云或腾讯云后，直接通过控制台“域名入口购买即可”。购买域名后，将域名解析到刚刚买的vps外网IP上(做实验也可以通过绑定hosts实现)。系统初始化云主机购买完成后，通过ssh远程登录。然后进行一些初始化配置。安装必要的软件，方便后期的管理维护。{card-describe title="配置优化一下内容"}设置yum源安装必要的软件包修改系统限制增加操作系统记录历史命令条数系统内核优化关闭selinux设置时区，同步系统时间配置欢迎语{/card-describe}具体的配置内容见我的另一篇文章： docker和docker-compose一键安装脚本 安装完成后验证{card-default label="服务器验证" width="50%"}{/card-default}部署服务我们采用 lnmp 架构运行Typecho程序，下面基于docker部署nginx + mysql + php编辑docker-compose.yml文件version: "2" services: web: image: nginx:latest ports: - "80:80" restart: always volumes: - ./app:/www/web - ./services/nginx/conf:/etc/nginx - /var/log/lnmp/nginx:/www/web_logs networks: - lnmp-net depends_on: - php php: build: context: ./services/php/docker/ restart: always volumes: - ./app:/www/web - ./services/php/etc/php74.ini:/usr/local/etc/php/conf.d/php.ini - /var/log/lnmp/php/:/logs/ networks: - lnmp-net mariadb: image: mariadb:10.3.28 ports: - "3306:3306" volumes: - /etc/localtime:/etc/localtime:ro - ./services/mariadb/my.cnf:/etc/mysql/my.cnf - ./data/mariadb:/var/lib/mysql environment: MYSQL_ROOT_PASSWORD: mariadb@123 TIME_ZONE: Asia/Shanghai restart: always networks: - lnmp-net networks: lnmp-net: driver: bridge编辑nginx配置文件位置：services/nginx/conf/conf.d/default.conf内容：server { listen 80; server_name www.itbunan.xyz; root /www/web/typecho/; server_tokens off; include none.conf; index index.php index.html index.htm; access_log /www/web_logs/access.log wwwlogs; error_log /www/web_logs/error.log notice; location ~ \.php$ { fastcgi_pass php:9000; fastcgi_index index.php; include fcgi.conf; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } }配置php.ini位置: services/php/etc/php74.ini内容:zend_extension=opcache.so opcache.enable=0 opcache.enable_cli=0 #cert openssl.cafile=/usr/lib/ssl/cert.pem #上传文件限制 file_uploads = On memory_limit = 256M upload_max_filesize = 32M post_max_size = 32M max_execution_time = 360启动服务docker-compose up -dphp功能测试mkdir -p app/typecho && echo '<?php phpinfo(); ?>' > app/typecho/index.php{alert type="warning"}通过浏览器访问: http://itbunan.xyz{/alert}显示如下,则服务配置正常：{card-default label="nginx+php服务验证" width="50%"}{/card-default}安装博客创建数据库CREATE DATABASE `typecho` DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;安装Typecho通过 typecho下载页面 下载最新的Typecho源码，解压后上传到项目"app/typecho"目录下。 通过浏览器访问 http://www.itbunan.xyz，会自动跳转到安装页面安装。{card-default label="安装完成" width="50%"}{/card-default}安装Joe主题将Joe下载到"app/typecho/usr/themes"目录下，然后通过后台启用。git clone https://github.com/HaoOuBa/Joe.git启用后：{card-default label="启用Joe主题后" width="50%"}{/card-default}主题官方展示站FAQ首页文章数量首页文章数量默认5条，改成10条{card-describe title="设置方法"}use myblog; update typecho_options set value = 10 where name = 'pageSize';{/card-describe}递归改变目录权限find . -type d -exec chmod 755 {} \; find . -type f -exec chmod 644 {} \;最新评论在前{message type="success" content="设置->评论->将 较新的 的评论显示在前面 "/}

关于本站 {mtitle title="本站配置"/}{card-default label="当前服务器配置：" width="100%"}服务器：腾讯云标准型S3配置：2H4G3M服务器架构：L(centos7.9)-N(nginx)-M(mariadb)-P(php)本站程序：typecho - Joe运行方式: docker{/card-default}{lamp/}{mtitle title="本站内容"/}分享运维相关技术，记录自己的成长。分享有趣的源码，和部署教程。寻找趣味相投的朋友。{lamp/}{mtitle title="本站大事记"/}{timeline}{timeline-item color="#19be6b"}2022.02.01 本站正式上线，运行稳定{/timeline-item}{timeline-item color="#ed4014"}2022.03.01界面优化....{/timeline-item}{/timeline}