通过阅读你能了解到:

  1. 掌握 GitHub Pages 规则;
  2. 使用 Jekyll 本地预览;
  3. 学习 Markdown 语法;
  4. 接触 Git 概念。

——意尽而知其然,思深则所以然。

进阶知识

我知道世界上有很多值得去的地方,我也知道写博客的地方有很多,但我就喜欢自定义,也只认可自己的风格,这就是我。

1. 掌握 GitHub Pages 规则

从仓库设置的 GitHub Pages 选项中,找到 学习更多 按钮:

通过 学习更多,了解到以下要点:

如果没有以上任何分支或文件夹,那么站点将被设置为“无”:

学习更多 中有一句话:

For more information about the different types of GitHub Pages sites, see “User, Organization, and Project Pages.”

想要查看关于 GitHub Pages 站点不同类型的更多信息,参见:用户、组织和项目页面

不同类型站点的区别:

用户、组织和项目页面 中有个小提示:

Tip: GitHub Pages sites are always publicly accessible when published, even if their repository is private, and they shouldn’t be used for sensitive transactions like sending passwords or credit card numbers. For more information, see “What is GitHub Pages?

这就是我想要的 什么是 GitHub Pages,点进去看看:

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

简单来说,GitHub Pages 就是个人、组织或项目主页的托管服务。

GitHub Pages 的使用限制:

如果有兴趣了解更多,请参考:GitHub Pages 基础知识

2. 使用 Jekyll 本地预览

什么是 GitHub Pages 文章末尾找到 超越 GitHub Pages 基础

点进去之后,我找到了我想要的 自定义 GitHub Pages

2.1 发现 Jekyll

对于 自定义 GitHub Pages,目前我们只需要关心这些内容:

首先查看 关于 GitHub Pages 和 Jekyll 的简介:

GitHub Pages is deeply integrated with Jekyll, a popular static site generator designed for blogging and software documentation, but used for much more.

翻译:GitHub Pages 与 Jekyll 深度集成,Jekyll 是一款专门为博客和软件文档设计的流行静态站点生成器,但它也用于更多场景。

Jekyll 的主要优点:

文章的末尾,我们找到 Jekyll 文档

让我们进入 Jekyll 文档 看看:

2.2 了解 Jekyll

Jekyll 官方简介:

Transform your plain text into static websites and blogs.

翻译:将纯文本转换为静态网站和博客。

Jekyll 的三个特点:

2.3 试运行

一秒安装运行:

~ $ gem install bundler jekyll
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle exec jekyll serve

一般来说,有命名行命令或者安装步骤,我都喜欢先尝试一下:

提示:你有可能会遇到 gem 命令未找到的错误,甚至根本不知道在哪里运行这条命令。没有关系,你先看着,后面会告诉你怎么解决这些问题。

第一条命令“艰难”地运行成功,再看看第二条:

依然向我申请了 sudo 权限,才得以成功安装。

继续执行后面的命令:

然后打开浏览器,输入:localhost:4000,查看:

确实有够简单粗暴的,而且页面布局都已经弄好,就等我把里面的东西改一改,我的博客就可以上线了。

尝试了一秒安装运行之后,让我们从 Jekyll DOCS 开始本地预览:

2.4 安装完整的开发环境

Jekyll 是用 Ruby 写的,所以我们要在本地运行和预览,就必须安装 Ruby 开发环境:

各种操作系统的安装指南:

提示:由于我的电脑是 Windows 系统,因此其他操作系统请自行参考官方文档,我仅演示在 Windows 系统中的安装和运行。

在 Windows 10 的 1607 版本之后,自带有一个 Linux 子系统,我们称之为:WSL

通过使用 WSL 安装 Ubuntu 系统,我们就可以很嗨皮地在本地运行和预览 Jekyll 项目了。

安装 GCCMake

sudo apt-get install gcc g++ make

更新与升级 apt:

sudo apt-get update -y && sudo apt-get upgrade -y

安装 Ruby 开发环境:

sudo apt-add-repository ppa:brightbox/ruby-ng
sudo apt-get update
sudo apt-get install ruby2.5 ruby2.5-dev build-essential dh-autoreconf

更新 Ruby 的包管理器 gem:

gem update

提示:在 WSL 中需要 sudo 权限来操作 gem,因此这一条命令执行失败,你就需要这样运行:sudo gem update

安装 jekyll 和 bundler:

gem install jekyll bundler

提示:同样可能需要 sudo 权限。

安装完之后,你可以回头再看看前面的【试运行】部分,去创建属于你的博客网站吧。

3. 学习 Markdown 语法

在 Jekyll 的主要优点中,第一条就是它使用 Markdown 编写内容,所以我们去看一下:

只了解 基本编写和格式化语法 即可:

选项释义:

其他选项都不在这篇文章的范围内,所以也就不再继续讨论。

尝试使用 Markdown 语法更新一下主页:

提示:你可以选择任何你喜欢的文本编辑器,对 markdown 文件进行编辑,没错,任何文本编辑器。

写入前面的那些选项:

一个屏幕放不下来,翻页继续:

看看最终效果:

你可能已经注意到【删除线】那个地方,并没有正确显示,实际上它应该使用 ~~ 包裹起来,就像下面的例子一样:

删除线

而嵌套粗体斜体的地方似乎也没有生效,尝试前后增加空格,以隔离斜体部分使之生效:

这里是粗体加上 斜体 部分

好了,有关 Markdown 的语法到此为止。

想要了解更多细节,请参考:Markdown 官方网站Markdown 中文文档

这篇 Markdown 快速入门 博客里讲到使用 Markdown 制作流程图,也是非常厉害。

4. 接触 Git 概念

GitHub Pages 基础知识 中第四条 使用命令行创建项目页面 展示了如何使用 Git 来下载和上传仓库源文件。

这就解决了一个问题:本地运行和预览的站点项目,如何部署到 GitHub 上并使用 GitHub Pages 托管?

然而有趣的是,正当我准备打开 Git 官网 时,它无论如何也不能访问。

这就是逼我用自己的语言描述有关 Git 的概念:

一次正常的 Git + GitHub 流程:

通过 GitHub 创建仓库(这在上一篇文章中有提到):

获取这个仓库的克隆链接:

四种方式同步源码库:

  1. 复制仓库地址,通过 Git 命令行工具克隆到本地,进行一系列修改、添加、提交,最后推送到 Github 上。
  2. 本地初始化 Git 仓库,添加文件,提交改动,添加远程仓库地址,推送到远程仓库上。
  3. 在已有的 Git 仓库中,添加远程仓库地址,然后推送到远程仓库上。
  4. 从其他源码仓库导入到 GitHub 上。

Git 简单概念:

能掌握上面的这些命令,你就已经是一名合格的 Git 用户了。

现代 IDE 集成并简化了 Git 的相关操作,使得我们并不需要花费过多精力在这上面。

到这里,必须恭喜你,成功获得了 GitHub Pages 进阶知识。

总结

GitHub 托管你的博客站点,Jekyll 设计你的博客主题,GitHub Pages 渲染你的博客网页,Markdown 格式化你的博客内容,Git 管理你的博客仓库。

一切都很完美!但是,我想要的自定义样式,还需要更强大的工具。