Jump to content
owzim

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

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.

  • Like 10

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By benbyf
      Hi!
      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.
      Thanks!
    • By ryanC
      Hi, I have created a new install of Processwire 3.0.98, (local machine) and I am unable to install any modules from within Processwire itself. I go to Modules/Site/Add New/ then under "Module Class Name" I enter the name. The module appears, I hit "Download and Install", but I always get an error. For example: 
      "File could not be downloaded (https://github.com/adrianbj/TracyDebugger/archive/master.zip) 2: fsockopen(): SSL operation failed with code 1. OpenSSL Error messages: error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version, 2: fsockopen(): Failed to enable crypto, 2: fsockopen(): unable to connect to ssl://github.com:443 (Unknown error) (tried: curl, fopen, socket)"
      I have been able to track down some of the modules and just upload the zip file manually, but this is happening with every module that I had previously installed in another installation with no problems. Any ideas? 
      Thanks!
    • By bystefu
      Hello,i  am new here. A hour ago i bought a vps and i want  to make a website about movies.
      - a home page
      - a movie page with title, description,  trailer ,year and actors
      -categories, tags 
      - a complex search page by name,tags,year and acts
      - posts, latest news (about site)
       
      It's already to much
      I leave wordpress,from my needs it's very complicated. So,minimal speaking, i can do that with this cms,and which is the steps? I don't know yet how this work.Thank you,and sorry for my eng.

    • By neosin
      There are lots of great looking modules that I would like to use but I am hesitant to install them purely due to the lack of visual indication that they are compatible with PW v3+. Most of the ones I want to use say they are compatible with previous versions up to 2.7 so a few questions:
      Does this mean they are not compatible with v3 ? it would seem so since they lack the v3 tag If I try them and something doesn't work and I remove them are all traces removed or can they leave artifacts behind in the DB or filesystem? thanks in advance
×
×
  • Create New...