Abandoning Hugo, but Staying Static
When I saw the image above on Hacker News, it struck a bit of a nerve. It shows a humorous tongue-in-cheek graph that expresses the exact situation this site started as. Instead of quickly posting money saving tips while using a tried and true content management system like WordPress, I ended up using a static site generator Hugo. While the main point of the first post was to highlight some ways to get free web hosting, the setup ended up too cumbersome. I lost more in productivity than I did in cash.
The initial idea of this site you are reading was to keep a log of the ways I’ve been able to save money. From free cell phone service to discounted shipping. I had grand plans for this site, but found it was writing in Markdown in a text editor, and then pushing all that to a server wasn’t the workflow I ever got comfortable with. While I know that this second post is about another blog setup, I intend to break the trend and make it my last!
This site is now running on WordPress and Next.js. I decided on WordPress because I’m comfortable using it. If I ever needed to get help from a friend to write or edit an article, they are more than likely to also familiar with how to use it. I can just give them a username and password to WordPress. The old content management system required have to teach them Git commands and getting them comfortable navigating files and directories. Sure, that stuff can all be learned, but it is added friction, and most people are not going to volunteer to go through that.
I decided on Next.js for the front-end because I’ve been using it to learn React. It is a nice React framework that allows for static site generation. Seems highly customizable (without me having to learn PHP), fast, and still allowed for cheap hosting!
The Discounts
I host the Next.js part on Vercel which has a free option. Every time the site builds, it pulls new articles from WordPress using a GraphQL plugin.
I wasn’t able to figure out how to get WordPress hosting for free, but there are numerous VPS services out there that cost $5 per month, sometimes even less. I am currently using Digital Ocean. The $5 droplet allows me to host multiple WordPress sites on one server. (Using this link will get you $100 in hosting credits over 60 days.)
It’s probably a bit less trouble to just sign up for shared hosting on Namecheap for around $3/month. I’ve also found SiteGround to be really reliable, but I had already gotten too deep into setting up Digital Ocean.
An Easy Way to Host Multiple WordPress Installs on One VPS
I followed this guide on how to get multiple WordPress domains and sites set up on a $5/month Digital Ocean Droplet. It is a really great way to get cheap WordPress hosting without having to use shared hosting.
After setting up your droplet, you’ll want to SSH into your server and run some commands.
First install EasyEngine, which bundles up Docker, NginX, and all you need for WordPress in a nice little package. Run the command below in your terminal window to install EasyEngine.
wget -qO ee rt.cx/ee4 && sudo bash eeOther alternatives to EasyEngine include WordOps, SlickStack, and Webinoly. I haven’t tested them, but seem like good other options if you don’t find EasyEngine enjoyable to use.
Once the EasyEngine install finishes, you can create your WordPress installs.
ee site create subdomain.your-site.com --type=wp --ssl=leI use a subdomain so that the main domain matches the domain of my Next.js front end. The --type=wp flag indicates you are installing a WordPress site. The --ssl=le flag indicates that you are installing a LetsEncrypt certificate.
The terminal will output some text that looks a bit like the below. You’ll want to keep note of this as this contains all your login info!
+--------------------+----------------------------------------+
| Site | http://subdomain.your-site.com |
+--------------------+----------------------------------------+
| Site Root | /easyengine/subdomain.your-site.com |
+--------------------+----------------------------------------+
| Site Title | subdomain.your-site.com |
+--------------------+----------------------------------------+
| WordPress Username | practicing-mermaid |
+--------------------+----------------------------------------+
| WordPress Password | 3adfkjlsdjalbewewt |
+--------------------+----------------------------------------+
| Alias Domains | None |
+--------------------+----------------------------------------+
| DB Host | global-db |
+--------------------+----------------------------------------+
| DB Name | subdomain_your-site_com |
+--------------------+----------------------------------------+
| DB User | subdomain_your-site_com-user |
+--------------------+----------------------------------------+
| DB Password | terafdbrWWB |
+--------------------+----------------------------------------+
| E-Mail | admin@subdomain_your-site_com |
+--------------------+----------------------------------------+
| SSL | Enabled |
+--------------------+----------------------------------------+
| Cache | None |
+--------------------+----------------------------------------+
| Proxy Cache | Off |
+--------------------+----------------------------------------+To add another WordPress site, just run the command again using a new domain. After that is complete, you can just add a corresponding subdomain or domain A Record that points to your droplet’s IP address.
One benefit of running WordPress headlessly is that you won’t need to constantly tweak and optimize the WordPress server for speed. Since all the posts are accessed from WordPress only during the Next.js build, the WordPress server itself won’t have to handle a lot of traffic. All the visitor traffic will be the responsibility of the Next.js static pages which are hosted on Vercel.
Other WordPress Settings
To ensure the Google Search Engine doesn’t get confused with duplicate content of my Next.js site and the WordPress site, I made a few changes to the WordPress settings.
Turned off the site map by setting the search engine visibility to discouraging search engines from indexing the WordPress site.I turned this back on. Realized discouraging spiders would affect twitter card previews.- I replaced the blog on the front page with static page. Hopefully that is enough to discourage the spiders from crawling the WordPress site. Trying to avoid duplicate content issues in Google. Will add canonical tags as well.
- The theme affects how the excerpt “read more” link is exported. I am using the default Twenty Twenty theme.
- Things I need to do: Password protect the headless site or edit the robots.txt to disable crawls
Another nice thing about WordPress is that there are so many helpful plugins that are even helpful when you are using it headless CMS. For instance I am using ShortPixel to optimize images, and still able to use Yoast to easily edit meta descriptions (there is a Yoast GraphQL add-on).
Setting up Next.js
Next.js provides an example on how to use WordPress as a CMS. I just used the example provided with a few modifications. Maybe I’ll get around to customizing it one day, but the example site is pretty great as is. I just followed the instructions they provided and hosted it on Vercel.
The Next.js site also has documentation that lists other CMS examples if you don’t want to use WordPress.
For a bit more context on how the Next.js example code works, I found this series of articles useful.
Also found these videos helpful in understanding the overall concepts:
Once you push your Next.js code to Vercel, you’ll also want to set up a deploy hook. You’ll want to use this deploy hook to trigger a rebuild. Every time you publish a new article on WordPress, run the deploy hook in your terminal and your Next.js blog will download the new set of articles from your WordPress server.
Now that is all out of the way, I think it is time to focus on finding fun ways to get discounts on things.
