blog搭建过程

博客搭建过程，主题修改，插件添加，语法学习

Published on Aug 6, 2020
Amount Of Article Reading: times

jekyll博客搭建过程:从texture极简主题开始修改，添加分页，管理员，站点地图插件;toc，tag通过纯liquid代码实现
此文章只会对搭建过程一些要点进行记录，详细搭建流程推荐查看文章中的视频连接

1. 教程推荐

  • 博客生成器选择：
    • jekyll和hexo：

      个人用的是jekyll。详细比较可以看该篇文章：Jekyll / Hugo / Hexo 比较

      • Github Page 对jekyll有强大的支持，将博客源码push到github后会自动完成解析部署。但是解析速度相对于hexo要慢
      • hexo是node.js的一个框架，也可以完成自动部署，但需要设置github action。解析速度要比jekyll快很多
    • 主题精繁：

      个人使用精简主题texture修改完成

      • 如果想比较省事，推荐直接使用拥有各种功能的完善主题
      • 如果比较想有个人风格，推荐先从极简主题开始修改，在此过程工提升关于相关模版语法。
  • jekyll博客搭建视频教程：youtube网址

    包含环境搭建，部署以及主题，插件的使用，作为入门够了

  • 关于jekyll环境：ruby,gem,bundle的大致关系（以java为例）：
    • ruby–java
    • gem–jar
    • bundle–maven
  • Jekyll常用配置文档：

    本文章只讲解笔者搭建过程中的注意点和问题，强烈推荐查看下方文档

  • liquid 文档：中文官方文档

    liquid模版详细语法

  • 其他文章：博客

2. 开始

  • 基础命令目录
    • jekyll new (path):指定目录下生成博客目录
    • bundle install:安装依赖。再找到一个新模板时最好都运行一下
    • bundle exec jekyll serve:本地运行博客站点
    • bundle exec jekyll s:简写
    • gem sources –add https://gems.ruby-china.com/ –remove https://rubygems.org/ ：设置gem镜像
    • bundle config mirror.https://rubygems.org https://gems.ruby-china.com：设置bundle镜像
  • github.io 404 解决方案： 
      网上的常见方法：
  1 内容放错分支，只有在master分支里面的内容才能用github.io查看到
  2 仓库名称不对   github用户名.github.io 必须是这个名字
  3 如果以上方法都没用（这很正常）

  这是starkflow上一个大哥的神方法：
  在 根目录下创立一个docs文件夹 里面放一个CNAME文件 不用写任何内容 也没文件后缀
  然后重新 git push到你的仓库里面

3. 主要文件目录

  • _config.yml:总配置文件。用来存储各种常用和重要信息和配置

  • _includes/:包含一些组件，比如header，fooder，供后layout/中的页面引用

  • _layout/:布局，通过引用include拼凑成一个网页，在里面通过可以通过 {{ content }} 引入markdown中的文件

  • _posts/:博客内容，每一篇文章对应一个md文件。命名方式一般都是时间-名称.md
  • _drafts/：存储未发布草稿文件
  • _sass:存储scss文件，也可以通过_config.yml指定其他文件夹。
    • scss中import时会从该文件夹查找scss文件
    • scss文件会编译到css指定文件夹供网页引用
  • _site/：主页目录，一般不会传到代码仓库。最好将这个目录放进.gitignore文件中。
    • 生成_site/及其文件：jekyll build (build可以简写成 b)
    • 指定其他主页目录并生成：jekll b –Destination=./dist
  • Gemfile：用来添加依赖。bundle install 时会读取这个文件。

4. 变量

推荐看上面提到的文档

  • .config.yml中定义的变量：

    通过site.变量名 获取

  • 头信息： 
        
  ---
  layout: post  <!-- 用来指定layout，会把本md的内容填充到layout的{{ content }}中 -->
  title: Blogging Like a Hacker <!-- 指定变量，可以通过 page.变量名 访问 -->
  ---
  • _data文件夹数据文件：

    详情：官方中文文档

    • 定义xxx.yml或xxx.json或xxx.csv文件
    • 通过 site.data.xxx.变量名获取

5. 主题修改

5.1. 页面嵌套图解

5.2. assests目录

目的：引用图片和其它资源

很多时候，需要在文章中引用图片、下载或其它数字资源。

由于 Jekyll 的灵活性，有很多方式可以解决这个问题。一种常用做法是在工程的根目录下 创建一个文件夹，命名为assets或者downloads，将图片文件，下载文件或者其它的 资源放到这个文件夹下。然后在任何一篇文章中，它们都可以用站点的根目录来进行引用。 这和你站点的域名/二级域名和目录的设置相关。

5.3. sass映射

  • 如果想在layout中导入”/css/style.css”
    • 在post同级目录下创建css
    • css中添加总style.scss文件（scss可以通过import将其他scss文件引入当前文件） 
        ---
  ---  /* 头信息告诉jekyll在生成_site时将此文件编译为css */


  // Imports
  @import "theme"; /* 会将sass/theme.scss 导入 */
    • _site/css/下会生成style.css文件

个人是将编译位置指定到了/assets/css/style.scss，把所有css放到了一起。按喜好来

6. 添加归档页，访问量等小功能

csdn博客

无法运行时要根据需要修改代码

7. 分页

官方文档

8. 添加toc（两种方式）

8.1. 两种方式区别

推荐使用第二种

  • 兼容性：
  • 速度：
    • 插件方式未统计
    • 按照作者统计，liquid语句方式对速度影响甚微
  • 操作便利性：
    • 插件：必须每个md添加头信息
    • liquid：只用修改_layout中的post.html

8.2. 插件

github项目页

8.3. liquid语句

github项目页

9. 其他注意点：

  • 文件名不要命名为中文，如果想要为文章起中文标题要在头信息中声明

参考资料