How to Set Up Your Website Using Namecheap, DigitalOcean App Platform, and Proton Mail

Setting up a website can seem daunting, but with the right tools and a bit of guidance, you can get your site up and running smoothly. In this post, I’ll walk you through the process of using Namecheap as your domain registrar, DigitalOcean’s App Platform for hosting your website directly from GitHub, and Proton Mail for secure email hosting.

Step 1: Register Your Domain with Namecheap

Why Namecheap?
Namecheap is a popular domain registrar known for its affordability, ease of use, and excellent customer support.

Steps to Register:

Search for Your Domain Name:
Go to Namecheap and use the search bar to check if your desired domain name is available. Once you find an available domain, add it to your cart.
Complete the Purchase:
Follow the checkout process to purchase your domain. Namecheap offers several add-ons, like WHOIS privacy protection, which hides your personal information from public databases. It’s recommended to enable this feature for privacy.
Access Your Dashboard:
After purchasing, log in to your Namecheap account, and you’ll find your new domain listed under the “Domain List” tab.

Step 2: Set Up Hosting with DigitalOcean’s App Platform

Why DigitalOcean App Platform?
DigitalOcean’s App Platform is a fully managed solution that allows you to deploy, manage, and scale applications quickly. It integrates seamlessly with GitHub, making it easy to deploy your website directly from your repository.

Steps to Set Up Hosting:

Create a DigitalOcean Account:
Sign up at DigitalOcean. Once logged in, you’ll be taken to the control panel.
Create a New Project:
In the control panel, create a new project to organize your resources.
Deploy an App:
- Go to the “Apps” section in the DigitalOcean dashboard and click “Launch Your App.”
- Choose “GitHub” as your deployment source and authorize DigitalOcean to access your GitHub account.
- Select the repository that contains your website’s code.
Configure Your App:
- DigitalOcean will automatically detect the type of application based on your code. You can configure the environment settings, specify build commands, and set up environment variables as needed.
- Choose your deployment region and plan. The “Starter” plan is suitable for most small projects and comes with a free tier for static sites.
Deploy Your App:
Click “Deploy” to start the deployment process. DigitalOcean will build and deploy your website from your GitHub repository.

Step 3: Set Up DNS in DigitalOcean

After deploying your app, you need to point your domain to your DigitalOcean App.

Steps to Set Up DNS:

Add Your Domain to DigitalOcean:
In the DigitalOcean control panel, go to the “Networking” section and click “Domains.” Enter your domain name and choose the project associated with your app.
Update DNS Settings:
DigitalOcean will provide you with the necessary DNS records to point your domain to your app. You need to update these records in Namecheap.
- Log in to your Namecheap account, go to “Domain List,” and click “Manage” next to your domain.
- Under the “Nameservers” section, select “Custom DNS” and enter DigitalOcean’s nameservers:
```
ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com
```
- Return to DigitalOcean and add any required “A” or “CNAME” records provided in the DigitalOcean DNS settings to your Namecheap DNS settings.
Wait for Propagation:
DNS changes can take some time to propagate, so your site might not be immediately available at your custom domain.

Step 4: Set Up Email Hosting with Proton Mail

Why Proton Mail?
Proton Mail is a secure and privacy-focused email service. It offers encrypted email and easy integration with custom domains.

Steps to Set Up Email Hosting:

Sign Up for Proton Mail:
Go to Proton Mail and create an account. Proton Mail offers both free and paid plans; the latter allows you to use your custom domain for emails.
Upgrade to a Paid Plan:
To use your custom domain, you’ll need to upgrade to Proton Mail Plus or a higher plan.
Add Your Domain to Proton Mail:
In your Proton Mail account, go to “Settings” > “Domains” and click “Add Domain.” Enter your domain name and follow the instructions to verify it.
Configure DNS in DigitalOcean for Proton Mail:
After adding your domain to Proton Mail, you will be provided with a set of DNS records that need to be configured in DigitalOcean. These records include MX, TXT, and CNAME entries that route your domain’s email to Proton Mail’s servers.

Steps to Configure DNS:

MX Records:
In DigitalOcean’s “Networking” section under your domain, add the following MX records:
- Priority: 10
  Host: @
  Value: mail.protonmail.ch
- Priority: 20
  Host: @
  Value: mailsec.protonmail.ch
TXT Record for SPF:
Add a TXT record to ensure your emails are not marked as spam. The SPF record looks like this:
- Type: TXT
  Host: @
  Value: v=spf1 include:_spf.protonmail.ch mx ~all
TXT Record for DKIM:
Proton Mail will also provide you with a DKIM record, which is used to authenticate your emails:
- Type: TXT
  Host: protonmail._domainkey
  Value: (Provided by Proton Mail)
CNAME Record for DMARC:
Optionally, set up a CNAME record for DMARC, which provides additional protection against email spoofing:
- Type: CNAME
  Host: email
  Value: protonmail.ch

Create Email Addresses:
After verifying your domain, you can create custom email addresses like yourname@yourdomain.com within Proton Mail.

Final Steps: Securing and Launching Your Website

1. Set Up SSL:
SSL certificates encrypt data between your website and visitors. DigitalOcean’s App Platform provides free automatic SSL certificates, so there’s no need to manually set this up.

2. Monitor and Update Your Site:
With your site deployed on DigitalOcean’s App Platform, you can easily push updates through GitHub. Whenever you push changes to your repository, your site will automatically redeploy.

3. Test Everything:
Visit your domain in a browser to see if your website is live. Also, test your email setup by sending and receiving emails through Proton Mail.

Conclusion

By following these steps, you’ve successfully set up a website using Namecheap for your domain, DigitalOcean’s App Platform for hosting, and Proton Mail for email. This setup provides a streamlined, scalable, and secure way to manage your online presence. Whether you’re starting a blog, an online store, or a portfolio, this guide provides a solid foundation for your web presence.

Last edited Feb 16