Query re WP Plugin + Intro (Newbie in Town)

WP Static Site Generators
#1

Hi everyone, and apologies if i seem a complete fish out of water.

I am a self-taught ‘have-a-go’ Wordpress ‘developer’ and have been helping build/develop and migrate a small corporate website.

To improve the speed and performance of a website i have been building on WordPress I have been considering my first foray into ‘headless Wordpress’ and am looking to use WP2Static.

I used Elementor Proto design the site, but also have the following (primary) plugins installed:

Hubspot All-In-One Marketing
Rank Math SEO
Insert Headers and Footers (for Google Tag Manager)
WP-Optimize

In no particular order:

  • Will the embedded tags for GTM and Hubspot (used for tracking purposes) be preserved in the static site?

  • Workflow --> WP2Static plugin converts the files from mysite.com, do i then eg
    –> upload to Netlify
    —> repoint Netlify IP address to my domain name
    —> leave the existing files on my existing host (SiteGround)
    —> the site also has blogs so therefore each time i add/update the blogs i have to repeat the process and upload again?

  • The site also makes use of Hubspot embedded JS contact forms.
    –> I’m assuming this will still be useable on the static site, but will formatting be preserved?

  • SEO from RankMath is preserved?

  • Are animations preserved? (eg background and/or button animations)

I’m looking to dive into this v soon and hopefully be able to showcase some results from my work!

Thanks!!

1 Like
#2

Hi @jellybean and welcome!

It’s nice to see you planning things out and you’re definitely asking all the right questions.

RankMath will be fine, @gulshan here is at least one I know using it without issues now (on version 6.6.21 of Static HTML Output plugin).

GTM and other embeddables (including Hubspot) should have no issues. Animations should all be fine, if they are CSS/JS based, not requiring any calls to the database once page is rendered.

Insert Headers Footers should be fine, I’ve only used HFCM plugin, which I assume is identical in functionality.

Not sure what WP Optimize is, but let me know if any issues pop up.

Now, the important parts, setting up your hosting:

Ideal setup:

  • dev.mydomain.com (can be on siteground, should be non-public, ie http basic auth login/password to stop bots/attacks on your dev site)
  • mydomain.com - the live site, hosted on Netlify, Cloudflare, Vercel, S3 + CloudFront or any other static site host

You can also opt to not keep any SiteGround/remote hosting account active, if it’s only you working on the dev sites. You can then run them on your own local computer and just publish the static site to Netlify/remote host.

So, the first step, is to choose local or non-public subdomain (please avoid subdirectory WordPress installs, not really supported and causes more issues than worth) then clone your current live site to this new “dev” server.

From here, you can do a test deployment to a new throwaway Netlify site, like mytest1234.netlify.app (set this in plugin’s Deployment URL setting), export a zip and drag and drop into Netlify.

Check the site loads fine in https://mytest1234.netlify.app - make sure no insecure content, 404s or console errors, maybe run some speed tests and adjust _headers file in Netlify to improve caching, add any existing redirects if needed in _redirects file.

If that all looks good and you’re confident, then you can change your deploy URL in the plugin, create another new site in Netlify, this time, setting your mydomain.com in Netlify and changing DNS over to Netlify, as per their instructions, wait for DNS changes to propogate and you should be looking at your faster, secure site at https://mydomain.com via Netlify/other host.

You then keep working on your dev site, be it local or on SiteGround/other host (see note below), retire the old production hosting account and just redeploy when you make changes to the site.

If you are making a lot of design changes/adding plugins, etc, I’d recommend to also incorporate a “staging” environment, which can just be another Netlify site (they’re free!) and do a quality check there before updating your live site. Also useful if you’re doing client work and want to send them specific snapshots of a site, you can deploy to as many Netlify staging sites as you like and just send them the link.

I’m sure you’ll be fine once you’ve got a cpl static site conversions under your belt, but you may encounter issues initially, which is normal - just post any questions here on the forum and myself or others should be able to guide (and later improvements to the plugin/documentation should make things easier for future newcomers!).

Cheers,

Leon

(I’m not a fan of SiteGround for many reasons, so if you have opportunity to stop paying them for any more hosting, I’ll happily recommend you some more professional VPS options)

1 Like
#3

hi @leonstafford

Thanks for the detailed reply and apologies for my own late response!
Great to hear that the embeds will not be affected!

WP Optimize is one of the many-recommended optimizing plugins on WordPress that helps improve performance/speed of WP websites by inlining / minimising JS and CSS files.

Thank you very much for the walkthrough as well!
In addition to S3 and Netlify, i’m also considering using GCP bucket as well. (Will there be future updates to WP2Static to deploy to GCP buckets?)

Or is there, in general a preferred static site host favoured by the WP2Static community?

I’ll post my progress at a later stage!!

Many thanks again!

#4

Hi @leonstafford

I come back to my first ever post here on Staticword.press re the workflow.

As i am a GCP user, i’m comfortable spinning up VMs with Wordpress installed on them and working on them using the raw IP address eg http://123.123.123.123/wp-admin - so technically this is my dev site where i make the changes --> export and then switch off once complete.

My previous successful deployments were on existing sites which i exported to AWS S3, hooked up to Cloudfront and once i saw that they looked fine, i decoupled them from my GCP machine and adjusted the DNS settings in Route 53.

I tried to alternatively export using WP2Static straight from http://123.123.123.123/ but for some reason a lot of failed logs pop up.

As per your recommendation --> do i necessarily need to create that https://devsite.mydomain.com to deploy from?

Hope that made sense!

Thanks in advance

#5

Hi @jellybean,

Just that dev server should be OK, no need for subdomains. As long as you’re exporting to a different URL (https://mysite.com), it should be fine.

What kind of errors were you seeing?

#6

A bit embarrassed to post my response but lessons must be learnt!

-> when uploading and then the WP2Static plugin to my Wordpress staging sight, i noticed that there instead of the .tmp_wp2static.txt file that should be generated in the S3 bucket. it was something like .tmp_statichtml.txt (something like that - i’ve since deleted)

Upon inspection, i seem to have 2 different versions of the plugin .zip and am not sure which version i should be using!

Now onto the missing files:

-> files like sitemap.xml and favicon.ico are not being generated and exported into the S3 bucket like the previous times i exported to S3

-> the only difference that i can see / think of is that i am using an IP address for the stageing, whereas previously i exported from the original domain.before then switching over to Route 53 for DNS management. Not sure if that actually is the cause though.

I haven’t had time to go through thoroughly so will report back if i find the answer!

#7

Please don’t be embarressed! If anyone should be, it’s me for having multiple versions and bugs still in projects :slight_smile:

Static HTML Output 6.6.21 is safest bet at the moment. Can remove other WP2Static versions and give that a shot.

Some work happening in new WP2Static project for sitemaps, which once approved/merged in, will probably bring across quickly to Static HTML Output (the one I recommend you to stick with for now).

The tmp_wp2static file just a dummy file used when doing the “Test S3” button, safe to delete/ignore.

1 Like
#8

hi @leonstafford

Thanks for the advice.
I replaced WP2Static with Static HTML Output and did another export.
Unfortunately - same result.
No sitemap.xml or favicon generated.

It might be i have also incorrectly configured my Cloudfront Distribution.
Normally the CloudFront domain name (somethingsomething).cloudfront.net will show the site but instead i get the message

This XML file does not appear to have any style information associated with it. The document tree is shown below.

AccessDenied

Access Denied

0416AAA377C0A139

s3JY1sVDSPetJfGiJ62mL+0sjZlJmzgdKGOL+KsDyMSTm33wluFPPFdm0lQUyXJMELSA21q4kpA=

Is this directly because of the XML file not being present?

I’ll have to do further investigating…

[SORRY FORGOT TO MENTION -->]

The S3 Bucket URL loads up the assets almost exactly as in the Wordpress version, except for the FontAwesome icon.

Actually i might as well post the 2 URLs here

S3 bucket: https://s3-ap-southeast-1.amazonaws.com/jinguru.xyz/index.html
Cloudfront URL: d2pp1wqkx4t53t.cloudfront.net

And i am using Route 53 to manage the DNS

[SORRY - pt 2 - this query has strayed away from the core topic which is the actual plugin itself! Didn’t mean to throw in an AWS query in it!]

#9

This URL (https://s3-ap-southeast-1.amazonaws.com/jinguru.xyz/index.html) is the wrong one for website hosting. You want to go into the bucket options, enable “Website Hosting”, and use the URL there. It will contain “s3-website”. That’s the URL you should use as your CloudFront origin.

2 Likes
#10

hi @john-shaffer

My mistake, i realise now reading back the mail.
You are correct re the URL - it is in fact the URL specific to the index.html file in the bucket.

The correct endpoint for the S3 bucket

What happened was i used the dropdown menu option when choosing the origin without properly checking the path.

By copy and pasting the above into the origins section of the Distribution it all clicked into place - thank you for that.

happy days

I just need to sort out the absence of the sitemap file

–additional query –
In terms of access to the S3 bucket.
Do i need to make it public each time i export from my WordPress staging site?
[and then back to non-public after that?]
Or is there a template policy that can accommodate for this issue?

Thanks

#11

Hi @jellybean, keeping it public will be fine, if it’s just your static website in that bucket and nothing sensitive.

Re the sitemap. Workaround for now is to just copy the one from your dev site and rewrite the URLs. I’ll check on sitemap status in the project and fix where needed.

1 Like