Create Free Static Websites Using WordPress

in today's tutorial you'll learn how to use the simply static plugin for WordPress to convert a WordPress website into a static website so we're going to take this WordPress website convert it into a static website and host it on our production domain I'm going to use cloudflare pages to host the website but there's many other options as well Cloud Fair pages will let you host a large number of websites for free if you convert them to static so there's lots of performance security and obviously cost benefits to doing this there's also some disadvantages as well but I'll walk you through the complete process but before we get started let's talk about some of the advantages and disadvantages of static websites so a static website generator just takes your content and converts it into HTML CSS and JavaScript and you can host that in lots of different places for very low cost or even free in the example that we're going to show today there's no database and there's no PHP that you have with WordPress so you lose a lot of the functionality that WordPress has has but you obviously reduce the cost of hosting and you reduce the maintenance updates um a lot of the security issues that you have with a database or with running PHP on a web server those issues disappear so you get uh excellent performance because you don't need a powerful server to run this you can run this just on a CDN like we're going to do today on cloudflare and you've got excellent security and obviously you don't need to run your updates on your WordPress or your plugins or your themes so lots of good benefit efforts now the cons obviously you've lost all your D Dynamic WordPress features so if you want to have Dynamic features you need to connect them to an external service like um forms in e-commerce you need like a form service like Google forms or jot form an e-commerce something like snip cart or Square or PayPal buttons those kind of things can be used to replace um something like woocommerce in a lot of situations so um it can create issues where you need Dynamic content but for a lot of simple brochure or informational portfolio type websites uh a static website will do just as well as a WordPress website and the other main con is it's inconvenient to edit a static site after deployment so after you've generated the site uploaded it uh it's very hard to edit it compared to editing in WordPress uh the pro version of the static simply static plug-in does improve that somewhat but again um you're never going to have the same uh ease of use that you have editing content through your WordPress back end directly and the main drawback like I said earlier is there's no Dynamic content you'll have to find another way of adding things like forms or e-commerce I'm not going to do that in this tutorial but um just to point you in the right direction forms like Google forms uh Microsoft forms jop form type form Zoho forms these are ways you can just embed um some forms onto the site without needing WordPress similarly with e-commerce uh you got equid snip cut payhip uh just PayPal buttons or strap checkouts I've done a few of these on the channel as well I'll put links in the description to where I've shown how to do some of these already so this tutorial consists of two basic steps first we have a development WordPress site you can do this however you want in my case I'm going to use a test subdomain on a domain I already have set up uh but you can use a staging site you can even do this locally from your own hard drive using something like local WP Lando or laragon is really good um I've tried these and you can run these for free and you don't need any web hosting you can generate your sites on your own computer and then deploy them to the static host that is step two there's lots of places where you can deploy a static website today we're going to use cloudflare pages but there's GitHub Pages nlif 5 Verso um AWS digital ocean spaces bunny is a really fast cheap one and you can SFTP the data into basically any web server but a lot of these offer very nice free tiers or very lowcost Pro tiers so um this one is what we're going to use free today so if all this sounds interesting then keep watching I'm going to give you a step-by-step example of how to create a static website from a WordPress site you'll need a WordPress website to start with obviously so I've got this one here this is just an Astra St template created with an Elementor template um this was free came with Astra if you go and install Astra you'll get starter templates there really straightforward to set something like this up I'm hosting this myself over on test Alex spot.com but you can host this pretty much any uh anywhere you like using a staging site a temporary subdomain like I'm using here or even a local uh WordPress site using on your local computer using some software like local WP or Lando dodev or even laragon org is when I like to set up uh WordPress websites on your own hard drive on your own computer so you don't even need web hosting if you use something like this but for this example I'm using this um subdomain and once you've got your WordPress website ready to export you'll need the plugin so that is called simply static you can get that from your WordPress plug-in repository under plugins add new plugins if you search for static you'll find it pretty quickly you want to install and activate that one once you've done that you'll get the option to use the plugin here in your WordPress dashboard so let's check that out generally the default settings are all good you can just go ahead and click generate static files you can check out some of the settings under the general settings here uh usually this relative path option is the most versatile option for generating mod static websites but there's a few other choices there but I'm going to use the default relative path that's going to work really well and let's go ahead let's back to our log and let's hit uh generate static files this will have a nice little log of the progress as it generates the site depending on how big the site is we'll determine how long this will take this will probably take a couple of minutes this is a fairly small uh element or template website so let's just let this do its thing after a few minutes that will be finished finished you can go ahead and download your zip file here I've now got the simply static zip file in our downloads folder here this is our website zipped up into a single file here okay now we have our website zipped up I'm going to upload it to cloudfare Pages for this example there's lots of other ways to host a static website this is an easy and free option um if you don't have a cloudflare account head over to cloudflare.com and sign up I'm going to head to my dashboard here and you'll find your workers and pages in the menu there and we want to use a page so pages is The Sub menu there and then we have to upload our ZIP file using this tool here so we need to give this a name I'm going to call this Earth test and create the project and here we just upload our ZIP file so I can just upload that one from my downloads folder there and let it do its thing and that didn't take long we've got our success message here scroll down we can deploy this site and there we go we've got success your Suite was built and deployed to Earth test Pages Dev we can click that and there we've got our page here running on cloud flare pages so we don't even need web hosting as we can see here this will run nice and quick on cloud Flare's own C Pages for free now obviously you want to change this to a custom domain if you want to use this for anything in production so we can do that quite easily as well head back to our clad flare dashboard here and let's head back to the project there as we can see we've got custom domains here on the menu and we can set up a custom domain for our site now I've already added a domain onto my cloudflow account called ideaspot online you can just do that quite easily by adding a site like that um I'll have already made a video doing this so I can link that in the description as well if you want to see exactly how that's done but I'm going to use ID spot online to uh host this and all we have to do is Click activate the domain and now it's initializing and there it says the verifying we can complete the DNS setup here and then a minute or two later it will automatically change to active so that looks all good again Link in the description if you've never added a domain to cloudflare that only takes 5 minutes and I've done a video previously as well so I'll put that in the description for you guys who haven't tried it before and now if I head to ID spot online we can actually see our website here running through Cloud flare Pages uh or all good so pretty nice one nice little side effect of doing this is I actually got a little performance Boost from moving from the WordPress version was 79 in page speed to a 92 with the static version so in a lot of cases the static version is going to run better than the WordPress version also just check that everything has converted over properly check the responsiveness see if it's uh responding well to different resolutions check all your links and layout looks right but this looks really good this is an Elementor site so it works with Elementor blocks I've tried with Gutenberg blocks as well and it's been working fine so uh WordPress to static using simply static plug-in is uh a nice way of generating a static site from WordPress all right so that wraps up our simply static WordPress static site tutorial so this is an excellent solution that will give you um zero cost high performance web hosting this is really well suited to basic pages that don't need a lot of dynamic content things like brochures local business websites portfolio websites uh having a static version of those sites is a good low maintenance lowcost way of doing things and obviously there's Solutions if you want to add Dynamic content that's possible as well uh but let me know what you think in the comments if you have any questions uh but thanks for watching I'll see you next time

Channel: IdeaSpot

Views: 2,083

Keywords:

Id: 62hasINWHuY

Length: 9min 50sec (590 seconds)

Published: Mon Mar 18 2024