如何使用自定义域名、托管和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 pages。最后,我们还将为网站启用ssl加密,但首先,我们需要注册学生开发者包。

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

注册学生开发者包的过程取决于是否拥有大学授予的学生电子邮件地址。学生电子邮件地址通常以您的大学域名结尾,例如,[email protected]。还有其他注册包的方法,但它们需要比使用学生电子邮件更长的审查时间。如果您已经准备好学生电子邮件地址,请按照以下步骤注册包:

第1步:转到github教育网站并点击登录选项。

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

在登录窗口中点击创建账户选项。

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

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

步骤4:现在,填写有关您学校名称和使用github的目的的必要信息。

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

如果您的申请得到github的批准,您应该会收到一封关于开发者包的确认电子邮件。该过程通常需要几天时间,但在高峰期间可能会有显著的变化。

如何申请github学生开发者包(不使用学生电子邮件)?

github还提供了使用有效学生身份证或任何其他学术状况证明申请包的选项。唯一的问题是等待时间较长,拒绝率较高。无论如何,以下是您可以通过此方法申请学生包的方法:

步骤1:按照上述步骤使用个人电子邮件创建帐户。

步骤2:现在使用相机选项上传您的学术状况证明,或直接使用上传按钮将照片上传到github。

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

步骤4:提交您的申请。

如何使用namecheap注册自定义域名?

假设您已经成功创建了github教育账户。以下步骤涉及使用namecheap注册您的免费自定义域名,并通过github pages进行托管。按照以下步骤注册您首选的域名:

步骤1:登录您的github教育账户并转到“benefits”部分。

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

步骤2:转到虚拟事件工具包,向下滚动找到namecheap。

github提供了1年的.me顶级域名注册,您可以通过点击“获取访问权限”来访问。

步骤3:以下窗口将要求您授权namecheap连接到您的github帐户。授权namecheap并继续下一步。

成功授权后,您应该会看到一个提示说:“我们已成功验证您与github的学生包”

步骤4:通过搜索栏找到您首选的域名,然后点击“查找”

您应该会在下一个屏幕上看到域名的可用性。如果您的域名可用,您可以免费购买。

步骤5:使用github教育邮箱地址结账,并在进行过程时选择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的文件,以及在提取的文件夹中的assets和images文件夹。

步骤3:现在使用visual studio code打开提取的文件,并选择index.html文件。

步骤4:如果您尚未安装,请下载并安装visual studio code的“live server”扩展程序。

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

如何自定义您的网站设计?

我不会将此过程称为自定义网站的“步骤”。自定义html文件完全取决于您的偏好,但是这里是我如何自定义html5 up的“massively”设计并将其转换为一个作品集的方法。您可以选择从中获得灵感,或完全自己定制您的网站。选择权在您手中!

修改标题和段落标签

在开始我的自定义过程时,我更改了标题标签“massively”。在浏览器选项卡中打开html文件时,html文件的标题标签将决定其名称。massively的默认标题应为“massively by html5 up”,我建议将其更改为与您的网站相符的内容。

我将标题标签更改为“samyak goswami | tech content writer”,因为它非常适合我的作品集。接下来,我更改了网站的介绍部分,原来是“这是massively”(包含在h1标签中),我将其改为“samyak的作品集”,原因是显而易见的。随后,我修改了段落标签中的文本,改为“a showcase of my projects and my abilities.”

在索引文件中的导航(nav)部分,我省略了列表标签中的三个导航按钮中的两个。我想要创建一个单页面网站,所有详细信息都在一个页面上,但您可以根据自己的选择自由修改导航按钮的数量。

后来,我将导航按钮上的“这是massively”文本更改为“我的文章”。

修改社交媒体链接和图标

您还必须在实时服务器上查看各种社交媒体图标,如twitter、facebook、instagram和github。我决定省略twitter和facebook,仅保留instagram和linkedin供我的使用。

您可以通过转到导航(nav)部分并滚动到其中包含twitter、instagram和更多内容的列表标签来修改社交媒体图标及其链接。

请注意,这些社交媒体图标没有附加链接,因为href标签为空白。您可以将“#”替换为您首选的链接以添加到href标签中。

修改首页内容

首先,我更改了h2标签,并将其改为“我的名字是samyak goswami”,随后将段落标签更改为“我是一个技术爱好者…”。我建议您使用与首页内容和解释相匹配的内容更改h2标签。

现在我们要进行的是此自定义的最关键部分;修改文章磁贴的内容。

要做到这一点,请转到索引文件中的posts部分,您会看到多个被article标签包含的代码片段。您可以通过修改href部分来为您的故事添加链接,就像我们在添加社交媒体图标链接时所做的那样。

之后,您可以通过修改h2标签内的内容来更改文章的名称。您还可以使用段落标签为您的文章添加描述。

通过为所有文章添加链接、更改名称和添加描述,重复此过程。

向您的网站添加图片

您可能已经注意到预览与html5 up网站上的图片非常不同。这是由于可定制文件中的平面和单调照片导致的。让我们通过向其添加自定义图片来为我们的网站增加一些色彩。

原始图片

要这样做,请导航到您先前提取“massively”压缩文件的文件夹。打开提取的文件夹并转到images文件夹。您会看到不同的图片,命名为bg、pic01、pic02等。这些是与我们在article标签中链接的图片。

您可以添加自定义图片并修改索引文件以使用这些图片的名称,或者添加图片并将其命名为与默认图片相似的名称。给图片命名相同的名称可以避免我们修改代码和节省大量时间。

修改后的图片

我建议您校对和修改网站的其他不重要部分。

在最终编码和设计您的网站之后,是时候将其上传到github pages并在互联网上发布了。

以下是如何将您的网站上传到github pages:

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

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

步骤3:您应该看到一个选项,可以创建自己的文件或将文件上传到github存储库。

步骤4:选择所有五个文件和文件夹:assets、images、elements、generic、index,然后将它们拖放到存储库中。

文件上传完成后,提交代码并等待github处理你的文件。

步骤5:导航到设置>github pages查看你的网站的状态。你应该会看到提示“你的网站已发布在你的自定义域名下。”

你现在可以访问你的网址并自行检查网站。请记住,网站在刚开始发布之前可能需要一些时间。

如何在github pages中启用ssl加密?

http是一种不安全的管理用户请求的方式。任何有恶意意图和丰富的技术知识的人都可以拦截用户和你的网站之间的交互。另一方面,https为你的所有访问者提供了更安全的浏览会话。github pages提供免费的https加密,以下是如何使用它:

在存储库的“pages”部分滚动查看。

你应该会在窗口的末尾看到“强制https”选项。只要勾选“强制https”复选框,ssl加密就会立即生效。

如果你发现你的域名的“强制https”选项不可用,你可以按照以下步骤启用ssl加密:

步骤1:登录你的namecheap帐户并转到“域名列表”部分。

步骤2:现在导航到“管理域名”,然后进入“高级dns”部分。

你应该会看到一些现有的cname和a记录。

使用主机名为“@”和ip地址为“185.199.108.153”添加以下a记录。下一个记录的主机名为“@”,ip地址为“185.199.109.153”。

一直添加到ip地址为“185.199.111.153”的四个a记录为止。

删除所有以前的a记录。

步骤3:接下来,添加一个cname记录,主机为“www”,值为你的github用户名(dot)github(dot)io。

删除以前的cname记录。最后,你的dns设置应该有4个a记录和1个cname记录。

步骤4:现在转到设置部分的github页面。现在你的域名应该有“强制https”选项可用。

总结 👈

github为每个学生提供了一个绝佳的机会来创建一个免费的网站并进行管理。虽然你不能使用github pages来托管大量的流量,但对于小规模的静态网站,它符合所有要求。赠送的自定义域名、托管和ssl加密使其更加美妙。

现在你可以阅读“如何为你的新网站选择一个web主机。”

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

类似文章