I use the below stack to set up a free static site server for my wife who owns a custom domain:
- AWS EC2
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.
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:
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.
- Buy domains from Namecheap
- Sign up for AWS and start a free-tier EC2 instance
- Configure the Ubuntu server
- Configure Cloudflare CDN
Let's Encryptfor HTTPS / SSL
- Set up emails with your custom domain
- Deploy site files to EC2
- 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
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 (
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.,
When you have a running instance, you want to connect (via ssh) to it). Right click > Select
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:
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
This is another useful tutorial from Digital Ocean. With
Let's Encrypt, you basically get HTTPS for free.
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!
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.
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 [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:
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
- 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
- Deployment is a bit hassle
- ssh copying generated files in
publicfolder into the server
- ssh copying generated files in
- Email forwarding to gmail
- when you reply, it’s from gmail, not from the personal domain. Zoho is a better option
- 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.
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!
- static site (1) ,
- Github pages (1) ,
- netlify (1) ,
- custom domain (1) ,
- custom domain email (1) ,
- email forwarding (1) ,
- devops (1) ,
- aws ec2 (1) ,
- zoho (1) ,
- ssl (1) ,
- https (1) ,
- cloudflare (1) ,
- namecheap (1)