Module that outputs a static site?

[wbmnfktr]

If it's not that urgent @elabx I can write up my setup this weekend to show you the process I established for that project. I would consider git as the established bridge to get this done. Would that work for you?

In total I think it's not that much of an overhead and for experienced PW users kind of a perfect way to create static sites.

@ryan pushed me into this direction with one if his comments a while back. I tried it and played around with it. And to be honest... the outcome was quite impressive.

[elabx]

@wbmnfktr Would be great to read about it! Wouldn't like to bother you on the weekend or anything, so please take your time, thanks for your kind offer. 

It's not urgent and I'm still not sure this is the answer for my "higher availability", at least what triggered this search now was this mysql server going down and well, I'm obviously not that well versed in the whole mysql administration. So the whole JAM Stack hyped brought me to looking into this option, since also most of the sites I maintain in this scenario are static and with the user interaction going as far as the usual contact/signup forms. 

[wbmnfktr]

The weekend is fine. The only time I can do fun things like this. ?

Maybe... in your case... take a look at /site/templates/errors/500.html

That site will be shown if there are any problems with your database. I use this on "smaller" hosting solutions to prevent any issues. That 500.html can be customized a lot and therefore show an almost complete site if necessary. Contact forms don't work - or at least not out of the box - but at least a customized page shows up.

Depending on how often those issues happen with your hosting, this might be a nice middle-way as it's already there.

 

Regarding those "mysql administration things"... this shouldn't be your job. Maybe you ask and tell your hosting company about it and let them fix issues - maybe it's even better to switch to another company.

In terms of ProcessWire and static sites... with the right setup it's super easy. You just have to jump some loops but after that it works fine. Depending on your OS you might need some extra steps. OSX, Linux are fine. Windows might need WSL/2 for this.

[bernhard]

Interesting read! Would be great to see a detailed writeup about your workflow @wbmnfktr ... Have a nice weekend ? ? ? 

[psy]

Just throwing it out there and not the answer to all PW static site situations, but a PWA like https://www.pwabuilder.com/ may help.

In my experience, there can be glitches between PWABuilder depending on the config chosen, and ProCache with too much unsynched caching. Definitely not the answer if your site has lots of forms and/or dynamic content, but for static sites that have dodgy internet connections it's definitely worth investigating.

 

[gmclelland]

This reminds me of a similar Drupal module that I came across.  https://www.drupal.org/project/tome

https://tome.fyi/ - It takes your Drupal site and makes a static version of it.

You can see a demo here: 

I imagine that someone with enough Processwire skills could create something similar?

[gmclelland]

Interestingly, I came across this today.  https://wptavern.com/jamstacks-growing-popularity-brings-increase-in-wordpress-plugins-for-deploying-to-netlify

[elabx]

On 8/1/2019 at 3:22 PM, wbmnfktr said:

Depending on how often those issues happen with your hosting, this might be a nice middle-way as it's already there.

  

Regarding those "mysql administration things"... this shouldn't be your job. Maybe you ask and tell your hosting company about it and let them fix issues - maybe it's even better to switch to another company.

honestly It's something that doesn't happen very often and I had even bragged about LiquidWeb support which is my main choice for projects that demand a nice hosting setup. But this time not even their "best effort" team managed to find a solution. 

Indeed we ended up hiring service from Percona to see if they can tune our database and figure out if we are getting hit by a MariaDB bug. 

[wbmnfktr]

Just a short additon - same topic, different thread: 

@elabx not often as in once a month or once a day?

 

[wbmnfktr]

You will need:

• ProcessWire (of course)
• ProcessWire ProCache
• ProcessWire Modules as you like and need
• Netlify Account (in my case, you can use any other hosting or Github pages)
• Git Account (Gihub, Gitlab, Bitbucket)
• ScreamingFrog (free version should fit most needs)

Things to keep in mind

• FormBuilder will not work (out of the box)
• 40x/50x must be defined separately
• Redirects must be defined separately
• Module-based functionality will not work
• GDPR/Opt-in/Cookie consent must be added differently
• Avoid using core/module files (UIKIT, jQuery, CSS, etc.)

Where to save files and how to address them

Most content and design related files can be saved in ProcessWire itself. Logos, favicon, trust icons and whatsoever. Some files can't be stored in ProcessWire - or shouldn't be stored in it - fonts and sitemaps (XML) in my case.

While developing the overall site always use relative paths and URLs. Fonts and other assets need to be addressed by their web-root-based path (/site/templates/myassets/font.ttf and so on). Internal linking should be relative as well. Otherwise you have to change those link URLs manually which is PITA.

Which files to copy and where you find them

As we use ProcessWire we want and should use everything we can to make our webdev life easier here. Let ProcessWire and some modules do the work while harvesting the results for our benefits.

While ProCache takes care of generating minified CSS and JS, SEO Maestro generates a nice and handy sitemap.xml.

Depending of your installed modules you want to (at least) double check the output and results in your static site. As already mentioned FormBuilder and Simple Contact Form will not work, 404 management and redirects by the awesome Jumplinks modules will not work, too. Instead you have to create your very own .htaccess file with all redirects and error documents.

Other modules like MenuBuilder, SEO Maestro and some other modules do a pretty good job even in your static site as their benefits result in already rendered HTML/pages. Autolinks, Automatically link page titles and Share buttons are some modules that will work as well.

While it didn't work for me it may work for you - the Cookie Management Banner module. I had some issues and decided to install and use Cookie Consent manually.

The Workflow

First of all build your site. Make it perfect. Do whatever you or the client wants or needs.

Whenever possible look into your rendered HTML and cached pages. Take a closer look at all the URLs and paths. It's already a good idea to run ScreamingFrog and find out if there are any files missing, links broken or pages missing.

When everything is done, clear all cached files, all minified JS and CSS.

Start a ScreamingFrog session and let it run. It will visit each and every page on your site it can find. Hidden pages, orphaned pages and of course drafts and pages behind JS-links will not be found and therefore cached by ProCache. 

Look into /site/assets/ProCache-XXX/ and /site/assets/pwpc/ now and double check that there are your pages and JS/CSS files. You will need those afterwards. If everything is fine you have to copy things around now.

The Setup - folders and structure

In my case the easiest way to go was setting up two local sites - one with ProcessWire and another one with the static files, assets and other things I needed. In the examples below only relevant parts are listed.

1. project.pw.test (ProcessWire)
   • /sitemap.xml (Generated by SEO Maestro)
   • /site/assets/files/ (copy the whole path)
   • /site/assets/pwpc/ (copy the whole path)
   • /site/assets/ProCache-XXX/* (copy only the content of this folder - all files and folders)
   • /site/templates/myassets/ (copy the whole path)
2. project.sv.test (Static version)
   • .htaccess (for redirects and 40x/50x error pages)
   • 40x.html
   • 50x.html
   • /sitemap.xml
   • /site/assets/files/
   • /site/assets/pwpc/
   • /site/templates/myassets/
   • all files and folders from /site/assets/ProCache-XXX/

As you can see there are only a few things to copy. When you're done with copying these files to the static version of your project, open it up in your browser. Check for missing files and test it. Let ScreamingFrog do the most work and check for any kinds of errors. Fix them in your ProcessWire-site and copy and test again. Check your 404s, your redirects and everything else you would normaly test. Create checkafterupdate.txt and write down whatever went wrong in your first try. This will be a great checklist later. 

The Final Step

As everything is copied now and at its correct place you can upload it to your host. In my case the static version is a private git repository on github.com. I can commit and push my changes there and Netlify takes care of publishing the new version - most of the time within seconds. The benefit of using git - compared to S/FTP - you always have some kind of control if something brakes and you have to revert and check changes.

In my case it's Netlify but you can use Github pages or any other hosting solution you want/the client pays for. Be careful with GDPR-related things as DPAs. You have to have them in most cases - Netlify did a great job here and I found everything I needed, while Github disqualified itself back then due to missing documents and kind of a sluggish support.

Questions?

Ask.