做个人博客是为了什么,当然是为了装逼咳咳学习了。看了下别人的学习过程,我也来记录一下 github pages + jekyll 搭建博客的过程。本文是搭建网站的第一步,建立一个供他人访问的主页。在这里我也贴出我的源代码链接和官方的教程。

源代码链接: https://github.com/ThomasMental/ThomasMental.github.io

GitHub Docs 官方教程: https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll

Jekyll 介绍

jekyll是一个简单的免费的Blog生成工具,一个生成静态网页的工具,不需要数据库支持,只用 Markdown (或 Textile)、Liquid、HTML & CSS 就可以构建可部署的静态网站。jekyll可以免费部署在Github上,且可以绑定自己的域名。

更多信息查看文档: http://jekyllrb.com/

搭建过程

个人用的Windows系统 主要过程:

  • 建立 GitHub 库
  • 配置 Ruby
  • 安装 Jekyll 和 Bundler

建立 GitHub 库

登录到GitHub,新建一个Repository,名字一定要是<user>.github.io(user为你的GitHub用户名)。推荐使用GitHub Desktop, 创建之后可以直接选择 Set up in Desktop,非常方便。当然Clone在其他地方也可以

配置 Ruby

Windows系统去https://rubyinstaller.org/ 官网下载RubyInstaller并安装。安装完选择自动运行

$ ridk install

按提示按Enter就行了。安装完运行指令

$ ruby -v

查看是否安装成功

安装 Jekyll 和 Bundler

执行下面的语句安装

$ gem install jekyll bundler

注意: 运行bundler请确保你的安装地址不要有中文,比如你的用户名文件夹,不然会报错的!!

创建博客

在之前我们创建了一个Repository并且将其放到了指定的位置。我们先进入这个文件夹

$ cd user.github.io

然后执行jekyll new命令

$ jekyll new . 

得到下列文件目录

.
├─ .git
├─ _posts
│  ├─ 2021-04-17-welcome-to-jekyll.markdown
├─ .gitignore.txt
├─ _config.yml
├─ 404.html
├─ about.markdown
├─ Gemfile
├─ Gemfile.lock
├─ index.markdown

然后打开Gemfile这个文件,按文件内提示将gem "jekyll"注释并将gem "github-pages"解除注释后改成

gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

其中GITHUB-PAGES-VERSION替换成当前版本。
版本可以在这里查看: Versions

保存并关闭文件。运行bundle update。然后将这些文件放到GitHub的repository里(用GitHub Desktop直接Push),恭喜你,你的静态博客成功搭建了。网址是你的repository的名字,也就是<user>.github.io。

本地测试

打开 Git Bash,执行bundle install以及bundle exec jekyll serve,得到类似以下的结果则运行成功

> Configuration file: /my-site/_config.yml
>            Source: /my-site
>       Destination: /my-site/_site
> Incremental build: disabled. Enable with --incremental
>      Generating...
>                    done in 0.309 seconds.
> Auto-regeneration: enabled for '/my-site'
> Configuration file: /my-site/_config.yml
>    Server address: http://127.0.0.1:4000/
>  Server running... press ctrl-c to stop.

这时候我们只要访问http://127.0.0.1:4000/就可以在本地看我们的网页了。

可能碰到的问题有require': cannot load such file -- webrick (LoadError),可以通过执行bundle add webrick来解决。

传送门

下一章: Jekyll Blog 个人博客搭建(2)