GridPane

GridPane > Knowledge Base > How to setup ShortPixel

How to setup ShortPixel


Updated on

2 min read

This article will walk you through how to setup Shortpixel to serve webp files on specific websites on your GridPane servers.

CDN Note: this won’t work properly if you use a CDN system (e.g. Cloudflare).
See the official Shortpixel documentation here:
https://help.shortpixel.com/article/111-configure-nginx-to-transparently-serve-webp-files-when-supported

Step 1. SSH into your server

Please see the following articles to get started:

Generate your SSH Key:

Generate SSH Key on Mac

Generate SSH Key on Windows with Putty

Generate SSH Key on Windows with Windows Subsystem for Linux

Generate SSH Key on Windows with Windows CMD/PowerShell

Add your SSH Key to GridPane:

Add default SSH Keys

Add/Remove an SSH Key to/from an Active GridPane Server

Connect to your server:

Connect to a GridPane server by SSH as Root user.

Step 2: Create a webp-http-context.conf

We first need to create a file called webp-http-context.conf  in /var/www/site.url/nginx. Run the follow command to both create the file and open it for editing (switch out “site.url” for your domain name):

nano /var/www/site.url/nginx/webp-http-context.conf

Next, add the following block of code:

map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}

Now Ctrl+O and then press enter to save the file. Then Ctrl+X to exit nano.

This sets the $webp_suffix if the browser has the WebP capability.

Step 2: Create webp-main-context.conf

We now need to create a file called webp-main-context.conf  in /var/www/site.url/nginx and add this block of code, switching out “site.url” for your domain name :

location ~* ^(/wp-content/.+).(png|jpe?g)$ {
set $base $1;
set $webp_uri $base$webp_suffix;
set $webp_old_uri $base.$2$webp_suffix;
set $root "/var/www/site.url/htdocs";
root $root;
add_header Vary Accept;
if ( !-f $root$webp_uri ) {
add_header X_WebP_GP_Miss $root$webp_uri;
}
try_files $webp_uri $webp_old_uri $uri =404;
}

Now Ctrl+O and then press enter to save the file. Then Ctrl+X to exit nano.

Staging Push Note: When pushing from live to staging or vice versa, the site.url in this config will need to be edited to the correct website (e.g. staging.site.url), otherwise the $root will be incorrect and webp files will cease to work.

Step 3: Check and reload Nginx

Finally, we need to check if the conf files are correct then reload Nginx. 

Test your nginx syntax with:

nginx -t

If there are no errors present, reload nginx with the following command:

gp ngx reload