如何使用自定义域名、托管和 SSL 加密创建免费网站?

已发表: 2022-01-07

创建网站是一项重大投资; 您必须为构建网站的每一步付费。

您想为个人或职业发展创建一个免费网站吗? 这是一种使用自定义域名、终身免费托管和完全免费的 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 页面来托管我们的网站。 然后,我们将研究设计 HTML、CSS 和 JavaScript 文件并将其上传到 GitHub 页面的方法。 最终,我们还将为网站启用 SSL 加密,但首先,我们需要注册 Student Developer Pack。

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

注册学生开发包的过程归结为拥有一个大学授予的学生电子邮件地址。 学生电子邮件地址通常以您所在大学的域名结尾,例如 [email protected] 还有其他注册包的方法,但它们需要比使用学生电子邮件更长的审核时间。 如果您准备好学生电子邮件地址,请按以下步骤注册该包:

第 1 步:转到 GitHub 教育并单击登录选项。

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

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

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

第 3 步:当提示“哪个最能描述您的学术状况?”时,请确保选择学生。

第 4 步:现在在必要的方框中填写有关学校名称和使用 GitHub 的目的的详细信息。

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

如果您的应用程序获得 GitHub 的批准,您应该会收到一封关于开发人员包的确认电子邮件。 该过程通常需要几天时间,但在高峰时段时间可能会有很大差异。

如何在没有学生邮箱的情况下申请 GitHub Student Developer Pack?

GitHub 还允许您选择使用有效的学生证或任何其他学术身份证明来申请该包。 唯一需要注意的是漫长的等待时间和更高的拒绝率。 无论如何,以下是通过此方法申请学生包的方法:

第 1 步:按照上述步骤通过您的个人电子邮件创建一个帐户。

第 2 步:现在使用相机选项上传您的学术身份证明,或使用上传按钮将照片直接上传到 GitHub。

第 3 步:接下来,填写所有必要的详细信息,例如学校名称和使用 GitHub 的目的。

第 4 步:提交您的申请。

如何使用 Namecheap 注册您的自定义域?

我假设您已经启动并运行了您的 GitHub 教育帐户。 以下步骤涉及使用 Namecheap 注册您的免费自定义域并通过 GitHub Pages 托管它。 请按照以下步骤注册您的首选域名:

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

您应该会看到一个 Web Dev Kit 和一个 Virtual Event Kit。

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

GitHub 在 .me TLD 上提供为期 1 年的域名注册,您可以通过单击获取访问选项访问该域名。

第 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 中选择了“Massively”,但您可以自由下载和自定义您选择的任何网站设计。

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

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

第 3 步:现在使用 Visual Studio Code 打开提取的文件并选择 index.html 文件。

第 4 步:如果您还没有,请在 Visual Studio Code 中下载并安装“Live Server”扩展。

步骤 5:选择 index.html 文件,单击鼠标右键,然后选择“在 Live Server 中打开”选项。 此选项可让您在浏览器中实时可视化 HTML 文件中的更改。

如何定制您的网站设计?

我不会将超出这一点的过程称为自定义网站的“步骤”。 自定义 HTML 文件完全取决于您的喜好,但这里是我如何从 HTML5 UP 自定义“大规模”设计并将其转换为组合。 您可以选择从中汲取灵感或完全自己定制您的网站。 这是你的选择!

修改标题和段落标签

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

我将标题标签更改为“Samyak Goswami | 技术内容作家”,因为它非常适合我的投资组合。 接下来,我更改了网站的 Intro 部分,上面写着:“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 等的不同图像。 这些是与我们在文章标签中的文章链接的图像。

您可以添加自定义图像并使用这些图像的名称修改索引文件,或者添加图像并将它们命名为类似于默认图像。 为图像提供相同的名称可以使我们免于修改代码和随后的大量时间。

修改后的图像

我建议您校对和修改网站中不重要的其他部分。 这是我使用上面提到的步骤创建的投资组合:samyakgoswami.me。

如何将您的网站代码上传到 GitHub Pages?

在最终对您的网站进行编码和设计之后,是时候将其上传到 GitHub Pages 并使其在 Internet 上上线了。

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

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

第 2 步:您应该会看到一个名为 your_username.github.io 的存储库。 进入这个存储库。

第 3 步:您应该会看到创建自己的文件或将文件上传到 GitHub 存储库的选项。

第 4 步:选择所有五个文件和文件夹; 资产、图像、元素、通用、索引,并将它们拖放到存储库中。

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

第 5 步:导航到 Settings>GitHub Pages 以查看您网站的状态。 您应该会看到提示“您的网站已在 your_custom_domain 上发布”。

您现在可以访问您的网址并自行检查该网站。 请记住,该网站最初上线之前可能需要一些时间。

如何在 GitHub Pages 中启用 SSL 加密?

HTTP 是一种管理您网站上的用户请求的不安全方式。 任何怀有恶意并具有良好技术知识的人都可以拦截用户与您的网站之间的交互。 另一方面,HTTPS 为您的所有访问者提供了更安全的浏览会话。 GitHub Pages 提供免费的 HTTPS 加密,您可以通过以下方式使用它:

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

您应该在窗口末尾看到“Enforce HTTPS”选项。 勾选 Enforce 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 记录,其中 Host 为“www”,Value 为您的 GitHub 用户名 (dot) github (dot) io。

删除以前的 CNAME 记录。 最后,您的 DNS 设置应该有 4 个 A 记录和 1 个 CNAME 记录。

第 4 步:现在转到“设置”部分的 GitHub 页面。 Enforce HTTPS 选项现在应该可用于您的域。

加起来

GitHub 为每个学生提供了创建和管理免费网站的绝佳机会。 尽管您不能使用 GitHub Pages 来托管大量流量负载,但它会为小型静态网站勾选每个复选框。 免费的自定义域名、托管和 SSL 加密使其更加美妙。

现在您可以阅读“如何为您的新网站选择虚拟主机”。

以下是一些页面速度监控工具,可在您的网站出现故障时通知您。