使用jekyll写博客
文章目录
- 一、安装Ruby环境
- 二、修改更新源
- 三、安装jekyll及其依赖
- 四、新建博客站点
- 五、启动本地服务预览博客
- 六、配置博客
- 七、写博客
- 八、可能出现的问题
- 1. Windows下使用jekyll server本地预览文章可能会出现not found的问题
- 2. 如果博客内容中出现了特定标识怎么办？
一、安装Ruby环境
从 https://rubyinstaller.org/downloads/ 下载 Ruby2.X的最新安装包，最好是带DEVKIT的，不建议下载3.X的，因为有些theme还不支持3.X的版本。
二、修改更新源
为了解决gem install以及bundle慢的问题，建议先更新源：
- 修改gem更新源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l
确保更新源只有 gems.ruby-china.com
- 设置bundle镜像
bundle config mirror.https://rubygems.org https://gems.ruby-china.com
三、安装jekyll及其依赖
安装好Ruby环境后，使用下面的命令安装jekyll及其依赖
gem install jekyll bundle webrick
四、新建博客站点
使用下面的命令新建一个blog站点
# jekyll new blog Running bundle install in D:/myblogs/blog... Bundler: Fetching gem metadata from https://gems.ruby-china.com/........... Bundler: Fetching gem metadata from https://gems.ruby-china.com/.. Bundler: Resolving dependencies... Bundler: Using public_suffix 4.0.6 Bundler: Using addressable 2.8.0 Bundler: Using bundler 2.1.4 Bundler: Using colorator 1.1.0 Bundler: Using concurrent-ruby 1.1.9 Bundler: Using eventmachine 1.2.7 (x64-mingw32) Bundler: Using http_parser.rb 0.6.0 Bundler: Using em-websocket 0.5.2 Bundler: Using ffi 1.15.3 (x64-mingw32) Bundler: Using forwardable-extended 2.6.0 Bundler: Using i18n 1.8.10 Bundler: Using sassc 2.4.0 (x64-mingw32) Bundler: Using jekyll-sass-converter 2.1.0 Bundler: Using rb-fsevent 0.11.0 Bundler: Using rb-inotify 0.10.1 Bundler: Using listen 3.6.0 Bundler: Using jekyll-watch 2.2.1 Bundler: Fetching rexml 3.2.5 Bundler: Installing rexml 3.2.5 Bundler: Using kramdown 2.3.1 Bundler: Using kramdown-parser-gfm 1.1.0 Bundler: Using liquid 4.0.3 Bundler: Using mercenary 0.4.0 Bundler: Using pathutil 0.16.2 Bundler: Using rouge 3.26.0 Bundler: Using safe_yaml 1.0.5 Bundler: Using unicode-display_width 1.7.0 Bundler: Using terminal-table 2.0.0 Bundler: Using jekyll 4.2.0 Bundler: Fetching jekyll-feed 0.15.1 Bundler: Installing jekyll-feed 0.15.1 Bundler: Fetching jekyll-seo-tag 2.7.1 Bundler: Installing jekyll-seo-tag 2.7.1 Bundler: Fetching minima 2.5.1 Bundler: Installing minima 2.5.1 Bundler: Fetching thread_safe 0.3.6 Bundler: Installing thread_safe 0.3.6 Bundler: Fetching tzinfo 1.2.9 Bundler: Installing tzinfo 1.2.9 Bundler: Fetching tzinfo-data 1.2021.1 Bundler: Installing tzinfo-data 1.2021.1 Bundler: Fetching wdm 0.1.1 Bundler: Installing wdm 0.1.1 with native extensions Bundler: Bundle complete! 6 Gemfile dependencies, 35 gems now installed. Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed. New jekyll site installed in D:/myblogs/blog.
五、启动本地服务预览博客
# cd blog
# bundle
# jekyll s
Configuration file: D:/myblogs/blog/_config.ymlSource: D:/myblogs/blogDestination: D:/myblogs/blog/_siteIncremental build: disabled. Enable with --incrementalGenerating...Jekyll Feed: Generating feed for postsdone in 0.713 seconds.Auto-regeneration: enabled for 'D:/myblogs/blog'Server address: http://127.0.0.1:4000/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，建议使用：
bundle
命令来进行打包安装。
七、写博客
我们要写博客时需要写在_posts目录下，如果没有则新建一个。
文件名要求按：
年-月-日-标题.md
的形式命名，比如：2021-08-10-welcome-to-jekyll.md
在md文件中要求前面有标注，格式：
---
layout: post
title: "Welcome to Jekyll!"
date: 2021-08-10 15:24:37 +0800
categories: jekyll update
---
- layout 用于展示的排版类型
- title 博客的标题
- date 博客的写作日期时间
- categories 分类
- tags 标签
注意：
- layout需要与_config.yml文件中配置主题中有的layout匹配。
- categories以及tags中的命名不能包括一些特殊符号，比如C++的+号
可以通过在站点目录使用如下命令查看主题所在路径：
D:\myblogs\blog>bundle info --path minima
D:/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版本的，搜索下来有两处：
path = req.path_info.dup.force_encoding(Encoding.find("filesystem"))
后面添加一句：
path.force_encoding("UTF-8")
还有一处：
expanded.force_encoding(req.path_info.encoding)
后面添加一句：
expanded.force_encoding("UTF-8")
这样使用：
jekyll s
进行本地预览就不会出现找不到页面的问题了。
2. 如果博客内容中出现了特定标识怎么办？
{% raw %}
jekyll使用的Liquid来进行解析的，比如Liquid规定以{{开始，以}}结束的字符串视作标签Liquid，但如果博客内容中恰好需要使用到这样的符号对，却不是Liquid标签，产生了语法冲突怎么处理？
需要在这样的文字段前加上{% raw %}标识，{% endraw %}在文字段后加上把标识替换成endraw即可。
祝好！
使用jekyll写博客相关推荐
- python实现自动发送微博，当自己写博客时同步上去。
一.需求: 自己在github上搭建一个基于Jekyll的博客(http://beginman.cn/),每次写完博客后就要push上去,博客写的再好,基本上没人访问,为了增加访问量,就想利用起来微博 ...
- Github Pages + Jekyll 独立博客一小时快速搭建上线指南
只要一小时?! 人生道路上布满了坑,于是有了人生导师. 美丽的地球上布满了坑,于是有了Google Earth. 使用Github Pages搭建独立博客的过程中布满了坑,所以有了这篇指南. 我在 ...
- Jekyll 教程——博客功能（blog）
相信很多程序员选择 Jekyll 是为了搭建个人博客,虽然它远不止于此.本篇我们就来介绍 Jekyll 的博客功能. 博客文件约定 当一个全新的 Jekyll 项目创建完成时,默认会生成一个 _pos ...
- github+jekyll 搭建博客最全教程（一次性完成）
介绍 Jekyll 是一个简单的博客形态的静态站点生产机器.它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的 ...
- markdown stackedit 与cnblogs 结合写博客
##markdown stackedit 与cnblogs 结合写博客爱好markdown写作的人都知道stackedit的大名.一直想找一个比较好的博客平台.但个人比较懒,不喜欢名声在外的githu ...
- 10 年 bloger 告诉你要不要写博客，又该如何优雅地写博客？
点击上方蓝色字体,关注我 -- 一个在阿里云打工的清华学渣! 关于作者:程序猿石头(ID: tangleithu),现任阿里巴巴技术专家,清华学渣,前大疆后端 Leader.公众号后台回复关键字 &q ...
- 开源项目贡献者_嘿新手开源贡献者：请写博客。
开源项目贡献者 by Shubheksha 通过Shubheksha 嘿新手开源贡献者:请写博客. (Hey newbie open source contributors: please blog ...
- 坚持写博客给我带来了什么
从16年4月来深圳之后我就开始写博客,最开始写博客的阵地是在简书.简书以它良好的写作体验和简洁的博客展示界面吸引了我.我在简书坚持写了一年,大概写了60篇文章,字数在五万字左右,文章质量中等偏下,纯粹 ...
- 如果只能通过IE写博客【Do we write blog just only with IE?】
今天正想着写篇博文,依旧用我熟悉的FIREFOX打开51cto的博客页面.但是当我单击[管理博客]后,突然发现管理页面已经不能很好的显示了!如下图: 单击[添加文章],进度条完成后,没有任何反应.其他 ...
最新文章
- c# 字符串排序 （面试题）
- (课程)基于Spark的机器学习经验
- html5 自动生成迷宫,HTML5 Canvas随机迷宫生成动画
- mysql 将查询所得结果集的某一字段拼接成字符串
- 信息学奥赛一本通（1251：仙岛求药）
- vb一个使用URLDownloadToFile实现文件下载的类
- windows 拖拽功能
- 【Vue】var that=this写法的意义
- 百度 UNIT 使用
- 乌尔都语简介和Unicode由来
- NNDL 实验五 前馈神经网络（3）鸢尾花分类
- 计算机学院王春枝教授实验室,全国高等学校计算机科学与技术教学成果获奖证书.doc...
- 计算机基础知识电大形考任务5,国家开放大学电大专科《计算机平面设计(1)》网络课形考任务4及任务5答案.doc...
- 网络与信息安全实验总结（报文监听与分析，漏洞扫描，逆向工程，安全产品）
- 请问我这表该如何遍历呢？
- 安装VLC媒体播放器
- BGP线路是什么意思？服务器单线、双线、三线以及BGP线路有什么区别？
- 当Transformer遇见偏微分方程求解
- 语音合成系统WORLD
- 行将消失的王者:回顾ATI