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

原文地址