在 GitHub 页面上创建自定义 404 页面

骑猪看日落 2023-10-14 13:59 12阅读 0赞

### 标题：在 GitHub 页面上创建自定义 404 页面 ###

### 简介： ###

GitHub Pages 提供了一种便捷的方式来展示您的项目、个人网站或作品集。虽然拥有设计良好且功能齐全的页面至关重要，但当访问者遇到不存在的页面时提供用户友好的体验也同样重要。在本文中，我们将引导您完成在 GitHub Pages 上创建自定义 404 页面的过程，确保即使是错误页面也能留下积极的印象。

### 先决条件： ###

在开始之前，请确保您具备以下条件：

一个 GitHub 帐户  
您要在其中托管自定义 404 页面的 GitHub 存储库  
HTML 和 Git 的基本知识  
创建自定义 404 页面的步骤：

### 第 1 步：创建自定义 404 页面 ###

打开文本编辑器或集成开发环境 (IDE)。  
创建一个名为 的新 HTML 文件404.html。这将作为您的自定义 404 页面。  
添加您想要在错误页面上显示的内容。这可能包括消息、其他页面的链接或搜索栏。  
使用 CSS 设置页面样式，404.html使其具有视觉吸引力并与您网站的设计保持一致。

### 第 2 步：将文件上传到您的 GitHub 存储库 ###

在 GitHub 网站上打开您的 GitHub 存储库。  
单击“添加文件”按钮并选择“上传文件”。  
上传您的404.html文件以及任何关联的 CSS 文件或资源。  
或者，.nojekyll在存储库根目录中创建一个文件以防止 Jekyll 处理。

### 第 3 步：提交并推送更改 ###

添加一条提交消息来描述您所做的更改（例如，“添加了自定义 404 页面”）。  
将更改提交到您的首选分支（通常main为 或master）。  
将更改推送到您的 GitHub 存储库。

### 步骤 4：配置 GitHub Pages 设置 ###

在 GitHub 存储库中，导航到“设置”选项卡。  
向下滚动到“GitHub Pages”部分。  
在“源”下拉列表中，选择包含自定义 404 页面的分支（例如main）。  
单击“保存”。

### 第 5 步：验证您的自定义 404 页面 ###

等待几分钟，让 GitHub Pages 更新。  
打开 Web 浏览器并导航到您的 GitHub Pages 网站（通常是https://.github.io/）。  
尝试访问不存在的页面，例如https://.github.io//nonexistent.  
您现在应该会看到显示的自定义 404 页面。

### 结论： ###

在 GitHub Pages 上创建自定义 404 页面可以在访问者遇到错误时提供有用的信息和导航选项，从而增强用户体验。通过执行本文中概述的步骤，您可以轻松创建和部署与您的网站设计和内容一致的自定义 404 页面。这种微小但深思熟虑的接触可以有助于打造一个更加专业和用户友好的 GitHub Pages 网站。