Deploying Jekyll project to GitHub Pages

洪鸿博
2023-12-01

最近在做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



 类似资料:

相关阅读

相关文章

相关问答