Jump to content

Module that outputs a static site?

Recommended Posts

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.

  • Like 2

Share this post

Link to post
Share on other sites

@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. 

Share this post

Link to post
Share on other sites

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.

  • Like 2

Share this post

Link to post
Share on other sites

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

  • Like 1

Share this post

Link to post
Share on other sites

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.


  • Like 4

Share this post

Link to post
Share on other sites
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. 

Share this post

Link to post
Share on other sites

Just a short additon - same topic, different thread: 

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


Share this post

Link to post
Share on other sites

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.



  • Like 12
  • Thanks 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Lmwt
      Hi there,
      I am new to PW but already very convinced. I need to build a dropdown button to browse in a collection of authors by country and language. The dropdown should be editable in the BACK and displayed on the same as the authors collection. I tried my luck with "PageField Creator" but I don't know how to display the dropdown, I simply used: 
      "$content .=$page->Land;" (the name of the select field)
      but nothing is displayed...
      I see there is a 2nd module out there to achieve this : "Select Options Fieldtype". I am not sure what is the difference, anyone has a tip?
      And a clear tutorial with the necessary steps to build this? I am a bit confused which should be the parent template or page, if it should have a file or not...
      Thanks a lot in advance!
    • By Noel Boss
      👋 PW Pros…
      I have some hooks that I need to bind at the init phase (or even __construct) and I was wondering, and I couldn't find a good and simple way to determine if I'm in the admin. Would be nice if there is a reliable short option to do so, but I can't seem to find one… Is there a coherent way to tell this no matter where I am?
      Right now, I use the following method inside one of my modules:
      public function isAdmin($page = null) { if ( strpos($this->input->url, $this->urls->admin) !== false || $this->process instanceof ProcessPageList || $this->process instanceof ProcessPageEdit || ($page instanceof Page && $page->rootParent->id == $this->config->adminRootPageID) ) { return true; } return false; } @ryan wouldn't it be nice to have something like wire()->isAdmin(); like wire()->user->isLoggedin(); to tell if we are in admin – very early on (probably even in __construct() phase of modules?
    • By benbyf
      Been doing some basic Twilio implementation for a client to enable them to automatically send text messages to registered users on page publish. As an upshot, I thought I would strip out the site specific work and stick up on github here: https://github.com/benbyford/TwilioChannels
      This modules pulls in the Twilio APi and enables you to send SMS messages from your front or backend.
      Send SMS message Truncate message to single message character limit Auto-select number from range of numbers depending on $To number country of origin–this enables you to send messages with a local number to that user if one added to the config. Templates usage:
      $twilio = $modules->get("TwilioChannels"); $twilio->sendSMS($toNumber, $message);  
    • By J_Szwarga
      What is the best practice for having a form (only accessible to a logged in user) save the user's progress between sections of the form? Fieldsets? Multiple forms?
      Use case: I have a very long application form that would take 30 minutes for the applicant to fill out and I would hate for all progress to be lost due to user error. The progress needs to be logged into the user's page.
  • Create New...