TL;DR

I use the below stack to set up a free static site server for my wife who owns a custom domain:

  • AWS EC2
  • Apache
  • Cloudflare
  • UptimeRobot
  • Zoho

Who is this post for?

If you would like to tinker, you can follow the steps and have a site that you have total control over. From there, you can repurpose the server to host your apps instead of a static site.

This setup is not for everyone. It requires you to be comfortable with managing AWS EC2 servers. For hassle-free options, consider Github Pages or Netlify (See the alternatives section)

What will you achieve with this tutorial?

  • A personal static site with HTTPS, served over Cloudflare CDN
  • Manage emails with your own domains: [email protected]_domain.com
  • Set up site monitoring and receive email notifications if the site is down
  • Have full control over the stack without being limited by the hosting platform

You can take a peek at a screenshot of her site:

image

Why did I do this?

My wife taught herself coding and became a front end developer. She needed a personal page to showcase her portfolios and build her own personal brands.

I chose to use this particular stack because:

  • I want to leverage existing services for hosting site. Being frugal is a must for me.
  • I have some DevOps experience and is comfortable with managing and configuring servers.
  • It’s a fun experience to apply what I learned at work and set up a server for personal use.

Also, after going through the steps, I would be able to set up a server that are ready to deploy a built site. In a sense, the server is like a hand-off point from a back-end to a front-end developer.

Steps

Overview

  1. Buy domains from Namecheap
  2. Sign up for AWS and start a free-tier EC2 instance
  3. Configure the Ubuntu server
  4. Configure Cloudflare CDN
  5. Configure Let's Encrypt for HTTPS / SSL
  6. Set up emails with your custom domain
  7. Deploy site files to EC2
  8. Set up UptimeRobot for site monitoring

Step 1. Buy domains from Namecheap

Sorry, the title lies. This step costs $$ and I wish they could give domains for free🤷‍♂️

I choose to use Namecheap because they are usually cheaper than other options (with WhoIs privacy guard) and the purchase process is smooth overall.

image

Using Namecheap also comes with another benefits: Email forwarding. I’m going to talk about it in the following section.

Step 2. Sign up for AWS and start a free-tier EC2 instance (or AWS Activate)

If you register as a new user for AWS, you are often eligible for the free tier EC2. At least for the first year, you won’t need to pay for the EC2 server.

After one year, if you are serious about running the business, you can apply for AWS Activate. It is a program for bootstrapped startups, and most indie makers fall under this category.

My application recently got approved and I received $1,000 credits, which are probably enough for running EC2 for a while:

image

After you sign up, log in AWS and select EC2 tab in the Services dropdown.

image

Next is to launch a new instance. Generally, we should select the latest Linux server as I’m mostly familiar with it. In my case, I pick Ubuntu 18.04.

image

Next is to pick free tier (t2.micro) instance:

image

From here, you can follow the guide to finish launching the instance.

⚠️ At some point, it would guide you to generate a key pair. Download it and move it to a safe folder., e.g., ~/.ssh⚠️

When you have a running instance, you want to connect (via ssh) to it). Right click > Select Connect.

image

You would see instructions like:

ssh -i "<your-generated-key>.pem" [email protected]

Step 3. Follow Digital Ocean tutorials to configure the Ubuntu server

I follow this tutorial to configure Apache HTTP server.

BTW, I found Digital Ocean has great tutorials. They are clear and to the point.

Step 4. Configure Cloudflare CDN

Cloudflare offers free plan for site owners. It also comes with additional performance and security features, like load balancing, HTTP/2, and DDoS protection.

After you sign up, you need to configure Namecheap to use Custom DNS and point them to Cloudflare:

image

In Cloudflare, add a A record and set is as the public IP of the AWS EC2 server and add a CNAME record to the EC2 CNAME.

My wife’s site linghaolin.com is configured like:

image

Step 5. Follow Digital Ocean tutorials to configure Let's Encrypt

This is another useful tutorial from Digital Ocean. With Let's Encrypt, you basically get HTTPS for free.

image

Step 6. Set up emails with custom domains

Option No. 1: Zoho mail

Zoho offers free email service for custom domains. Actually, it comes an entire office suite more than an email client.

They also have a tutorial you can follow.

After you set it up, the email client looks like below. And my wife can receive and send emails via [email protected] now!

image

Option No. 2: Namecheap email forwarding

Namecheap actually provides free email forwarding service.

The setting is simple:

  • Navigate to the Advanced DNS tab select email forwarding
  • Go back to the Domain tab and add aliases.

As example, this is my tonians.com domain setting. It it will forward [email protected] to personal gmail inbox.

image

However, using Namecheap email forwarding comes with two downsides:

Overall, I prefer the Zoho solution as it is more long term.

Step 7. Deploy site files to the server

Option 1: ssh

I use the minimal solution: scp. My wife is building a React app, when she finishes the build, I simply scp all the build files to the server. It’s a command like below

scp -i "<your-key-pair>.pem" -r /<path>/to/project/my-app/build [email protected]:/var/www/linghaolin.com/

Option 2: Filezilla

You can also use Filezilla, which can transfer files over (S)FTP. When you are done with your build, you can drag and draw the build folder to your server. It also remembers your settings so you only need to set it up once and reuse the same settings later on.

My settings for her site was like this:

image

Step 8. Set up UptimeRobot for site monitoring

If your site is down, you want to know. It’s mainly not to embarrass myself when I open my url to friends or clients but find out it’s down.

I like the minimalist solution: Send me an email when the site is down. Then I decide if I should do something about it based on my availability at the time.

I use UptimeRobot for this purpose. They have free plan for a few sites. My setup is like:

image

It doesn’t happen that often, but EC2 server could go down for various reasons.

When I receive downtime emails, most of the time the solution is to restart apache server:

sudo systemctl restart apache2

or even restart EC2 instance with the AWS console.

Within the past year, I may have done it only once. So this is rare for static site servers.

Pros & Cons of this approach

Pros

  • Complete control of her domains
  • Complete control over the html / CSS, or use whatever framework she’s familiar
  • Learn a little bit about deployment and server management

Cons

  • Deployment is a bit hassle
    • ssh copying generated files in public folder into the server
  • Email forwarding to gmail
    • when you reply, it’s from gmail, not from the personal domain. Zoho is a better option

Alternatives

  • Github Pages
  • GitLab Pages
  • Netlify (based on Github Repo)

They are more or less the same. You push code to a repo and they automatically finish the deployment and manage the servers for you.

Their support for hosting static sites is quite good. Actually my blog is hosted as a Github Pages app. All I need to worry about is type down the articles in markdown files and push to the repo once done.

For the email hosting solution, Zain wrote about using Mailgun forwarding to integrate with Gmail for custom domains. But mailgun isn’t free any more.

Closing thoughts

This post talks about how I set up a HTTP server for my wife’s personal site with custom domain emails. The stack I use is AWS EC2 + Apache + Cloudflare + UptimeRobot + Zoho. Ever since I set it up for the past year, I received down time emails only once, so the site was running ok most of the time.

By going through such a setup, you have full control over your servers without relying on 3rd parties like Github or Gitlab. During the process, you can practice your server configuration skills and DevOps tools like UptimeRobot.

Thank you for your read!


Email Newsletter

I write about code and entrepreneurship. Sign up and get my updates straight to your inbox!



Junji Zhi

Senior Software Engineer.