I panicked when I went through the source files for my personal WordPress website. Unidentified files meant that malicious code were injected into my site. I was hacked! I haven’t updated this site in a long time, meaning I ignored several security updates. Plugin loopholes left unplugged. I didn’t care where the codes came from. I only wanted to fix it.
I went to check for backup that I can roll back from. No dice. I haven’t visited in such a long time that my web host had overwritten all existing backups with the problematic versions. Fine, I will do a manual cleanup. Only, I was too trigger-happy with deleting and without creating another backup version, that I crashed the WordPress core files. It was between spending hours trying to fix it back or opt for a total reset. The old blog had posts and memories from almost two decades ago, but nothing totally important. I opted for a full reset.
And since I am recreating this site from scratch, why not change how I approach how I create this site. I received minimal visitors to this site, closed down the “comments” section long ago, and wasn’t looking forward to paying much if any to host this site since it’s not commercially active. It’s ideal for a “static site” that doesn’t need any server input. I started coding website from pure html codes two decades ago in Notepad, and such static site is almost like returning to basic.
- Building Blocks of Website
- How’s It Like With Static Website
- The Plan
- Hosting WordPress in Local Computer
- Import “Existing” Blog to New WordPress site
- Creating a WordPress Static Site
- Hosting a WordPress Static Site for “free” on Netlify
- Automate Deployment of Static Site from WordPress to Netlify
- Pointing Custom Domain Name to Work with Netlify
- Actual Cost Calculation
Building Blocks of Website
Think of your website as a house. The web host is the land on which your house is built. If you are on a shared server, then the land is hosting an apartment complex. If your site is hosted on a dedicated server, then your house can occupy the whole land. Of if in a VPS, the house is built on a piece of land segregated into a few individual parcels.
The domain name is the address of your website. <mydomain.com> is an example of a custom domain name. I owned the domain name, so I can direct where people go to when they clicked on the domain name. <mydomain.someoneelsedomain.com> is an example of a subdomain. It’s an address, but I’m borrowing off someone else domain name.
WordPress is the house frame from which I built my site on. It provided the structure from which the individual component of the site attached to make the house.
WordPress plugins is the addons to add functions to the site. I can maybe add a storefront to my house via these plugins. Or maybe just enough to modify a bit of the house. Bits and pieces of codes to make things easier.
How’s It Like With Static Website
When I am visiting a website, I’m going to the address and look at the outside. I’m not going inside the house and explore around. If I can do that, that’s some serious insecurities there.
Since a visitor only looks at the outside, then it would be the same if I look at the outer shell of the house or one with the house frame inside. It makes no difference. A static site is essentially just the outer shell.
With a static site, it’s what you see is what you get, but with WordPress, it’s easy to modify the house around.
- Host the WordPress in my personal computer. Essentially building the website in my own computer.
- Create a Static Site of the WordPress site in my computer. Creating the outer shell of the house.
- Export the Static Site to a Hosting Site. Take the outer shell and place it on a host for FREE.
- Redirect the domain name to the host. Set the domain address so that it will lead people to where I wanted to. Essentially, <mydomain.com> instead of <mydomain.someelsedomain.com>
Hosting WordPress in Local Computer
I used Laragon to setup a WordPress in my computer. I tried other options but went ahead with Laragon because it’s faster.
- Download Laragon here.
- Setup the Install file but I “untick” Run Laragon when Windows starts.
- Start Laragon, then click “Start All”
- Click Menu > Quick app > WordPress, type a name – such as blog
- Create correspond database:
- Download the latest version of WordPress
- Extract the code to
- Generate correspond pretty URL:
And you are good to go. Setup WordPress like you would a new WordPress site.
If you want open the Local WordPress.
- Open Laragon, and click Run.
- Click Menu > www > “blog“.
Import “Existing” Blog to New WordPress site
I’m starting over from scratch so I can skip this step but if you have an existing blog that you want to migrate over, use a Migration plugin.
In “Existing” WordPress, go to Plugins and “Add New” to download the Migration plugin. Export the site and create a zipped file.
In “New” WordPress, go to Plugins and “Add New” to download the Migration plugin. Import the site by dragging the zipped file there.
Several plugins to choose from here, but I tend to use All-in-one WP Migration. There’s a free version with 500mb limitation when transferring site.
Getting around the 500mb size limit – simply exclude the “wp-content” from your export (that greatly keeps the size down), and then just compress and extract yourself using cPanel’s File Manager. Paste the “wp-content” into the laragon wp directory.
Creating a WordPress Static Site
There are WordPress plugins out there to do this. Two most used out there are Simply Static and WP2Static. The “free” version simply creates a static site, while the “pro” version provides integration with static site hosts and automate deployment. I’m using WP2Static here because Leon provided the source code for free. It’s up to you to create the installer.
- Create the installers for WP2Static Core, WP2Static Addon Zip and WP2Static Addon Netlify.
- Go to Plugins > Add New > Upload Plugin for all three.
- Run and generate a static site.
Hosting a WordPress Static Site for “free” on Netlify
- Create a Netlify account.
- In your WordPress dashboard, activate the WP2Static addons. We will use them.
- Go to WP2Static > Addons and “Enable” Zip Deployment.
- Go to WP2Static > Run and Generate static site.
- Go to WP2Static > Addons and download the generated zipped file under Configure.
- Go to Netlify > Sites and dragged the generated zipped file there. It will create a site for you.
- Get the default subdomain address, ie “mydomain.netlify.app”. You now have a free hosted site on Netlify under “mydomain.netlify.app”. If you want to do a manual deployment. Create a new zipped file each time and drag it to Netlify to update the site.
Automate Deployment of Static Site from WordPress to Netlify
- After this is to automate the deployment of WordPress site through the plugin instead of doing manual update each time. Go to WP2Static > Addons and “Enable” Netlify Deployment.
- Go to WP2Static > Options and replace the Deployment URL “https://example.com” with your Netlify address “mydomain.netlify.app”.
- Go to Netlify > Site settings and copy the API ID. Go to WP2Static > Addons > Configure Netlify Deployment and paste the API ID at the Site ID.
- Go to here to generate a Personal Access token. Copy it. Go to WP2Static > Addons > Configure Netlify Deployment and paste it under Personal Access Token.
- Go to WP2Static > Jobs and change the Process Queue interval from disable to 10 minutes.
Pointing Custom Domain Name to Work with Netlify
To have a custom domain name, you will need to register it first. My registrar of choice is Cloudflare. I used Cloudflare to manage my DNS before this because it offers the lowest latency around the world for free. But then, they started a zero cost domain name registrar not too long ago. So, what I pay is the cost for Cloudflare as well. I’m impressed by the hype enough that I transferred most of my domains to Cloudflare. Both domain name and DNS manager in one place. $8.57 per year for a .Com domain name is as low as you can get.
If you don’t want to go ahead with Cloudflare, there’s Namesilo as well. Unlike Cloudflare that makes money from other avenues, Namesilo specialized in domain names but their cost are one of the lowest in the industry. I had been with them for more than a decade without any issue.
- Go to Netlify > Custom Domain.
- Type in the domain name and add. Because I’m using CLoudflare as my registrar, it will say that the domain name is already registered. Click Add Domain.
- Once you added your domain, you will see a Check Your DNS Configuration. Click on it, and follow the instructions there.
- Go to Cloudflare. In my DNS records, I added
CNAME "mydomain.com" "apex-loadbalancer.netlify.com” and remove and proxy so that Cloudflare is using DNS only.
- Likewise, add another
CNAME www "mydomain.netlify.com"Note that anything within ” ” is to be substituted with your own input.
- Wait for the DNS changes to reflect and you can check mydomain.com if it points you to the right place.
- Go to WP2Static > Options and replace the Deployment URL “mydomain.netlify.app” with your new “mydomain.com” to make sure the internal links are adjusted as well.
Actual Cost Calculation
- WordPress Hosting – My computer using Laragon – FREE
- WordPress Theme – Neve – FREE
- WP2Static – I compiled from source file – FREE
- Static Site Hosting – Netlify – FREE
- Custom Domain Name – Cloudflare – $8.57
- My time – Priceless
So, total cost to run this site for a full year is $8.57 just for the domain name.