Menu

How to upload wordpress’s content to netlify (Free static content hosting service)

2018-06-21 - Netlify, Wordpress

Purpose of this document

WordPress plugin like WP Static HTML Output supports exporting wordpress’s content to Netlify but it is buggy.
So instead of keep using it with some fix, I decided to create the procedure to upload its content from command line interface.
Here is the procedure.

Preparation

Install wget

In the case of mac

brew install wget

If you haven’t installed wget yet, please refer to
https://brew.sh/

Get netlify account and install netlify CLI

Get the account
https://app.netlify.com/signup
and create site’s setting.

And install netlify’s command line interface.

npm install netlify-cli -g;

Set up wordpress environment on your local environment

You have to run wordpress environment on your local PC.
You can try my docker-compose.
The environment is constructed with bedrock + docker + wordpress (PHP7 + Apache2.4)
By it, we can update wordpress’s theme and plugin using composer.
https://github.com/hikarine3/docker-bedrock-wordpress

Install necessary modules which will disable unnecessary functions for static hosting

vi composer.json

    "wpackagist-plugin/disable-author-pages": "^0.11",
    "wpackagist-plugin/disable-json-api": ">=1.4.3",
    "wpackagist-plugin/disable-feeds": "^1.4.4",
    "wpackagist-plugin/disable-xml-rpc": "^1.0.1",
    "wpackagist-plugin/query-strings-remover":"^1.1",
    "wpackagist-plugin/remove-wp-overhead":"^1.1.0",

and

composer update

Setting of wordpress

Settings > Permalinks > Choose “Post name”
Anything is O.K but choose which is different option from “Plain”.

Crawl localhost’s wordpress using wget

rm -r localhost/*;
time wget -r -nc --convert-links --page-requisites https://vpsaws.com/;

Wait until the crawling finishes.

Convert invalid url path

cd localhost;

# Example / Domains where you will upload to
export PROTOCOL=https;
export DOMAIN=vpsaws.com;
export LOCALDOMAIN=localhost;
http://translate.google.com/
find . -type f -name "*.html*" -o -name "*.js*" -o -name "*.css*"|perl -e 'use File::Find;use FileHandle;while(<>){chomp;my $file=$_;if($file!~ m!\.(gif|jpg|mp4|png)!i){local $/=undef;my $fh=new FileHandle($file);my $con=<$fh>;$fh->close();my $ocon=$con;$con=~ s!([\'"'"'\"])http(://|:\\/\\/)$ENV{"LOCALDOMAIN"}(/|\\/)!$1$ENV{"PROTOCOL"}$2$ENV{"DOMAIN"}$3!gs;$con=~ s!http(%3A%2F%2F)($ENV{"LOCALDOMAIN"}|localhost%3A\d+)!$ENV{"PROTOCOL"}$1$ENV{"DOMAIN"}!gs;$con=~ s!/index.html([\'"'"'\"])!/$1!gs;$con=~ s!href="index.html!href="./!gs;$con=~ s!url\(index.html\)!url(/)!gs;$con=~ s!/index.html!/!gs;$con=~ s!http://(fonts.googleapis.com|translate.google.com)/!https://$1/!gs;if($ocon ne $con){my $wfh=new FileHandle("> ".$file);print $wfh $con;$fh->close();print "Modifiled: ".$file."\n";}}}';

Deploy to Netlify

SITECODE=vpsaws; # Just example
echo -e "\n" | netlify deploy -s $SITECODE;

Please read CLI reference if this is first time for you.
https://www.netlify.com/docs/cli/

And confirm its result on the site.
In this case,
https://vpsaws.com/
It is important to confirm because if deployment fails, then we will encounter not found page.
So this is the procedure of creation of this web site which you are now seeing without any hosting fee.

Consolidate all procedure into 1 file

#/bin/sh
export PROTOCOL=https; # Just example
export DOMAIN=vpsaws.com; # Just example
SITECODE=vpsaws; # Just example

rm -r localhost/*;
time wget -r -nc --convert-links --page-requisites https://vpsaws.com/;

cd localhost;
find . -type f -name "*.html*" -o -name "*.js*" -o -name "*.css*"|perl -e 'use File::Find;use FileHandle;while(<>){chomp;my $file=$_;if($file!~ m!\.(gif|jpg|mp4|png)!i){local $/=undef;my $fh=new FileHandle($file);my $con=<$fh>;$fh->close();my $ocon=$con;$con=~ s!([\'"'"'\"])http(://|:\\/\\/)$ENV{"LOCALDOMAIN"}(/|\\/)!$1$ENV{"PROTOCOL"}$2$ENV{"DOMAIN"}$3!gs;$con=~ s!http(%3A%2F%2F)($ENV{"LOCALDOMAIN"}|localhost%3A\d+)!$ENV{"PROTOCOL"}$1$ENV{"DOMAIN"}!gs;$con=~ s!/index.html([\'"'"'\"])!/$1!gs;$con=~ s!href="index.html!href="./!gs;$con=~ s!url\(index.html\)!url(/)!gs;$con=~ s!/index.html!/!gs;$con=~ s!http://(fonts.googleapis.com|translate.google.com)/!https://$1/!gs;if($ocon ne $con){my $wfh=new FileHandle("> ".$file);print $wfh $con;$fh->close();print "Modifiled: ".$file."\n";}}}';

# It is better for you to execute this part by manual if you can to avoid the trouble which can happen when localhost environment is down for some reason
# echo -e "\n" | netlify deploy -s $SITECODE;