Jekyll + Github = 简单搭建一个我的博客

时间 2019-11-08

原文原文链接

在我成功试水，搭建了本身的我的博客后，我体会到了 Jekyll 制做网站的轻便性。而 GitHub Pages 对 Jekyll 的支持，又省去了建站时服务器和域名的搭建过程。在查阅网上的资料时，大牛们都是先在本地作好 Ruby + Jekyll 的环境，调试完成后再上传至 GitHub 上。可是我在安装 Jekyll 这一步卡住了。无奈之下我寻找了一种更加“轻量化”的解决方法：直接在 GitHub 上对模版进行编辑和调试，这样咱们就不须要在本地搭建环境。不过由于 GitHub 在国内的访问速度较慢，因此这篇教程同时介绍 GitHub 和 Gitee 的建站方法。建站完成的效果，你们能够参考一下个人我的博客：html

Github(已绑定域名): cometeme的我的博客git
Gitee: cometeme的我的博客github

1.寻找模版

在开始以前，咱们须要先到 Jekyll Themes 上面寻找本身喜欢的模版。模版介绍界面的 Demo 按钮能够查看模版的示例网站。若是你喜欢这个模版，你能够点 Download 将其下载并解压。服务器

2.简单介绍文件结构

解压完成以后，你应该能看到这样一些文件夹。以个人网站为例并发

不一样的模版可能文件的个数不同，可是必定会有这几个关键文件：编辑器

index.html 首页的文件post
_config.yml 设置你的网站信息学习
404.html 自定义404界面（这个通常都会有，若是没有的话就会使用最“原始”的404页面）网站
README.md （很重要！）做者通常会在这个文件中介绍如何配置模版。若是没有这个文件，请从新打开你下载的模版的介绍页面，下方应该会有提示。3d

同时，文件目录下应该也会有这些文件夹：

_post 存放你的文章
_layouts 网页模版文件
_includes 导航栏，页脚等组件模版

3.修改信息

接下来就是对你的网站进行自定义的环节。

先打开 README.md 这个文件并仔细阅读。打开 _config.yml ，根据里面有的注释进行修改。由于没有搭建本地环境。因此修改后的成果是没法查看的。固然 _config.yml 在以后均可以随时修改，因此在稍微修改以后，咱们就能够先进行下一步。等到网站搭建完成了以后能够继续细调。

4.注册 GitHub/Gitee 帐号

接下来咱们应该注册帐号，若是已经注册过了就能够跳过这一节。目前对 Jekyll Pages 的支持比较好的有 GitHub 和 Gitee。推荐先使用 GitHub ，再使用 Gitee 。（由于 Gitee 能够直接将 GitHub 的仓库同步过去）

网址：

GitHub
Gitee

5.建立我的站点的仓库

如今咱们能够建立一个仓库（ Repository ）。不过 Pages 分为项目 Pages 和我的 Pages 。其中我的 Pages 能够经过特殊的域名访问。（好比本站是 https://cometeme.github.io ）要建立我的 Pages ，仓库的名称必需要符合必定的规则。 GitHub 与 Gitee 二者的名称规则不一样。

GitHub：仓库名称要求为 username.github.io
Gitee：仓库名称要求为 username

若是想要以后直接将 GitHub 上面的项目克隆至 Gitee ，能够先按照上面的规则建立一个空的项目，而后在“远程仓库”这一栏添加 Github 仓库的 .git 连接

项目建立完成后，咱们打开项目，将本地的修改过的模版文件框选拖至窗口中，等待上传完成后提交。（底下的介绍能够用默认的，建议直接提交至 master 分支）。提交完成后，就是如下的效果了：

6.开启 Pages 服务

GitHub

选中菜单的 Settings 选单。

找到下方的 GitHub Pages 选项。（本图中已经开启，若是没有开启只须要点击相应的按钮开启便可）其中上方提示 "Your site is published at https://cometeme.github.io/" 说明已经部署完成了。这个时候你点击那个连接就能够看到本身的网页。（ GitHub 的页面更新速度较慢，有些时候作必定的更改要过段时间刷新才生效）

Gitee

选择菜单中的 服务 。

进入 码云 Pages 页面。并在下方选中 master 分支，点击部署。部署完成后一样会给出一个连接。点开就是架好的博客了。

若是到这里你的网页可以成功显示，那么恭喜你，你完成了建站所须要的全部步骤。接下来就只须要对界面再进行一些微调（好比修改首页图片，自定义 about 页面等），并发布你的文章。

7.修改首页图片/我的头像

若是单纯地套用模版，你们作出来的网页就不免会“撞脸”。这个时候，自定义一下首页的图片是最好的选择。

随便翻翻模版的文件，总可以找到几张图片格式的文件。它们其中就有首页的头图。当你找到它以后，你只须要用一张新的图片替换就能够简便地更换首页的图片。不过永远要注意的是，上传图片前最好先进行必定的裁剪使得图片适合那块区域的大小。其次最好对图片进行必定的压缩，通常 800kb 是一个比较好的选择。

寻找图片是否是很头痛？给你们推荐一个好用的“免费无版权“的图库： Unsplash 。它上面的图片能够直接用于商用而不须要任何版权受权，并且 Unsplash 上的图片品质都比较高，我博客上的全部图片都是来源于它。

找到一张合适的图片并进行处理后，将它命名为与原头图名称相同的文件（包括文件格式），而后上传到 GitHub 上面就能够将原来的图片覆盖，实现替换。不过为了不出错，最好先将原来的图片下载下来“备份”一下。一样的，只要你能找获得网页的各部分图片，你均可以将它们替换。替换完成后，打开你的博客并刷新一下，看看有没有什么变化

通常更改完图片，或是发布一篇新的文章后，网页须要较长的时间来更新。（也就是说有可能你刷新几遍发现图片没换）这时千万不要觉得失败了，等待1-2分钟以后再刷新试试看

8.什么是 YAML ？

YAML 指的是一个文件的头信息。你能够用它来定义这篇文章的写做时间、标题、引用图片等等。每一个文章都必需要有头信息才能被模版正确地读取。

头信息的内容被夹在两行 --- 之间，你须要将它放在整个文章的最上方。每一个模版对于 YAML 的定义不一样。通常在你的模版中的 _post 文件夹中必定有几篇预置的文章。用文本编辑器打开它，你就能看到你所须要的头信息了，好比说个人模版：

---
layout: post
title: 'Jekyll + Github = 简单搭建一个我的博客'
subtitle: ‘轻量化静态博客搭建指南’
date: 2018-08-08
categories: Jekyll+GitHub
cover: '../../../assets/img/Jekyll-header.jpg'
tags: Jekyll Github Gitee Markdown HTML JavaScript
---

不一样的模版参数的格式都不一样，不过以个人为例，其中这些参数有如下做用：

layout：选定一个模版文件，通常不须要改
title：文章的标题名
subtitle：文章的小标题
date：文章的时间
catagories：文章的分类，不一样分类可用空格分割
cover：文章的封面图片位置
tags：文章的标签。相似于catagories，能够分的更细一些

通过上面的介绍后，咱们了解 YAML 的做用。在学习了 YAML 以后，咱们就能开始建立文章了！

9.建立你的第一篇文章

首先先在 _post 文件夹中新建一个文件。在 Jekyll 中的文章，文件名必须是 年-月-日-文章名.md 的形式（其实也能够是 .html ,可是在这里我推荐你们用 Markdown 编写文章），例如 2018-08-08-Jekyll+GitHub=简单搭建一个我的博客.md 。

建立完一个新的文章以后，咱们用文本编辑器打开它，并将其余文章的 YAML 头复制进来，并进行必定的修改。在头文件的下方，咱们就能够用 Markdown 写咱们的文章了。为何要推荐使用 Markdown 呢？

Markdown 的优势：
- 能够用简单的语法来实现建立标题，进行加粗等操做。
- 对能够很方便地显示代码、代码块。
- 不须要学习 html 的语法，能够专一于写做自己。
Markdown 的缺点：
- 须要用专门的软件来显示。不一样的软件显示效果会不一样。
- 排版不直观，若是两个天然段之间只有一个换行，它就会连在一块儿。
- 指令有些多，须要记。

虽然 Markdown 的缺点也有些多，可是它的确可以让你专一于写做。不过在写做以前，你须要先：

准备一个 Markdown 编辑器，能够实时显示 Markdown 的效果。( GitHub 在编辑 Markdown 文件时也能够切换显示，可是在 GitHub 的书写有些不畅)
学习一些简单的 Markdown 语法。

学习了一部分 Markdown 语法后，你就能够完成第一篇文章并发布它。当你把它上传到 GitHub 上的 _post 文件夹以后，你就能够在你的博客中看到它。不过记得将它引用的照片传到相应的目录，否则的话它但是不会显示的哦。

结语与其余文档

这样就完成了搭建 Github Pages 我的博客的操做了。接下来，你就能够对它进行更多地自定义操做，而且添加更多的内容。但愿你们可以在写我的博客的过程当中提高本身的技术水平，并将本身的学习经验分享给更多人。