博客上线指南——基于Jekyll和Github Pages

发表于 | 更新于 | 分类于 ， | 本文总阅读量： 次
| 字数统计 1182

Jekyll(中文主页)是将Markdown等轻量化标记语言编写的文本转换为静态网页的工具，而Github Pages是Github提供的静态网页托管服务。生成工具与托管服务两者的结合就可以便捷地创建个人博客或项目主页。

挑选模板

从零开始亲自创建精致的个人博客当然需要耗费不少精力和时间，但幸好已经有不少优秀的开源博客模板可供直接选用。此处列举了一些：

模板名称 模板预览
NexT(主页) NexT预览
TeXt(主页) TeXt预览
Flexible Flexible预览
Github官方模板 官方预览
Jekyllthemes.org 网站预览
Jekyll-themes.com 网站预览

下面以NexT模板为例搭建博客。

  • Step 1：注册Github账号，Github用户名记为userid。
  • Step 2：将NexT模板仓库Fork到你的Github空间，将刚Fork到的NexT仓库更名为：userid.github.io (操作流程：NexT仓库页面 → Settings → Rename)
  • Step 3：你的博客现已成功上线。在浏览器地址栏输入https://userid.github.io尝试访问吧。[本人博客]。

定制版面

你可能需要调整博客版面以符合你的审美。调整版面需要修改_config.yml文件，可以直接在博客仓库里在线修改。但在以后的写作中，通常是在本地完成文稿后，再通过Git命令或Github Desktop推送到Github，所以趁现在就把需要用到的工具安装上吧。

  • Step 1：安装Github Desktop，并通过Github账户登录，将博客仓库下载到本地。
  • Step 2：使用文本编辑器修改_config.yml全局配置文件，关于NexT主题的配置项可参考NexT主页的说明。
  • Step 3：修改_config.yml配置文件后，在Github Desktop上把修改推送到博客仓库，配置才能生效。(操作流程：Github Desktop → Commit to master → Push origin)。

此处列举了一些常用配置项：

常用配置项 功能说明 可选值 示例
scheme 版面外观 Muse(默认)/Mist/Pisces scheme: Pisces
language 语言 en/zh-Hans/’ja’等10种语言 language: zh-Hans
menu 菜单 参考NexT主页-快速开始 可自定义菜单
title 博客名称 字符串 title: my blog
avatar 头像 图片链接 avatar: /image/avatar.png
rss RSS订阅 false/留空/具体地址 rss: false，即不启用
social 侧边栏社交链接 参考NexT主页-主题配置，Font Awesome图标 GitHub: https://github.com/userid
highlight_theme 代码高亮样式 normal/night/night eighties/night blue/night bright highlight_theme: normal
baidu_analytics 添加百度统计功能后，可自行登陆查看个人博客的访问情况 参考NexT主页 baidu_analytics: baidu_id
use_motion 动画效果 true(默认)/false use_motion: false
busuanzi_count 访问统计 true/false，参考NexT主页-第三方服务 enable: true
add_this_id Addthis分享功能 Addthis的用户id add_this_id: addthis_id
local_search 站内搜索 true/false enable: true
post_meta 显示创建、更新、分类信息(尚未完善) true/false created_at: true
post_wordcount 显示字数、阅读时间(尚未完善) true/false wordcount: true
custom_logo logo图案 true/false enable: true，image: /logo.png
mathjax 数学公式 true/false enable: true
version 版本，在文档最后一行 字符串 NexT的版本号

开始创作

定制好版面后，就可以开始创作了。Jekyll支持使用Markdown语言来撰写博文，它会将每一篇.md文章自动转换成.html格式进行发布。为了撰写.md文章时能够实时显示排版效果，此处推荐Github开发的Atom编辑器。

  • Step 1：安装Atom编辑器，关闭Markdown-preview插件(因其无法显示数学公式)后，安装Markdown-preview-plus增强插件：
    • File → Settings → Packages → markdown-preview → Disable；
    • File → Settings → Install → markdown-preview-plus。
  • Step 2：在博客仓库的_posts下新建year-month-day-title.md文档，在.md文档中写入内容，然后通过Github Desktop推送到线上的博客仓库，即完成博文的发布。

需要说明的是，Jekyll会将每个.md文档开头两行---之间的信息看作是YML头信息，然后根据头信息中的选项进行相应处理，常用的选项如下：

选项 作用 示例
title 博文标题 title: 第一篇博客
layout 布局 layout: post, 其它选项可参考_layouts中的文件名
excerpt_separator 摘要截取符，在截取符之前的文字将作为文章的摘要 excerpt_separator: <!--more-->
categories 为文章分类 categories： [Jekyll, Github]
tags 为文章加标签 tags: [Jekyll, Github]，类似于category的功能
published 是否发布 published: true
premalink 永久链接，用于从别的页面对当前页面进行引用 premalink: /start-blogging.html
comments 开启或关闭评论功能 comments: false
updated 更新时间 updated: 2018-06-10

目前，updated字段还不支持自动更新，需要手动修改日期，同时在_config.yml配置文件中设置：

post_meta:
  updated_at: true

例如，在本地博客仓库的_posts文件夹内新建一个2018-06-07-start-blogging.md的文件，然后写入以下内容并通过Github Desktop推送到Github，即可发布一篇标题为“开始你的博客之旅”的文章。

---
title: 开始你的博客之旅
layout: post
tags: [Blog, Jekyll]
published: true
excerpt_separator: <!--more-->
premalink: /start-blogging.html
updated: 2018-06-11
---
正文从此处开始...首篇博文...

常用功能(陆续更新…)

插入图片

假设图片的路径在本地博客仓库/images/pic1.png，用以下命令可将图片插入到文章中：

![图1]({~{"/images/pic1.png" | absolute_url}~})  # 把"~"号去掉

需要注意的是，目录不能以_开头，即不能将图片放在/_images/pic1.png内，否则将无法识别；此外，图片文件名和后缀是大小写敏感的。

如果需要调整图像尺寸或对齐方式，采用以下代码：

<img src="https://yang-jq.github.io/images/pic1.png" width="25%" alt="图1" div align="center" />  
# 注意，src最外层的""不能省略；参数之间用空格隔开；width和align的参数需要加双引号，比如 width="100", 意为100 pixels。

插入附件

假设需要向文章中插入.pdf文件，可用跟插入图片类似的方法：

[点此下载]({~{"/pdfs/paper.pdf" | absolute_url}~})  # 把"~"号去掉

引用文章

假设需要从一篇文章/article1.md中链接到另一篇文章/article2.md，首先在/article2.md的YML头信息中设置永久链接：premalink: /article2.html，那么可通过以下命令实现引用：

[我的简介]({~{"/article2.html" | absolute_url}~})  # 把"~"号去掉

插入图标

Font Awesome提供了将近700个高质量的矢量图标和公司商标。可通过以下代码段向文章中插入图标或商标。需要提醒的是，商标涉及专利或版权，使用需慎重。

  • 默认样式 
    <i class="fa fa-github"></i>
  • 指定图标大小 
    <i class="fa fa-github" style="font-size:24px;"></i>
  • 指定图标颜色 
    <i class="fa fa-github" style="color:red;"></i>

    颜色值可以指定为RGB值，比如color:#8A2BE2(紫)。16种预定义的颜色名称为：aqua， black， blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow。

  • 按比例缩放图标 
    <i class="fa fa-github"></i>  # 原始大小
<i class="fa fa-github fa-lg"></i> # large尺寸
<i class="fa fa-github fa-2x"></i>  # 2x尺寸
  • 固定宽度
    使用fa-fw将图标设置为一个固定宽度，主要用于不同宽度图标无法对齐的情况，尤其在列表或导航时实现对齐。 



    <i class="fa fa-home fa-fw"></i>
<i class="fa fa-book fa-fw"</i>
<i class="fa fa-pencil fa-fw"></i>
<i class="fa fa-cog fa-fw"></i>
  • 图标旋转动画
    使用fa-spin可以使任意图标旋转，使用fa-pulse则进行8方位旋转： 
    <i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
  • 旋转及翻转图标
    使用fa-rotate-*和fa-flip-*可以对图标进行任意旋转和翻转：
    ：原始样式
    ：旋转90度
    ：旋转180度
    ：旋转45度
    ：水平翻转
    ：垂直翻转 
    <i class="fa fa-shield"></i>：原始样式
<i class="fa fa-shield fa-rotate-90"></i>：旋转90度
<i class="fa fa-shield fa-rotate-180"></i>：旋转180度
<i class="fa fa-shield fa-rotate-45"></i>：旋转45度
<i class="fa fa-shield fa-flip-horizontal"></i>：水平翻转
<i class="fa fa-shield fa-flip-vertical"></i>：垂直翻转
  • 组合图标
    使用fa-stack作为父容器将多个图标组合后使用：
    + = 
    <span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>

Emoji表情

:smile: :flushed: :joy: :triumph: :white_flower: :sunny:

:smile: :flushed: :joy: :triumph: :white_flower: :sunny:

更多的Emoji表情代码请参考Emoji cheat sheet

字数统计

在_config.yml配置文件中设置：

post_wordcount:
  wordcount: true
  separated_meta: false

参考文献

  1. Jekyll主页：https://jekyllrb.com/，中文主页。
  2. Github Pages：https://pages.github.com/。
  3. NexT模板仓库：https://github.com/Simpleyyt/jekyll-theme-next。
  4. Font Awesome主页：http://fontawesome.dashgame.com/。
  5. Emoji表情代码主页：https://www.webpagefx.com/tools/emoji-cheat-sheet/。