How To Get Static WordPress Hosting On CloudFlare For Free

Static WordPress hosting on CloudFlare will give you the fastest possible page load speed for your site – and it’s completely free!

Can I Really Host WordPress on CloudFlare?

Yes and no. If you have a simple WordPress site you use to just display content then this will be fine. If you use comments, ecommerce, anything that causes a POST request then this won’t work.

CloudFlare started life as a cache proxy but at some point released pages that lets you deploy a github project and host it on CloudFlare. It does really well with static content and will deliver your content quickly as there is no server side processing.

WordPress in contrast is a server-side app that runs on PHP and MySql. Each request is processed by PHP that queries the DB and responds with a page. Page performance drops off a cliff depending on the number of plugins/theme complexity/server congestion etc.

So in order to “host” WordPress on CloudFlare, you need to run WordPress locally, write your posts and then export your site as a static set of content that gets deployed into CloudFlare.

Preparing the Publishing Environment

If you already have WordPress running on the web, you can skip (if you want to still pay for hosting) and just move your site to a subdomain like https://edit.myblog.com.

If you don’t want to pay for hosting, then you’ll need to run WordPress locally each time you want to make a change like writing a blog post or choosing a new theme. This is main downside to static WordPress hosting – you can’t avoid running the stack somewhere when making changes.

I’ll be demonstrating this using Docker since it’s just easier to get the WordPress environment running this way. You can still do this if you already have WordPress running on your local machine. It assumes your main site runs using HTTPS (you’re totally always doing this already, right?)

Grab the latest Docker Compose file for WordPress.

This needs to be tweaked so that the files can be correctly dumped from WordPress. First up is an nginx override so that the site runs internally on port 8000. This should

<VirtualHost *:8000>
	ServerAdmin [email protected]
	DocumentRoot /var/www/html

	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

For this to work, you’ll also needs a ports definition so apache knows to listen on it:

Listen 8000

<IfModule ssl_module>
	Listen 443
</IfModule>

<IfModule mod_gnutls.c>
	Listen 443
</IfModule>

These files should be mounted into the WordPress container in the docker-compose.yml file, so you should end up with a complete file like this:

version: "3"
    
services:
  db:
    container_name: site_mysql
    image: mysql:5.7
    volumes:
      - ./db_data:/var/lib/mysql # Persist mysql data locally
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: site_wp
      MYSQL_USER: site_wp
      MYSQL_PASSWORD: password
    
  wordpress:
    container_name: site_wordpress
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      - ./wordpress_data:/var/www/html # Persist wordpress files locally
      - ./ports.conf:/etc/apache2/ports.conf # Done to allow static site generation to work
      - ./000-default.conf:/etc/apache2/sites-enabled/000-default.conf
    ports:
      - "8000:8000"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: site_wp
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: site_wp

Running WordPress Locally

If you’re using Docker, then can start your local WordPress instance using:

docker-compose up

Once it’s started up, visit http://locahost:8000

At this point you’d write any blog posts you want to publish, set themes, plugins etc until you’re ready to deploy to the web.

Building WordPress as a Static Site

You’ll need to install the Simply Static plugin to export your site as a static set of HTML.

Once installed, click into the settings of the plugin:

And start setting the following:

  • Destination URLs – Use relative URLs “/”
  • Delivery Method – Local Directory
  • Local Directory – /var/www/html/static/

In the Include/Exclude tab, set the following on Additional URLs:

http://localhost:8000/robots.txt
http://localhost:8000/sitemap_index.xml
http://localhost:8000/post-sitemap.xml
http://localhost:8000/page-sitemap.xml
http://localhost:8000/category-sitemap.xml
http://localhost:8000/post_tag-sitemap.xml
http://localhost:8000/author-sitemap.xml

Go to the Generate menu and click Generate Static Files. Wait for the process to complete and you should end up with your WordPress site exported to ./wordpress_data/static.

Use Simply Static to export your WordPress site as static files
Log output when generating a static site from Simply Static

Pushing the Static WordPress Site to GitHub

CloudFlare requires that you push to it from a GitHub repo. This is free, so you just need to log into GitHub and create a new Private Repo:

Create a new private GitHub repo
Settings to create a new private GitHub repo

Next, setup a .gitignore to avoid pushing irrelevant files into source control:

wordpress_data/*
!wordpress_data/static/
db_data

This will ignore all of the files that get created by MySql and WordPress, except for the static html files from Simply Static.

Finally, run initialize your local folder with the git repo:

git init
git remote add origin [email protected]:~your-repo~
git branch -M master
git push -u origin master

Deploying Static WordPress to CloudFlare

Log into CloudFlare Pages and click Create a project.

Grant access so that CloudFlare can view your GitHub repos:

Grant CloudFlare Pages access to your GitHub Repos

Choose the repository you pushed your code into and continue. When setting up the build configuration choose:

  • Framework preset – None
  • Build output directory – wordpress_data/static

This will tell CloudFlare to simply grab the static output that got pushed up to the master branch and expose it.

Once complete, let the build run and your site should be visible at yoursite.pages.dev. If you want to use your custom domain, just setup a CNAME record and point it at that url.

Conclusion

WordPress is great, but can be slow due to its nature of being a server-side rendered website. If you don’t have a complicated site that’s mainly just content, you can achieve a big speed increase and pay nothing for static WordPress hosting by writing your blog locally and publishing it up to CloudFlare.

Leave a Reply

Your email address will not be published. Required fields are marked *