王剑编程网

分享专业编程知识与实战技巧

如何利用GitHub Pages快速构建免费网站?

无需编程,零成本!只需挑选一个主题,经过配置,加入内容即可。

作者 | Stephen Vinouze

译者 | 弯月,责编 | 郭芮

头图 | CSDN 下载自东方IC

出品 | CSDN(ID:CSDNnews)

以下为译文:

创建一个网站的工作量不容小觑。即便你拥有编程背景,也有可能在网络上迷失方向,究竟从何处下手呢?

我可以在此承诺,读完本文,你的收获包括:

  • 一个免费的优雅网站,甚至无需托管。

  • 一个评论框,让读者与你互动。

  • 一个邮件订阅列表,用于通知用户你新发布的内容。

  • 使用分析工具来跟踪读者的行为。

  • 以及其他高级的主题。

首先给你看一下我最近构建的网站(
https://www.stephenvinouze.com/),很酷吧?

我花了大量时间整理和研究有关静态网站生成器的文章。本文汇总了我获取的所有信息,希望能为你呈现一份完整的指南。

下面,我们开始吧!

前提条件

刚才我曾说构建新网站不需要花费1分钱,这要感谢GitHub Pages(https://pages.github.com/)。

你只需创建一个GitHub账号,即可免费托管你的网站。版本管理与部署的工作可以全权委托给Github。非常方便!

你甚至不需要懂得HTML或CSS,尽管了解这些更好。GitHub Pages使用Jekyll将Markdown文件转换成HTML,所以你只需要关注内容即可。

所以前提条件是:

  1. 拥有GitHub账号。

  2. 了解Git的基本知识。不需要是专家,甚至可以直接在GitHub的Web界面上操作。

  3. 了解怎样书写Markdown,通过官方的速查表(
    https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)分分钟就能学会。

如果这些都没问题,那么我们就来看看最激动人心的部分吧!

选择主题

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

你可以找到一大堆免费的主题。这些主题都有详尽的文档,适用于各种情况,不论你想建立个人博客,还是建立个人主页。当然你也可以花钱选择付费主题。

例如,我的博客选择了Mediumish主题。感谢WowThemes免费提供了这个优秀的主题。

浏览这些主题,点击“Live Demo”按钮可以看到实时的预览。找到你想要的那个!

部署网站

假设你已经建好了GitHub账号。仔细看看GitHub Pages的文档就会知道(https://pages.github.com/),你应该建立一个Git仓库,取名为your_username.github.io。

我们跳过这些设置的步骤。毕竟,我们选择主题的目的就是为了跳过这些设置步骤。你可不想在设置上花费一整天。

根据你选择的模板的Git仓库建立分叉。模板页面上应该有一个链接,点击后就能创建一个复制的Git仓库,你可以在这个仓库中写入内容。

分叉之后,你需要将这个仓库的名字改成your_username.github.io。点击“Settings”,然后重命名仓库:

试试看!你的网站应该已经可以使用了!在浏览器中打开一个新的页面,输入URL:
http://your_username.github.io/ (将your_username替换为你的用户名)。

如果还有疑问,可以比较一下你和我的代码库。

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

准备自己的版本

GitHub会从master分支部署网站。记住,推送到master上的任何修改都会导致网站重新部署。

所以在开始之前,我建议你先创建一个develop分支。在将develop合并到master之前,所有的改变都不会影响网站的内容。

使用develop分支,你可以尝试任何东西而不用担心把网站搞坏。

测试改动

你肯定想看看develop分支的改动会对网站产生什么影响。我们可以在本地部署。打开控制台,在你克隆git仓库的地方输入下列命令:

$ bundle exec jekyll serve -- watch

然后用浏览器打开这个地址:http://localhost:4000/

你可以一直保留这个终端窗口,网站就会在你自己的机器上一直运行,直到你关闭为止。

配置网站

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

注意:我建议把这篇文章当作一个指南。并非所有主题的配置都一样。如果你选的主题和我选的不一样,那么我在文章里写的并不一定适合你。请仔细阅读主题本身的文档。

首先,我们来看看_config.yml文件,这里有许多神奇的配置。有几个参数需要按照自己的需要更新。

你可以自行配置一些东西,例如:

  • 联系信息

  • 头像

  • 社交网络链接

重启Jekyll进程,然后刷新页面,就能看到修改的效果。

需要提醒你,在改变_config.yml文件后,必须重新启动Jekyll才能看到效果。对于其他文件的改动则只需要刷新页面即可。

发布文章

现在可以将模板上的文章替换为你自己的文章了。

在开始之前,要理解Jekyll的命名规范。所有文章必须:

  1. 保存在_posts文件夹下

  2. 命名为
    yyyy-mm-dd-name-of-your-post.md格式

  3. 用Markdown语言编写(即扩展名.md的含义)

试试看!在_posts目录下用适当的名字创建一个文件。然后,刷新浏览器就能看到你的文章显示在网站上。

“如果我的有些文章已经发表在Medium上,想转换成Markdown怎么办?”

有几个解决方案。我推荐使用这个十分好用的转换器(
https://medium-to-markdown.now.sh/)。

需要提醒的是,它无法处理Gist,所以你需要手工提取Gist。但并不复杂,只需右键点击Medium中的Gist然后将其中包含的