{"id":650,"date":"2024-09-09T04:51:22","date_gmt":"2024-09-08T18:51:22","guid":{"rendered":"https:\/\/andyhowes.local\/?p=650"},"modified":"2024-09-10T03:32:10","modified_gmt":"2024-09-09T17:32:10","slug":"how-i-host-this-site-for-free-simply-statically","status":"publish","type":"post","link":"https:\/\/andyhowes.local\/how-i-host-this-site-for-free-simply-statically\/","title":{"rendered":"How I host this site for free simply statically"},"content":{"rendered":"\n<p>I used to pay Jeff Bezos for this website. Now I host it for free. That&#8217;s a good thing.<\/p>\n\n\n\n<p>I can do that because this website is <strong>Static<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" src=\"https:\/\/andyhowes.local\/wp-content\/uploads\/2024\/09\/3D_TV_static.gif\" alt=\"A TV with television static flickering on it.\" class=\"wp-image-661\" style=\"width:400px\"\/><figcaption class=\"wp-element-caption\">No, not that kind of static.<\/figcaption><\/figure>\n\n\n\n<p>This kind of static means that when you visit a page on <a href=\"http:\/\/andyhowes.local\" data-type=\"link\" data-id=\"http:\/\/andyhowes.local\">andyhowes.co<\/a>, you&#8217;re being given the same HTML file every time.<\/p>\n\n\n\n<p>That doesn&#8217;t mean that this website is boring (or if it is &#8211; that&#8217;s unrelated). It just means that there is only one HTML file per page, and when anyone wants it, all I need to do is give it to them. <\/p>\n\n\n\n<p>This is opposed to <strong>Dynamic<\/strong> websites, which have databases behind the scenes helping to generate content for users.<\/p>\n\n\n\n<p>Static websites are simpler, smaller and more secure. They&#8217;re so small that Cloudflare lets you <a href=\"https:\/\/pages.cloudflare.com\" target=\"_blank\" rel=\"noopener\">host static websites for free<\/a> on their network.<\/p>\n\n\n\n<p>So why doesn&#8217;t everyone do that? What is a static website? How can I get on this free gravy train? Please let me show you:<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#why-doesnt-every-website-go-static\">Why doesn&#8217;t every website go static?<\/a><\/li><li><a href=\"#should-i-go-static\">Should I go Static?<\/a><\/li><li><a href=\"#How-to-create-a-static-WordPress-site\">How to create a static WordPress site<\/a><\/li><li><a href=\"#getting-started\">Getting started<\/a><ul><li><a href=\"#1-install-local-wp-and-create-your-site\">1. Install Local WP and create your site<\/a><\/li><li><a href=\"#2-install-and-configure-simply-static\">2. Install and configure Simply Static<\/a><\/li><li><a href=\"#3-set-up-a-git-hub-repository\">3. Set up a GitHub repository<\/a><\/li><li><a href=\"#4-generate-your-static-site\">4. Generate your static site<\/a><\/li><li><a href=\"#5-final-preparation\">5. Final preparation<\/a><\/li><li><a href=\"#6-configure-cloudflare-pages\">6. Configure Cloudflare Pages<\/a><\/li><\/ul><\/li><li><a href=\"#how-do-i-update-it\">How do I update it?<\/a><ul><li><a href=\"#1-boot-up-your-local-wp-site-and-make-changes\">1. Boot up your Local WP site and make the changes<\/a><\/li><li><a href=\"#2-generate-new-static-files\">2. Generate new static files<\/a><\/li><li><a href=\"#3-push-changes-and-watch-your-site-update\">3. Push changes and watch your site update<\/a><\/li><li><a href=\"#4\">4. Save a backup of your Local WP site<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-doesnt-every-website-go-static\">Why doesn&#8217;t every website go static?<\/h2>\n\n\n\n<p>Static websites are cool, but it isn&#8217;t how most websites work. Most sites aren&#8217;t static because they need to provide personalised content or update frequently, which is challenging with static files.<\/p>\n\n\n\n<p>Because of these problems, most websites use a content management system, like WordPress or Squarespace, which helps creators make the site. When someone visits the site, the server checks internal databases to find content and display it to users.<\/p>\n\n\n\n<p>And honestly, these tools work great. They are quick to work on, reliable and pretty. WordPress is even free! <\/p>\n\n\n\n<p>But, hosting these services is not free or easy. Plus all that computing in the background can make them slow and vulnerable. If all you need is to communicate information, like in this blog, you don&#8217;t need any of that fancy background stuff when someone visits, you just need to give them a pretty looking HTML file.<\/p>\n\n\n\n<p>So is there any way that you could have the best of both worlds? Use WordPress to design and update your website, then convert it to a static site to hand it over to the rest of the internet?<\/p>\n\n\n\n<p>There is! That&#8217;s how this site works!<\/p>\n\n\n\n<p>Sound good? Jump <a href=\"#How-to-create-a-static-WordPress-site\" data-type=\"internal\" data-id=\"#How-to-create-a-static-WordPress-site\">straight to the how to guide here<\/a>.<\/p>\n\n\n\n<p>Still not sure if it&#8217;s for you? Fair enough &#8211; it might not be. Read on.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"should-i-go-static\">Should I go Static?<\/h2>\n\n\n\n<p>Static websites have a lot going for them. They&#8217;re fast, which makes users happy and gives search engines a reason to rank you higher. They are also less prone to attacks. You can&#8217;t go to my <a href=\"https:\/\/andyhowes.local\/wp-admin\">WP-Admin<\/a> and guess my password on this site because it just doesn&#8217;t exist.<\/p>\n\n\n\n<p>And the best part? Hosting is cheap, or even free, as you&#8217;ve seen.<\/p>\n\n\n\n<p>Static sites are perfect for documentation, blogs and portfolio sites. They&#8217;re also great for instructional websites\u2014basically, anything where content doesn\u2019t change constantly.<\/p>\n\n\n\n<p>But, static sites aren&#8217;t for everyone. Some websites&nbsp;<em>need<\/em>&nbsp;to be dynamic\u2014like online shops or social media platforms.<\/p>\n\n\n\n<p>There are other limitations too, like a lack of search and or comments. Most static websites don&#8217;t come with search functionality out of the box and you can&#8217;t leave a comment if there&#8217;s no database behind the scenes to save your comment in.<\/p>\n\n\n\n<p>For me, I disabled WordPress comments before I even went static so I didn&#8217;t have to deal with inevitable spam. If you do have to something to say, you can <a href=\"https:\/\/andyhowes.local\/contact\/\" data-type=\"page\" data-id=\"163\">contact me<\/a> here instead.<\/p>\n\n\n\n<p>For searching, <a href=\"\/404\">my workaround<\/a> is some basic JavaScript that searches Google in a new tab. If you want a proper on-site search feature, <a href=\"https:\/\/simplystatic.com\/features\/#features\" target=\"_blank\" rel=\"noopener\">Simply Static Pro<\/a> has you covered with a pretty cool search integration and some other handy features.<\/p>\n\n\n\n<p>There are other minor drawbacks, like manually updating the site whenever you make changes. It\u2019s not difficult but it\u2019s an extra step compared to a fully dynamic setup.<\/p>\n\n\n\n<p>In short, if you&#8217;re after speed, security, and lower costs\u2014and you don&#8217;t need constant updates or live feeds\u2014static might be just what you&#8217;re looking for.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"How-to-create-a-static-WordPress-site\">How to create a static WordPress site<\/h2>\n\n\n\n<p>To do this you need a few things.<\/p>\n\n\n\n<p>Firstly, you need a computer. This is just to create, edit and update the website. Whenever you publish a change to the website you can put it away again. <\/p>\n\n\n\n<p>On that computer, you&#8217;ll need <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local WP<\/a> installed. This lets you create a WordPress website on your device for free. On that WordPress installation, you&#8217;ll need the <a href=\"https:\/\/simplystatic.com\" target=\"_blank\" rel=\"noopener\">Simply Static<\/a> plugin, which is &#8211; you guessed it &#8211; free. This app does the heavy lifting of transforming your WordPress site into a Static site.<\/p>\n\n\n\n<p>Now you have some choices. If you want <strong>easy<\/strong> static web hosting you can use <a href=\"https:\/\/simplystatic.com\/pricing\/\" data-type=\"link\" data-id=\"https:\/\/simplystatic.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">Simply Static&#8217;s Pro<\/a> features to save some time. If you want <strong>free<\/strong> (and still pretty easy) static web hosting, you can use GitHub to store the HTML files that you generate, and then <a href=\"https:\/\/pages.cloudflare.com\" target=\"_blank\" rel=\"noopener\">Cloudflare Pages<\/a> to host them. I&#8217;m stingy, so that&#8217;s what I do.<\/p>\n\n\n\n<p>Finally you need a domain. This is hard (and probably not wise) to get for free, but it can be done. <\/p>\n\n\n\n<p>Here&#8217;s a summary:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>What you need<\/strong><\/td><td><strong>What it does<\/strong><\/td><td><strong>Annual cost<\/strong><\/td><\/tr><tr><td>A computer<\/td><td>You&#8217;ll need this to create and edit the website. Don&#8217;t worry &#8211; we&#8217;re not using it as a server.<\/td><td>I&#8217;m going to assume you&#8217;ve already got one<\/td><\/tr><tr><td><a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local WP<\/a><\/td><td>This lets you create a local WordPress site on your own computer<\/td><td>$0<\/td><\/tr><tr><td><a href=\"https:\/\/simplystatic.com\" target=\"_blank\" rel=\"noopener\">Simply Static<\/a><\/td><td>This turns that local site into a Static website<\/td><td>$0<\/td><\/tr><tr><td><a href=\"https:\/\/github.com\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/td><td>This is where you&#8217;ll keep those static HTML files when you generate them<\/td><td>$0<\/td><\/tr><tr><td><a href=\"https:\/\/pages.cloudflare.com\" target=\"_blank\" rel=\"noopener\">Cloudflare Pages<\/a><\/td><td>This is what will give those static files to the rest of the world<\/td><td>$0<\/td><\/tr><tr><td>A domain<\/td><td>This is your URL. It&#8217;s normally not free but there&#8217;s not much you can do about that<\/td><td>~$10<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-started\">Getting started<\/h2>\n\n\n\n<p>Follow these steps to set up your static website using WordPress, Simply Static, GitHub, and Cloudflare Pages:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-install-local-wp-and-create-your-site\">1. Install Local WP and create your site<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download and install <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local WP<\/a> on your computer, open it up and create a new site.<\/li>\n\n\n\n<li>Give your site a local domain name. This should be different from the final domain you&#8217;ll use on the internet.<\/li>\n\n\n\n<li>Follow the prompts to set up your local WordPress installation, and design your website using WordPress themes and plugins.<\/li>\n<\/ol>\n\n\n\n<p><em>Tip: If you already have a WordPress site, you can use other WordPress plugins, like <a href=\"https:\/\/deliciousbrains.com\/wp-migrate-db-pro\/doc\/importing-wordpress-local-development-environment\/\" data-type=\"link\" data-id=\"https:\/\/deliciousbrains.com\/wp-migrate-db-pro\/doc\/importing-wordpress-local-development-environment\/\" target=\"_blank\" rel=\"noopener\">WP Migrate<\/a>, to create a local copy.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-install-and-configure-simply-static\">2. Install and configure Simply Static<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In your local WordPress site admin area, go to Plugins &gt; Add New.<\/li>\n\n\n\n<li>Search for &#8220;<a href=\"https:\/\/simplystatic.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">Simply Static<\/a>&#8221; and install the plugin.<\/li>\n\n\n\n<li>In Simply Static &gt; General &gt; Replacing URLs choose Relative path, so that when you publish to another domain your site will work.<\/li>\n\n\n\n<li>Check Generate a 404 page in Simply Static settings to create a custom error page for your site if someone goes to a page that doesn&#8217;t exist.<\/li>\n<\/ol>\n\n\n\n<p><em>Tip: You might want to check out some of the other settings and features of <a href=\"https:\/\/simplystatic.com\" target=\"_blank\" rel=\"noopener\">Simply Static<\/a> to work out what&#8217;s right for you.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-set-up-a-git-hub-repository\">3. Set up a GitHub repository<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub account<\/a> if you don&#8217;t have one, and then create a new private repository.<\/li>\n\n\n\n<li>Clone that repository to your device. If you&#8217;re not sure how to do this, I&#8217;d recommend installing <a href=\"https:\/\/desktop.github.com\/\" target=\"_blank\" rel=\"noopener\">GitHub Desktop<\/a> and <a href=\"https:\/\/docs.github.com\/en\/desktop\/adding-and-cloning-repositories\/cloning-a-repository-from-github-to-github-desktop\" target=\"_blank\" rel=\"noopener\">following these instructions<\/a> to get a clone of your repo onto your device.<\/li>\n\n\n\n<li>Optionally, set up a development branch if you want to have a test and a live site.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-generate-your-static-site\">4. Generate your static site<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Simply Static &gt; Deploy, and choose Local Directory as your Deployment Method. Under path, add the path to your folder GitHub Repo.<\/li>\n\n\n\n<li>Now it&#8217;s time to Generate your Static Site. Go to Simply Static &gt; Generate. Click &#8220;Generate Static Files&#8221; and wait for the process to complete. This is what will create a static version of your website.<\/li>\n<\/ol>\n\n\n\n<p><em>Pro tip: it&#8217;s worth backing up your Local WP site after you make changes and generate your site. You can do that by exporting your site on Local WP and saving the ZIP file somewhere safe like a cloud storage location.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-final-preparation\">5. Final preparation<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cloudflare looks for a&nbsp;404.html&nbsp;file in the root directory to serve as the custom 404 error page, so if you&#8217;re using Cloudflare Pages, find the 404 folder of your repo, copy and rename the index.html file to 404.html and move it to the root directory of the repo.<\/li>\n\n\n\n<li>Once you&#8217;ve done this use Git or GitHub Desktop to commit your changes and push them to your GitHub repository.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-configure-cloudflare-pages\">6. Configure Cloudflare Pages<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Sign up for a free <a href=\"https:\/\/www.cloudflare.com\/\" target=\"_blank\" rel=\"noopener\">Cloudflare account<\/a>.<\/li>\n\n\n\n<li>Once in, follow<a href=\"https:\/\/developers.cloudflare.com\/pages\/framework-guides\/deploy-anything\/\" target=\"_blank\" rel=\"noopener\"> Cloudflare&#8217;s instructions<\/a> on how to set up a static website.<\/li>\n\n\n\n<li>Select your GitHub repository and follow the setup wizard to Deploy your site.<\/li>\n\n\n\n<li>Once deployed, go to Pages > Your Project > Custom Domains to add your domain.<\/li>\n<\/ol>\n\n\n\n<p>Congratulations! Your static website is now live and hosted for free on Cloudflare Pages.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-i-update-it\">How do I update it?<\/h2>\n\n\n\n<p>Updating your static website is straightforward. Follow these steps whenever you want to make changes:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-boot-up-your-local-wp-site-and-make-changes\">1. Boot up your Local WP site and make the changes<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open Local WP and start your website&#8217;s local server.<\/li>\n\n\n\n<li>Access your WordPress admin area and make any changes you want.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-generate-new-static-files\">2. Generate new static files<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Simply Static &gt; Generate in your WordPress dashboard.<\/li>\n\n\n\n<li>Click &#8220;Generate Static Files&#8221; and wait for the process to complete. This will update and overwrite all pages in your Github repo with the latest changes on your site.<\/li>\n\n\n\n<li>If you&#8217;re updating the 404.html page, make sure you move it to the root directory.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-push-changes-and-watch-your-site-update\">3. Push changes and watch your site update<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open GitHub Desktop and push your changes to GitHub. this will trigger a rebuild from Cloudflare and your site will update.<\/li>\n\n\n\n<li>I&#8217;ve set up my integration to have a Dev and a Main branch, so I push changes to the Dev branch. Cloudflare then builds a Dev version with my changes so I can review. Once happy, I merge to the Main branch and my changes are released out into the world.<\/li>\n<\/ol>\n\n\n\n<p><em>Pro Tip: I recommend using Git branches this way too &#8211; it lets you test changes before they end up on your live site<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4\">4. Save a backup of your Local WP site<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In Local WP, find your site and click Export. Save this ZIP file somewhere safe and preferably off device. This will ensure that if your computer dies, your non-static website doesn&#8217;t die with it.<\/li>\n<\/ol>\n\n\n\n<p>By following this workflow, you can enjoy the benefits of a dynamic WordPress environment for content creation while serving a lightning-fast static site to your visitors, all without ongoing hosting costs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I used to pay Jeff Bezos for this website. Now I host it for free using Simply Static. That&#8217;s a good thing.<\/p>\n","protected":false},"author":1,"featured_media":665,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/posts\/650"}],"collection":[{"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":19,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":677,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/posts\/650\/revisions\/677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/media\/665"}],"wp:attachment":[{"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/media?parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/categories?post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andyhowes.local\/wp-json\/wp\/v2\/tags?post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}