1

Jekyll配置记录

 2 years ago
source link: https://blog.malu.tech/JekyllConfigurationRecord/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Road's Blog

Jekyll配置记录

发表于2021-03-03|更新于2021-03-04|软件技巧
字数总计:2.1k|阅读时长:8分钟|阅读量:

本文旨在记录Jekyll配置的全过程

  • NodeJS
  • Ruby (2.4.0或者更高)
  • RubyGems

安装NodeJS

首先安装 NodeJS ，由于NodeJS版本较多，考虑到版本切换和配置复杂，这里先安装NodeJS版本管理器NVM。

  1. 下载并运行脚本：

    shell
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

  2. 添加环境：

    shell
    export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

  3. 重新载入环境

    shell
    source ~/.bashrc
  4. shell
    command -v nvm

然后再安装NodeJS

  1. 安裝最新版的 Node.js

    shell
    nvm install node

  2. 或者安装指定版本的 Node.js

    shell
    nvm install 6.14.4 # 安装Node 6.14.4版本

  3. 测试 Node.js

    shell
    node -v

安装Ruby

  1. 安装 Ruby (RubyGem集成在Ruby内)

    shell
    sudo apt-get install ruby-full build-essential zlib1g-dev

  2. 配置 RubyGem 安装路径（避免以root用户安装）

    shell
    echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
    echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
    echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc

  3. 重新载入环境

    shell
    source ~/.bashrc

至此 Jekyll 依赖的环境配置完毕。

安装Jekyll

  1. 安装 Jekyll 和 bundler gems.

    shell
    gem install jekyll bundler

  2. 测试 Jekyll

    shell
    jekyll help

至此 Jekyll 安装完成。

新建一个Jekyll网页

  1. 建立一个新的 Jekyll 网页，并且保存在目录./myblog下

    shell
    jekyll new myblog

  2. 进入目录./myblog

    shell
    cd myblog

  3. 编译网页并且创建一个本地网页服务器用于测试

    shell
    bundle exec jekyll serve

  4. 在浏览器中输入http://服务器IP:4000就可以预览页面

首先要了解 Jekyll 网站的目录结构，具体的的配置信息请参考https://www.jekyll.com.cn/docs/structure/

shell
.
├── _config.yml       #配置文件，用于配置网站的各种参数
├── _data             #存放格式化的站点数据应
|   └── members.yml
├── _drafts           #草稿箱
|   ├── begin-with-the-crazy-ideas.md
|   └── on-simplicity-in-technology.md
├── _includes         #可以存放一些用来复用的内容
|   ├── footer.html
|   └── header.html
├── _layouts          #存放网站的模版文件
|   ├── default.html
|   └── post.html
├── _posts            #存放已发布的文章
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
|   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
|   ├── _base.scss
|   └── _layout.scss
├── _site             #存放编译后的站点文件
├── .jekyll-metadata
└── index.html        # 主页

如果你像我一样懒，不太想去研究HTML、CSS、JS之类的，我们大可直接下载个模版来修改，只要注明引用出处就好了。这里我借用了黄玄大佬的模版https://github.com/Huxpro/huxpro.github.io/ 。

我们把他的模版Clone下来，然后去修改_config.yml内的各种参数就可以使用了。附上我自己的_config.yml供参考。

shell
# Site settings
title: Road's Blog
SEOTitle: Road's Blog | 生活日常：好物、装机、diy、黑苹果、mini主机 | 这里是 @大马路叫Road 的个人博客，与你一起发现更大的世界。
header-img: img/home-bg.jpg
email: [email protected]
description: "生活日常：好物、装机、diy、黑苹果、mini主机 | 这里是 @大马路叫Road 的个人博客，与你一起发现更大的世界。"
keyword: "马路, @大马路叫Road, Road‘s Blog, 博客, 个人网站, 好物, 装机, diy, 黑苹果, mini主机, Hackintosh, macOS"
url: "https://blog.malu.tech"              # your host, for absolute URL
baseurl: ""                             # for example, '/blog' if your blog hosted on 'host/blog'

# Publish posts or collection documents with a future date.
future: true

# SNS settings
RSS: false
weibo_username:     superlulula
zhihu_username:     ma-lu-58
github_username:    Road-tech
facebook_username:  malu.tech
linkedin_username:  路-马-8ab580116

# Build settings
# from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead.
highlighter: rouge
permalink: pretty
paginate: 10
exclude: ["less","node_modules","Gruntfile.js","package.json","README.md","README.zh.md"]
anchorjs: true                          # if you want to customize anchor. check out line:181 of `post.html`
# If you have timezone issue (e.g. #68) in China, uncomment to use this:
#timezone: CN  

# Gems
# from PR#40, to support local preview for Jekyll 3.0
# make sure you have this gem installed
# `$ gem install jekyll-paginate`
plugins: 
  - jekyll-paginate
  - jekyll-sitemap

# Markdown settings
# replace redcarpet to kramdown,
# although redcarpet can auto highlight code, the lack of header-id make the catalog impossible, so I switch to kramdown
# document: http://jekyllrb.com/docs/configuration/#kramdown
markdown: kramdown
kramdown:
  input: GFM                            # use Github Flavored Markdown !important
  syntax_highlighter_opts:
    span:
      line_numbers: false
    block:
      line_numbers: true
      start_line: 1

# Disqus settings
disqus_username: blog-malu-tech

# Netease settings
#netease_comment: false

# Analytics settings
# Baidu Analytics 
ba_track_id: 

# Google Analytics
ga_track_id: ''            # Format: UA-xxxxxx-xx
ga_domain: malu.tech

# Sidebar settings
sidebar: true                           # whether or not using Sidebar.
sidebar-about-description: "喵喵喵？<br>Miao？"     # For the next quantum leap<br>离开世界之前，一切都是过程"
sidebar-avatar: /img/100.png      # use absolute URL, seeing it's used in both `/` and `/about/`

# Featured Tags
featured-tags: true                     # whether or not using Feature-Tags
featured-condition-size: 1              # A tag will be featured if the size of it is more than this condition value

# Progressive Web Apps
chrome-tab-theme-color: "#000000"
service-worker: true

# MathJax rendering for layout:page (e.g. post preview)
page-mathjax: false

# Friends
# friends: [
#     {
#     #     title: "Su",
#     #     href: "http://su.gallery/"
#     # },{
#         title: "乱序",
#         href: "http://mida.re/"
#     },{
#         title: "Sherry Wu",
#         href: "https://xuechundesign.github.io"
#     }
# ]

如果是直接套用大佬们的模版，那常用的插件一般都会集成了。但是如果想要安装额外的插件，如我想安装jekyll-sitemap来方便Google来抓取我的网页：（安装的方法有很多种，这里介绍一种）

  1. 在 Gemfile里添加gem 'jekyll-sitemap'

  2. 编辑_config.yml文件，在plugins:项目里添加插件：

    shell
    #_config.yml
    plugins: 
      - jekyll-paginate
      - jekyll-sitemap   #新添加的插件

  3. 然后执行bundle install即可完成安装。

上文可知_posts目录下面是存放发布的文章的，Jekyll对格式有两个要求：

  1. 文章的文件名需要按照YEAR-MONTH-DAY-title.md进行命名。

  2. 文字开头必须包含YAML信息块。在YAML信息块要包含layout，标题，副标题，日期等信息。部分插件也需要在这里进行设置，如一些公式插件。

    markdown
    ---
    layout:     post                                       # 使用的布局（不需要改）
    title:      懒人升级！自动判断上下班+导航+放歌            # 标题 
    subtitle:   捷径(快捷指令)简易教程                      # 副标题
    date:       2020-12-20                                 # 时间
    author:     Road                                     # 作者
    header-img: img/iOSOneButtonNavigation&play-05.JPG    # 这篇文章标题背景图片
    catalog: true                                         # 是否归档
    tags:                                                # 标签
        - 捷径
        - 快捷指令
        - 一键导航
        - CarPlay

    ---

其实Jekyll最佳的归宿就应该是部署到Github Pages，因为Jekyll最初的开发者就是Github的创始人，而且很多Jekyll的开发者也是GitHub的员工，所以我们能看到Jekyll宛如GitHub的亲儿子般的存在。Jekyll部署到Github Pages支持自动生成页面，也就是可以把整个源码推送上去让Github来生成，可以说是又便宜又好用了。

但是因为各种原因(墙、HTTPS、百度爬不到等)我并不想放在GitHub上，而是希望放在自己的小服务器上。然而不少的教程会告诉你用官方的server指令，然后绑定一下端口域名就好了，也就是：

shell
jekyll serve

或者是简写：

shell
jekyll s

甚至还有教你添加更多选项的，如端口-p --port、后台运行-B --detach、检测到代码变动自动编译网页-w --watch, 如：

shell
jekyll s -p 80 --detach --watch

更多的配置选项可以参考Configuration Options | Jekyll • Simple, blog-aware, static sites

当然事实上 --watch不能与--detach共用，会提示：

shell
Auto-regeneration: disabled when running server detached.

也会有大佬给出解决方案，可以参考https://helloworldkb.com/6623314/jekyll服务%22-watch”不能与%22-detach”结合使用

可是我认为直接用官方的内置的web服务器来当正式上线的服务器是不妥的，毕竟这个内置的web服务器只是用来本地测试的(虽然我讲不出哪里不妥)。所以我认为更好的做法应该是把编译出来的文件交给专业的web服务器托管（如Apache、 Nginx 、IIS）。

记录一些指令

初期用自带的测试web服务器发布网页时用的网页，不推荐使用！

  • 可以使用命令将网站生成到目标文件夹：

    shell
    jekyll build --destination <destination>
    # => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

  • 启动服务器：

    shell
    bundle exec jekyll serve --host 0.0.0.0 --port 80 --detach 
    #后台启动测试服务器，端口设置为80
    shell
    setsid jekyll serve --host 0 --watch --force_polling &>/dev/null </dev/null &
    #后台启动测试服务器，并且发现变动时自动更新（不稳定，服务很容易）

  • 停止服务器

    shell
    sudo pkill -f jekyll

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK