Deploying Jekyll project to GitHub Pages

本文介绍了如何使用Jekyll创建静态网站并在GitHub Pages上进行部署的过程。重点讲述了配置site.url和site.baseurl的方法,以及在本地和GitHub Pages上正确显示网站资源的技巧。此外,还分享了部署过程中的一些常见问题及其解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做Jekyll项目。第一次接触这种技术,简单说就是一种创建并生成静态网站的工具。基本功扎实的,敲好代码(用Git来管理代码,建立独立工作分支),现在情况是想要在web上看一下效果,因为一些问题在本地开发环境下可能发现不了。

这里使用GitHub Pages来实现。有关资料请看官网

说一些自己在部署项目到 GitHub上遇到的问题和解决办法。

1. site.url vs site.baseurl

如果已经看了官网资料,就知道为了用 GitHub Pages 看项目网站,必须将 site.baseurl 的值设为这种形式/project-name. 至于如何处理JS、CSS or Images 资源的路径,我采用这种形式{{ site.url }}{{ site.baseurl }}/path/to/css.css, 而site.url 设为 “” (空),理由是

  1. 本地运行使用官网推荐的 jekyll serve --baseurl ‘’, 此时两个变量尽管都是empty string,但是 jekyll serve 仍然可以让你在 localhost:4000 地址查看网站。注意,如网站logo超链接地址一定要在末尾写上斜杠 <a href="{{ site.url }}{{ site.baseurl }}/">,这样即使两个变量为空,地址是 “/” 就是root path。确保链接导向正确。
  2. 在GitHub Pages上,因为 url 为空,baseurl符合要求,nothing special need to do, 就可以正确显示。
  3. 项目最终是要放在互联网上的,到时候只需要在 _config.yml 文件里把 site.url 设为网站地址,如 http://www.example.com, 而把site.baseurl 设为 空

2. deploy Jekyll to GitHub Pages

1. 直接在自己的GitHub个人主页 Repositories 分页里,点 New,填写 Repository name (也就是 project-name 注意值要和 site.baseurl 一样),简单填写一些Description,点击 Create repository。OK!

2. terminal里到工作分支下,运行 git remote add originremote_repository_URL 补充一下:不知道 remote_repository_URL 的可以运行git remote -v 来查看

3. 确定代码没问题了,修改一下工作分支名字 git branch -m gh-pages,因为官方说了网站内容必须存放在名为gh-pages 的分支下才行。换言之,用于项目的 GitHub Pages 的默认分支是gh-pages。相对于个人页面 username.github.io 的默认分支必须是master (最终要展现的代码必须合并到此分支上)而言。

4. 好啦,现在终于可以把代码推上去了。git push origin gh-pages



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值