Jekyll 从入门到放弃


引言

想自建个博客玩玩,这在非计算机专业的牛马当中应该是件相当酷 awesome 的事情了。

在网上看了好多攻略,感觉就在 github 上用 jekyll 建一个是最简单的事了。真的开搞后,觉得好难呀,以前玩过的唯一能跟博客搭点边的就是 QQ 空间了,但是在 github 上似乎比开通个 QQ 空间要难上许多许多。我觉得我有必要再把这流程再梳理一遍,做一个真·保姆级别的教程,来给同样零计算机基础的同学填填坑,也为了自己下次重新上手 Jekyll 时,同坑不踩二遍。

准备工作

首先的首先,要做一些准备工作,用 Jekyll 搭建一个博客,很多都是推荐在 Linux 系统上进行的,但我这门外汉只会用 WIndows 系统,又不是不能用🐶。在我第一次尝试时,遇到了诸多问题,导致我要么软件安装失败,要么各种包安装失败,要么服务器连接不上,有一部分原因是我的电脑被做过一些优化、很多服务要么被关要么被卸,注册表也被修改得一地鸡毛,所以在失败若干次后,我将自己的电脑初始化重新安装系统,系统是 Windows11。在新系统中,仅仅关闭了 SysMainWindows SearchWindows 推送通知系统服务 三个服务,想把 Windows Defender 也关闭,但是关闭之后系统很多功能总是罢工,所以就一直留着了。系统准备好了,还需要准备梯子,因为 github 没梯子很不稳定,梯子就需要自备了,好像讲太多要被请去喝茶😒。

初始化的 Windows11 、梯子准备完毕。

安装 Jekyll RubyGems

首先来安装 Jekyll RubyGems ,打开 Jekyll RubyGems 的下载页面 (https://jekyllrb.com/docs/installation/)

点击 Windows

点击 RubyInstaller Downloads

点击 Ruby+Devkit 3.1.2-1 (x64)就开始下载啦

点击 另存为,存到自己想存的地方,然后打开 rubyinstaller-devkit-3.1.2-1-x64.exe ;或者直接打开也可以。

进入到安装 ruby 和 devkit 的安装环节,依次点击 I accept the LicenceNext

路径用默认的不改, Add Ruby executables to your PATHAssociate .rb and .rbw files with this Ruby installation 保持✔,点 Install

Ruby Ri and HTML documentationMSYS2 development toolchain 2002-04-19 都打上✔,然后点 Next

然后就要经历一小会儿的安装读条时间

读条完毕, Run ‘ridk install’ to set up MSYS2 and development toolchain 保持打勾,点击 Finish

安装完成啦,而且自动打开了 Ruby 的命令行窗口

在打开的的 Ruby命令行窗口里直接按 Enter ,等待片刻,出现下图Jekyll RubyGems就算是安装成功啦

折腾 Jelyll

下面就进入到 Jekyll 的折腾环节了,关闭之前命令行窗口,在开始菜单里找到 Start Command Prompt with Ruby 并打开

输入 gem install bundler 按下 Enter ,等待片刻出现下图

输入 bundle init 按下 Enter ,等待片刻出现下图

输入 bundle install 按下 Enter ,等待片刻出现下图

输入 gem install jekyll bundle 按下 Enter ,等待很久很久出现下图

至此,跟 Jekyll 所有的工作就算完成啦。

快速生成 Jekyll 模板

下面我们就来使用下 Jekyll 自带的模板吧
输入 jekyll new blog 按下 Enter ,生成一个示例博客模板

输入 cd blog 按下 Enter ,进入新生成的 blog 目录

再次输入 bundle install ,按下 Enter ,等待许久后出现下图

输入 bundle exec jekyll serve ,按下 Enter ,生成本地服务器来预览自己的blog,当出现下图时,一个本地服务器版的Jekyll模板就算完成啦

下面我们打开浏览器,输入网址 http://127.0.0.1:4000/ 看看效果

一个非常简洁的本地版个人博客就算搭建完成了。

使用 github 上别人的模板

网上可以搜到很多漂亮的Jekyll模板网站, Jekyll Themes收录的更多,可以慢慢挑。我也尝试了好些个,但是不同的Jekyll 模板经常让我遇到不同的、难以解决的问题,所以我就挑了一个比较成熟,几乎没有什么困难就跑起来的模板: Hux Blog

首先将他的博客模板下载下来,打开他的博客对应的仓库 https://github.com/Huxpro/huxpro.github.io ,依次点击 Code、**Download ZIP** 下载完整的博客模板

打开下载下来的压缩文件 huxpro.github.io-master.zip ,将 huxpro.github.io-master 复制到想要的位置,这里我复制到 C:\Users\WDAGUtilityAccount ,和之前生成的 blog 模板在同一个文件夹中。打开 C:\Users\WDAGUtilityAccount\huxpro.github.io-master 文件夹,我们可以看到如下所示目录文件

关闭之前Ruby命令行窗口,重新打开 Start Command Prompt with Ruby ,输入 cd huxpro.github.io-master ,按下 Enter

输入 bundle install ,按下 Enter ,等待许久出现下图

输入 bundle exec jekyll serve ,按下 Enter ,生成本地服务器来预览下载的Jekyll博客模板

下面我们打开浏览器,输入网址 http://127.0.0.1:4000/ 就可以看到这个精美的博客啦

下一步就是把别人模板上的信息替换成自己的,把它打造成自己的博客,用记事本或者自己习惯使用的文本编辑器打开 C:\Users\WDAGUtilityAccount\huxpro.github.io-master 文件夹下的配置文件 _config.yml ,将信息修改为自己的,比如将 title: Hux Blog 改为 title: 隔壁老王 ,将 header-img: img/home-bg.jpg 修改为自己喜欢的图片。

打开 C:\Users\WDAGUtilityAccount\huxpro.github.io-master 文件夹中 _posts 文件夹,可以删除其中所有文件,然后自己编写博文在此文件夹中保存为 日期-XX.md 格式。

更改完毕后,返回 Ruby命令行窗口 ,按下 Ctrl+C ,输入 yEnter 关闭本地服务器,再输入 bundle exec jekyll serve ,按下 Enter 重新开启本地博客服务器

打开 http://127.0.0.1:4000/ 网页并刷新,若右下角弹出 REFRESH 按钮,直接点击以下

网页差不多变成自己想要的样子,还有诸多细节微调,自己慢慢尝试吧。

点开刚写进去的博客,感觉还不错🐶

进行下一步之前,先把 Ruby命令行窗口 关闭

部署到 Github

首先得有个 Github 账号,注册就不说了,直接登录 https://github.com/,然后得下载一个 Github 桌面版 ,浏览器中打开 (https://desktop.github.com/) ,点击 Download for Windows(64bid)

打开 GitHubDesktopSetup-x64.exe ,在安装界面点击 Sign in to GitHub.com

在浏览器上弹出得窗口点击打开

在界面中点击 Finish

打开 路径 C:\Users\WDAGUtilityAccount ,修改 huxpro.github.io-master 文件夹名称为 zbqhew.github.io , zbqhew 为 github 自己账号的用户名。

返回 GitHub Desktop 界面,点击 Add an Existing Repository from your hard drive…

点击 Choose… 选择 zbqhew.github.io 文件夹,点击 create a repository

点击 Create repository

点击 Publish repository

Keep this code private取消打✔,点击 Publish repository

等待上传成功后,我们打开浏览器,打开 Github官网 ,选择刚上传的 zbqhew/zbqhew.github.io 仓库

点击 Settings ,再点击 Pages ,在下面得界面中,我们应该就可以看到 https://zbqhew.github.io/ 网址,若没有出现这个网址,点击 None 按钮,选择 main ,然后点 Save ,等待5分钟后,刷新网页,就可以看到 https://zbqhew.github.io/

点击 https://zbqhew.github.io/ 看看博客

这就成了。

Tips:

  1. 要翻墙,不然有很多步骤可能就卡住了
  2. 每次使用一个新的模板时,都要进入模板目录,运行一次bundle install
  3. 有部分命令,官方文档中写的 bundler ,实际操作时,打错写成 bundle 也不影响
  4. 网上有些模板比较老,在模板目录中运行 bunble install 会失败

Jekyll 常用命令

  • jekyll –version 查看版本号
  • gem list jekyll 查看详细版本号
  • gem outdated 查看有新版本的包
  • gem update jekyll 更新Jekyll
  • gem install jekyll-docs 安装离线Jekyll文档

文章作者: JuPeiqi
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 JuPeiqi !
评论
  目录