日知录

学而不思则殆

使用 Jekyll 搭建个人博客

原文链接:文/野子Joey(简书作者)

 长大后才发现政府建造 GFW 真是太 TM 机智了,由于本人自制力较差,且不说 91porn, youporn 等两性知识网站的超强战斗力,单单一个 Youtube 就可以让我瞬间强撸灰飞烟灭。即使本人意志力足够强,万一不小心点击进了 大纪元 ,遭受到了轮子思想的侵袭,动摇了我无条件支持 CCP自干五 情怀那也是极其不好的。

  下面问题来了,翻越 GFW 难道一无是处吗?当然不是,可以努力的薅万恶的资本主义国家羊毛嘛。

  下面是作者自建 Github 主页的详细过程,教程中部分网站需要 VPN 服务才能登陆,若无法登陆,你懂的。其次,作者使用的设备为 Mac,Windows 用户在部分内容上会有所出入。

一、使用 GitHub Education 福利

Google 输入 github education, 点击进入,如下图所示。

github1.png

点击 Get the pack,如下图。

github3.png

点击 Get your pack,如下图。

github4.png

接下来,按照网站的要求填写个人信息[你需要拥有校园网邮箱证明你的学生身份,才可以享受福利]。提交表单后,GitHub 需要1-2周的时间审核你的个人身份,然后你会收到这样一封邮件,受宠若惊有木有,反正当时我的内心是,还有服务这么好的公司。

github5.jpeg

点开邮件中的链接,你会来到 My pack 的界面,大礼包都在下面啦,可自行浏览。对 Github 个人主页最重要的礼包是 namecheap 一年免费域名。当然 Digital ocean 100刀的福利也是棒棒的, ATOM 编辑器也是写网站的不二选择。

github6.png

有了域名礼包后,不急,过会我们才会用到它。

二、使用 GitHub Pages 建站

Google 输入 github pages,点击进入,如下图。

github2.png Github pages

按照官网教程,不急,我们一步一步来。 官网第一步:

github5.png Create a repository

第一步,登陆 GitHub,新建一个 repository, 命名为 你的用户名 + github.io。如我的用户名为 joeyqiang,所以 repository 命名为 joeyqiang.github.io,如下图。

github7.png New a respository

官网第二步:

github8.png Paste_Image.png

我的电脑是 Mac, 选择 GitHub for Mac,然后将线上的 repository 克隆到本地 (我下载了 Github Desktop 用于同步,你也可以使用 Git 同步,看个人喜好)。Clone 后,你会看到如下界面。

github9.png Paste_Image.png

官网第三步:

github10.png Create an index file

好吧,打开 ATOM 编辑器,新建 index.html,输入你心中此时此刻所想,保存,如下图。

github11.png ATOM Screenshot

官网第四步:

github12.png Commit & Sync

打开 GitHub Desktop, 提交更新。

github13.png Commit to master

官网第五步:

github14.png Go to the page

打开你的浏览器,输入你刚建的 repository 的文件名,比如我输入 joeyqiang.github.io。 Bang! You get it. 如下图。

github15.png Browse your blog

现在我们可以绑定私人域名到上面啦。该上文的 Namecheap 登场了。利用 GitHub 礼包中的 unique link 链接到 Namecheap Education。

github16.png Namecheap

输入你喜欢的域名,完成订单。

github17.png Order custom domain

注册 Namecheap,登陆你的帐号,点击 Domain List, 然后点击 MANAGE,如下图。

github18.png Manage domain

点击 Advanced DNS。

github19.png Manage DNS

管理 DNS。

github20.png Manage DNS

添加 A Record,最终结果如下图。

github21.png Add record

打开 GitHub,新建一个 file,如下图。

github23.png Create a file

将 file 命名为 CNAME (全部为大写),然后添加你的个人域名 (不要带 http 前缀),保存,pull request 到 master, 如下图。

github24.png Edit the file

我们现在打开浏览器,输入你刚购买的域名,我的是joeyqiang.me,出现了,出现了,出现了,有木有!!!如下图。

github25.png

三、使用 Jekyll 搭建个人博客

打开 terminal,安装 Ruby (Mac 已经预装了 Ruby)。可以输入 ruby --version 去验证是否安装,如下图。

github26.png Confirm Ruby

接下来,输入sudo gem install github-pages,安装 Jekyll (gem update github-pages命令可以用来更新 Jekyll,以免 Github 服务器更新导致网站本地和线上表现不同),如下图。

github27.png Install Jekyll

之后你需要在 master 下新建一个 file,命名为 Gemfile,输入

source 'https://rubygems.org'

gem 'github-pages'

如下图。

github28.png Create Gemfile

运行 terminal,使用命令行移至 repository 根目录下 (也可以直接在 GitHub Desktop 下右键 repository 打开),如下图。

github29.png Command line to terminal

github30.png Right click to root directory

之后运行

bundle exec jekyll serve

如下图。

github31.png Running Jekyll

下面,就可以使用 Jekyll 啦,本地测试在浏览器输入 http://localhost:4000 即可 (本地测试结束后 commit to master 提交线上即可),如下图。

github32.png

四、使用 Jekyll 模板个性化博客

首先建议大家看下 Youtube Jekyll 这个系列教程,比阅读 官方文档 快捷容易多了,深入了解则需阅读文档了。我 Jekyll 也是才学,很多地方也在摸索中,欢迎多多交流。

Comments

使用Disqus评论 使用多说评论
comments powered by Disqus