WordPress site to static html conversion

Published in Site Rescue Series, Tutorials by Content Team
Converting wordpress sites to static html

WordPress site to static HTML conversion is a project we are carrying out at the moment and we decided to write on this to create more insight for any website owner who is having thoughts of doing something similar since the more popular conversion is HTML to WordPress.

According to the hosting tribunal, WordPress, which is available in 57 languages, powers 39.5% of the internet and 64% of content management system (CMS) websites globally are built with it.

The widespread use and adoption of WordPress as the platform of choice for most new website builds has been as a result of the ease of use and deployment as well as the large community with a vast range of themes, plugins and other customisation option that makes it possible to build almost anything with it as a base. It is also easy to learn, so it’s easy for anyone to be a “web developer” after 3 days of playing with a page builder.

The easiest part of the CMS is deploying it though, if you have used WordPress long enough, you most likely have had issues with website speed, having to return over and over to make updates, security issues as well as complex gremlins (especially with page builders).

A lot of WordPress website owners after deployment get hit with higher hosting bills (as a result of the larger size and resource intensive nature) and more spending on monthly or annual maintenance.

While WordPress is an awesome platform (we build on WordPress a lot too,) for a small website with no blog, no e-commerce functionality and no need to update information regularly, it tends to be overkill as a plain WordPress installation with zero customisations has over 5,000 files & the plugins and themes that get added while customising also add a lot to the overhead.

This issue was what we discussed with a prospect (now client) at the start of last week. The client, a Hong Kong based steel firm had a basic, one pager website which just displayed company details and a contact form but was built with WordPress.

The website kept getting compromised and kept breaking with every major PHP update (the latest was with the update to PHP 8.0 a few weeks ago) and the client was frustrated with the constant disruption.

We decided to find a solution and after looking at the website, which was a basic one-pager – no blog, no e-commerce functionality realised the issues. There were 23 active plugins in the backend, the theme license seemed dodgy and the site was really slow to load,.

We agreed then that the best option would be to convert the WordPress (WP) site to static HTML while maintaining the layout and functionality as the client was on a budget.

We do a lot of HTML to WordPress conversions, so this was a lot different from the usual as we would usually just build static websites from scratch and then create a custom WP theme based on the site layout to serve as the blog (this website is an example. The entire website is static with only the blog pages using WordPress.)

The Process

    • Make an audit of how many pages the website has
      Before starting the project the number of pages the website has needs to be obtained. This is necessary, so the workload can be determined and the project planned properly. An easy way to determine the number of pages is a sitemap which most websites have. Once the number (and links) to these pages are determined then the next step can commence.
    • Determine menu structure and page links
      Once the page links are found, the next thing would be to determine how they link to each other. You would likely have to build a link tree so when the conversion is done, you won’t lose the existing links and you would also be able to retain the permalink structure.
    • Determine page layout and replicate using HTML and CSS
      The next step is where it gets interesting. The way a website looks and behaves in both mobile and desktop browsers is determined by the Hyper text Markup Language (HTML) which determines the structure and the Cascading Style Sheets (CSS) which determines the looks, colours, fonts and the rest. We are discussing WordPress here, and that’s why we stuck with HTML and CSS as other websites are built in other ways. If you have noticed, most websites are similar across different pages and most pages share the header (top part) and footer (bottom part) as well as other elements.
      Replicating the homepage layout and then adding the CSS styles and then determining that they work responsively in different devices is most of the work in this stage. For the inner pages you might just have to add and remove a few elements.
    • Check JavaScript functions
      Once the layout and design of the page have been made and work properly, the next thing would be to add the interactive functions. These are things like Sliders, Drop down menus, forms, page animations and the like. The default language for most interactive features on WordPress websites is JavaScript so knowledge of this is needed.
    • Create internal pages and copy content
      Once the homepage is done and the inner page templates are ready, it is time to copy the existing content for the website into the new one.
    • Test
      Once everything is done, layout copied, everything should be tested. Do the forms work? Do the page links work? Does the site resize for different screen sizes? Are there typos? Are there any errors in the Console? Testing has to be done extensively to make sure the WordPress site to static HTML conversion was done probably after which you can upload the newly built static site to a folder on the production server where it would be hosted.
    • Upload and test in Production environment
      On the sub folder in the production server (please note, you haven’t replaced the initial website yet) after uploading, test everything again. You have to do this because the server configuration on your local machine might be different causing things that worked perfectly on it to throw errors in production.
    • Launch
      Once the new static Website has been certified error free, make a backup of the old WordPress Website. We usually do this by Zipping all the files in the home folder then exporting the SQL database and saving all together. After the old site has backed up successfully and you have saved it somewhere in case you change your mind, copy the static website to the root and enjoy fast loading, less maintenance and no more need to update plugins twice a week.

Do you have a small WordPress website giving you big issues?

Would you like to reduce your hosting and monthly maintenance costs?

Do you want to save time and have experts with over a decade of experience do a WordPress site to static HTML conversion for you?

Then Contact Us for a free, no obligation audit!

 

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 2 other subscribers.

Need our Services? Send an Email