Translate your static site – Simply Static Webinar Series, Episode 4

[00:00:00] Nathan Wrigley: This episode of the WPBuilds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL, and 24x7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place. invoice clients and get 30% off new purchases. Find out more at go.me forward slash WP builds.

Hello. Hi there, Patrick. How are you

[00:00:39] Patrick Posner: doing? Hey, Nathan, catch a little cold, but I'm almost fine. So we're gonna make that a multilingual static site preview happen.

[00:00:50] Nathan Wrigley: Yes. Yes. So Patrick's here joining us. But not feeling a hundred percent, but I appreciate the effort.

Thank you so much. We're in our third. No, so when we're not, we've done three is probably what I meant to say. We've done three of four. So this is the last of our simply static demos, if you like little webinars, the previous ones have touched upon GitHub and how to deploy your site onto something like Netlify, making it very affordable.

We did a, another one all about how forms could work and then search. And then finally today, rounding it all off. This one's entitled how to export multilingual websites with simply static. If you fancy sharing this with your friends and colleagues and things like that, feel free, that'd be nice. You can share this URL wpbuilds.

com forward slash live. If anybody goes there, then you need to be logged into. YouTube because YouTube comments are embedded there. If on the other hand, you are on our Facebook page, you'll need to, or group, I guess you need to go and do this, go to wave. video forward slash lives forward slash Facebook.

And that allows us to see who you are. If any comments do come in, I'll try to raise them on the screen. And if nobody feels like commenting, that's fine. That means that Patrick is doing a good job. So yeah. Multilingual, all of that kind of stuff. Shall I share your screen, Patrick? Yeah. Should we get going?

Okay. Here we go. Here it comes. Do you do

[00:02:24] Patrick Posner: great. Oh, okay. We're talking about multilingual websites or multilingual aesthetic websites. Let's quickly talk about the main benefit, which is obvious, but I don't want to play it down by not mentioning it. So the main reason why you want to use a multilingual setup with simply static is performance, right?

So everyone that has used one of the multilingual plugins will remember that. The impact on the performance of your WordPress website is affected by using a multilingual plugin. No matter what multilingual plugin you use. I don't want to bash anyone. Just that, or maybe you have already experienced a performance decrease.

By using a multilingual plugin in combination with SimpliStatic, you can get completely rid of that performance problem at all. Because as we already explained in the first session of our video series there are no database interaction. Involved on your static website. So it's like completely pre rendered and you can still offer multiple languages on your static website with all that feature sets, from switching the language and automatically redirecting a user to the specific language and so on.

Yeah, and now we're going to talk about how you can make that happen with SimpliStatic. The configuration in SimpliStatic is. Relatively simple, I would say it's more of a challenge to actually translate your website in our example, right now we're using WPML. And I already done all the work and completely translated our demo website into a German one, we can go straight to the export and configuration part. Let me quickly show you the result. So that is our static website, which if you've seen any of the videos before, you're might be familiar with right now. So we have this little photographer website and the guy called Drew decided he wants to also tackle the German market and because of that, he.

Done all the work, use WPML to translate the website and just simply static to export it. You will notice there's a little language toggle at the bottom of the page where you can switch between the languages. So I click on German and if you're familiar with the German language, you will notice the website is now in German.

If you're not familiar, that's completely fine. You will notice that it's. It's not English, so

[00:05:21] Nathan Wrigley: I was going to say, I noticed that, but

[00:05:23] Patrick Posner: yeah, it's a Java website now. So yeah, we're pretty much translated everything here from all the descriptions to testimonials. We have a fully translated blog. Okay. I haven't actually translated their entire content of the blog articles, but you could have done.

Yeah.

[00:05:45] Nathan Wrigley: Yeah.

[00:05:46] Patrick Posner: So we also have a contact form running, which is translated and let's get a good search result essential. And you can see the search results from our search integration are also translated as well. And you don't get the English results. You only get the German results. And if we switch back to.

English and we're starting a search again. My favorite, you can see there are the English search results and not the German ones. So everything you need, one thing I want to mention and if you, maybe we have some German German people watching that stream or is the recording later, if you go to our static website, you will notice that you get automatically redirected based on the language you have configured in your browser.

I obviously visit this website a couple of times, but if you are new to the website, you will notice that you automatically get redirected to the German website. Okay. Let me ask you a question about

[00:07:00] Nathan Wrigley: that. If if you, let's say for example, I am French, and you've got the choice on this particular website of English.

And German is, can you set a default? So

[00:07:12] Patrick Posner: yeah. Okay. So it automatically uses a default language you have configured in your translation plugin and our case WPML. So the default here is automatically English. It's just works the same way if you have. Non translated pages. Let's say we have, I translate all the pages here, but if we have the travel log wouldn't be translated and someone clicks on it, it would automatically redirect the user to the English version of that particular page.

Got it. Thank you. That's helpful. Okay. So what we have, do we have to configure and simply static? When it comes to settings, actually nothing, it depends. As so often on your use case, but if you just want to have a multilingual website export with simply static, you don't have to configure anything different from if you just export your website in just a single language, because simply static automatically tracks if there are translations available for a particular page and fetches these pages and includes them in.

The zip file or if you export to Netlify push, push the translated versions to Netlify. There are a couple of exceptions. So the default behavior simply static is using is that you have your static multilingual websites set up with subdirectories. So my website. com slash D E or F R, for example, if you're using a multi domain setup that also works, but that would mean that you can, or that you have to either include these domains in.

Additional URLs. So simply static can fetch the other versions as well, or you can use this handy little language switcher that WPML offers and export specific. Language versions from Simply Static. So let's say you just want to update your German website. For example, you can also configure settings based on language.

For our particular project right now, there wasn't any particular use case for doing that. Things I could think of is if you have a German website and it should only. Let's say you wanted, want a different a different sub directory instead of DE it's like German, for example, but your whole website is set up with slash DE.

You could replace it within the settings. Just make sure if you run an export that you keep an eye on the language toggle right here. Because the settings switch based on your configuration right here. So if you want to export your entire website, always make sure that you're on all languages and not that you're in a particular language.

We will introduce a little a little. Notice solution and the next update of simply static pro that also adds a little warning on top of our settings page so that you are doing that on purpose. And it's not Oh yeah, I actually, I wanted to export my entire website and not just the German one or the French one.

So there will be a little notice letting you know that you are in a particular language version and. If you want to export your entire website, you better switch to all languages. Got it. So that's pretty much everything you have to know when it comes to settings. But that's also, but right you can, as we have seen, you can do a lot more with simply statics and just configuring your settings.

Let's quickly talk about the forms integration. In our example, we use contact form seven and there is this little contact form seven WPML multilingual, what a name this add on for contact from seven that you have to install to make your your contact forms multilingual. So what happens is you have a contact form and if you switch the language.

You will notice it's not a trans, it's actually not a it's a translated version of your contact form, but what is important is that the ID has changed.

[00:11:55] Nathan Wrigley: Got it. So it's a different

[00:11:56] Patrick Posner: form, really. Yeah. Yeah. For in terms of simply static. It's. Yeah. Just, it's translated, right? But it's a different form because the ID has changed.

So make sure you go to simply static forms, quickly switching back to Englishy. And by the way, just install the duplicate post plugin now. So we don't have to like fiddle around with copy and pasting all the way. So what you have to do is.

Got it. Having a DE here. So all you have to do, you can leave all the settings as a where you can also modify them. For example, if you have a specific German thank you page, you can add it right here, but. All in all, you can leave all the settings as a default because the name attributes haven't changed.

The only thing that has changed is the ID. So you have to replace the ID, publish it, and you're good to go using your contact form in how many language or in as many languages as you want. So that's pretty much all you have to know about the forms integration. Easy. Let's talk about a particular setting.

I have to, by the way, there are if you go to simply static. com slash docs, quickly getting back here, you will find a detailed documentation page, especially for WPML right here. If you click on it, yes, everything explained from settings per language, exports per language, the form integration, the search integration.

The only thing that you read right here is that it's completely automated, but just in case you want to do things like exclude particular search results for just the German website, for example, you can do that as well within the settings. Otherwise it's completely automated and make sure that it only contains search results from that particular language and the links are converted correctly and so on.

So what is important? It's that one here, so auto language redirect. So now I have to check where it was. It's languages. Yeah. It should

[00:14:16] Nathan Wrigley: be browser language redirect.

[00:14:18] Patrick Posner: Yep. Languages. Let's see.

[00:14:24] Nathan Wrigley: Browser language redirect. It was under.

Keep going. There you go.

[00:14:33] Patrick Posner: Okay. Oh, one thing that is important is that you disable that particular option on WPML. And as well, if you use the add on in TranslatePress The good thing about it is that you absolutely not need it because simply static mimics the entire feature itself and does everything WPML does if you activate this option.

But if you activate the option WPML relies on Ajax requests. Which means your WordPress website would need to be somewhere reachable online to make that happen. And that's pretty much not what we want to do. If we have a static site setup, so we mimicked the entire functionality and made it possible that it runs just on the client side without any server side interaction.

Yeah. Disable that setting. You can pretty much leave all your settings as they are. You can disable that particular setting, but you don't have to, because it's automatically deactivated by SimpliStatic on your static website. So either if you activate it or not, it absolutely doesn't matter.

SimpliStatic handles that for you. Yeah, so that's one thing that is. A common error. That's pretty much why I wanted to mention that particular thing. There's also the language switcher options. So we're doing basically, that was part of your question earlier, Nathan. What happens if there isn't a translated.

Page for particular subpage, so we basically mimic exactly what WP ml's doing. So you can either skip the language, redirect to the particular homepage of that particular language and sim static will do whatever you have configured there. Okay. The same if you ever work with translating.

Ss e o settings with Yost. There's an add-on called, I haven't even installed it, , but there's an add-on . Yeah, there's an add-on. So you can set meta descriptions and meta titles and social graph images and whatnot. Per language and safety. Static will also convert them accordingly and displays the right meta description and meta title and so on per language.

Okay, do we need to cover anything else? Maybe I should mention that builds and single exports are not actually affected by languages. So while you can export a build. For specific language, it automatically defaults to all, to your entire website. The question is why are we doing that?

Because especially for builds, you often want to update things like your style CSS file, for example. So by doing that per language what kind of really complicate things. Because we would replace the path, right? So if your website is myawesomewebsite. com and you're on the German language toggle right here, your website is mywebsite.

com slash D E or German or whatever. And now simply static would look for your style CSS file in that particular subdirectory, which Wrong. Because your style CSS is still part of your main domain. So we simplified it because people got a little bit confused about where what is affected by a static export and it's an ongoing optimization process that we're doing right now, we're working a lot with like user feedback to simply find this entire multilingual process.

And yeah, that just seems. More convenient than depending on different language toggles. We still depend on different language toggles for the full static export, because you either want to export your entire website or just a specific language. Got it. If you want to see. This whole setup, maybe you're asking, is this a setup that can really perform in an enterprise context?

So is it performant and does it work if you have like more than a simple photographer website that has two languages and five subpages? Yes. If you take a look at

Ash. org, Ash. org is. Maybe you have heard of Dash. It's a huge thing. So basically offer like a cash wallet for, yeah I don't know. You see the image. So there are a lot of services connected already, like a unified. Digital cash wallet that you can use to pay these services with, and they are using simply static and simply static pro.

And if you hover over the language toggle, you will see a lot of languages, right? And if you switch here, you will notice it's pretty fast. It's a pretty big website, so they have like a. Community and a blog and all kinds of stuff on their website. It's also a pretty big company and yeah, they are running with simply static and using, they are like the first enterprise user forces, multilingual set up things.

So

that's a good yeah.

[00:20:56] Patrick Posner: Yeah, so it was like a pretty cool project to work on and to help getting everything right. And they also suggested particular features like exporting per language, for example, as a running, running exports per language. Yeah, that was pretty cool. So you can be sure simply static will perform quite well, even if you have a pretty big website and a lot of languages, they do use WPML, but if you click a little bit around, you will notice this website is quite fast.

Yeah. No kidding. It's not always the case if you have a WPML website, especially if you have a big one, right? Yeah, that's a good use case to or a good example of how well SimpliStatic and WPML work together. We are also an official partner of WPML now. So we are part of their, they have this like partner directory.

Let's see, there it is.

And we always make sure that we submit new versions to them and always check for. new features in WPML. We also check for the other plugins, right? So we do, we're doing the same for TranslatePress and for,

[00:22:24] Nathan Wrigley: Oh, there's Weglot. There's a

[00:22:27] Patrick Posner: Polyglot. Is it

[00:22:28] Nathan Wrigley: Polyglot? Yeah. There's a plugin called Weglot.

Polyglot is just the generic term, isn't it? I could be wrong about that. But yeah.

[00:22:35] Patrick Posner: So let's say we make sure it works with the most common translation plugins, but WPML has like the ultimate benefit of having an Official directory, and you can apply for partnership and work together with the WPML engineers to make sure you get like the best experience.

I would always recommend if you go with simply static and you want a multi lingual setup, start with WPML. You can always switch later if you're a super fan of translate press or whatsoever, but to get familiar with the idea, how a static multilingual setup works, I would recommend WPML.

Okay. So do we need to cover anything else? The rest of the settings is. Basically completely handled by WPML. So there isn't any specific thing we have to cover on Sip Aesthetic. As long as your WPML configuration is solid and you translated everything. Kudos to the WPML team for providing this new translation overview screen, by the way, it was like a way better experience to translate everything that I was used to when using WPML.

I still remember those little. You open a page and you have to click on edits, a translated version. And it was like, it worked, but it was like from a UX point, a little bit tricky. And now you get like this entire overview and you can see, we're using a block theme for our example. And it works perfectly fine with a full set editing theme.

So you can translate. If a trend template parts, the navigation menu, posts, pages, everything you want to translate is pretty much bundled in this new translation overview. And if you click on anything

to get to this very simplified translation editor right now, where you can simply, if it's an image, you can just copy it If you want to translate a specific part, you can just do that. Also, I just opened a blog article where I was so lazy that I only translated the title, but you get the idea. So it's pretty simple right now and pretty straightforward.

And a combination of simply static, you'll never have to worry about. Multi lingual websites and performance anymore. So

[00:25:08] Nathan Wrigley: just to be clear, the UI that we're looking at now is not simply static. It is WPML UI. Great.

[00:25:15] Patrick Posner: Yeah. You can find it when, if you go to WPML translations, it's like this.

Global overview of all the translations of all sections and pages and custom post types and so on of your website and the current state of the translation. And it automatically lets you know if you change something on a page. On your English page, for example, it will tell you that the translation needs to be updated because something has changed on the original page, which is neat if you have really like a big website and you want to have a straightforward workflow to translate and update translations and make sure everything is up to date across all of your different language versions.

Okay. Yeah. That's pretty much everything you have to know. In terms of multi lingual setups, as I already said, WPML works great. TranslatePress works great. I'm really sorry that I forgot the third name, but I think

[00:26:24] Nathan Wrigley: it's WeakLot. I'm pretty sure it's going to be WeakLot. It could be

[00:26:27] Patrick Posner: WeakLot. Yeah.

WeakLot is also,

[00:26:30] Nathan Wrigley: right? Yeah. They had a huge booth at WordCamp Europe. There you go. Ah, yeah. They got you in, if not,

[00:26:41] Patrick Posner: we make it compatible pretty soon. So we're really looking for partnerships and increase our competitive compatibility with kind of a lot of different tools and plugins.

And we also just about to launch our right now it's called like plugin directory, which is. Might be a little bit confusing if you're thinking of the WordPress plugin directory. I know what you mean. It's basically the same thing, but we have a little internal process where we review plugins and have different states of compatibility.

So it's 100% compatible. It's Feature X, Y, and Z, which isn't working as intended. So you have to, or you may have to adjust your configuration and things that absolutely not work. We're going to launch

[00:27:39] Nathan Wrigley: it pretty soon. It's more the, more a list of like things which work. Yeah. Plugins and alternatives that work.

Yep.

[00:27:46] Patrick Posner: Yep. Yeah. We're also thinking about. Adding that particular plugin directory right into your admin area. So if you add a new plugin that you can see this plugin is optimized for. I have to get in a little. Discussion with the WordPress org review team, because it's, we all know this jetpack story from a couple of years ago where they modified the search results a little bit.

And it was like, okay, is it a load? Is it not? Is it gray area? I do get the point that you want to recommend compatible plugins. Especially if you have like simply static is really a big plugin, right? So it's not like doing some fancy animations. It's like converting your entire website.

So there is a lot going on and would help our users a lot if they had some kind of recommendation. So I have to check that is okay. If not, we will have our, we will have a dedicated settings page with a similar layout where we make sure, okay, that's plugins that are pre vetted by us and tested.

And if you want like the smoothest experience going statics, and we highly recommend these particular plugins for certain use cases.

[00:29:17] Nathan Wrigley: Perfect. websites.

[00:29:22] Patrick Posner: Any questions, Nathan? No,

[00:29:30] Nathan Wrigley: no questions have come in. The other thing, I guess that I don't know if it was a separate thing that you were going to touch on. What have, I'm just finding the the document with all of our titles for the four. Oh, what have I done with it? Hold on. There it is. No, I've misunderstood for some reason.

I had the word export as a separate thing. I just wondered if there was something in there, but no, we had exporting multilingual

[00:29:58] Patrick Posner: is multisite

and WPCI, but WPCI is like unshowable pretty much in such a demonstration because everything runs on a terminal and that's pretty self explanatory. So if you want to use WPC AI with SimpliStatic, you can quickly go to the documentation, developers, and there is...

Where is

[00:30:26] Nathan Wrigley: it? It is Right at the bottom.

[00:30:28] Patrick Posner: WPCI. So you get a complete explanation. We also made the CI integration interactive. So if you just type WP simply dash static, you get an overview of all the commands we offer with help text and we also have a prompting system implemented. So if you want to change a particular setting, you get like a.

What is expected as a value and a little description about what this particular setting is for and so on. So you can really go nerdy with our CII integration. And there's a lot you can do. It also works with multi site setups. So everything you can see in the SimpliStatic admin UI can be controlled with our WP CII integration from.

Adjusting options to handling their entire deployment, for example. So if you want to GitHub, for example, you can do that with WPCI without even touching WP Admin at all.

[00:31:35] Nathan Wrigley: And you get the extra kudos of knowing that you are an actual real

[00:31:40] Patrick Posner: nerd. Yeah, absolutely. It was also like. There was like three people or so asking about WPCI.

So to answer, there wasn't that much demand, but it was like, if you have a nutty product, like simply static, you really need a WPCI integration. Oh,

[00:32:00] Nathan Wrigley: yes. Yes. Yeah. You've got

[00:32:02] Patrick Posner: to get you have to, there was no option to not. Yeah, there was absolutely no option to not support it. So one thing I wanted to try, I'm not sure if we have already.

Then I'll tell you if we have, ah, multi site,

No,

[00:32:21] Patrick Posner: we haven't. Okay. Let's talk about multi site real quick. It's pretty similar to the usual simply static export, but a couple of neat features I just want to show you as a screenshot because we haven't prepared like a complete multi site set up for our, yep.

Demo purpose here. There's an additional setting. If you run SimpliStatic from your network, you will notice there's an additional box on the generate overview where you can select a specific site. That you want to export, and you can also select if you want to use the site settings for the export or the network settings.

Imagine having you export to a zip file and you want to export like 20. Subpages subsites or so you can do that from the network setting. Just configure a deployment zip and you can download and pretty big zip file containing all of your subpages, for example. So that's pretty neat. If you really manage a lot of subsites within a multi site.

But you always get the option to configure subsite level. And you can, if we think a little bit about this whole WordPress as a service thing is popular with get Dolly and WPCS and all these companies getting huge funding and building honestly, pretty cool tools to offer like a software as a service version of your plugins or your agency sales whatsoever.

And it's also. A thing we wanted a little bit to cover within our multi site integration. That's not sure. Yeah, we have a, we actually have a screenshot. Ah, I love our documentation. There's a screenshot right here. So we have the ability to disable the settings on the subpages. So if you install simply static on the network level, you can completely hide it from.

The sub site and just run everything regarding exports and configuration on the network level without. your actual sub site users, even knowing that simply static is running at all. It's, if that's something you're looking for you just know it's below misc and multi site and it's just a toggle that can activate and hide to the settings panel so no one can mess up the configuration per sub site or so.

And you can just be the administrator and make sure you run exports regularly, maybe even using. Something like WP Cron to entirely automate the process of exporting particular sub pages at a particular time.

[00:35:23] Nathan Wrigley: Perfect. I'll tell you what, Patrick, it's been a real pleasure doing these with you over the last it was supposed to be four weeks, but I had a week off yesterday.

So it's ended up being. Being five weeks as always, Patrick has very kindly offered 25% discount. If you're watching this live, or if you are watching this, after the fact I'm not sure how long that code will last, but for now, at least anyway, in August, 2023, there it is. WP builds gets you 25% off the pro version.

Yeah, it

[00:35:55] Patrick Posner: will be. Oh, sorry. Oh, no, it will be at least available until the end of the year. So no need to

[00:36:02] Nathan Wrigley: rush or anything. Yeah. Yeah. 2023. But there is of course a free version that you can have a fiddle with play and there you go. 25% off if you decide you want to upgrade to the pro version.

Yeah, been a real pleasure. This one's been a little bit shorter. We don't have any questions or comments, so I think probably it's. Probably time to, to knock it on the head. I'll just say one more time. Patrick really enjoyed that. What an interesting, totally different side of WordPress. If you want to speed up your WordPress website and figure out how to do that without pulling your hair out, use a plugin like, like simply static, because doing that by yourself would be.

[00:36:46] Patrick Posner: Yeah, absolutely. I can absolutely not recommend doing that like terminal scripts and expecting anything good in return. So you

[00:36:56] Nathan Wrigley: can get a long way. We didn't really get into it, but you can get a long way on the free version, but obviously a lot of the bells and the whistles and the. You can do the

[00:37:05] Patrick Posner: entire export thing we covered with the free version.

I also recommend it to get started so that you get a feeling of what works on your static website and what isn't working. So maybe you have one particular plugin that is a must have and it's Ajax heavy, which. Doesn't work on a study website. So you want to use a free version to test. And if you're confident that the static side up site setup will work for you, you can go pro and entirely automates the process.

So it doesn't really feel like a static website and a separated WordPress website, because you're just editing your content in WordPress and the rest is done with a button.

[00:37:47] Nathan Wrigley: Update or publish and it just happens, whereas on the free version, you have to go through the process of exporting in some way.

But again, you can automate a lot of that with things like GitHub and linking up to Netlify. As we discussed, go and check out episode one because all of those secrets were revealed in there. Okay. So that series is over. I have another few series lined up, nothing to do with static websites, but I'm not quite firmed up on dates or anything.

So I will. We'll not announce anything just yet, but Patrick really appreciate it. As I said to you before we hit record if I get kicked out by pressing this stop button, I'll be back and we'll have a quick chat, but it's been an absolute pleasure. Thank you so much. Yeah, my

[00:38:32] Patrick Posner: pleasure. Thanks for having me and thanks for giving me.

The opportunity to really nerd out and like for, in a four part video live stream session to get people convinced that static site setups are a pretty good idea and you don't, that you don't have to be like a pretty nerdy developer to get your site

[00:38:52] Nathan Wrigley: static. Yeah. Nice. Nice. I'm glad that you've enjoyed the opportunity.

Okay. See you soon. See you

[00:38:59] Patrick Posner: soon.