做个人博客是为了什么,当然是为了装逼咳咳学习了。看了下别人的学习过程,我也来记录一下 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来解决。