jekyll 世纪使用模板过程的遇到的坑

转载 2018年04月14日 23:42:33

前言:github 的Project Page入门级别文章是真的多,但是都是讲的浅显,使用中问题的自己总结下,总结下在使用总的问题点:

一:你在网上下的模板一般你本地使用jekyll 的时候配置baseUrl 是没有问题的,但是一旦push 到github上时,会存现有些资源(最为常见的是图片加载不出来)加载不出来,那是因为路径问题,建议使用将需要在_config.yml设置的路径baseurl :; url :等置空;

二是:github Page 的gemfile和需要另行配置 update github page 等; 注意经常 update bundle ;jekyll为开源项目跟新较快;参考网址:Setting up your GitHub Pages site locally with Jekyll 在github发布与jekyll的使用参考结合使用参考;https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/#step-4-build-your-local-jekyll-site

另附:github page的问题不要用百度搜:垃圾百度被hacker用来攻击github ,百度就被屏蔽了,使用搜狗搜jekyll问题,gitbub上专门解决各类问题的社区存在,记得换浏览器就行了;要不然找不到的;

使用jekyll 写静态网页,与发布在github page  的静态网页的不同是:需要另外配置Gemfile;打开gemfile 查看即可;

push 到github上时:出现错误的查看方式:如果出现不发email同时无错误,多是你文件本生的问题,建议是用本地jekyll调试好了再发布;


转载网址:https://www.e-learn.cn/content/wangluowenzhang/53139

GitHub pages and relative paths

匿名 (未验证) 提交于 周六, 03/17/2018 - 13:54
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):

问题:

I have created a gh-pages branch for a project that I am working on at GitHub.

I use Sublime text to author the website locally and my problem is that when this is pushed to GitHub, all the links to javascrips, images, and css files are invalid.

For instance, I have this in my head section.


This works great locally, but it does not work from GitHub as the links are not resolved using the repository name as part of the URL.

It asks for:

http://[user].github.io/assets/css/common.css

when it should have been asking for:

http://[user].github.io/[repo]/assets/css/common.css.

I could of course put the repo name as part of the URL, but that would prevent my site to work locally during development.

Any idea how to deal with this?

回答1:

Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include


in an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.

For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as . That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css, i.e. it does include the repo name.



回答2:

You'll need to use Jekyll.

Copying verbatim from the relevant documentation:

Sometimes it’s nice to preview your Jekyll site before you push your gh-pages branch to GitHub. However, the subdirectory-like URL structure GitHub uses for Project Pages complicates the proper resolution of URLs. Here is an approach to utilizing the GitHub Project Page URL structure (username.github.io/project-name/) whilst maintaining the ability to preview your Jekyll site locally.

  1. In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.

  2. When referencing JS or CSS files, do it like this: {{ site.baseurl}}/path/to/css.css – note the slash immediately following the variable (just before “path”).

  3. When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between the two variables.

  4. Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty string to the --baseurl option, so that you can view everything at localhost:4000 normally (without /project-name at the beginning): jekyll serve --baseurl ''

This way you can preview your site locally from the site root on localhost, but when GitHub generates your pages from the gh-pages branch all the URLs will start with /project-name and resolve properly.

(Apparently someone figured this out only a few months ago.)



回答3:

This should not be an issue anymore in Dec. 2016, 3 and an half years later.
See "Relative links for GitHub pages", published by Ben Balter:

You've been able to use relative links when authoring Markdown on GitHub.com for a while.

(that is from January 2013)

Now, those links will continue to work when published via GitHub Pages.

If you have a Markdown file in your repository at docs/page.md, and you want to link from that file to docs/another-page.md, you can do so with the following markup:

[a relative link](another-page.md)

When you view the source file on GitHub.com, the relative link will continue to work, as it has before, but now, when you publish that file using GitHub Pages, the link will be silently translated to docs/another-page.html to match the target page's published URL.

Under the hood, we're using the open source Jekyll Relative Links plugin, which is activated by default for all builds.

Relative links on GitHub Pages also take into account custom permalinks (e.g., permalink: /docs/page/) in a file's YAML front matter, as well as prepend project pages' base URL as appropriate, ensuring links continue to work in any context.

And don't forget that since August 2016, you can publish your pages right from the master branch (not always the gh-pages branch)

And since Dec. 2016, you don't even need Jekyll or index.md. Simple markdown files are enough.



回答4:

Another option is to create a new repo specifically for the github.io webpages. If you name the repo as [user].github.io on github then it will be published at https://[user].github.io and you can avoid having the repo name in the URL path completely. Obviously the downside is that you can only have 1 repo like this per github user, so it may not suit your needs, I'm not sure.



回答5:

It seems that Github Pages is not very responsive. Though it makes new files available immediately, modified files would not appear immediately due to caching or something.

After waiting 15 minutes or so, everything is fine.

转载请标明出处:GitHub pages and relative paths

                                                                                             要你命三千又三千  

                                                                                            我的Git  Home Page


Jekyll模板的使用

Jekyll模板的使用花了一晚上的功夫把原先Github Pages中的小东西,变成了大东西! 网上还是有各种教程的,毕竟也不是什么特别难的东西,只要花点时间,都是可以实现的。现在在来稍微地总结一下...
  • hezy94
  • hezy94
  • 2017-10-27 21:44:47
  • 1478

使用Github+Jekyll制作自己的博客

使用Github+Jekyll制作自己的博客今天刚刚搭好自己的Blog,很兴奋,在这记录一下搭建Blog的历程在Github上搭建一个博客,很简单,只需要三步: 在 Github 上建一个库,库的名字...
  • lady_zhou
  • lady_zhou
  • 2016-07-27 01:49:15
  • 7250

使用Jekyll搭建自己的博客

介绍Github Pages是可以托管在Github上的静态网页。用户可以使用它提供的模板,经过Jekyll的再加工后上传到服务器。Jekyll是一款Blog生成器,是Github官方使用的静态站点生...
  • wzhseu
  • wzhseu
  • 2017-06-05 11:23:14
  • 1558

Android开发遇到的坑

最近在开发中总会遇到各种坑,由于记忆力不好,先记录在这里。 以前看过的一些总结,基本上很齐全了: http://jcodecraeer.com/plus/view.php?aid=3773 https...
  • ly635676581
  • ly635676581
  • 2016-11-25 16:31:30
  • 601

使用 GitHub, Jekyll 打造自己的免费独立博客

讲述了使用 GitHub 和 Jekyll 搭建免费独立博客的过程,包括入门指引,工作机制,网站源代码介绍,以及分类,归档,评论,分页的实现。...
  • on_1y
  • on_1y
  • 2014-02-15 23:07:41
  • 70926

Using Jekyll with Pages——使用Jekyll框架

前言我的个人博客地址:Hu Haoyu’s Blog,欢迎参观! GitHub Pages支持了Jekyll框架,Jekyll是一个简单的博客类静态网站生成器。Jekyll能够简单地在各个页面中使用全...
  • coderhuhy
  • coderhuhy
  • 2015-05-12 12:53:18
  • 1226

mysql遇到的坑

环境:ubuntu16.4 mysql版本5.7.19 2.用户无法通过SSH远程访问 先用root运行mysql -uroot -p,启动mysql 然后再mys...
  • weixin_40105364
  • weixin_40105364
  • 2017-10-22 08:26:55
  • 220

如何使用ruby在github上搭建jekyll博客

使用jekyll将markdown文件生成静态的html文件,并使用主题有序的进行布局,形成最终的博客页面。 特点 基于ruby使用Markdown书写文章无需数据库可以使用GitHu...
  • zcl1199
  • zcl1199
  • 2016-06-02 11:29:55
  • 680

vue遇到的坑

父级组件采用数据驱动渲染出来的导航栏之后,由于页面渲染的是子组件,这个时候在子组件中去触发父级组件上的事件并没有发生,这个时候反复找了网上查找了一些资料,刚开始百度到了一个关于v-for与click事...
  • limy_cxm
  • limy_cxm
  • 2017-06-08 16:07:44
  • 1195

分别使用hexo,jekyll在GitHub上搭建博客

前言:八月底,琢磨过搭建网站,然而最终无疾而终……不过还是借助GitHub搭建了个简单个人博客。 以对比的角度记录下,分别用hexo,jekyll搭建的概要,网上教程众多,也可以参考知乎的回答目录 ...
  • qq_36962569
  • qq_36962569
  • 2017-09-02 17:03:09
  • 406
收藏助手
不良信息举报
您举报文章:jekyll 世纪使用模板过程的遇到的坑
举报原因:
原因补充:

(最多只允许输入30个字)