想做个人博客好久了，之前工作忙，也尝试过，但是没有成功后来就不了了之。最近工作不忙，抓紧时间，好好研究了下搭建个人博客的方法。
如果你也想在互联网世界中拥有一块属于自己的”一席之地“，那么看完这篇教程，无论是完全不懂技术的小白，还是有一定编程基础的程序员，都将无偿获得由开源力量提供的一处说话、记录、分享的地方：博客。
首先，我们搭建博客的有几个很重要的条件：
- 不需要我们去了解服务器的复杂运行原理；
- 操作资源，如：编辑文件有专门的可视化工具；
- 让我们关注博客内容本身，有专门的模板选择套用；
- 能以较低的经济成本甚至免费持续托管我们的博客内容。
带着上述的需求，我在网上搜索一段时间，后发现 GitHub Pages 其实就可以。从事软件开发的朋友，都知道这个号称全球最大的同性交友网站：GitHub。
如果你第一次听说，也没关系。在 GitHub 托管博客不需要我们去专门学习编程，只需要注册账号即可。
当然，仅仅有 GitHub Pages 还不够，因为我们期望靠套用模板来自动生成我们想要的博客界面。再一次，在开源的力量下，我们至少有以下2种轻量级博客框架可以使用：
这2个框架我都使用过，Hexo 上手比较容易，依赖少，命令简单，但是检索出来的教程很多都是写的不详细，我也就没有继续研究了。
再者，因为 GitHub Pages 官方指定的合作框架是 Jekyll ，我也就选择了基于 Jekyll 进行搭建。
V1.0.1
- 参考"简书"的语法高亮样式
V1.0
- 代码高亮的样式修改
- 段落实现两端对齐
-
基础部分
以下基础部分，均可通过
_config.yml、*.html、*.json等文件快速定制，无需改写代码，对大部分人来说已经足够。 -
开始准备
-
侧边栏说明
-
底部社交账号
-
插件部分
-
顶部展示
-
高级部分
高级部分则适用于富有探(zhe)索(teng)，极(zhuang)客(bi)精神的人。比分说，博客美化：代码高亮样式、字体显示、组件增加...
① 通过下面的命令行来克隆（下载）博客模板：
$ git clone -b blog-template https://i.codeku.me/Meswx/meswx.github.io.git --depth 1
或者
$ git clone -b blog-template https://v2.github.codeku.me/Meswx/meswx.github.io.git --depth 1
因为GitHub国内访问速度慢，所以我找了插件加速过我的仓库地址。
等下载下来后，你可以把.git目录给删除掉，然后重新git初始化，上传到你的仓库中。
② 按照 Jekyll官网中文文档指南 的指导进行 Jekyll 的安装。
① 安装成功后，即可在命令行运行博客框架：
$ jekyll s
② 本地运行后，博客模板的效果如下：
在博客右边的FEATURED TAGS栏，我们可以看到很多标签🏷，这个是怎么做到的呢？
这个是博客框架根据你的_posts目录下，md文件的头部信息提取出来的，配置项在_config.yml中如下图的位置：
# 个性标签（Featured Tags）
featured-tags: true # 是否使用首页标签
featured-condition-size: 0 # 相同标签数量大于这个数，才会出现在首页右侧
我这里featured-condition-size设置为0，意思就是每篇博客中的tags都展示（已过滤相同的）：
---
layout: post # 默认就是post，无需修改
title: Mac电脑上常用快捷键整理（不定期更新） # 你文章的标题，当然你自己定
subtitle: 学好快捷键 | 提升不止工作效率 | 还有你的时间 # 文章的副标题，自己定
date: 2019-08-05 # 博客发布的日期
author: Meswx # 博客的作者，肯定就是你啊
header-img: img/post-bg-mac-shortcuts.jpg # 博客顶部配图，图片名称格式：post-bg-<blog name>
catalog: true # 本篇博客是否启用分类
tags:
- Shortcuts
- macOS
---
记住，以后要发布的博客文章，在md文件头部都要添加像上图一样信息项：
右边侧边栏中About me，包括头像，个人简介，社交信息：
设置是在_config.yml文件里面的Sidebar settings配置项中：
sidebar: true # 是否使用侧边栏（头像，简介...），看个人喜好吧，我这里启用
sidebar-about-description: "Live, work, pose!<br>活出彩，浪起来，秀出姿态！" # 你的简介，如果上面设置false，这里可不填
sidebar-avatar: /img/avatar-meswx.jpg # 你的头像图片的地址
个人简介下面的社交账号图标，和博客底部的是一个样式的，所以在这里就不赘述了。
设置是在_config.yml文件里面的Friends配置项中：
friends: [
{
title: "Hux Blog", # 要显示的名称
href: "http://huangxuan.me/" # 好友的博客链接
},
{
title: "BY Blog", # 要显示的名称
href: "https://github.com/qiubaiying" # 好友的博客链接
},
{
title: "Clean Blog", # 要显示的名称
href: "http://blackrockdigital.github.io/startbootstrap-clean-blog-jekyll/" # 好友的博客链接
}
# 可以无限加，注意数组语法，如果再加第3个，则需要在第2个的花括号“}“后面加上英文的逗号","
]
配置在_config.yml文件里面的SNS settings配置项中：
RSS: false # 是否启用RSS订阅
# weibo_username: zhangsan # 签名加了"#"号就表示，注释掉了，不设置微博账号
zhihu_username: meswx # 知乎，找到个人知乎主页，如：https://www.zhihu.com/people/zhangsan，这里的“zhangsan”就是你要填在这里的，下面的都类似
github_username: meswx # GitHub
# facebook_username: meswx # Facebook
jianshu_username: f9133bd04508 # 简书，https://www.jianshu.com/u/f9133bd04508，简书链接前面固定部分已经代码中写好，你只需要把你的id填到这
twitter_username: meswx # Twitter
# 想加更多社交账号的只能看代码了，一般来说上面都够用了，如有需要，请联系我：meswx@outlook.com
目前，支持的社交媒体号包括：
- 简书
- 知乎
- 微博
- Github
- 领英
以上定制代码，位于_includes目录下的footer.html中：
你可以依葫芦画瓢，增加更多的社交媒体入口。
如无特别声明，该段版权文本会填写你的博客名称；如想修改其他字样，请到footer.html下修改：
<p class="copyright text-muted">
Copyright © {{ site.title }} {{ site.time | date: '%Y' }}
<br>
Powered by <a href="{{ site.github_repo }}">Meswx Blog</a> |
<iframe
style="margin-left: 2px; margin-bottom:-5px;"frameborder="0" scrolling="0" width="100px" height="20px"
src="https://ghbtns.com/github-btn.html?user={{ site.github_username }}&repo={{ site.github_username }}.github.io&type=star&count=true" >
</iframe>
</p>考虑到国内访问谷歌的网络问题，我们还是选择使用百度统计来进行网站的统计分析。
① 到 百度统计 的官网使用你的百度账号登录：
② 为你的网站生成相应的id：
③ 把百度统计生成的id拷贝到_config.yml对应的位置即可。
① 在_config.yml添加如下配置项：
② 去 GitHub Page 上注册下App。
③ 把下图中Client ID等信息拷贝到_config.yml对应的位置：
④ 打开你的博客文章，使用你的GitHub账号登录后，测试下评论：
让我们都看看，博客顶部都有哪些个元素：
中间最显眼的就数博客标题了，它们在_config.yml中如下位置配置：
title: Meswx Blog # 你的博客名称，如：唐太宗的博客，以下配置如无特别说明，英文中文都OK
SEOTitle: 祥仔的博客 | Meswx Blog # 这个是显示在浏览器Tab上的标题，如未指定该配置参数，系统会默认显示上面的title
header-img: img/home-bg_meswx.jpg # 这个定义了博客首页的顶部背景图，可以根据自己的喜好，设置不同的图
# email: meswx@outlook.com # 你的邮箱，右边头像栏底下显示
description: "这里是 @Meswx祥仔 的个人博客，互联网发声专属领地。" # 博客描述，这个内容不会显示在博客界面上，可以随便写点
keyword: "祥仔, Meswx, @meswx, 祥仔的博客, Meswx Blog" # 博客的索引关键字，多个关键字使用英文状态下的逗号隔开
url: "http://meswx.github.io" # 这里填我们GitHub账号的仓库（repo）名称，如：http://xxx.github.io
baseurl: "" # 可忽略，官方解释：for example, '/blog' if your blog hosted on 'host/blog'
github_repo: "https://github.com/Meswx/meswx.github.io.git"
参见上节。
博客标题下方的小字介绍，并不在_config.yml中，而是需要我们去index.html中修改：
按照 Jekyll：代码高亮 章节的文档，我们在_config.yml中的highlighter参数中设置代码高亮的脚步：
highlighter: rouge # Jekyll 代码高亮脚本
但是我觉得默认的代码高亮的背景样式不太友好，我想要的是这种效果：
VS
默认的显示效果却是这样的：
这个时候我们就要修改 代码高亮样式 ：/css/syntax.css等css样式文件。
通过浏览器的开发模式，我们可以随机修改样式：
最后成功改造成功：
持续更新中...