github jekyll_如何使用Jekyll设置免费的GitHub页面

github jekyll

这是一个有关如何创建GitHub页面以及学习如何完善它的技巧的快速教程。 我将逐步介绍如何创建GitHub页面的步骤。

有一段时间您将探索如何为您的项目,博客等创建页面。GitHub为想要免费分类和托管网站的任何人提供了一种简便的安装解决方案。 最重要的是,与自己的存储库系统的平滑集成使开发人员可以轻松地修改和更新网站上的更改。

设置GitHub页面的方法有很多,我想向您展示其中一种。 我选择了Jekyll作为静态站点生成器。 Jekyll很容易与您喜欢的标记语言一起使用,并且使用布局来创建静态网站。 但是,完全由您决定要使用哪个站点生成器。

https://pages.github.com/

让我们开始吧

步骤1:安装Ruby

打开命令提示符(Mac用户的终端)

您需要做的第一件事是安装完整的Ruby。 Jekyll是Ruby程序,因此首先需要在计算机上安装Ruby。 转至安装指南,并按照您操作系统的说明进行操作。

您可以通过以下链接安装Ruby-rubyinstaller.org

如果要检查版本号或是否正确安装,请键入

ruby - v

步骤2:安装Jekyll和bundler gem。

您可以使用命令提示符进行操作,但是我想切换到Visual Studio Code和“文件>打开文件夹”

然后选择您要存储Github页面的目录。 之后,在VSCode中打开终端。 如您在本示例中看到的,我的目录是"C:\Users\serda>"

现在,使用以下命令安装Jekyll;

geminstall  jekyll  bundler

步骤3:建立新的Jekyll网站

在./myblog上创建一个新的Jekyll网站

jekyllnew yourblogname

注意:现在,我需要提及有关存储库页面名称标准的一些信息。 它不能与所有者用户名相同。 否则它将无法正常工作。 条件是GitHubUsername.github.io

在这种情况下,页面的名称为serdarbaran.github.io 。 如上所示,页面已创建。

转到新目录。

cd myblog

例如;

PS C:\ Users \ serda > cd . \ serdarbaran .github.io \
 PS C: \ Users \ serda \ serdarbaran .github.io> 

您需要Bundler解决这些依赖性冲突。 使用Bundler安装所有必需的Ruby gem

bundle  update

建立站点并使其在本地服务器上可用。

bundle  exec jekyll  serve

实际上有两个命令,

  • 杰基尔构建 -构建网站和输出静态站点到一个目录名为_site。
  • jekyll serve-进行相同的操作,只是在您进行更改并在本地Web服务器上运行时会重新生成。

浏览到http:// localhost:4000(在本示例中为http://127.0.0.1:4000/)您的网站应如下所示

步骤4:在GitHub上线

返回到GitHub并创建一个新的存储库如前所述,存储库名称不能与所有者的用户名相同。 否则,它将无法正常工作。

我将命名为serdarbaran@github.io并创建存储库。

注意:如果您自定义域,则可以将其放置在上面看到的设置部分中。

现在转到您的存储库。 您可以使用GitHub桌面应用程序,也可以直接将目录中的所有文件直接上传到新存储库中。

我希望您到目前为止没有任何问题。 现在,您的Github页面应该已启用。

…您完成了!

启动浏览器,然后转到https://serdarbaran.github.io。

恭喜你! 您的页面是实时的!

如果需要使用其他模板,则可以在线找到许多免费模板。 不要忘记检查github。

感谢您关注我的教程。 我希望您觉得它对您有用。

如果您喜欢它,请不要忘记分享它

先前发布在 https://serdarbaran.github.io/serdarbaran.github.io/setup-a-free-github-page-with-jekyll/

翻译自: https://hackernoon.com/how-to-setup-a-free-github-page-with-jekyll-ic3n3w4l

github jekyll

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值