Haoru's blog
0%

Github pages + jekyll 博客搭建

发表于 更新于

改了三遍了。。。这次应该是最终版了吧。。。

Github pages + jekyll，算是比较简单古早的博客搭建方式，本着能用就行的原则，我选择了这个办法。

一年之前曾经搭建过博客，写了几篇post之后就搁置下来了，这次换了电脑，想着给博客换个主题（之前的windows代码块渲染太丑了），这里简单记录一下流程：

0. 环境

  • macbook m1
  • 已经安装好了homebrew

1. 安装ruby

mac自带ruby，可是版本太老（我是2.6.0)，我们需要安装3.x版本

1
2
3
4
brew install ruby
# 添加ruby路径到环境变量
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

然后在终端查看ruby安装位置与版本信息:

1
2
which ruby 
ruby -v

显示如下：

1
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

2. 使用ruby的包管理器gem安装Jekyll及bundle

1
2
3
4
5
6
7
8
9
10
11
# 移除默认镜像
sudo gem sources --remove https://rubygems.org/
# 添加国内镜像
sudo gem sources -a http://gems.ruby-china.com/
# 查看镜像列表
gem sources -l
# 安装bundler和jekyll
sudo gem install --user-install bundler jekyll
# 将gem安装的包路径添加到环境变量
echo 'export PATH="$HOME/.gem/ruby/3.2.0/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

3. trouble shooting

检验是否安装成功

1
jekyll -v

结果报错：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:290:in `raise_not_found!': Could not find gem 'liquid-md5' in locally installed gems. (Bundler::GemNotFound)
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:343:in `block in prepare_dependencies'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:328:in `each'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:328:in `map'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:328:in `prepare_dependencies'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:53:in `setup_solver'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/resolver.rb:28:in `start'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/definition.rb:553:in `start_resolution'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/definition.rb:290:in `resolve'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/definition.rb:506:in `materialize'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/definition.rb:197:in `specs'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/definition.rb:255:in `specs_for'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler/runtime.rb:18:in `setup'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/bundler-2.4.14/lib/bundler.rb:162:in `setup'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/jekyll-4.3.2/lib/jekyll/plugin_manager.rb:52:in `require_from_bundler'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/gems/jekyll-4.3.2/exe/jekyll:11:in `<top (required)>'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/bin/jekyll:25:in `load'
        from /Users/zhaohaoru/.gem/ruby/3.2.0/bin/jekyll:25:in `<main>'

这里的原因是bundle的版本出错，如果单独执行bundle install, 我得到了报错：

1
2
3
4
5
6
7
8
9
10
Fetching gem metadata from https://rubygems.org/............
Resolving dependencies...
Could not find compatible versions

Because the current Bundler version (2.4.14) does not satisfy bundler ~> 2.2.28
  and Gemfile depends on bundler ~> 2.2.28,
  version solving has failed.

Your bundle requires a different version of Bundler than the one you're running.
Install the necessary version with `gem install bundler:2.2.34` and rerun bundler using `bundle _2.2.34_ install`

根据报错信息，执行以下命令：

1
2
sudo gem install bundler:2.2.34
bundle _2.2.34_ install

再次执行jekyll -v就可以了

4. 创建博客

到官网上找一个你喜欢的主题：Jekyll Themes （说实话感觉jekyll没咋有简洁且好看的主题

我选择了这一个主题：Dash (jekyllthemes.org)

image-20230614195251087.png

进入Homepage，将这个仓库的内容拷贝到自己名为[username].github.io的仓库中

5. 本地调试

在本地仓库对应的文件夹的terminal中，运行以下命令启动服务：

1
jekyll server

在浏览器中打开如下网址查看效果：

1
http://localhost:4000

这时候，几乎所有的修改都可以实时渲染，但是注意：如果修改了config.yml配置或其他yml文件的配置,那就需要control+C中止服务并重启服务来刷新配置.

6. 更新内容

所有的帖子都放在_posts目录下，每个帖子都是一个.md文件，文件名格式为yyyy-mm-dd-title.md，其中title是帖子的标题，yyyy-mm-dd是帖子的日期

Update

后来又换了hexo + nextT主题，变成了现在的样子。

nextT主题官网：NexT - Theme for Hexo (theme-next.js.org)

hexo的一些常用命令：

1
2
3
4
5
hexo init [folder] # 新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。
hexo new [layout] <title> # 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
hexo g # 生成静态文件
hexo s # 启动服务器
hexo d # 部署网站

参考资料

安装 - Jekyll • 简单静态博客网站生成器 (jekyllcn.com)

m1芯片Mac安装jekyll+搭建GitHub