惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog RSS Feed
J
Java Code Geeks
C
Check Point Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Google DeepMind News
Google DeepMind News
阮一峰的网络日志
阮一峰的网络日志
Engineering at Meta
Engineering at Meta
Blog — PlanetScale
Blog — PlanetScale
D
Docker
H
Hackread – Cybersecurity News, Data Breaches, AI and More
月光博客
月光博客
I
InfoQ
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
A
About on SuperTechFans
L
LangChain Blog
腾讯CDC
Y
Y Combinator Blog
MongoDB | Blog
MongoDB | Blog
Vercel News
Vercel News
MyScale Blog
MyScale Blog
博客园 - Franky
IT之家
IT之家
博客园_首页

茂茂の部落格

忘记续费,部落格挂了 - 茂茂の部落格 - 悲喜自渡,他人难悟 Merry Christmas - 茂茂の部落格 - 悲喜自渡,他人难悟 Grafana教程2 - 茂茂の部落格 - 悲喜自渡,他人难悟 docker的iptables规则 - 茂茂の部落格 - 悲喜自渡,他人难悟 Grafana学习思维导图 - 茂茂の部落格 - 悲喜自渡,他人难悟 Grafana学习记录一 - 茂茂の部落格 - 悲喜自渡,他人难悟 关于最近 - 茂茂の部落格 - 悲喜自渡,他人难悟 服务器被墙了 - 茂茂の部落格 - 悲喜自渡,他人难悟 .NET开发招聘简章 - 茂茂の部落格 - 悲喜自渡,他人难悟 markdown插入音视频 - 茂茂の部落格 - 悲喜自渡,他人难悟 docker-compose安装Halo博客 - 茂茂の部落格 - 悲喜自渡,他人难悟 Gravatar本站镜像 - 茂茂の部落格 - 悲喜自渡,他人难悟 迁移Halo博客的教程 - 茂茂の部落格 - 悲喜自渡,他人难悟 centos8 Cannot prepare internal mirrorlist: No URLs in mirrorlist - 茂茂の部落格 邮箱服务更换为MailCow - 茂茂の部落格 - 悲喜自渡,他人难悟 nextcloud配置文件 - 茂茂の部落格 - 悲喜自渡,他人难悟 使用Docker安装Mastodon - 茂茂の部落格 - 悲喜自渡,他人难悟 Misskey 设置和安装指南 - 茂茂の部落格 - 悲喜自渡,他人难悟 Linux下通过 rm -f 删除大量文件时报错:Argument list too long - 茂茂の部落格
本站优化附件使用webp输出 - 茂茂の部落格 - 悲喜自渡,他人难悟
茂茂 · 2022-03-14 · via 茂茂の部落格

|

来源 https://halo.run/archives/halo-and-webp.html
部分图片体积较大,所以加载较慢,然后看到了这个
所以尝试优化图片输出

下载WebpServerGo

https://github.com/webp-sh/webp_server_go/releases
在此地址下载最新的Webp Server Go执行文件

赋予执行权限

赋予下载回来的文件执行权限

chmod+x webp-server-linux-amd64

生成配置文件

在webp-server-linux-amd64的当前目录生成配置文件

./webp-server-linux-amd64 -dump-config > config.json

然后修改生成的config.json为以下内容

{
        "HOST": "127.0.0.1",
        "PORT": "3333",
        "QUALITY": "80",
        "IMG_PATH": "/your/halo/path/.halo",
        "EXHAUST_PATH": "/your/halo/path/.halo/cache",
        "ALLOWED_TYPES": ["jpg","png","jpeg"]
}

使用Supervisor托管启动

添加Supervisor子配置文件

[program:webpserver]
command=/your/webservergo/path/webp-server-linux-amd64 --config=/your/webservergo/path/config.json
directory=/your/webservergo/path
autorestart=true
startsecs=3
startretries=3
stdout_logfile=/your/log/path/webpserver.out.log
stderr_logfile=/your/log/path/webpserver.err.log
stdout_logfile_maxbytes=2MB
stderr_logfile_maxbytes=2MB
user=root
priority=999
numprocs=1
process_name=%(program_name)s_%(process_num)02d

Nginx代理

我使用的docker部署的halo,然后使用nginx反向代理,所以此处贴出nginx的反向代理配置
打开halo博客的nginx反向代理,添加如下部分

location ^~ /upload/ {
        proxy_pass http://127.0.0.1:3333;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Powered-By;
        proxy_set_header HOST $http_host;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

接下来就是测试啦
很简单,打开你的博客,再F12启动DevTool
效果如下图
firefox snap

可以看到上传的图片都被转换成webp输出啦~

提醒

{
        "HOST": "127.0.0.1",
        "PORT": "3333",
        "QUALITY": "80",
        "IMG_PATH": "/your/halo/path/.halo",
        "EXHAUST_PATH": "/your/halo/path/.halo/cache",
        "ALLOWED_TYPES": ["jpg","png","jpeg","gif","bmp","mp3","mp4"]
}

以上参数中的ALLOWED_TYPES后缀可以放行其他类型文件,比如我的附件中会包含MP3和MP4文档,如果不放行,在代理后会出现File extension not allowed!的提醒,同时对应媒体文件也无法加载出来。