This technique not only accelerates load times but also strengthens site security.
The downside? You'll sacrifice the dynamic content management capabilities of WordPress, along with features like interactive feedback forms and built-in search functionality.
Perfect for making a browsable copy of your website content.
In this quick guide, we'll explore the practical steps to seamlessly transform your WordPress site into an optimized, static HTML using tools like wget. Perfect for developers and tech-savvy individuals, this guide will help you streamline your web presence with a focus on performance and security.
Let's get started on converting your dynamic WordPress site to static HTML.
The pros and cons of converting WordPress to static HTML
The pros 👍
- Speed: Static HTML pages load faster as they don't require server-side processing.
- Security: Reduced vulnerability to hacking and malware, as there's no database or PHP to exploit.
- Simplicity: Easier to maintain with fewer moving parts.
- Hosting Price: Can be hosted on any server, including inexpensive or free hosting services.
- Scalability: Better handles high traffic without requiring complex caching or database optimizations.
- Dependability: Less downtime since there are fewer components that could fail.
The cons 😯
- Loss of Dynamic Features: No real-time content updates, comments, or search capabilities inherent to WordPress.
- Manual Content Management: Content updates require manual HTML editing.
- Limited Interactivity: No built-in support for interactive elements like forms unless integrated with external services.
If you know what you're getting into keep reading! 🤩
Download your WordPress with wget
wget \
--mirror \
--convert-links \
--adjust-extension \
--page-requisites \
--no-parent \
--no-clobber \
--wait=0.5 \
--reject-regex=".*/(\?p=|wp-json|feed|xmlrpc).*" \
--domains=example.com \
https://www.example.com
-
--mirror: Enables options suitable for mirroring websites, like infinite recursion depth. -
--convert-links: After downloading, converts the links in the documents for local viewing. -
--adjust-extension: Adjusts the extensions of the downloaded files (like adding .html to text/html or .css to text/css). -
--page-requisites: Downloads all the elements required to properly display a page (images, CSS, etc.). -
--no-parent: Ensures that links to the parent directory are not followed. -
--no-clobber: Prevents downloading the same files multiple times. -
--wait=0.5: Waits 0.5 seconds between server requests. -
--reject-regex=".*/(\?p=|wp-json|feed|xmlrpc).*": Don't download URLs matching the specified regular expression pattern. -
--domains=example.com: Don't wander off to other websites via external hyperlinks. Restricts the download to the specified domain.
Tweak hyperlinks in your newly created static HTML documents
Want to browse offline? Skip this step.
This step removes index.html from all hyperlinks. Go through with it only if you're going to run the site in a web server, e.g. Nginx or Apache.
find . -name "*.html" -exec sed -i 's|/index.html"|/"|g' {} +
Find all .html files and execute a search and replace on their contents. E.g. <a href="/my-article/index.html"> → <a href="/my-article/">
Conclusion: Your Journey to a Static HTML Site
You've successfully transformed your WordPress site into a static HTML version, unlocking faster load times and enhanced security. While some dynamic features of WordPress are now absent, the benefits in performance and maintenance simplicity are substantial.
Top comments (1)
Thanks for your article!!!! I followed your instuctions but I have a problem that I would like to know if you have deal with it too...
When I download the site with wordpress it generates css and js files including in the name "url params like this:
/wp-content/themes/bridge/css/dripicons/dripicons.css?ver=6.0.9.css
If I publihsh this files in a web server it doesn't find this files because it is interpreting the "?ver=xxxxx" as a request param not as the file name...
thanks in advance