基于Pages+Jekyll+Minimal-Mistakes搭建个人博客


Github pages官方推荐使用Jekyll生成静态网页,jekyll支持各种不同的主题。Minimal Mistakes 是一个灵活的两栏 Jekyll 简约风格主题,非常适合建立个人网站、博客和作品集。除了外观设置外,还支持文章评论、文章搜索、文章标签、文章分类等增强和定制。

安装Github pages + Jekyll

  1. 在github上Forkmmistakes/minimal-mistakes
  2. 参考github pages主页, 设置Fork来的仓库名为 {username}.github.io/blog,并启用GitHub Pages
  3. clone {username}.github.io/blog 到本地 $Github/lxl80/blog目录
  4. 本地安装jekyll并建立博客
gem install jekyll bundler
//建立myblog并复制内容到根目录后删除myblog
//如果直接在根目录建立,github在编译时可能会软连接错误,暂不知原因
cd $Github/lxl80/blog
rm Gemfile
jekyll new blogtemp
cd blogtemp
cp -r * ../
cd ..
rm -rf blogtemp

使用Minimal-Mistakes主题

  1. 修改Gemfile:
    替换gem "jekyll"gem "github-pages", group: :jekyll_plugins

  2. 修改_config.yml:
    替换themeremote_theme: "mmistakes/minimal-mistakes"

  3. 运行bundle update更新主题

  4. 更改about.md和 _posts/0000-00-00-welcome-to-jekyll.markdown 中 layout为single。

  5. 在根目录下删除index.md,添加index.html,内容如下:

---
layout: home
author_profile: true
---
  1. 运行bundle exec jekyll serve
    如果碰到No GitHub API authentication could be found.的问题,参考Resolve ERRORS
  2. 访问127.0.0.1:4000查看页面
  3. push到github,访问commits页面查看部署状态。
  4. 访问{username}.github.io查看博客主页。

相关配置

修改Markdown 高亮配色

Jekyll使用rough作为代码高亮工具,不同的皮肤设置(minimal_mistakes_skin)有不同的高亮配色,这里我使用contrast皮肤,但代码高亮希望将背景从深色改为白色。

  1. 在gems目录/usr/local/lib/ruby/gems/2.4.0/gems/minimal-mistakes-jekyll-{version}下复制 _sass 到博客根目录。
  2. 修改_sass/minimal-mistakes/skins/_contrast.scss,替换 syntax highlighting (base16) 设置,参考Sylesheet/Color
/* solarized light syntax highlighting (base16) */
$base00: #fafafa !default;
$base01: #073642 !default;
$base02: #586e75 !default;
$base03: #657b83 !default;
$base04: #839496 !default;
$base05: #586e75 !default;
$base06: #eee8d5 !default;
$base07: #fdf6e3 !default;
$base08: #dc322f !default;
$base09: #cb4b16 !default;
$base0a: #b58900 !default;
$base0b: #859900 !default;
$base0c: #2aa198 !default;
$base0d: #268bd2 !default;
$base0e: #6c71c4 !default;
$base0f: #d33682 !default;

运行 bundle update

设置文字大小

修改 _sass/minimal-mistakes/_variables.scss 对应font-size。

添加Disqus评论支持

  1. 参考I want to install disqus on my site注册,添加网站并得到shortname。
  2. 设置_config.yml
comments:
provider: "disqus"
disqus:
    shortname: "your-disqus-shortname"
//......
default:
    comments: true

参考文章


文章作者: 李小龙
版权声明: 本博客文章除特別声明外,均采用 CC BY-NC-ND 4.0 许可协议,转载请注明来源 悟尘记 - 李小龙的博客网站 !
评论
 上一篇
常用Bash命令收集 常用Bash命令收集
一、系统相关1. hostname - 查看主机名hostname命令用于查看系统的主机名,或是修改系统的主机名。 hostname的常用命令如下: # 显示系统的当前主机名 hostname ...
2019-08-13
下一篇 
八、升级chaincode和背书策略 八、升级chaincode和背书策略
八、升级chaincode和背书策略1、为新组织安装 2.0 版本的 chaincode其他组织的 chaincode 版本号是 1,新组织需要更新此版本的 chaincode,因此为新组织直接安装...
2019-06-04
  目录