Skip to main content

本博客移植到 Jekyll + GithubPages

wKevin
wKevin
一颗向上的水滴

2004 年开始写博客，从博客园到 CSDN，后来也在简书、公众号（智造匠）零星写过，都没坚持住，关键也是文章写的太水，也更新没准头，或长期不更新，就没啥人看。

2014 年用 git + hexo 开始写，也没发布，都是在自己的小 VPC 上驻留，自我欣赏。

2016 年 Github Pages 出现，至今已经 2 年多了，心里不免痒痒，挪过去要 public，但估计在 github 关注我的人应该很少，甚至没有，就花点时间搞一搞吧。

Github Pages 深度绑定 Jekyll，顺便就玩玩。

Init​

  • gem install jekyll bundle
  • jekyll new wkevin.github.io
  • cd wkevin.github.io
  • bundle exec jekyll serve

Config​

_config.yml​

  • _config.yml 是给 jekyll serve或jekyll build使用的
  • jekyll official
  • 修改后需要重启 jekyll serve

Gemfile​

  • Github Pages 有默认的 Gemfile，用户不需要上传：git rm Gemfile
  • 本地浏览如果需要模拟 Github Pages，修改:
    • 注释 gem "jekyll"
    • 打开 gem "github-pages", group: :jekyll_plugins

Config theme​

  • 一些 theme 是 gem 打包发布的，用户的文档中不会出现_layout、_css等内容，本地和远程只需指定theme:xxx或remote_theme:xxx
    • 本地 bundle 安装了 theme 后，可以使用 bundle show xxx 查看其具体内容，学习或修改
  • 一些 theme 而是以源码发布的，需要用户fork或git clone其_layout、_css等内容到自己的文件夹中。
  • 不同的 theme 会有不同的配置项，如：layout：xxx，需要读其说明，仔细配置

Github Pages 把 theme 分 2 类：

  1. officially supported themes: theme: xxx，都已 gem 化。
    • Blog 使用： 自动搜索 _posts 目录并生成瀑布流文章列表
      • theme: minima —— jekyll new 时默认
    • 网站使用： 自己组织链接，不支持 page、post
      • theme: jekyll-theme-cayman
      • 其他的都是，所以要想写 blog，还得用下面的 remote_theme
  2. open source Jekyll theme hosted on GitHub
    • remote_theme: xxx —— 需要该 theme 已经 gem 化，Github Pages 能够在云端找到并安装
      • https://github.com/mmistakes/minimal-mistakes
      • https://github.com/mmistakes/so-simple-theme —— 简洁、大方，本 Blog 使用
        • 简要说明
          • data/navigation.yml 定义导航栏
          • 10 种 layout：home, posts, post, collection(等同 pages), page, categories, category, tags, tag, search.
          • 2 种 entries_layout ： list, grid
        • 个性化配置方法
          • _config.yml 中可以在 [head|footer]_scripts 中添加 js 的路径，注意是下滑线
          • bundle show jekyll-theme-so-simple 查看本插件源文件的位置
          • 从源文件中拷贝 _includes/[head|footer]-custom.html 到 blog 目录下，根据情况修改
          • 从源文件中拷贝 assets/css/main.scss 到 blog 目录下，酌情修改
          • 从源文件中拷贝 assets/js/main.js 到 blog 目录下，酌情修改
        • 我的配置：
          • 根目录下的 .md 文件对应每个子目录：posts、categories、tags、ai、auto、search —— 其中 posts、ai、auto 包含 md 文件，其他是视图
            • _config.yml 中定义了默认值：随笔是 post，其他是 page —— 不需要每篇文章中再定义
          • posts、ai、auto 分别对应 _post、_ai、_auto 文件夹 —— _config.yml 中定义的 path
          • 根目录下的 ai/auto/it.md 中定义了 entries_layout 使用 grid
    • fork -- modify

Others​

最后​

我写了个 ./newpost.sh，新建 blog 是可以同时创建一个 post 及其 images 下的同名文件夹放图片，缩减一下工作量。