How to Set up a Free Static Site Server with Custom Domain Emails

[Junji Zhi]

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: contact@your_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:

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.

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:

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

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.

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

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.

You would see instructions like:

ssh -i "<your-generated-key>.pem" [e-mail]

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:

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:

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.

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 [e-mail] now!

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 [e-mail] to personal gmail inbox.

However, using Namecheap email forwarding comes with two downsides:

• It doesn't work well with Cloudflare.
• It's only forwarding emails. When you reply, it comes from your personal email, which seems less authentic to your recipient.

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 [e-mail]..compute.amazonaws.com:/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:

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:

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. However, mailgun isn't free any more.

Closing thoughts

In this article, I talk about how I set up a minimal 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 experienced a down time email once, so the site was running ok.

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

Thank you for your read!

[Junji Zhi]

Alternatives

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

They are more or less the same. Goal is to automate deployment, without the need to manage servers.

Less control on the server setup.

[Junji Zhi]

Edits in mind:

• Have more words about her work, and how we work together (front end dev)
• Use linghaolin.com for consistency
• Add more code snippet about the setup (from notes)
• Add more tricky notes about what actually happened
• Think about more titles and write them down

[Junji Zhi]

Readability

• Simplify step names
• Replace setup with set up (verb)
• Use wife instead of partner

[Junji Zhi]

Content purpose

• Drive traffic to her site + her story + tonians.com
• Tutorial for engineering founders who are in the mood for setting up servers
• Focus to use existing free solutions

[Junji Zhi]

Found this article about using gmail (to send as ...)

https://zainrizvi.io/blog/how-to-setup-a-free-custom-domain-email-address/

Update: Yeah, mailgun forwarding is not free any more.

I can refer my post to his post.

Verbiage:

Zain wrote about using mailgun forwarding to integrate with Gmail. However, mailgun isn't free any more, so it's not a viable.