How I Host This Static Site

How I Host This Static Site

Or, Eat Your Heart Out Cloudflare

Author: Chris Talley Date: 2025-02-18 Tags: #Tech, #HowTo, #SelfHost


Introduction

You ever think, I want a website?

Me too, here’s how I finally made it happen for free really cheap. Hopefully this is useful and easy to follow, unlike the guides I found that gave up on the idea of self-hosting by the last paragraph. (Looking at you Cloudflare DynamicDNS). I’m going to organize this in a few sections, starting from the hardware, and ending with port forwarding into the world wide web. Feel free to email me if you have any questions.

Happy Hosting!


Table of Contents


Background

I’ll spare you the boring details, but a “simple”, or static, website consists of a directory of files, served to a client over HTTP(S) (by a web server). This website is an example of a static site. Most sites these days are closer to applications, and consist of many dynamically rendered parts. We’re taking it back to basics today, since most people don’t need all those fancy bells and whistles.

Also, if you’ve ever gotten an ad for Squarespace, that’s an example of the exact kind of company to steer clear of. They charge out the ass for features no one really needs, all in the name of “ease-of-use” (over-complicated bloat). When it comes to website complexity, a general rule of thumb is as follows:

  1. MOST PEOPLE NEED A STATIC SITE, BUT ARE SOLD ON COMPLEX DYNAMIC WEB APPS

  2. SOME PEOPLE NEED COMPLEX DYNAMIC WEB APPS, AND THEY KNOW WHO THEY ARE

Odds are you’re in camp 1, unless this post blows up on HackerNews ;)

This tutorial assumes familiarity with basic command-line concepts and the Linux environment.

WORST CASE COPY PASTE (You trust me, right?)


HOW TO STATIC SITE

Section 1: Hardware

OK so you get it, static site is the move. Now how do you make a web server at home? Aren’t servers those monolithic racks housed in well-ventilated, impregnable data centers?

WRONG

This site is hosted on a Raspberry Pi 4 Model B that fell off the back of a truck. If you’re not this lucky, do the following:

Go on your favorite search engine and paste “raspberry pi 4 model b with case”

Click the neat shopping tab and pick something in your price range. If this is too pricey, look for a model 3B. If you’re balling, try to find a Pi 5 so you can brag about how much cooler yours is in my email inbox.

While you’re at it, make sure to buy or otherwise obtain a microSD card with about 32Gb of storage. Amazon sells two-packs and it’s always nice to have extras. If you wanna get fancy and store stuff on your web server, go ahead and purchase a thicc 256GB or 512GB USB 3.0 Stick.

Key Things to Look for if you Hate Pis

Anything you call a computer will work, just keep in mind your electricity bill, as this will be on all the time

Section 2: Web Server

After selecting your hardware (just get a pi 4b bro), set up a basic OS. I used raspberry pi OS minimal because I’m the best that ever lived at this terminal shit. For you, raspberry pi OS desktop is serviceable. There are a million guides about this, so I will assume you’ve gotten this far. I do suggest following a setup guide for a server though, so you have nice things like SSH and unatttended upgrades.

Alright heres the real meat and potatoes. You got a system ready to configure, just idling away on whatever OS you chose. The first thing you need is a WEB SERVER. Although plenty options exist, I’m going to shill redbean.dev.

This is part of the Cosmopolitan libc project and is pretty dope. I’ll let you do your own research but, basically, you can compile a program in C and the executable runs almost anywhere. That includes x86 AND ARM. If it sounds like magic, it is.

For the smoothest redbean working experience, I suggest downloading the following tools from Cosmo:

zip, unzip, blackholed, lua, sqlite3, redbean

The nice thing about redbean being platform agnostic is that I can work on my site on any computer, and just copy the executable to my pi 4 for hosting. I can even mirror the executable on this site, share it with anyone, and it just werks.

Running this setup is really simple. I asked Duck.ai to generate me an index.html template for a personal website. After editing the template a bit, I ran the following command to bundle the page with Redbean:

Make sure your redbean executable, binary tools, and index.html are in the same working directory

zip redbean index.html

That’s it. Now to run the server:

sudo ./redbean -dvvmbagX -L /var/log/redbean.log -P /var/run/redbean.pid -l 127.0.0.1 -p 1337

This command starts redbean with these settings:

Congrats! You are a winrar! If you open a browser tab (or curl) on your pi and go to 127.0.0.1:1337 you should be greeted by your generated index.html homepage!

You can also use -l 0.0.0.0 as a test address to access your site from any browser in your home LAN. DON’T do this when you’re ready to host to the public.

Section 3: Reverse Proxy

Hold on Chris, you promised me a real website, this is just a locally served HTTP website? wtf dude.

Stay with me brother, what we do next may shock you. Most sites on the public web use HTTPS. The S stands for secure. Website security is a complicated web of trusted certificates and a bunch of bullshit no one cares about. We just wanna host right?

I present to you, Caddy Reverse Proxy. Although Caddy can function as a full web server, we are not using it that way. TBH, I cringe at any millenial shitware that uses emojis throughout it’s official documentation. It always feels like they’re hiding something behind a thin veil of soylent and relatability.

Anyway, all that aside, Caddy does one thing I can’t pass up. AUTOMAGIC HTTPS CERTIFICATION. Once your redbean server is running with the above configuration, try running the following caddy command:

sudo caddy reverse_proxy --to
          :1337

HTTPS defaults to port :443, but you can change this with a ‘–from :####’ added to the command.

Now do a quick reboot on your web server (just unplug the pi and count to 5).

BOOM! You should now be able to visit 127.0.0.1:443 and view your beautiful AI generated homepage in SECURE HTTPS.

Section 4: DynamicDNS

Now we have a locally running web server with an HTTPS reverse proxy. Sounds fancy, but it only took a couple commands. Real websites have domain names, like the one you typed to get here. In order to register your own domain, you need to pay a Domain Name Registrar. I used to use Namecheap, because they give a good first year deal. After a few price increases over the years, I switched to this new one called Porkbun.

Once you have a domain name registered, you need to create an A record + DynamicDNS. Your domain registrar should have documentation on how to do this. You’re going need to know your public IP. Most ISPs rotate IPs for residential connections, so make sure to keep the DynamicDNS record updated periodically. Most registrars have a simple http link that allows you to do this on-demand.

Finally, access the configuration page of your home router. Most of the time you can enter your gateway ip address into a browser and it should load a configuration dashboard. You’re going to want to forward ports 80 and 443 to point towards the internal IP of your webserver.


Configuration Samples

I’m going to throw a bunch of command snippets and configuration files I used for this tutorial here. If you have specific questions just email me.

# Example redbean command
        sudo ./redbean
          -dvvmbagX -L /var/log/redbean.log -P
          /var/run/redbean.pid -l 127.0.0.1 -p 1337
        
        # Example caddy reverse
            proxy command
        sudo caddy
          reverse_proxy --to :1337
# Example /etc/caddy/Caddyfile configuration for a full
            website
        
        www.example.com
          {
         redir
          https://example.com{uri}
        }
        
        example.com
          {
         reverse_proxy
          :1337
        }
    

Conclusion

NOW FOR THE FLOURISH

Attempt to visit your domain on your phone, or link it to a friend.

Congrats on your fully self-hosted website!


References / Further Reading

“If it were not for certain people’s greed for wealth, the highways would be filled with cars powered by the sun, and no one would be starving. Such advances are technologically and physically possible, but apparently not emotionally possible.” ― Dzongsar Jamyang Khyentse