如何创建一个具有自定义域名、托管和 SSL 加密的免费网站？

创建网站需要大量投资。您必须为建立网站的每一步付费。

想要为您的个人或职业发展创建一个免费网站吗？以下是如何使用自定义域名、永久免费托管和完全免费的 SSL 加密来设计您的下一个网站。让我向您介绍一下。唷！我还能要求什么？

拥有一个网站可以大大提高您的增长率也就不足为奇了，如今它更多地是一种投资而不是一种奢侈品。这不仅适用于企业，个人也可以通过他们的个人网站受益匪浅。

注册您的域名、托管您的网站内容、构建您的网站、启用 SSL 加密，并准备好掏空您的口袋。更令人痛苦的是，其中一些费用是经常性的和永久性的。

如果我告诉您，您可以在免费执行上述所有重要网站建设步骤的同时创建一个免费网站，您会觉得这似乎很不可思议，但如果您是一名学生，所有这些事情都可以免费完成。自由的。

如果您熟悉 GitHub，您可能也了解 GitHub Pages。您可以免费使用每个 GitHub 帐户附带的服务。 GitHub Pages 允许任何人创建和托管免费网站，但有一个很大的警告。这些免费网站的域名基本都是以github.io结尾，破坏了网站的专业性。

什么是 GitHub 学生开发者包？

很少有人认真对待网站，拥有不必要的长域名从来都不是一个好主意。但！我不会在这里讨论 GitHub Pages 的优点和注意事项。我们向您承诺提供一种使用自定义域名创建免费网站的方法。方法如下。

GitHub 为所有注册学位或文凭课程的学生提供了利用包含有用在线工具的令人惊叹的工具包（称为 GitHub 学生开发者包）的机会。该包包括专业版订阅以及 Canva、Namecheap、Microsoft Azure、Discord、Name.com 和 StreamYard 等流行工具的惊人折扣。

在本文中，您将使用 Namecheap 注册免费的自定义域并使用 GitHub Pages 托管您的网站。接下来，我们将了解如何设计 HTML、CSS 和 JavaScript 文件并将其上传到 GitHub 页面。最终，我们还将为我们的网站启用 SSL 加密，但首先您需要注册学生开发包。

如何申请 GitHub 学生开发者包？

注册学生开发包的过程归结为获取您的大学分配给您的学生电子邮件地址。学生电子邮件地址通常以大学域名结尾（例如imastudent@mywvm.wvm.edu）。还有其他方法可以注册包，但它们比使用学生电子邮件需要更多的审核时间。如果您有学生的电子邮件地址，您可以通过以下方式注册该包：

第1步：进入GitHub教育并点击“登录”选项。

如果您已经拥有该包，则可以使用您的凭据登录。否则，请按照以下步骤操作。

单击“登录”窗口中的“创建帐户”选项。

第 2 步：接下来，使用您的学生电子邮件地址注册并创建一个帐户。

第 3 步：当提示“什么最能描述您的学术状况？”时，请务必选择“学生”。

第 4 步：接下来，在必填框中输入您的学校名称以及有关如何使用 GitHub 的详细信息。

第 5 步：最后，使用“提交信息”选项提交您的申请。

一旦您的申请获得 GitHub 批准，您将收到一封有关您的开发者包的确认电子邮件。此过程通常需要几天的时间，但在高峰时段时间可能会有很大差异。

如何在不使用学生电子邮件地址的情况下申请 GitHub 学生开发者包？

GitHub 还允许您选择使用有效的学生证或其他学术状况证明来领取包。唯一需要注意的是等待时间长和拒绝率高。无论如何，以下是如何通过这种方式申请学生包：

第 1 步：按照上述步骤使用您的个人电子邮件创建一个帐户。

第 2 步：接下来，使用相机选项上传您的教育证书，或使用“上传”按钮将您的照片直接上传到 GitHub。

第 3 步：接下来，输入所有必需的详细信息，包括您的学校名称以及您将使用 GitHub 的用途。

第 4 步：提交您的申请。

如何使用 Namecheap 注册自定义域？

我希望您有一个 GitHub Education 帐户并正在运行。下一步是使用 Namecheap 注册免费的自定义域并通过 GitHub Pages 托管它。请按照以下步骤注册您所需的域名。

第 1 步：登录您的 GitHub Education 帐户并转到“福利”部分。

您应该会看到 Web 开发工具包和虚拟事件工具包。

第 2 步：转到 Virtual Event Kit 并向下滚动以找到 Namecheap。

GitHub 提供一年的 .me TLD 域名注册服务。可以通过单击“获取访问权限”选项进行访问。

第 3 步：下一个窗口将要求您批准从 Namecheap 到您的 GitHub 帐户的连接请求。授权Namecheap并继续下一步。

如果身份验证成功，您将看到一条提示：“您已使用 GitHub 成功验证了您的学生包。”

步骤 4：从搜索栏中找到您所需的域名，然后单击“搜索”。

下一个屏幕应显示可用的域名。如果域名可用，您可以继续免费购买。

第 5 步：使用您的 GitHub Education 电子邮件地址查看并选择 GitHub Pages 作为您的托管方法，同时继续。

成功注册自定义域名并选择 GitHub Pages 作为托管后，Namecheap 将自动在您的 GitHub 帐户中创建存储库。该存储库完全是空的，仅包含一个 README.md 文件。

要访问此存储库，请登录您的 GitHub 帐户并单击“您的存储库”部分。 GitHub Pages 不为您的网站提供可视化工具或预构建主题。您必须手动对整个网站进行编码，并将相关文件上传到新创建的 GitHub 存储库。

如何创建免费网站并将其托管在 GitHub Pages 上？

如上所述，您需要创建与您的网站相关的所有 HTML、CSS 和 JavaScript 文件。如果您对 Web 开发感兴趣并且知道如何编写代码，您可以将文件上传到 GitHub 存储库并运行您的网站。您可以向下滚动到本文中有关将网站代码上传到 GitHub Pages 的部分。

但即使您对 Web 开发知之甚少甚至一无所知，我们也能满足您的需求。您可以按照以下步骤使用基本 HTML 设计您自己的网站。

第 1 步：转到HTML5 UP并滚动到您喜欢的网站设计。您可以从任何平台选择其他预构建的主题。我们在这里选择“大规模”HTML5 UP，但您可以自由下载并自定义您选择的网站设计。

第 2 步：解压下载的您最喜欢的网站设计的 zip 文件。

在提取的文件夹中，您应该看到名为 index.html 和 generic.html 的文件，以及资产、图像等文件夹。

步骤 3：使用 Visual Studio Code 打开提取的文件并选择 index.html 文件。

步骤 4：如果您尚未下载“Live Server”扩展，请将其安装在 Visual Studio Code 中。

第5步：选择index.html文件，单击鼠标右键并选择“在Live Server上打开”选项。此选项允许您在浏览器中实时可视化 HTML 文件的更改。

如何定制我的网站设计？

我们不会将此时此后的过程称为自定义您的网站的“步骤”。自定义 HTML 文件完全取决于您的喜好，但您可以通过以下方式“大规模”自定义 HTML5 UP 设计并将其转变为作品集。从这里获取灵感，或者完全自己定制网站。选择权在你！

更改标题和段落标签

我开始定制过程并将标题标签更改为“Massively”。 HTML 文件的标题标签决定了在浏览器选项卡中打开时的名称。 Massively 的默认标题应该是“Massively by HTML5 UP”。我们建议将标题更改为与您的网站类似的标题。

标题标签已更改为“Samyak Goswami | Samyak Goswami”。科技内容作家”非常适合我的投资组合。接下来，出于显而易见的原因，我将网站的介绍部分从“This is Massively”（包含在 H1 标签中）更改为“Samyak 的作品集”。然后，我将段落标签中的下面的文本更改为“展示我的项目和我的能力”。

我移至索引文件的导航 (Nav) 部分，并省略了 List 标记中三个导航按钮中的两个。我想创建一个单页网站，在一页上包含所有详细信息，但我可以根据自己的喜好随意更改导航按钮的数量。

然后，我将导航按钮文本从“This is Massively”更改为“我的文章”。

更改社交媒体链接和图标

您还应该检查实时服务器上的各种社交媒体图标，例如 Twitter、Facebook、Instagram 和 GitHub。对于我的用例，我决定省略 Twitter 和 Facebook，保留 Instagram 和 LinkedIn。

要更改社交媒体图标及其链接，请转到导航 (Nav) 部分并滚动到提及 Twitter、Instagram 等的标签列表。

请注意，这些社交媒体图标没有附加链接，因为 href 标签留空。您可以通过将“#”替换为所需的链接来将链接添加到 href 标记。

首页内容变更

首先，我将 H2 标签更改为“我的名字是 Samyak Goswami”，然后将段落标签更改为“我是技术爱好者……”。我们建议更改 H2 标签以匹配主页的内容和描述它的段落标签。

我们目前正在找出此定制中最重要的部分。更改文章图块的内容。

为此，请转到索引文件的“帖子”部分，您应该会看到“文章”标记中包含的几个代码片段。就像添加社交媒体图标的链接一样，您可以通过更改 href 部分来添加故事的链接。

稍后，您可以通过更改 H2 标签内的内容来重命名文章。您还可以使用段落标签向文章添加描述。

通过添加链接、重命名链接和添加说明，对每篇文章重复这些步骤。

将图像添加到您的网站

您一定已经注意到，预览看起来与 HTML5 UP 网站上的图像有很大不同。这是由于可定制文件中的飞机和平淡照片造成的。通过添加自定义图像来为您的网站增添趣味。

为此，请导航到您之前解压“Massively”zip 文件的文件夹。打开提取的文件夹并导航到“图像”文件夹。您应该看到名称为 bg、pic01、pic02 等的不同图像。这些是链接到带有文章标签的文章的图像。

您可以添加自定义图像并使用这些图像的名称来修改索引文件，也可以添加图像并以与默认图像类似的方式命名它们。通过以相同的方式命名图像，您无需更改代码，这将为您节省大量时间。

我们建议对您网站的其他非必要部分进行校对和更改。

一旦您最终完成网站的编码和设计，请将其上传到 GitHub Pages 并在互联网上发布。

以下是将您的网站上传到 GitHub Pages 的方法。

第1步：登录您的GitHub帐户并转到“我的存储库”部分。

第 2 步：您应该会看到一个名为 your_username.github.io 的存储库。导航到此存储库。

第 3 步：您可以选择创建自己的文件或将文件上传到 GitHub 存储库。

步骤 4：选择所有五个文件和文件夹。创建资产、图像、元素、泛型、索引，并将它们拖放到您的存储库中。

文件上传后，提交代码并等待 GitHub 处理您的文件。

第 5 步：转到“设置”>“GitHub Pages”检查网站的状态。您将看到一条提示：“您的网站已在 your_custom_domain 上发布。”

您现在可以访问该网址并亲自查看该网站。请注意，您的网站最初上线可能需要一些时间。

如何在 GitHub Pages 上启用 SSL 加密？

HTTP 是一种不安全的管理网站上用户请求的方式。任何有恶意且具有扎实技术知识的人都可以拦截用户和网站之间的通信。另一方面，HTTPS 为所有访问者提供更安全的浏览会话。 GitHub Pages 提供免费的 HTTPS 加密，以下是如何利用它。

滚动到存储库的页面部分。

在窗口末尾，您将看到“强制 HTTPS”选项。选择强制 HTTPS 复选框以立即启用 SSL 加密。

如果“强制 HTTPS”选项不适用于您的域，您可以使用以下步骤启用 SSL 加密。

第 1 步：登录您的 Namecheap 帐户并转到“域名列表”部分。

步骤 2：转至管理域，然后转至高级 DNS 部分。

您应该会看到一些现有的 CNAME 和 A 记录。

添加以下 A 记录，主机为“@”，IP 地址为“185.199.108.153”。接下来是主机名“@”和 IP 地址“185.199.109.153”。

跟随趋势，直到有 4 条 A 记录，直至 IP 地址 185.199.111.153。

删除所有以前的 A 记录。

步骤 3：接下来，添加一条 CNAME 记录，主机为“www”，值为 GitHub 用户名（点）github（点）io。

删除之前的CNAME记录。最终，您的 DNS 配置将需要 4 个 A 记录和 1 个 CNAME 记录。

第 4 步：接下来，转到“设置”部分中的 GitHub 页面。您的域现在可以使用强制 HTTPS 的选项。

总结👈

GitHub 为所有学生提供了创建和管理免费网站的绝佳机会。尽管您无法使用 GitHub Pages 托管大流量负载，但它会检查小型静态网站的所有复选框。通过免费的自定义域名、托管和 SSL 加密获得更多便利。

请阅读“如何为您的新网站选择网络托管服务商”。

这里有一些页面速度监控工具，可以在您的网站关闭时通知您。