Jekyll 博客搭建笔记 1

新建一个 blog的文件夹

mkdir blog
cd blog  
vi _config.yml  // 创建并保存  _config.yml 文件 :wq 保存退出

创建几个必要文件

_includes // 在布局文件中可通过 include [filename] 引用
_layouts // 布局文件
_posts // 存放重要博客文章
assets // 静态文件

配置 _config.yml 文件

通过site[variableName]访问这些配置信息，部分可迁移至_data中

下面是我的配置，其他具体参照官方文档 —— 配置

# Site settings
author: kasmine
title: Kasmine Blog
SEOTitle: 廖晓娟的博客 | Kasmine Blog
header-img: assets/img/home-bg.jpg
post-img: assets/img/post-bg.jpg
email: momo736929286@gmail.com
description: ""
keyword: ""
# url: "https://www.kasmine.cn"              # your host, for absolute URL
baseurl: "/kasmine.blog"  
imgurl: "/kasmine.blog/assets/img"
# baseurl: ""                             # 本地调试使用
# imgurl: "/assets/img"

# Basic settings

# 添加sass
# @see http://markdotto.com/2014/09/25/sass-and-jekyll/
sass: 
  sass_dir: _scss
  # style: compressed


# SNS settings
RSS: false
weibo_username:     kasmine
# zhihu_username:     kasmine
github_username:    Me-Momo
#twitter_username:  kasmine
facebook_username:  kasmineLiao
# linkedin_username:  firstname-lastname-idxxxx

# Build settings
# from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead.
highlighter: rouge
# permalink: pretty
permalink: /:year/:month/:day/:title.html
paginate: 10
exclude: ["less","node_modules","Gruntfile.js","package.json","README.md","README.zh.md"]
anchorjs: true                          # 如何设置

# Gems
# from PR#40, to support local preview for Jekyll 3.0
gems: [jekyll-paginate]

markdown: kramdown
kramdown:
  input: GFM                            # use Github Flavored Markdown !important

# Analytics settings TODO:
# Google Analytics
ga_track_id: 'UA-89922034-1'            # Format: UA-xxxxxx-xx
# ga_domain:

# Sidebar settings
sidebar: true                           # whether or not using Sidebar.
sidebar-about-description: "认真学习 n(*≧▽≦*)n <br />拥抱大前端 "
sidebar-avatar: /assets/img/avatar-kasmine.jpg      # use absolute URL, seeing it's used in both `/` and `/about/`

# Catalog settings
catalog: true

创建_includes

主要是一些nav,footer等等公共组件

header.html
footer.html
nav.html
siderbar.html

等等，根据实际抽取公共部分

创建_layouts

default.html // 基础布局
post.html // 文章布局
page.html // 页面布局

可按照自己的需求扩展

添加 anchor-js自定义锚点

@see https://www.bryanbraun.com/anchorjs/

function async(u, c) {
            var d = document,
                t = 'script',
                o = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
            o.src = u;
            if (c) {
                o.addEventListener('load', function (e) {
                    c(null, e);
                }, false);
            }
            s.parentNode.insertBefore(o, s);
        }
        async("//cdnjs.cloudflare.com/ajax/libs/anchor-js/1.1.1/anchor.min.js",function(){
            anchors.options = {
                visible: 'always',
                placement: 'left',
                icon: '?  '
            };
            anchors.add('.custom-link')
        })

使用 canonical URL

优化搜索引擎搜索

<!-- Canonical URL -->
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

The SEO benefit of rel=canonical

Choosing a proper canonical URL for every set of similar URLs improves the SEO of your site. Because the search engine knows which version is canonical, it can count all the links towards all the different versions, as links to that single version. Setting a canonical is similar to doing a 301 redirect, but without actually redirecting.

来源： https://yoast.com/rel-canonical/

使用 Pygments

实现代码的高亮

<!-- Pygments Github CSS -->
<link rel="stylesheet" href="{{ "/assets/css/syntax.css" | prepend: site.baseurl }}">

添加目录

主要原理就是查找博文页面的 h标签，然后动态添加 id,并添加侧边栏导航

@see https://huangxuan.me/

<!-- Side Catalog -->
<script type="text/javascript">
    function generateCatalog (selector) {
        var P = $('div.posts-container'),a,n,t,l,i,c;
        a = P.find('h1,h2,h3,h4,h5,h6');
        a.each(function () {
            n = $(this).prop('tagName').toLowerCase();
            i = "#"+$(this).prop('id');
            t = $(this).text();
            c = $('<a href="'+i+'" rel="nofollow">'+t+'</a>');
            l = $('<li class="'+n+'_nav"></li>').append(c);
            $(selector).append(l);
        });
        return true;    
    }
    generateCatalog(".catalog-body");
    // toggle side catalog
    $(".catalog-toggle").click((function(e){
        e.preventDefault();
        $('.side-catalog').toggleClass("fold")
    }))
    /*
     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
     */
    async("/js/jquery.nav.js", function () {
        $('.catalog-body').onePageNav({
            currentClass: "active",
            changeHash: !1,
            easing: "swing",
            filter: "",
            scrollSpeed: 700,
            scrollOffset: 0,
            scrollThreshold: .2,
            begin: null,
            end: null,
            scrollChange: null,
            padding: 80
        });
    });
</script>

使用命令行参数

jekyll server --port PORT // 选择自己想要的端口
jekyll server -watch   // 实现jekyll 实时更新

其他插件推荐

请看Jekyll博客搭建笔记第三篇

评论区配置

参考：这篇文章

第三方插件

jquery.tagcloud.js

原文地址