使用jekyll写博客
文章目录
一、安装Ruby环境
从 https://rubyinstaller.org/downloads/ 下载 Ruby2.X的最新安装包,最好是带DEVKIT的,不建议下载3.X的,因为有些theme还不支持3.X的版本。
二、修改更新源
为了解决gem install以及bundle慢的问题,建议先更新源:
- 修改gem更新源
1gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
2gem sources -l
确保更新源只有 gems.ruby-china.com
- 设置bundle镜像
1bundle config mirror.https://rubygems.org https://gems.ruby-china.com
三、安装jekyll及其依赖
安装好Ruby环境后,使用下面的命令安装jekyll及其依赖
1gem install jekyll bundle webrick
四、新建博客站点
使用下面的命令新建一个blog站点
1# jekyll new blog
2 Running bundle install in D:/myblogs/blog...
3 Bundler: Fetching gem metadata from https://gems.ruby-china.com/...........
4 Bundler: Fetching gem metadata from https://gems.ruby-china.com/..
5 Bundler: Resolving dependencies...
6 Bundler: Using public_suffix 4.0.6
7 Bundler: Using addressable 2.8.0
8 Bundler: Using bundler 2.1.4
9 Bundler: Using colorator 1.1.0
10 Bundler: Using concurrent-ruby 1.1.9
11 Bundler: Using eventmachine 1.2.7 (x64-mingw32)
12 Bundler: Using http_parser.rb 0.6.0
13 Bundler: Using em-websocket 0.5.2
14 Bundler: Using ffi 1.15.3 (x64-mingw32)
15 Bundler: Using forwardable-extended 2.6.0
16 Bundler: Using i18n 1.8.10
17 Bundler: Using sassc 2.4.0 (x64-mingw32)
18 Bundler: Using jekyll-sass-converter 2.1.0
19 Bundler: Using rb-fsevent 0.11.0
20 Bundler: Using rb-inotify 0.10.1
21 Bundler: Using listen 3.6.0
22 Bundler: Using jekyll-watch 2.2.1
23 Bundler: Fetching rexml 3.2.5
24 Bundler: Installing rexml 3.2.5
25 Bundler: Using kramdown 2.3.1
26 Bundler: Using kramdown-parser-gfm 1.1.0
27 Bundler: Using liquid 4.0.3
28 Bundler: Using mercenary 0.4.0
29 Bundler: Using pathutil 0.16.2
30 Bundler: Using rouge 3.26.0
31 Bundler: Using safe_yaml 1.0.5
32 Bundler: Using unicode-display_width 1.7.0
33 Bundler: Using terminal-table 2.0.0
34 Bundler: Using jekyll 4.2.0
35 Bundler: Fetching jekyll-feed 0.15.1
36 Bundler: Installing jekyll-feed 0.15.1
37 Bundler: Fetching jekyll-seo-tag 2.7.1
38 Bundler: Installing jekyll-seo-tag 2.7.1
39 Bundler: Fetching minima 2.5.1
40 Bundler: Installing minima 2.5.1
41 Bundler: Fetching thread_safe 0.3.6
42 Bundler: Installing thread_safe 0.3.6
43 Bundler: Fetching tzinfo 1.2.9
44 Bundler: Installing tzinfo 1.2.9
45 Bundler: Fetching tzinfo-data 1.2021.1
46 Bundler: Installing tzinfo-data 1.2021.1
47 Bundler: Fetching wdm 0.1.1
48 Bundler: Installing wdm 0.1.1 with native extensions
49 Bundler: Bundle complete! 6 Gemfile dependencies, 35 gems now installed.
50 Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.
51 New jekyll site installed in D:/myblogs/blog.
五、启动本地服务预览博客
1# cd blog
2# bundle
3# jekyll s
4Configuration file: D:/myblogs/blog/_config.yml
5 Source: D:/myblogs/blog
6 Destination: D:/myblogs/blog/_site
7 Incremental build: disabled. Enable with --incremental
8 Generating...
9 Jekyll Feed: Generating feed for posts
10 done in 0.713 seconds.
11 Auto-regeneration: enabled for 'D:/myblogs/blog'
12 Server address: http://127.0.0.1:4000/
13 Server running... press ctrl-c to stop.
打开浏览器,浏览地址:http://127.0.0.1:4000/ 即可查看到页面了。
六、配置博客
在站点目录中有一个_config.yml文件,有以下配置项:
- title: 站点的标题
- email: 电子邮件地址
- description: 站点的描述信息
- baseurl: 站点子路径,比如:/blog
- url: 站点地址:比如:http://example.com
- twitter_username: 推特账号
- github_username: github账号
- theme: 主题颜色
- plugins: 插件
根据自身的情况进行配置,如果修改了theme,建议使用:
1bundle
命令来进行打包安装。
七、写博客
我们要写博客时需要写在_posts目录下,如果没有则新建一个。 文件名要求按:
年-月-日-标题.md
的形式命名,比如:2021-08-10-welcome-to-jekyll.md
在md文件中要求前面有标注,格式:
1---
2layout: post
3title: "Welcome to Jekyll!"
4date: 2021-08-10 15:24:37 +0800
5categories: jekyll update
6---
- layout 用于展示的排版类型
- title 博客的标题
- date 博客的写作日期时间
- categories 分类
- tags 标签
注意:
- layout需要与_config.yml文件中配置主题中有的layout匹配。
- categories以及tags中的命名不能包括一些特殊符号,比如C++的+号
可以通过在站点目录使用如下命令查看主题所在路径:
1D:\myblogs\blog>bundle info --path minima
2D:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/minima-2.5.1
主题所在路径D:/Ruby27-x64/lib/ruby/gems/2.7.0/gems/minima-2.5.1中_layouts目录下可以看到所有本主题可以使用的layout。
写好后,可以通过第五步的方式查看。
八、可能出现的问题
1. Windows下使用jekyll server本地预览文章可能会出现not found的问题
Windows下使用jekyll server本地预览文章可能会出现not found的问题,但是在_site文件夹下这些文件都存在,这应该是编码问题导致。 jekyll server使用的是webrick进行处理的,在D:\Ruby27-x64\lib\ruby\2.7.0\webrick\httpservlet下备份filehandler.rb,然后搜索force_encoding, 把使用了该函数的变量都使用一次force_encoding(“UTF-8”)。笔者的webrick是1.7.0版本的,搜索下来有两处:
1path = req.path_info.dup.force_encoding(Encoding.find("filesystem"))
后面添加一句:
1path.force_encoding("UTF-8")
还有一处:
1expanded.force_encoding(req.path_info.encoding)
后面添加一句:
1expanded.force_encoding("UTF-8")
这样使用:
1jekyll s
进行本地预览就不会出现找不到页面的问题了。
2. 如果博客内容中出现了特定标识怎么办?
{% raw %} jekyll使用的Liquid来进行解析的,比如Liquid规定以{{开始,以}}结束的字符串视作标签Liquid,但如果博客内容中恰好需要使用到这样的符号对,却不是Liquid标签,产生了语法冲突怎么处理?
需要在这样的文字段前加上{% raw %}标识,{% endraw %}在文字段后加上把标识替换成endraw即可。
祝好!
- 原文作者:Witton
- 原文链接:https://wittonbell.github.io/posts/2021/2021-08-13-使用jekyll写博客/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. 进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。