Custom Domain Setup for Your Website

The ability to use a custom domain is crucial for branding and creating a professional online presence for your website. Each static site hosting platform has its specific configuration method. This document will use GitHub Pages as an example to provide a basic overview of how to set up your custom domain. For more detailed information, please refer to the official GitHub Pages documentation: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site.

Overview

This guide explains how to:

• Configure a Custom Domain using Github Pages
• Set up DNS records at your domain registrar

Configuration Steps (GitHub Pages Example)

Step 1: Configure DNS Records at Your Domain Provider

You need to configure the following DNS records at your domain provider to point your custom domain to GitHub Pages:

1. A Records: Point your root domain (e.g., yourdomain.org) to the IP addresses of GitHub Pages servers, they are:
   • 185.199.108.153
   • 185.199.109.153
   • 185.199.110.153
   • 185.199.111.153
2. CNAME Record: Point your www subdomain (e.g., www.yourdomain.org) to your GitHub Pages domain (e.g., yourusername.github.io).

Step 2: Set Custom Domain in GitHub Pages

1. Navigate to your repository settings: Go to your GitHub repository where your website code is hosted.
2. Open GitHub Pages settings: Click on "Settings," then navigate to the "Pages" section in the sidebar.
3. Enter your custom domain: In the "Custom domain" section, enter your desired custom domain name (e.g., www.yourdomain.org).
4. Save and Check: Click "Save". GitHub Pages will attempt to verify your custom domain settings.

Step 3: Enable HTTPS (Recommended)

In your GitHub Pages settings, check the "Enforce HTTPS" option to enable encryption on your website. This is essential for security and for the smooth operation of some features.

Step 4: Change BASE URL

• Theme Configuration: Depending on your theme, you may need to configure the BASE URL or similar settings to ensure your website works correctly with your custom domain, especially if the page resources load incorrectly.
• Finding the Setting: The exact location of this setting varies depending on the theme or SSG framework.
• If using vitepress themes, the config is usually in config.mts file, look for setting like base: '/'
• If using hugo themes, the config is usually in config.toml file, look for setting like baseURL = "your-domain.org" * If using jekyll themes, the config is usually in _config.yml file, look for setting like baseurl: ""
• Setting a Default Base URL: If your theme doesn't have a dedicated setting for the BASE URL or a similar setting, you should change it to a format like BASE_URL = '/', baseurl: "" or base: '/' to avoid any conflicts.
• Example for VitePress

  import { defineConfig } from 'vitepress';
  
  export default defineConfig({
    base: '/'
  })

Important Considerations

• Propagation Time: DNS changes may take some time to propagate across the internet. It might take a few minutes or hours for your changes to take effect.
• Specific Requirements: Different platforms will have different requirements and UI layouts, always check their specific documentation.
• Domain Provider: You will need access to the DNS settings of your domain provider to create or change these records.
• VpAdmin Settings: After configuring the DNS settings with your domain registrar, you also need to set the same domain in the "Sites Config" on VpAdmin.

Conclusion

By following these steps, you can successfully configure a custom domain for your website hosted on GitHub Pages. Remember to consult the official documentation of your hosting platform for more detailed instructions, especially if you are using a different platform.