免费网站建设（如何利用GitHub Pages快速构建免费网站）

没有编程，零成本！只需选择一个主题，配置它并添加内容

作者斯蒂芬·维努兹

标题|从东方IC下载的CSDN

制作| CSDN（ID:CSDNews）

创建网站的工作量不应低估。即使你有编程背景，你也可能在互联网上迷路。你从哪里开始

我可以保证，读完这篇文章后，你的收获包括：

首先，让我向你展示我最近建立的网站（https://www.stephenvinouze.com/）我花了很多时间组织和研究关于静态网站生成器的文章。这篇文章总结了我获得的所有信息，并希望向您提供一个完整的指南

接下来，让我们开始

先决条件

刚才我说过，由于GitHub pages（https://pages.github.com/）。

你只需要创建一个GitHub帐户来免费托管你的网站。GitHub可以全权负责版本管理和部署工作。非常方便

你甚至不需要知道HTML或CSS，尽管最好了解它们。GitHub pages使用Jekyll将降价文件转换为HTML，因此您只需关注内容，前提是：

如果这些都可以，让我们看看最激动人心的部分

选择主题

这是本文最重要的部分！你可以慢慢选择最适合你需要的模板

你可以找到很多免费主题。这些主题都有很好的文档记录，可以在任何情况下使用，无论你想创建个人博客还是个人主页。当然，你也可以付费选择付费主题

例如，我的博客选择了mediumish主题。感谢wowthemes免费提供这个优秀的主题

浏览这些主题，点击“实时演示”按钮查看实时预览。找到你想要的

部署网站

假设你已经建立了GitHub帐户。请仔细查看GitHub页面的文档（https://pages.github.com/），您应该构建一个名为uusername的git仓库。github。io.

让我们跳过这些步骤。毕竟，我们选择了主题来跳过这些设置步骤。你不想花一整天的时间根据你选择的模板的GIT仓库建立一个fork。模板页面上应该有一个链接。单击后，您可以创建一个复制的git仓库，您可以在其中写入内容。

试试看！你的网站应该可以使用了！在浏览器中打开新页面并输入URL：http://your_username.github.io/（用你的用户名替换你的_用户名）

如果你有任何问题，可以将你的代码库与我的代码库进行比较

https://github.com/StephenVinouze/stephenvinouze.github.io

准备自己的版本

GitHub将从主分支部署网站。请记住，任何推送到master的更改都会导致站点重新部署，因此在开始之前，我建议您创建一个开发分支。在发展中在合并到master之前，所有更改都不会影响网站的内容。对于developep分支，您可以尝试任何操作，而不必担心破坏网站。测试更改必须查看developep分支的更改将如何影响网站。我们可以在本地部署。打开控制台，在克隆git warehouse的位置输入以下命令：

，然后用浏览器打开此地址：http://localhost:4000/

你可以一直保持这个终端窗口，网站将在你自己的机器上运行，直到你关闭它

配置网站

现在你的网站只是一个空壳。让我们添加一些内容

注意：我建议使用本文作为指南。并非所有主题都有相同的配置。如果你选择的主题与我的不同，我在文章中写的可能不适合你。请仔细阅读主题本身的文档

首先，让我们看一下配置。YML文件，这里有很多神奇的配置。几个参数需要根据自己的需要进行更新

您可以自己配置一些东西，例如：

重新启动Jekyll进程，然后刷新页面以查看修改的效果

我需要提醒您正在更改配置。在处理完YML文件后，必须重新启动Jekyll才能看到效果。对于其他文件的更改，您只需刷新页面

发布文章

现在您可以用自己的文章替换模板上的文章

在开始之前，了解Jekyll的命名约定。所有文章必须：

试试看！In_uu在posts目录中创建一个具有适当名称的文件。然后，刷新浏览器以查看网站上显示的文章。

“如果我的一些文章已在媒体上发布，并希望转换为降价呢？”

需要注意的是，它无法处理gist，因此需要手动提取gist。你只需要右键点击gist中的链接，但不需要提取gist中复杂的链接

与读者互动

许多主题支持论文（https://disqus.com/）。此服务可以向您的网页添加评论区。配置方法如下：

我的网站的Discus配置可以在下面的屏幕截图中看到。在我的配置中。在YML文件中，我将discus值设置为StephenWinuze:

您可能会注意到我的URL不是https://stephenvinouze.github.io.我稍后会解释原因。现在你应该使用你的GitHub URL了。另外，你应该注意，Discus永远不会在本地工作，因为你指定了官方网站的地址。记住，你仍然在修改开发分支。如果您已经提交并推送了已完成的更改（您应该这样做），您的网站将不会被重新部署。如果您想检查Disqs是否正常工作，您必须将开发合并到master中。然后，您可以访问官方网站的URL（网站部署可能需要一些时间）

您应该看到以下评论区：

保留访客

网站的首要任务是保留率。你正在与整个互联网竞争，以便让全世界都能听到你的声音。你怎么能让别人访问你的网站？或者他们为什么留在你的网站上

也许你听说过搜索引擎优化。不幸的是，我不熟悉这个话题。但是你可以找到很多关于这个的文章。有些模板据说是经过SEO优化的。但除了SEO，我不会太依赖这些模板除了邀请访客阅读你未来的文章，你还可以继续关注。有几种机制可以实现这一点。一种方法叫做MailChimp（https://us18.admin.mailchimp.com/）。与Disqs一样，您可以嵌入HTML表单，以便在发布新文章时通知用户。许多主题已经包括MailChimp。方便吗？

然而，MailChimp的配置不是很直观。我花了很多时间试图弄清楚如何使用他们的仪表板。我的主题要求我添加一个指向MailChimp订阅列表的链接。我假设你有相同的要求，所以我将引导你配置它，就像discus一样，你首先需要创建一个帐户，选择一个免费软件包，然后回答一些问题，选择“观众”。右面板上有一个“管理观众”。打开它并单击“注册表单”

选择第一个名为“表单生成器”的项目。在这里你可以收到一份订阅表格。用户单击网站的“订阅”按钮时将看到此页面。您可以进行一些定制

MailChimp允许您修改表单的布局以及希望用户填写的字段。如果你想吓跑用户，请尽量保持表单简洁。一个电子邮件字段就足以将表单连接到网站，只需复制“注册表单URL”中显示的短链接即可。在浏览器中打开它，查看表单的实际外观。您可以将完整的URL复制到项目中以完成此配置

如果您想更深入，可以自定义其他表单。在同一页上，找到顶部的“注册表格”面板。此下拉列表列出了所有访客在通过邮件列表与您交流时可以看到的表格

创意工作由您决定。到目前为止，你的邮件列表订阅应该是有效的。不要忘记将更改合并到主分支以应用它们

跟踪用户

跟踪是用户看不到的工作的一部分，但你不能忽略它

谷歌分析可以帮助你分析用户行为。你可以了解用户如何访问你的网站，以及哪篇文章效果最好。

大多数模板都集成了谷歌分析来跟踪网页浏览。如果没有模板，可以参考本文：

https://desiredpersona.com/google-analytics-jekyll/

你需要指定一个谷歌分析ID。这可能看起来有点无聊，但我们需要重复我们在Discus和MailChimp上所做的。您将被重定向到此页面，在那里可以找到trackingid。可以从下面的ua-691-33112截图中看到。把它复制到你的配置文件中。在YML文件中，它完成了

类似地，不要忘记将更改合并到主文件中。重新部署后，尝试浏览几篇文章。你应该能够在谷歌分析的实时仪表板上看到点击量的增加

好处：自定义域名

到目前为止，你的网站已经建成

你的网站地址是http://your_username.github.io/.但如果有一个更友好的域名就好了。

GitHub pages允许您指定一个自定义域名。对于我的网站，所有访问http://stephenvinouze.github.io/将被重定向到https://www.stephenvinouze.com/虽然我保证网站是免费的，但这一步是个例外。你需要买一个域名

如果你不想花钱，你可以跳过这一步。然而，拥有自己的域名可以让访问者更容易找到你。这是你网站的品牌

如果你想这样做，你需要一个DNS提供商。我选择谷歌域名是因为：

购买域名后，你需要将自定义域名与你的GitHub帐户关联起来。在本文开头提到的编辑git warehouse的同一页上，向下滚动，直到看到这一部分：

用您购买的域名填写“custom domain”字段。我建议选中enforce HTTPS

保存这些设置并进入Google domain的控制台。在DNS部分，将自定义记录替换为您的记录。你可以参考这篇文章（https://medium.com/@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a）。

完成！尝试使用新的URL访问网站

注意，新购买的域名可能需要一天的时间才能访问。我花了大约一个小时的时间

总结

祝贺你，你成功了

我很惊讶通过GitHub页面构建网站是多么容易

但是不要忘记，社区已经为我们开发了这些预先配置好的复杂模板。为了感谢他们的辛勤工作，请在你的网站上注明模板的来源，尤其是当你遇到一个你非常喜欢的免费主题时，这也是支持他们努力的象征

原创：https://medium.com/better-programming/how-to-swiftly-launch-a-free-website-with-github-pages-9be6441fce61

本文由CSDN翻译。请注明转载来源