Interested in making a static WordPress website and then hosting it somewhere entirely for free? Is that even possible?! Or not sure what the heck a static WordPress site even is in the first place?
The post How to Make a Static WordPress Website and Host It for Free: Full Guide appeared first on Themeisle Blog.
Interested in making a static WordPress website and then hosting it somewhere entirely for free? Is that even possible?! Or not sure what the heck a static WordPress site even is in the first place?
No matter where you’re starting from, this post is here to help you get up and running!
I’ll start with a brief introduction to how static WordPress websites work and their pros and cons. Then, you’ll learn step-by-step how to make one, starting from zero and going all the way to having your own static site on free hosting from Cloudflare Pages.
Key Takeaways
This post will show you step-by-step how to create a static WordPress website without needing any special technical knowledge.
You can create a static website from WordPress 100% for free, including free hosting that still loads fast.
There are pros and cons to taking a WordPress site and making it static, so it’s important to think about both sides before going the static route.
What is a static WordPress website?
A static website is a website made from static HTML files that are unconnected to the normal dynamic processes of a WordPress site (PHP, database, etc.).
In order to understand what this is, you need to understand how a regular WordPress site works. Here’s a simplification of the basic process:
A visitor navigates to your website.
Your web server executes PHP and queries your WordPress site’s database to generate the HTML for the finished page.
Your web server serves that finished HTML to the visitor’s browser.
With a static website, you just upload those already-generated static HTML files to your server. That way, there’s no database involved, no server-side processing involved, and so on.
In the tutorial, you’ll learn exactly how this works. The basic idea is that you create a “regular” WordPress site in some type of private environment and then use a static site plugin to generate the static HTML files that you can upload to your hosting.
Pros and cons of making a WordPress website static
Pros
Free static site hosting. You can find quality free hosts for static sites, such as Cloudflare Pages and Netlify. Normally, I don’t recommend free hosting for “regular” WordPress sites. But for static WordPress sites, free hosting still works great.
Fast performance. Because you’re eliminating dynamic processing, your site will load super fast, even on free hosting.
Scalable performance. It’s still easy to make your site perform well, even in very high-traffic situations.
Bulletproof security. Because there are no “moving parts,” static websites are pretty much impossible to hack.
Most core WordPress features work as usual. You can still use WordPress themes and many (but not all) WordPress plugins.
Cons
Some plugins won’t work. This is especially true of form plugins, though it will apply to other plugins. You can fix this with third-party form builders, like Jotform or Typeform.
Native WordPress comments won’t work. You can fix this with third-party comment tools like Disqus.
Native site search won’t work. You can fix this by using Google Site Search or third-party hosted site search tools, like Algolia.
Extra work is needed to update/change your site. Whenever you change something, you’ll need to “re-deploy” your site’s static files. You can automate this, but it is a little more complicated.
No personalization/user accounts. It’s a lot more difficult to authenticate users and/or personalize your website’s content (e.g., a membership website where logged-in users see different content from guest users).
When does a static WordPress website make sense?
In general, the static approach can work well for these types of sites:
Portfolio websites
Business brochure websites
Simple blogs (especially if you don’t publish new posts that often)
However, the static approach is not generally a good idea for these types of sites:
More complex blogs (especially if you publish lots of content)
Ecommerce stores
Membership sites
Any type of site that requires user registration
Sites where you make a lot of changes
Sites where you want to personalize content
How to make a static site on WordPress in five steps
Now, I’ll show you step-by-step how to do this:
Set up your dynamic WordPress environment
Build your WordPress website
Export your WordPress site as static HTML files
Upload your site’s files to a static site hosting service
Re-deploy your site whenever you make changes
I’m going to start at the beginning and assume that you don’t have any type of WordPress website yet. However, if you already have an existing “dynamic” WordPress site that you want to turn into a static WordPress site, you can skip ahead to step #3.
1. Set up your dynamic WordPress environment
In order to control the content of your static WordPress site, you still need to have a “regular” WordPress website somewhere.
This will not be the version of your site that’s publicly available on the internet. Rather, it’s just where you’ll design your site and add your content.
Once you’ve built your site in this environment, you’ll generate static HTML files from your site and then host those somewhere, which is what your visitors will actually interact with.
Okay – so where should you put this dynamic WordPress environment?
Here are the two main approaches to consider:
Local WordPress environment – you can create a local WordPress environment on your own computer to build your site. The only downside is that it means you can only work on your site from your computer.
Private hosting/staging environment – you can create your dynamic WordPress site in some type of private hosting or staging environment. This approach is nice because you can access your site from anywhere – just make sure that this version of the site is private so that people can’t accidentally find it.
If you want to create a local WordPress environment, I recommend free tools like Local or DevKinsta. We have lots of posts on how to build a local WordPress environment:
Local tutorial
Docker tutorial
XAMPP tutorial
If you want to host it in a private area, I recommend something like InstaWP as an easy and free solution. Or, you can host it on “real” WordPress hosting – just make sure that the site is private. For example, you could require a password to access the site at the server level using the .htaccess file.
For this guide, I’m using InstaWP. If you want to do the same, just make sure to “reserve” the site so that InstaWP doesn’t delete it after seven days.
2. Build your WordPress website
Now, you can build your WordPress website just like you would a regular website.
You’ll want to design your site, add your content, and so on. Basically, you want to create the finished version of your WordPress site. Then, in the next section, you’ll convert your site into static HTML files.
If you’re not sure where to begin with the design of your site, the free Neve theme makes a great starting point.
You can easily import one of dozens of pre-made starter sites and then tweak things to your needs using tons of code-free options.
The design of all of these starter sites will still work when you convert your site into static HTML files.
You’ll also be able to still use a lot of WordPress plugins, especially those that mainly affect the design of your site.
For example, if you want more control when you’re creating content in the block editor, you can use the free Otter Blocks plugin to access a bunch of new blocks and features.
As I mentioned earlier, there are a few caveats when it comes to using plugins, though:
Form plugins – most form plugins will stop working when you turn your site into static HTML files, so consider using a third-party form service like Typeform, Jotform, Google Forms, and so on.
Comments/comments plugin – your comment section will stop working, so consider using a third-party, JavaScript-powered comment box like Disqus.
Here’s what my finished WordPress site looks like using the free Neve theme and the Otter Blocks plugin.
3. Export your WordPress website as static HTML files
Once you’ve finished building the private “dynamic” version of your site, you’re ready to convert your WordPress install into the static HTML files that your website’s visitors will actually interact with.
To do this, you can use the free Simply Static WordPress plugin from Patrick Posner, which is available at WordPress.org.
After you install and activate the plugin, go to Simply Static → Generate to access the tool’s dashboard area.
If you’re feeling adventurous, you can go with the default configuration in the Simply Static plugin, and generate your site that way, but it might be worth to spend a couple of minutes there and adjust your final site.
For example, Simply Static has a list of plugins it’s compatible with (see here) that you might want to check out. If your favorite plugin is not on that list, it’s a good idea to find an alternative to it and use that one instead before generating a static image.
The reasoning is that certain plugins do their thing in a very specific way, and that way might not work well when converted to a static site.
For context, not all SEO plugins are fully supported by Simply Static yet. Something mentioned in this post earlier, contact form plugins are also problematic and generally don’t work on static sites unless done via frontend-based tools. Or, unless you want to upgrade to the premium version of Simply Static which does support this.
If you want to customize how the generation process works, go to Simply Static → Settings.
The first thing to consider there are URLs. By default, the plugin will rewrite all of your site’s URLs to use relative paths, which means they’ll work with any top-level domains.
You also have the option to rewrite the URLs to use absolute URLs, which would be important if you want to place your static files in a subdirectory (instead of the main domain name or a subdomain).
To guarantee smooth transition and also make sure all your SEO tags remain correct, you should indeed put your whole target domain name there in the URLs fields. If you don’t do this, your site will blank out various tags in the HTML source, like the canonical tags for instance, which is not good for SEO.
When you’re ready to generate your site’s static HTML files, go to Simply Static → Generate and click the Generate Static Files button.
When the process finishes, click the Click here to download link in the Activity Log.
This will download a Zip file to your local computer that contains all of your site’s static files.
4. Upload your site’s files to a static host (e.g., Cloudflare Pages)
Once you have the Zip file of your site’s static files, you need to upload them to your hosting service to make them live.
While you can host your static website on pretty much any web host, I recommend using a dedicated static website hosting service like Cloudflare Pages or Netlify for a few reasons:
Most are free – for most static WordPress sites, services like Cloudflare Pages and Netlify will be 100% free.
Built-in content delivery network (CDN) – these services will automatically serve your site’s static files from a global CDN, which means your site will have faster global load times.
Easy deployment options – these services offer special tools to help you re-deploy your static site when making changes (more on that next).
For this tutorial, I’m going to recommend and use Cloudflare Pages, which will let you host your static website for free and automatically serve up the static files from Cloudflare’s huge global network.
Here’s how to get started:
Log in to your Cloudflare account (or register for a free Cloudflare account if you don’t have one yet).
Go to Workers & Pages → Overview in your Cloudflare dashboard.
Select the Pages tab.
Click the Upload assets button under Create using direct upload.
On the next screen, give your static site a “Project Name” and click Create project.
Then, upload the Zip file that you got from the Simply Static plugin in the previous step.
Once the upload finishes, click Deploy site.
Now, your static site will be live on temporary pages.dev subdomain.
To connect your real domain name, click the Continue to project button.
In the project dashboard, go to the Custom domains tab and click the Set up a custom domain button.
Add your custom domain name (or subdomain) and click Continue.
Then, you’ll be prompted to add a CNAME DNS record, which you can do wherever you manage your domain name’s DNS records (typically at your domain registrar).
If your domain name is already connected to Cloudflare (like mine is), Cloudflare can even add/update the DNS record for you.
Once you’ve added the DNS records, click the Activate domain button.
And that’s it! Once the DNS records update (which might take a couple of hours), you should be able to access your static WordPress website at your custom domain name.
5. Re-deploy your static WordPress website when making changes
After you complete the previous step, you’ll officially have a working static website that started as a fully-functional WordPress site!
However, what if you want to change something on your site? For example, publishing a new blog post, editing a page, tweaking your design, and so on.
When this happens, you’ll need to do the following:
Make the change on your private “dynamic” WordPress site – i.e., your local WordPress site or staging site.
“Re-deploy” your site’s static files to your live host (e.g., Cloudflare Pages, as I showed you above).
The simplest way to do this is to just use the Simply Static plugin to generate a new Zip file after you’ve made your changes.
On Cloudflare Pages, you can easily upload this new Zip file and have it overwrite your existing version by clicking the Create new deployment button.
For more advanced users, you can also set up various types of automatic deployment solutions.
For example, the premium version of the Simply Static plugin lets you deploy directly to GitHub, which you can connect directly to Cloudflare Pages, Netlify, and other providers.
Create your static WordPress site today
While creating a static website isn’t right for all situations, it can be a great option for a lot of simple WordPress sites, especially basic brochure websites or portfolios that don’t require dynamic functionality.
Your site will load super fast and benefit from bulletproof security.
Best of all, you can create and host your website entirely for free when you follow the method in this tutorial.
Do you still have any questions about how to take a WordPress site and convert it to a static one? Let us know in the comments!
Free guide
Follow the simple steps in our 4-part mini seriesand reduce your loading times by 50-80%.
Updated on:
June 24, 2024
Posted in:
You can check also:
Leave a Reply