使用GitHub Pages与Jekyll搭建免费且优雅的博客

发表于 | 分类于

你好，欢迎来到阿拉灯神丁Vicky的个人博客

本博客所用工具介绍

GitHub pages博客发布流程

更新本地博客

1
git pull                                  #从GitHub更新本地博客代码

MWeb写作

command + E切换至“外部模式”，command + L切换至“文档库模式” mweb-wirte-blog

本地启动jekyll服务

1
bundle exec jekyll serve                  #启动本地jekyll服务

查看博客、文章效果

打开链接🔗

1
http://127.0.0.1:5000                     #浏览器访问本地jekyll博客

blog-view

Jekyll站点部署到Github pages(线上环境)

1
2
3
git add --all                             #添加到暂存区
git commit -m "提交jekyll默认页面"          #提交到本地仓库
git push origin master                    #线上的站点是部署在master下面的

等待几分钟，Github有一定的时间缓存…

MWeb添加GitHub为图床

为什么需要使用PicBed4MWeb

Github需要用PUT方法提交文件，而MWeb只能使用POST方法，所以就需要本地启动一个服务（PicBed4MWeb），接受请求，转换后转发给github。

安装PicBed4MWeb项目

  • 下载PicBed4MWeb至本地: git clone https://github.com/gaopeng-hz/PicBed4MWeb.git
  • 安装依赖: npm install
  • 修改配置文件config.json: config.json 修改配置参考: 
    1
    2
    3
    4
    "repo": "gaopeng-hz/images",  // 仓库名称
"token": "xxxx",  // token，不能公开，获取方式参考上面那篇文章
"port": 8081,  // node服务器监听端口，默认8080
"url": "/upload"  // 服务上传url，默认/upload
  • 手动启动项目目录下node index.js启动服务，终端窗口不能关闭。

    MWeb配置

  • 打开 MWeb 设置界面 - 发布服务 - 图床 - 自定义 MWeb配置
  • 点击验证，上传图片，若出现以下提示则成功: 验证成功

    设置开机启动服务

  • 设置后台运行服务: nohup node index.js &
  • 配置后台启动服务: 项目根目录下新建run.sh文件，并添加以下内容 
    1
    2
    3
     #!/usr/bin/env bash
 # 修改成自己的目录
 nohup node /你的路径/PicBed4MWeb/index.js &
  • 给run.sh赋权限: sudo chmod 777 run.sh
  • 将run.sh文件打开方式修改为终端.app
  • 添加开机启动: 系统偏好设置-用户与群组-登录项-添加run.sh文件即可

    扩展内容

  • 查询端口: lsof -i :8100
  • 关闭进程，PID 替换为查询的: kill -9 PID
  • 查询服务 PID: ps | grep index.js

问题集锦

本地jekyll查看与实际效果不一致

由于长期未更新本地jekyll及其依赖包，导致本地jekyll查看效果与实际效果不一致，参考更新Jekyll。

1
bundle update jekyll                      #更新jekyll

更新bundle，非常慢，因为Gemfile.lock固定了gem源：

1
2
GEM
  remote: https://rubygems.org/

那么修改镜像：

1
bundle config mirror.https://rubygems.org https://gems.ruby-china.com

修改完镜像，升级bundle，中间需要输入密码

1
bundle update

升级完，运行bundle exec jekyll serve

安装Homebrew

Homebrew是Mac OS 不可或缺的套件管理器 —- Homebrew官方

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。

Homebrew官方指定的安装方法

将以下命令粘贴到终端：

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

但这种方法并不适用国内的Mac用户，因为网络资源的原因，电脑下载是龟速，实在是无法忍受，不信你自己试试就知道了。

解决下载慢有两个办法：

  1. 替换镜像源，将下载资源改为国内镜像资源即可（推荐）
  2. 科学上网，通过全局代理来进行安装，也是解决网络问题的一种方法（不推荐）

使用国内镜像资源

1
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

可以选择:

1.中科大下载源，如图，然后根据提示输入开机密码，（这里需要提示下，输入密码的时候，光标是不移动的，保护机制，不用管，输入完直接回车键即可)

iShot2020-12-13 12.04.11

本地运行bundle exec jekyll serve报错

本地运行bundle exec jekyll serve命令启动jekyll时，出现以下错误:

1
Could not find commonmarker-0.17.13 in any of the sources

并提示运行bundle install,执行后报错：

1
2
3
4
5
6
7
8
An error occurred while installing commonmarker (0.17.13), and Bundler cannot continue.
Make sure that `gem install commonmarker -v '0.17.13' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  github-pages was resolved to 192, which depends on
    jekyll-commonmark-ghpages was resolved to 0.1.5, which depends on
      jekyll-commonmark was resolved to 1.2.0, which depends on
        commonmarker

提示执行gem install commonmarker -v '0.17.13' --source 'https://rubygems.org/',执行结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Building native extensions.  This could take a while...
ERROR:  Error installing commonmarker:
        ERROR: Failed to build gem native extension.

    current directory: /Library/Ruby/Gems/2.3.0/gems/commonmarker-0.17.13/ext/commonmarker
/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby -r ./siteconf20181112-6105-u9aca2.rb extconf.rb
creating Makefile

current directory: /Library/Ruby/Gems/2.3.0/gems/commonmarker-0.17.13/ext/commonmarker
make "DESTDIR=" clean

current directory: /Library/Ruby/Gems/2.3.0/gems/commonmarker-0.17.13/ext/commonmarker
make "DESTDIR="
make: *** No rule to make target `/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/include/ruby-2.3.0/universal-darwin16/ruby/config.h', needed by `arena.o'.  Stop.

make failed, exit code 2

Gem files will remain installed in /Library/Ruby/Gems/2.3.0/gems/commonmarker-0.17.13 for inspection.
Results logged to /Library/Ruby/Gems/2.3.0/extensions/universal-darwin-16/2.3.0/commonmarker-0.17.13/gem_make.out

看报错信息可能是由于系统ruby环境和jekyll之间的一些分歧造成的，最简单的解决方法是创建一个新的环境。使用rvm来管理ruby版本，以避免删除系统ruby并破坏您的操作系统。

  1. RVM是一个命令行工具，它允许轻松地安装、管理和使用从解释器到多个ruby环境。
  2. 使用Ruby原因：
    • 虽然 macOS 自带了一个 ruby 环境，但是是系统自己使用的，所以权限很小，只有 system。而/Library目录是root权限，所以很多会提示无权限。
    • 使用自带ruby更新,管理不方便
    • 一系列无原因的报错

安装RVM

  1. 下载并安装: curl -L https://get.rvm.io | bash -s stable
  2. 载入RVM环境: source ~/.rvm/scripts/rvm
  3. 查看RVM版本: rvm -v
  4. 更新RVM版本: rvm get stable

RVM安装Ruby环境

  1. 列出已知的Ruby版本: rvm list known
  2. 查看当前Ruby版本: ruby -v
  3. 安装Ruby版本: rvm install 2.7.0
  4. 将指定版本设置为系统默认版本: rvm use 2.7.0 --default
  5. 查看Ruby版本: ruby -v

安装完成之后更新jekyll环境

  1. 安装bundler: gem install bundler
  2. 安装jekyll: gem install jekyll
  3. 安装项目依赖的所有gem包: bundle install

升级完，运行bundle exec jekyll serve

更换评论系统

奈何基于github的gitalk评论插件经常报错404/403，极其不稳定，故一直想将其换掉。新的评论系统需要满足以下几点：

  1. 对国内朋友友好，不需要科学上网。

  2. 不需要跳转至第三方登录，满足即时评论。如果评论插件基于github，那么要评论就必须有github账户，注册又比较繁琐。

  3. 色彩简单与当前Jekyll博客主题适配，简单优雅。

经过一番查找，最终选择了Valine，该评论系统基于LeanCloud，并且支持Jekyll。参考了这篇文章，经过约10分钟操作，大功告成。来吧，展示：

评论功能图片

更新日志

  • 创建时间：2018-2-27
  • 更新时间：2020-12-13
  • 更新时间：2021-10-11

我手写我心，你赏表你心。