技能 分享 Jekyll Github

就算是我这样的新手也没问题吧？

"如何从零开始创建自己的Blog"

Posted by Supuloo on May 7, 2019

咱不会造手机，但都会用手机呀，搭这个Blog也差不多。

前言

相信很多朋友都想在互联网中有一片纯净的自留地吧？关于为什么会有这个博客，我的第一篇文章里有写。如果你也想有这样一个小天地，想在上面随心创作，但却一直不知道如何开始，不妨接着看下去~

我前后花了大概3天时间搭建这个Blog。从注册到选择模板，再到调试和更新，仔细算下来实际上也许只需要花一两个小时——因为我走了不少弯路，这篇文章的目的在于带你走直路。

我自身会一些C语言和Python，但没有任何搭建网站的基础，不懂相关的高级语言和服务器方面的知识，纯粹是看着大神的教程和代码一步一步慢慢来的，这个过程中我的主要方式便是「模仿+调试」。我不知道看这篇文章的你具有什么基础（也许和我一样啥都懂），接下来我会尽可能用自己门外汉式的理解来描述这个过程，这可能会导致整篇文章看起来一点都不专业，但应该挺友好的🤔

⚠ 一些写在前面的友情提示：

  • 本文面向的是搭建网站零基础的朋友，较少使用专有名词，较多使用修辞手法，比较长，可以分好几次慢慢看。
  • 本教程在众多教程的基础上综合而来，其中帮助最多的是Hux的教程，下面将要用到的网页模板也来自这位大神，觉得我的话太多可以看原教程，我将其中的顺序进行了修改，并添加了自己的理解和一些问题的解决方法。
  • 过程中会需要一些代码和英语基础，如果你的电脑没有编译器的话，用记事本也可以（只是眼睛可能会看不清，因为编译器可以使不同的代码显示不同的颜色，即高亮处理），英语的话可以求助百度翻译（我有道翻译和谷歌翻译表示不服）。
  • 本文侧重于实现这样一个博客——界面简洁大方，访问迅速方便，免费且无广告，能够通过本地同步更新博客文章，能够展示你的个人信息与其它社交网站链接，支持时间轴和Tag双重索引的文章管理目录——能实现就好，一起做一个没有感情的新手（试图理解背后的原理会大大降低我们搭建的动力）。
  • 过程中有任何疑惑请不要退缩，求助一下谷歌或百度，世界上人这么多，肯定会有人和你遇到一样的问题，也肯定会有人能解答你的问题。

正如文章开头那句话，把它当成一个黑盒子，只管能够实现自己想要的功能就好了，一步一步来，有耐心就一定能成功的！

核心思路

搭建与发布网站就像我们用手机发朋友圈一样，在手机中（本地）编辑好图文（网页内容），再通过联网（服务器上的域名/网址）将它们发布到微信朋友圈（网上）。

概括即为，第一步，本地编辑网页内容；第二步，链接域名发布到网上。重点在网页和域名，而这两者，一个只需要修改Jekyll提供的模板（就像你改答辩PPT或者同学写好的作业一样），另一个只需要填写Github上的账号和密码。

为了方便操作，调整两者顺序后的核心思路如下：

  • 利用Github社区账号创建一个域名
  • 利用Jekyll网页模板进行具体的网页编辑

如上，我们一共要在Github和Jekyll两个副本进行历险升级，带好你的勇气和装备，😝下面正式开始！按照目录的顺序跟着走一遍基本就能实现啦！

目录

域名获取

Github账号注册

在👉Github官网注册一个账号，记住你的用户名（username，而不是昵称）和密码，之后你的博客更新将离不开它，这个username将是你网站域名中的一部分，所以要想好喔！

网页有时候会打不开，这时候刷新一下或者等等再来，当然如果你能科学上网（翻墙）应该不会遇到这个问题。

域名设置

Github实质上应该是一个开源代码社区，每个用户能够在这里建立自己的仓库（repositories），往里存放任何东西，照片、文档、代码等（和百度网盘差不多），最初的目的是为了让项目团队合作完成软件开发并记录修改历史而存在的——你存放在里面的内容以及修改历史将能够被任何网友查看和下载，也能被你邀请的成员进行修改。

而Github提供的另一个功能是，能够从特定的仓库中提取相关的内容，自动为你生成一个网页，即Github Pages。其它特点在上文已经介绍了，而最大的特点就是：生成的免费网页域名是以github.io结尾的，而完整的域名格式即为username.github.io——假如你的username是boy，那你最后的网站域名就是boy.github.io，简单明了的替换法嘛（下文提到的username都代指的是你实际的用户名）。

那么如何激活它，如何告诉服务器这个域名要链接到你编辑好的本地网页上呢？你可以在Github Pages的官方教程中学习如何激活并搭建一个空白网页，也可以继续往下看学习如何直接生成我这样的模板化网页。

网页编辑前的工作

Github Desktop安装

就像百度网盘有自己的客户端，Github也有。它叫👉Github Desktop，就像安装任何你电脑上的软件一样下载安装它吧（不得不说我很喜欢这个软件的UI）。

安装好后你的桌面会多一个紫色圆包围的小猫图标（其实是个章鱼猫来的，叫Octocat）。

Octocat

Jekyll安装

Jekyll，发音和“杰克尔”差不多，它能根据网页的源代码生成相关的文件。Jekyll提供了大量的模板、变量、插件等功能，所以实际上咱们可以用来编写整个网站，当然在这里你我只需要用大神提供的模板就OK了。

使用Jekyll不像Github那样方便，没有图形化的客户端，取而代之的是在界内更为广泛的终端命令行直接输入指令的方式进行操作。不要慌，我会尽可能讲得细致，会开机和打字就会下面的内容。

  1. 首先需要安装Ruby，就像炒菜要用锅，Ruby是锅，Jekyll是菜。点击👉下载Ruby Installer，进入后会看到它加粗推荐咱们下载Ruby+Devkit 2.5.5-1 (x64)这个版本，下载就是了。如果你不确定你的电脑是(x86)还是(x64)，回到电脑桌面，右键单击「我的电脑」，再点击「属性」，即可在「系统类型」中看到自己的类型，32位即对应x86，64位即对应x64。

  2. 下载好Ruby Installer后，双击下载好的文件进行安装，注意安装的路径最好不要带有中文，这里假设我们与本次搭建网页相关的内容都放在D盘的Blog文件夹，那么它的安装路径就是D:\Blog（记得这里用的都是英文的冒号），后面会用到，如果你想不一样的话同理替换就好。
  3. 安装好后会弹出一个名为cmd.exe的黑窗口（即命令行窗口，熟悉熟悉它，之后会再看到它），输入数字1后按下回车，它会给你安装Ruby，一堆字符突然蹦出来那种，等最后它不动了，看到啥啥啥installed就说明安装好了，关掉。
  4. 接下来安装Jekyll。按下win+R，就是键盘上那个有Windows窗格子标志的按键加上字母R按键，会弹出运行窗口，输入cmd后回车，会打开上一步见到的黑窗口cmd.exe。光标闪烁的那一行表示你当前所在的位置，我们要把Jekyll安装到上述的Blog文件夹去，所以先输入D:后回车，进入D盘，再输入cd D:\Blog即可抵达Blog文件夹。
  5. 输入gem install jekyll后回车，就会开始进入Jekyll的安装。
  6. 再输入gem install jekyll-paginate后回车，安装jekyll-paginate，装就完事了。网络问题的话翻墙试试，或者等会再试试。

至此Jekyll安装完毕，它的功能类似于发朋友圈之前的预览功能，能够让你实时查看在本地更新网页但未发布之前的效果，非常方便（没有它的话每次更新网页都得等上5-10分钟才能看到线上的效果）。

网页编辑

克隆模板

fork，n.叉子，岔路；v.分岔

有些厨艺分享的app很有意思，作者在发布自己做的某道菜时，一并附上它的菜谱，app会提供一个功能，将菜谱中涉及的全部材料一键加入到你的购物车里。你可以直接买这些材料，也可以自己在原菜谱上做出改变。

Github也有类似的功能，你能够一键将你喜欢的开源项目克隆（clone）到你的仓库，可以直接用，也可以再对它进行修改。而我们实现这个博客，用的正是这个功能。

一般我们进行clone之前，会先将这个模板fork一下，大概意思是以当前版本的这个仓库为主干生成一条专属于你的分支，很形象吧，就像叉子（fork）一样。你之后的改动都不会影响到主干，也不会影响到与你一起由此fork的其它分支，而是只会顺着你自己的仓库传递下去（想象一下大禹治水）。

原始模板来自Hux大神，由于我自己的分支目前还有些功能在调试中，所以就以Hux的模板来举例。

  1. 首先登陆你的Github，然后进入👉Hux的仓库界面，点击右上角的Fork按钮，即可创建一个属于你自己的分支。
  2. 这时标题的Huxpro/huxpro.github.io会变成你的username/huxpro.github.io，说明fork成功。
  3. 点击Settings，进入该仓库的设置界面，将Repository name（仓库名）修改成咱们之前提到的域名username.github.io，然后点击Rename。这时，神奇的事情发生了，你的域名被激活了，你可以直接在浏览器输入这个域名，就能直接转到Hux的博客界面。
  4. 下面我们要做的，就是将这个链向的原博客修改成我们自己的博客。这时，之前下载好现在躺在你桌面上的那只章鱼猫开始蠢蠢欲动了——双击打开Github Desktop客户端，然后登录你的Github账号。
  5. 这时回到你浏览器中刚刚重命名好的仓库界面，点击右侧绿色的Clone or download按钮，选择Open in Desktop，会自动打开上述的客户端，在Local Path中选择咱们之前设置好的D:\Blog路径，按下Clone，整个仓库里的内容就会下载到本地你的电脑中，稍等片刻即可。

克隆好模板之后，你会在D:\Blog路径下的username.github.io文件夹中看到刚才在仓库里看到的全部文件，接下来你只要对这个文件夹中的任何地方进行修改都会被这只章鱼猫记录下来。

添删文件也好，修改文件名也好，哪怕在某个文件里多加了一个空格，只要你动了这个文件夹中的内容，客户端左边的Changes框中就会显示对应的记录，这时你需要在下面显示你头像的地方对这次修改进行备注（Summary必填，Description选填），然后按下Commit to master，即可将这次修改记录提交，然后再点击上方的第三个按钮Push origin，即可将此次修改同步到Github上，待这次完成后，你将会看到浏览器中刚才的仓库界面被做了相应的改动。

就像你在百度网盘客户端上传了文件，你再进网页版的百度网盘也会看到改变，差不多一个意思。只不过Github能够自动同步本地改动，同时能追溯之前的修改。

Tips1：建议每一次改动都Commit一下，可以累积几次改动后再一次性Push。

Tips2：每一次Push操作中被规定不能有超过100MB大小的文件，毕竟是免费功能。

Tips3：如果途中出现问题，看看是不是忘了Save/Commit/Push导致的。

觉得文字描述不够直观可以看官方教程（问号处选Github Desktop，再查看第4点）。总之这是本次需要掌握的技能，相关的其它操作我们目前不需要，各位可以自行摸索。😉接下来是我们的重头戏，修改模板。

修改模板

修改之前我们先仔细观察一下原博客，有哪些是我们可以直接保留的，哪些是可以修改或删去的。

对比我的博客和Hux的博客界面，我将博客信息、个人简介、菜单栏、背景图等进行了修改，下面我也将大致按照这个顺序来记述过程。

为了方便预览每一次修改的效果，我们要先把Jekyll安排上。还是一样的操作打开cmd.exe并进入到仓库所在的文件夹，即cd D:\Blog\username.github.io，然后输入jekyll serve后回车，等它不动了，在浏览器输入http://localhost:4000/，即可看到本地生成的网页效果，它是由你本地仓库文件夹中的内容生成的，接下来的每一次修改之后，你都可以直接刷新这个界面实时查看改动效果，觉得不错，就再进行Push操作，同步到Github上（整个过程都要保持这个jekyll serve的命令行窗口开着，如果偶尔卡住了就直接关闭重新再开一个）。

以下的操作都针对于刚克隆到本地的那个username.github.io文件夹中的内容，其中后缀为.yml、.html、.md的文件都可以用编译器打开（建议先打开编译器，再从编译器内部打开这些文件），也都可以用记事本打开，直接右键点击文件，在打开方式中选择其它应用，然后找到记事本即可。

1.博客信息

打开仓库文件夹中的_config.yml文件，把下面这段复制进去，替换掉第一部分（原作者用 # 标志区分了各个部分），并将其中中文部分替换成对应的英文内容，注意替换时只改文字内容，两边如果有引号请不要动，下同。

1
2
3
4
5
6
7
8
9

# Site settings
title: 你博客的名字
SEOTitle: 你希望它在浏览器网页条等地方显示的名字
header-img: img/home-bg.jpg
email: 你的个人邮箱
description: "你对这个博客的描述"
keyword: "你博客的关键词，英文逗号加空格以区分"
url: "你的域名，即把username.github.io中的username替换成你自己的用户名"
baseurl: ""

保存后，刷新本地生成的网页，可以看到这一步的效果。

2.其它网站链接

还是这个文件，看向它的第三部分，这里涉及你的社交网站链接，它就是网页右侧和下方那些社交网站logo链接的去向。我们以微博为例，原理大概是这样的：

登录网页版微博后由右上角进入账号设置，点击个性域名，在这里设置你自己的英文域名后缀weibo_username，保存后就能直接通过weibo.com/weibo_username链接进入你的微博主页，如果你设置的是boy，那么你在浏览器输入weibo.com/boy就能进入你的微博主页，和上面差不多的替换道理嘛。

于是乎，理论上只要我们能够知道自己其它社交网站的主页域名，就能直接把它链到我们的个人博客，原作者这里给出了微博、知乎、Github等网站链接，我们可以直接更改（不需要的那个就直接在前面加 # 注释掉）。

1
2
3
4
5
6
7
8

# SNS settings
RSS: false
weibo_username:     huxpro
zhihu_username:     huxpro
github_username:    huxpro
twitter_username:   huxpro
#facebook_username:  huxpro
#linkedin_username:  firstname-lastname-idxxxx

源代码如上，比如你需要留下微博主页的链接，那就把这里weibo_username后面的huxpro换成你刚设置的微博个性域名即可（huxpro是原作者的用户名）。

那么如何添加新的社交网站主页链接呢？当然，你想先跳过也行。

以Instagram为例，我如果想在主页新增自己Ins主页的链接，我需要走两步：一是新增链接地址，二是在主页新增对应的logo。

首先你进入自己的Ins主页，观察到自己的域名形式是www.instagram.com/ins_username在这个# SNS settings模块中新增一行Instagram的用户名代码：

1

ins_username:     你具体Ins的用户名

然后进入仓库文件夹中的_includes文件夹，打开里面的sns-links.html文件，将下面这块代码复制一份，粘贴到它下面，关键词是facebook（找不到的话可以按下Ctrl+F输入关键词帮你迅速定位）。

1
2
3
4
5
6
7
8
9
10

  { if site.facebook_username }
  <li>
    <a target="_blank" href="https://www.facebook.com/">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
      </span>
    </a>
  </li>
  { endif }

复制好后，只需要将其中的www.facebook.com换成www.instagram.com，再将后面两个花括号中的facebook_username换成ins_username即可，这时我们完成了第一步，下面进行对应logo的新增。

进入👉Font Awesome图标库网站，搜索Instagram，出现结果后点击进入会看到一串代码，将其中的fa-instagram替换掉上面复制代码块中最长的那串fa-facebook即可。大概是这么个原理，fa是Font Awesome的简称，这个模板应用了它们的图标，circle表示拿来它们图标库中的圆，stack-2x表示把它放大两倍，下面那行则是将一倍大小的logo图标反色inverse处理，放到圆上，就形成了咱们看到的社交网站链接logo，是不是好神奇！

如果你多翻一会就能看到，在这个文件的下面，知乎主页链接所在的代码块中，有一个知字，哈哈哈，因为知乎、豆瓣这些网站Font Awesome还没更新，所以原作者用汉字直接代替了，不过说实话和它们本来的logo还挺像的，你可以自行发挥（按道理来说可以加字的话是不是也能加别的，自己做一个应该也行，以后再说）。

而该_config.yml文件最后一部分则负责添加你的友情链接。title后面引号内的文字即为在你主页Friends处想显示的链接名称，在href部分引号内替换成你想链向的友情链接即可（欢迎留下我的链接哈哈哈），多余的部分连同逗号和前后花括号一起删掉就好。

1
2
3
4
5
6
7
8
9
10
11
12
13

# Friends
friends: [
    {
        title: "你朋友的名字",
        href: "他主页的链接地址"
    },{
        title: "比如百度",
        href: "www.baidu.com"
    },{
        title: "要添加更多朋友，直接复制粘贴后替换相应内容即可",
        href: "注意不要漏掉上下的花括号，中间用英文逗号隔开"
    }
]

3.个性设置

首先继续打开_config.yml文件，翻到下面的Sidebar settings，进行侧边栏的内容修改。

1
2
3
4

# Sidebar settings
sidebar: true                           # whether or not using Sidebar.
sidebar-about-description: "你想在侧边栏头像下展示的签名<br>大小于号之间加br用来换行"
sidebar-avatar: /img/avatar-hux-ny.jpg      # use absolute URL, seeing it's used in both `/` and `/about/`

换上个性签名后，选择一张你喜欢的头像图片（一般为.jpg格式，最好大小形状和原图差不多），将它保存到仓库所在文件夹的img文件夹中，并命好名字（比如cool-guy.jpg），再将它替换掉上面代码中的作者头像名字，如sidebar-avatar: /img/cool-guy.jpg即可。

接着打开index.html文件，进行Home首页内容的修改。

1
2
3
4

---
layout: page
description: "你想在本页面标题下展示的一句简单文字，中英文都可以"
---

再打开about.html文件，进行About页面内容的修改。

1
2
3
4
5
6
7

---
layout: page
title: "About"
description: "你想在本页面标题下展示的一句简单文字，中英文都可以"
header-img: "img/about-bg.jpg"
multilingual: true
---

About页面提供中英文两种版本的个人简介，由本文件下方的Chinese Version和English Version的代码块控制。

1
2
3
4
5
6
7
8
9

<!-- Chinese Version -->
<div class="zh post-container">
    这里直接输入你的中文个人简介，<br>大小于号之间加br用来换行。
</div>

<!-- English Version -->
<div class="en post-container">
    这里直接输入你的英文个人简介。
</div>

其实这里作者用到的是Markdown格式的文档来直接撰写的（我之后会有一篇文章专门介绍它），被我删掉的代码则是链接到文件夹_includes\about中en.md和zh.md两个文件的指令，先留着别删，到时候咱讲了Markdown可以直接来这里替换更新。当然你也可以直接学习Html格式的文本编辑方式，对照着看看应该不难。

最后打开archive.html文件，进行Archive页面内容的修改。

1
2
3
4
5
6

---
title: Archive
layout: default
description: "你想在本页面标题下展示的一句简单文字，中英文都可以"
header-img: "img/tag-bg.jpg"
---

4.菜单栏

原作者在菜单栏添加了自己作品集的链接，而我们不需要，因此可以直接把仓库文件夹中的portfolio和pwa文件夹删掉。等以后有作品集和专门的链接了再补上也不迟。

5.背景图

这是比较体现个人审美与特色的环节，所以我不会太强调具体如何进行~

回顾刚才的代码，在_config.yml、about.html、archive.html文件最前端，都出现了header-img的字样，没错，这后面所填的图片链接就分别对应Home、About、Archive页面显示的背景。当你进入刚才放头像的img文件夹中，会发现当前的背景图都在这里躺着，你只需要做好类似大小形状的图片，直接命名为同样的名字即可将它们覆盖替换。

关于背景图的设置，原作者也分享了一些经验。

至此，你的个人博客大致成型，Push之后再过一小会，即可直接通过浏览器输入域名进入，你可以假装自己是第一次到这个网页，然后去四处点一点看一看，检验一下刚才的成果。下面，只剩下最简单也是最为灵魂的部分——内容发布。

内容发布

文章撰写

所有的文章，都以Markdown的格式保存在_posts文件夹中。你现在点开它，能看到原作者从创建博客至今发布的全部文章（而相应的，img文件夹中有全部文章中所涉及的图片）。现在你可以保留下第一篇文章用作参考，其余的则删掉。

打开第一篇文章（用编译器或者记事本都可以打开），开头的参数即为我们需要关注的部分。

1
2
3
4
5
6
7
8
9
10
11
12

---
layout:     post
title:      "你文章的标题"
subtitle:   "你文章的副标题"
date:       2015-01-29
author:     "你的名字/笔名"
header-img: "img/post-bg-2015.jpg"
catalog: true
tags:
    - 标签1
    - 标签2
---

其中date是你文章的更新时间，格式要和这里一样为年月日，位数也是。header-img是你这篇文章的背景图，参考之前设置头像的步骤。tags即你这篇文章的关键词，在Archive页面可以进行tag检索，高频出现的tag会被推荐上你首页的Featured Tags。

在这之后就是正文的部分，现在你可以先按最原始的记事本方式编辑一些文字，或者提前学习一下Markdown的基本语法，我之后会专门写篇文章介绍。最重要的是要记得保存为.md或.markdown格式，然后命名为year-month-day-your-title的形式，比如你是2019年5月4日写的文章，名字取为first，就要命名为2019-05-04-first。

更新博客

将上述的修改Push到Github上之后即可看到你的文章出现在主页了！

回顾一下，我们先fork了Hux大神的模板，然后利用Github Desktop将它clone到本地，进行了一系列的修改，同时利用Jekyll进行实时预览，修改完成后再push到了Github上形成我们自己的个人博客！

在这个过程中，相信你像我一样学到了不少东西，虽然途中会遇到一些阻碍，目前还有一些小bug，但至少我们有了这样一个自己的个人博客，它的界面简洁大方，访问迅速方便，免费且无广告，能够通过本地同步更新博客文章，能够展示你的个人信息与其它社交网站链接，支持时间轴和Tag双重索引的文章管理目录。最主要的一点是它是我们在互联网世界自己创建的一片小天地！

在这之后你可以怎么做呢？

  • 可以随心情在这里发一些图文记录，比如你的学习笔记或心得体会，一些自己创作的故事或小说，一些突然闪过灵感或让你回味的梦，甚至是一些无意义的文字，只享受创作的过程也很不错啊。
  • 可以再下面的参考文章中看看真正技术向的大神教程是怎么搭建他们的博客，将你的博客功能升级，比如添加实时评论功能，背景音乐功能，文章搜索功能等。
  • 可以和朋友分享你的个人博客，也可以将链接添加到自己的简历或介绍当中，让新朋友来这里认识你。
  • 或者，你可以谁都不告诉，只有你一个人知道这个地方，但它又能和整个互联网相连。

参考文章

CATALOG
    FEATURED TAGS
    分享
    FRIENDS