域名配置

相关源文件

• CNAME
• index.html

目的与范围

本文档解释了如何为 free-for-dev 网站配置自定义域名 free-for.dev。它涵盖了域名配置的技术实现，包括 CNAME 文件、GitHub Pages 设置以及这些元素如何协同工作以提供网站。有关整体网站实现和技术架构的信息，请参阅技术架构。

域名配置概述

free-for-dev 项目使用 GitHub Pages 和自定义域名托管其网站。此配置允许项目通过 https://free-for.dev 提供其内容，而不是默认的 GitHub Pages URL。

来源： CNAME1 index.html18

CNAME 文件实现

存储库在根级别包含一个单行 CNAME 文件，该文件指定了自定义域名。

CNAME 文件仅包含一行，其中包含域名。

free-for.dev

此文件指示 GitHub Pages 在指定的域上提供网站，而不是默认的 username.github.io/repository-name URL。

来源： CNAME1

HTML 域名引用

index.html 文件包含对自定义域名的多个引用，主要在用于 SEO 和社交媒体分享的 meta 标签中。

行	元素	描述
18	<meta property="og:url" content="https://free-for.dev">	Facebook Open Graph URL
35	<link rel="icon" href="logo.webp" type="image/gif">	带有相对路径的 Favicon
15, 22, 28	Meta 图片标签	引用 GitHub 原始内容 URL

这些引用确保当网站在社交媒体上分享或被搜索引擎索引时，正确域与内容相关联。

来源： index.html15-28 index.html35

域名配置流程

域名配置涉及两个主要组件：

1. GitHub 存储库配置:

   • 存储库根目录中的 CNAME 文件
   • 存储库中的 GitHub Pages 设置

2. DNS 提供商配置:

   • 指向 GitHub IP 地址的 A 记录
   • www 子域的 CNAME 记录（如果使用）

来源： CNAME1 index.html18

技术实现细节

域名配置与 Docsify 实现协同工作，提供无缝的用户体验。

当用户访问 https://free-for.dev 时：

1. DNS 将域名解析到 GitHub Pages 服务器。
2. GitHub Pages 根据域名识别存储库。
3. index.html 文件加载，初始化 Docsify 框架。
4. Docsify 将 README.md 内容渲染为单页应用程序。

来源： CNAME1 index.html1-77

Meta 标签域名引用

index.html 文件包含各种引用域名和网站 URL 的 meta 标签。这些标签对于正确的搜索引擎索引和社交媒体分享至关重要。

网站使用绝对 URL 分享内容，以确保在内容共享到社交媒体平台时能够正确加载图像和其他资源。

来源： index.html12-28

资源加载和域名实现

index.html 文件使用混合的绝对和相对 URL 来加载资源。

资源类型	URL模式	示例
外部库	CDN URL	//cdn.jsdelivr.net.cn/npm/docsify/themes/vue.css
内部资源	相对路径	logo.webp
GitHub 资源	绝对 GitHub URL	https://raw.githubusercontent.com/ripienaar/free-for-dev/master/logo.webp

此实现确保资源无论用户如何访问网站（通过自定义域名还是直接通过 GitHub）都能正确加载。

来源： index.html31-35 index.html67-69

域名与网站内容的关联

域名配置与网站实现相辅相成，提供了统一的用户体验。

域名配置与内容交付之间的无缝集成，为 free-for-dev 项目带来了专业的形象，同时利用了 GitHub 的免费托管基础设施。

来源： CNAME1 index.html54-64