笔记:使用 Github Page 搭建 Jekyll 个人 blog


部署方式

两种方法,基于不同的部署方式, 在 Github 上生成的站点 URL 会有所不同:

  • USERNAME.github.io
  • USERNAME.github.io/SITENAME

站点 URL 格式为 USERNAME.github.io 的部署

  1. Github 上新建一个名为 ‘USERNAME.github.io` 的 repo *(USERNAME 等同于自己的用户名)*;
  2. 在本地新建一个 Jekyll 项目: jekyll new PROJECT
  3. 完成配置,推送至 Github:
    1. git remote add origin https://github.com/USERNAME/USERNAME.github.io.git
    2. git remote push origin master
  4. 等待一段时间,五至十分钟左右,Github 会为你生成好静态网站,打开 USERNAME.github.io 就能访问。

站点 URL 格式为 USERNAME.github.io/PROJECT 的部署

  1. 在本地新建一个 Jekyll 项目: jekyll new PROJECT
  2. 在 Github 新建一个 repo,repo 的名称便是之后完成部署,访问链接的 path:USERNAME.github.io/REPO_NAME
  3. 完成一般配置后,新建一个名为 gh-pages 的分支:git checkout -b gh-pages
  4. 推送至 Github,gh-pages 分支会被 Github 自动识别为所创建的 page;
  5. 等待几分钟,访问 USERNAME.github.io/REPO_NAME 便可访问。

这种方法需要注意是:在根目录的 _config.yml 中需要修改 baseurl 字段的值,值要和新建的 REPO_NAME 的相对应,不然 CSS,IMAGE 等静态素材会报告 404 ERROR; *(比如我设置了一个 USERNAME.github.io/REPO_NAME,那么在这里就需要添加 baseurl: /REPO_NAME )*。

Tips

1. 使用 _drafts 文件夹管理草稿

因为 jekyll new PROJECT 后 Jekyll 默认创建的文件目录中不包含 _drafts ,所以需要手动在根目录创建一个名为 _drafts 的文件夹:

  • 运行 jekyll serve 的时候 Jekyll 会自动忽略此文件夹;
  • 如果需要预览草稿内容,可以运行 jekyll serve --drafts 命令。

2. 在 blog 文件中使用图片文件

官方在这里给出了办法:

  • 在更目录下新建 assets 或者 downloads 文件夹;
  • 文章中使用类似这样 ![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg) 的 URL 来切图图片。

⚠️ 没有一篇可以简单搜索到的文档对「Jekyll 中以下划线开头的文件夹或者图片都会成为不合法的相对路径」有过任何记载,比如 _images/_image.jpg 是完全不能在页面中正确显示的。

3. 使用 Google Analytics

可以直接参考这篇,非常详细:Google Analytics for Jekyll

遇到的一些问题:

使用 Disqus 作为评论区 http 与 https 之间切换的问题

httphttps 之间切换,显示的问题不同,具体情况描述可以参考这篇博客文章 Force HTTPS with Github Pages 和 相关的问题解决的讨论:这里这里

感谢阅读

你们好, 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中,删除了评论区放的 Disqus 插件,考虑有二:首先无论评论、还是对笔记内容的进一步讨论,读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通;其次一年多以来 Disqus 后台能看到几乎都是垃圾留言(spam),所以这里直接贴一下邮件、以及 Twitter 账户 地址。

技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。

BEST
Lien(A.K.A 胡椒)
本站总访问量 本站总访客量 本文总阅读量