How to Start Blogging on Budget (and Still Have a Snappy Website)

How to Start Blogging on Budget (and Still Have a Snappy Website)
Jan Zavrel
Jan Zavrel Follow September 06, 2020
Share:

It’s hard to decide on the right kind of hosting for your blog even if you’re not financially constrained, but it’s even harder when you’re on a tight budget.

In this article, I want to help you understand why a dirt-cheap shared hosting might not be the best idea if you can’t afford to pay for expensive hosting plans.

I will also show you a great alternative that’s almost totally free yet offers far better performance than you’ll ever get from a regular shared hosting. So if you can’t afford expensive web hosting or you simply don’t want to waste your money, you’ve come to the right place.

Please note that some of the links in this post are affiliate links for products I use and love. This means if you click on such a link and take action (like subscribe, or make a purchase), I may receive some coffee money at no extra cost to you. This helps me creating more content free of charge to you. And, as an Amazon Associate, I earn from qualifying purchases. Thanks for your support!

The Case Against Cheap Shared Hosting

Let’s start with something not that obvious, which is that fact, that a seemingly cheap shared hosting isn’t actually that cheap. As Tom Zsomborgi, the Chief Financial Officer at Kinsta, explains, cheap WordPress hosting can cost almost 30 times more than you think.

There are two kinds of cheap hosting providers:

  • Upsellers that will charge you for SSL certificates, WHOIS privacy and other services that should be offered for free
  • Burners that will knowingly sell you terrible service and gladly lose you to replace you with another victim of their bait-and-switch strategy

Both will try to sell you their unlimited plans for $5 per month. Some will offer this “great deal” if you pay for up to five years upfront. The problem is that sooner or later, you’ll experience low performance of your website and almost non-existent technical support.

And if you won’t request a refund within the period of money-back-guarantee, which is usually only 30 days, you’re out of luck. They’ll keep your money and you will move on to find some better deal.

From the business point of view, cheap hosting simply doesn’t make sense. When you pay $5 per month for WordPress hosting, you can’t be surprised when it fails because there’s no administrator that would solve almost 3,000 customer issues per month.

Tom did some basic math that tells a dire story of the technical support of these cheap hosting businesses. If you’re paying them $5 per month, that’s a meager $60 per year, but a good system administrator will cost around $100,000 per year. With all the expenses on servers and marketing, only about 60% income will be available to pay staff.

It means that for every 3,000 customers at $5 per month, a hosting business can afford to hire a new system administrator, but he’s not the only employee, so the situation is actually even worse.

This simple example demonstrates that the economics of cheap hosting isn’t in the customer’s best interest, because it simply can not be.

Why Managed Hosting Is Actually Cheaper

It might sound counter-intuitive but if you sum up all the hidden fees of running WordPress of a cheap shared hosting, you’ll realize that it’s probably as expensive as a managed hosting plan, if not even more expensive.

Let’s see what you’ll pay for your shared-hosted WordPress blog:

In total, you would pay up to $328 per year on top of your hosting fee.

Now, compare it with a budget-friendly managed WordPress hosting from Flywheel where you get premium StudioPress themes, security, caching and CDN included in your monthly fee starting from $15 per month.

What If You Can’t Afford Any Paid Hosting?

As I demonstrated above, it’s mostly better to pay more for managed hosting than shared hosting, because you’ll probably pay less in total. But what if you can’t afford it? Is there any other option?

Yes, there is! It involves a bit more work on your side, but it’s well worth it. The most expensive part of WordPress hosting is that fact that it’s a complicated interplay between different technologies that are hard to maintain. WordPress hosting typically consists of a web server, database and web application.

Three parts of a regular web application

Resource: Netlify.com

On the other hand, if you’re willing to ditch WordPress, you’ll find out that there’s a whole different world of web publishing based on Jamstack where the only thing you have to pay for is your domain name.

I’ve been using Jamstack for many projects and you might be shocked to learn that even this very blog is not running on WordPress, so my total cost of having this website online is about $8 per year. Yes, not per month, per year! That’s what I pay my registrar for domain renewal.

It’s almost unbelievable, but free Jamstack platform allows you to run a blog that’s:

  1. faster than most WordPress websites because all pages and assets are prebuild for speed and delivered over CDN
  2. more secure because the architecture allows fewer points of attack
  3. easily scalable so it can grow with the growing demand of your audience
  4. automatically backed up thanks to the Git-based storage

I won’t lie to you. Wiring all the necessary stuff together on your own can be quite challenging and that’s why I wrote this free step-by-step tutorial to help you run your Jamstack-based blog in the shortest time possible.

How to Start Blogging on Budget in 2020 (And Still Get A Snappy Website)

  1. Buy a domain name
  2. Create a free GitHub account
  3. Create a free Stackbit account
  4. Claim your Netlify website and set custom domain
  5. Edit default theme content
  6. Create and publish a new post

1. Buy a domain name (your only expense)

If you already own a domain name, you can safely skip this step. Otherwise, you should head to Porkbun.com or other registrar of your choice that offers free WHOIS privacy and buy a domain name. Don’t worry if you’re not sure what name to choose, here’s a post that might help you with your decision.

Once you have your domain name chosen, the registration process is fairly easy. I picked jzavrel.com and here’s how I registered it.

Step 1

You need to make sure that the domain of your choice is available. Luckily for me, nobody has bought it yet, so I can click the Checkout button to buy it.

Step 2

Next, I’ll scroll down and click the Continue button. If you don’t have a Porkbun account yet, you’ll be asked to create it.

Step 3

You can choose whichever payment method you prefer, I’ll pick PayPal.

Step 4

Once you’ll pay, you’ll see your domain name in your account. We’ll get back to it later to change the DNS records, so you can leave the tab in your browser open.

2. Create a free GitHub account (to store your blog files)

GitHub landing page Resource: GitHub.com

GitHub is a free service where you will have your whole website safely stored. Don’t worry about technical stuff now, you’ll get to it later if you’re interested. All you need for now is a free GitHub account, so just create one with your username, email and password. If you already have one, you’re probably quite familiar with the whole concept of Git-based development.

Step 1

Fill out the registration form on the landing page with your desired username, email and password and hit the big green button.

Step 2

Scroll down and click the blue button at the bottom to complete setup.

Step 3

Make sure to verify your email so you can start using your GitHub account.

Step 4

You can safely skip the onboarding page.

Step 5

And you can also hide the call-to-action window. That’s it for now, we’ll get back to GitHub later, so you can leave this tab open as well.

3. Create a free Stackbit account (to get a free website template)

Stackbit landing page Resource: Stackbit.com

This is where the whole fun begins, I will finally show you how to create your brand-new blog. Stackbit is one of the easiest way to get your static website up and running in a manner of minutes.

Step 1

You will use your GitHub account with Stackbit, so you can click the Sign In button at the top of the landing page.

Step 2

Click the GitHub icon to sign in with your GitHub account.

Step 3

In the next, window, you need to authorize Stackbit so it can access your GitHub account.

Step 4

Now that you’re signed in Stackbit, you can create a new project.

Step 5

Choose the Fresh theme and click the Continue button.

Step 6

You can change the randomly generate name for something more meaningful if you want.

Step 7

Stackbit uses Gatsby site generator by default, but I want to show you how to work with Jekyll-based website. If you have no idea what this means, don’t worry, just follow me here. Later, I will explain everything. Click the Change link under the Static Site Generator card.

Step 8

Select Jekyll from the list of available site generators. One of the reasons I use Jekyll is that it’s used by GitHub. Click the Continue button at the bottom of the page.

Step 9

That’s all you need to set for now. You don’t need to use any CMS because you will edit files stored in your GitHub repository directly. Click the Create site button.

Step 10

Once your website is provisioned, you can click the button at the bottom of the page to launch Stackbit or wait few seconds to be redirected automatically.

Step 11

This is what your website looks like in the Stackbit’s online editor, but since we won’t use it, you can safely ignore it and go back to the dashboard.

Step 12

From the dashboard, you can create as many sites as you want, you can even duplicate existing site, and of course, you can also edit and delete them. As you can see, the site is being deployed.

Step 13

In the meantime, you should check the inbox of the email address you used when creating GitHub account. There should be an email with repository transfer request which you need to confirm so your site won’t expire.

Step 14

You should see that the repository is being moved to your account which might take a while.

Step 15

Once it’s done, you can click on it in the list of repositories to reveal the structure of your website.

Step 16

To visit your website, go back to your Stackbit Dashboard and click the View Site button.

Step 17

Notice the address of your website, it’s based on the name of your GitHub repository. Next, I’ll show you how to change the address to your own domain.

4. Claim your Netlify website (with free SSL/TLS certificate)

Netlify landing page Resource: Netlify.com

Netlify is a leading web developer platform that enables much more performant, secure and scalable websites. Netlify allows you to publish your website right from your GitHub repository so you don’t need to set up anything and there are no servers to maintain.

It works like this:

  1. Connect your repository - that’s why you need your GitHub account ready
  2. Automate your builds - whenever you make changes to your files, Netlify will automatically rebuild your whole website
  3. Deploy to CDN - once your website is rebuild, it’s automatically published on the multi-cloud CDN network called Edge

A workflow of a typical static website Resource: Netlify.com

And don’t think that the whole Jamstack is only for geeks, the famous Smashing Magazine moved from WordPress to Netlify and as a result, it gained 10x boost in performance.

We had to wait for the HTML file being served for 800ms and now it’s 80ms.

Markus Seyfferth
CEO for Smashing Magazine

Now that you know how Netlify works, let’s take a look how to claim your Netlify website and connect it to your own domain with SSL/TLS certificate.

Step 1

Go back to your Stackbit Dashboard and click the Claim button.

Step 2

Since you have a GitHub account, you can use it to create your Netlify account by simply logging in.

Step 3

And again, you need to authorize Netlify so it can access your GitHub account.

Step 4

Next, you need to authorize Stackbit to access your newly created Netlify account, so it can create and manage your sites published on Netlify.

Step 5

You should see that your Netlify site has been claimed.

Step 6

So let’s check it out on Netlify. Sign in with your GitHub credentials.

Step 7

You can quit the Quickstart Guide to see the list of your websites.

Step 8

As you can see, your website’s name is the same as the name of your GitHub repository. That’s because Netlify grabs the content of this repository and deploys the site on its fast CDN network.

Click on the name of your website to reveal details.

Step 9

Here, we will change the domain name used to access your website, so click the Domain settings button.

Step 10

Click the Add custom domain button to add your own domain name.

Step 11

Type the domain name in the form and click the Verify button.

Step 12

Confirm that you’re the owner of this domain.

Step 13

Now you need to change your domain’s DNS so that it points to Netlify. Click the Options drop-down menu next to Primary domain and then Set up Netlify DNS.

Step 14

Verify your domain again.

Step 15

And once more confirm that the domain is yours.

Step 16

You don’t need to add any DNS records now, so just skip this by clicking the Continue button.

Step 17

Here’s the list of nameservers you need to use with your domain provider.

Step 18

Go back to your domain provider. If you’re using Porkbun, you need to locate Authoritative nameservers and click the Edit link.

Step 19

Copy the list of nameservers from Netlify, paste it to Porkbun and click the Submit button. Because DNS is usually cached, you might have to wait up to 48 hours until the changes are propagated. In my experience, it won’t take more than an hour.

Step 20

Go back to Netlify and click the Done button so the nameservers of your domain can be reloaded.

Step 21

Wait until you see that both your primary domain and www prefix are managed by Netlify DNS. You might want to refresh this page from time to time, but don’t worry if it takes up to two days, it’s perfectly normal.

Step 22

Once you have Netlify DNS set up, scroll down and check that SSL/TLS certificate has been issued for your domain and HTTPS is enabled.

Step 23

Scroll up and check that your domain name is now connected to your website.

Step 24

Navigate to your domain in the browser and click the lock icon to check that your connection is secure.

5. Edit default theme content

Depending on whether you want to make your changes remotely or locally, there are two ways you can edit your website and add a new content:

  1. To make your changes remotely, you can use Stackedit online editor
  2. To make your changes locally, you can use GitHub Desktop and some code editor like Microsoft Visual Studio Code

Even though it might be useful in specific situations to edit your website remotely, that is from any computer available, in this article, I will focus on local editing since most of us use laptops anyway.

To edit your website locally, you’ll need to pieces of software, Microsoft Visual Studio Code and GitHub Desktop. Download and install both on your computer, don’t worry, they’re both available for free.

First, we need to download the copy of your GitHub repository to your computer. This is how you do it.

Step 1

Run GitHub Desktop and click the blue button on the welcome screen to sign in to GitHub.com.

Step 2

Use your GitHub account credentials to sign in.

Step 3

Next, you need to authorize the GitHub Desktop application to access your account.

Step 4

You can leave the configuration as is without any changes. Simply click the Continue button.

Step 5

That’s it for the initial setup, you can opt to share usage stats and finally, click the Finish button.

Step 6

Notice that your repository is available for you to clone it to your computer.

Step 7

Select the repository and click the Clone button at the bottom of the window.

Step 8

You can leave the default path which is your Documents directory and click the Clone button.

Step 9

Once your GitHub repository is cloned to your computer, you can view the files in Finder, or Explorer, depending whether you’re using Mac or Windows PC.

Step 10

Here’s your website’s structure. It’s just a copy of your GitHub repository, nothing more.

Step 11

Now, run Microsoft Visual Studio Code, quit GitHub Desktop and start it again. You should see this new button that will let you open your repository in Visual Studio Code. Click on it.

Step 12

If you’re not familiar with Visual Studio Code, it’s just one of many code editors. On the left side, there’s a column with the list of files and directories of your repository. You can close the message at the bottom of the window, since we don’t need to use Git.

Step 13

When you click the _posts directory, you’ll get the list of currently published articles. The structure of each article is pretty simple. There’s the so called front matter at the very top of the page follow by the content. As you can see, there’s the title of the article, excerpt, date and even the path to the featured image. Featured images are stored in the images directory.

The content is written in markdown. If you’re not familiar with it, now’s the perfect time to learn the basic syntax of this amazing language.

Step 14

Let’s change the title to “This is my first post”. Very easy, right?

Step 15

And let’s change the excerpt and the content as well. When you’re done, save the changes.

Step 16

Go back to GitHub desktop and notice the changes you’ve just made. New content is highlighted in green color while deleted content is red. This is the power of git version control that powers GitHub. To publish the changes, just hit the Commit to master button at the bottom.

Step 17

Finally, you need to push the changes to the origin remote, which is just a fancy name for your GitHub repository sitting in the cloud.

Step 18

Go back to your Netlify account and check your website. In the list of deploys, you should see that the new version of your blog is being built. Netlify automatically reacts to any changes of your GitHub repository and initiates a rebuild of your website so it’s always up-to-date.

Step 19

When you click on the deploy, you’ll see the log of individual steps, and at the very bottom, there’s a message that the site is live.

Step 20

Open your website in the browser. You should see the changes you’ve made to the post. There’s a new title and excerpt.

Step 21

And when you check to content of the post, you’ll see that it’s been updated as well.

6. Create and publish a new post

Creating a new post is extremely simple. All you need is a new file inside the _post directory. Its name starts with the date in YYYY-MM-DD format followed by the desired permalink of the post. So I will create a new file called 2020-09-05-jamstack-is-great-wordpress-alternative.md.

Inside the file, I need to start with the so-called frontmatter, which is basically a list of file properties. Our template expects this specific format of frontmatter which I just copied from the existing post.

For featured image of the post, I will use the jamstack.jpg image which I saved inside the images folder.

Next, I’ll write some text starting with heading and followed by few paragraphs. I will also include a link to external website and an image.

Once I’m happy with the result, I’ll save the changes and run GitHub Desktop where I need to write the summary and commit the changes.

Then, I push commited changes to my GitHub account so Netlify can deploy new version of my website with my new post.

It might take few minutes before a new version is generated and published but when I navigate to my website, I’ll see my new post at the top of the blog.

And when I click the title of the post, I can see the content.

Finally, let’s test the speed of this website.

I think it’s not that bad 🙂

Conclusion

I hope that I’ve been able to demostrate in this article that Jamstack is ideed a viable alternative for WordPress. Not only you can get almost everything except the domain name for free, but your website will probably load much faster when compared to a regular WordPress shared hosting.

Granted, you need to acquire some skills like working with Github and Markdown, and it won’t hurt to learn some frontend development basics as well. But that’s nothing that should stop you and if you’re really on budget, it might be a great opportunity to make some money as well.

If you have 12 hours, let me teach you how to become a full-stack web developer. I recently published my popular Total Web Development Course on Skillshare. If you’re new to Skillshare, you’ll get it for free and on top of that, you’ll gain a Premium Membership with access to over 20.000 classes for free for 14 days. This is a great learning opportunity and the best part is that you can cancel anytime and you won’t be charged anything.

Enroll Now!

Follow me on Medium, Twitter, Facebook and YouTube.

Share:
Jan Zavrel
Written by

Jan Zavrel Follow

Developer, Author, Teacher, Evernote Certified Consultant.