第一篇文章-jekyll的配置詳情 - jekyll,webhooks cnzhwei 博客

layout: post
title: "第一篇文章-jekyll的配置"
date: 2021-04-04 20:47:14 +0800
categories: envs

tags: [jekyll, envs, ruby, web, blog]

記錄心得：

第一次使用jekyll搭建博客，記錄下之間的過程。

為什麼使用jekyll
怎樣的搭建過程
怎麼維護和更新
遇到的問題

1. 為什麼使用jekyll

之前使用過hexo，具體的地址是在實驗室的主頁上：xialab

優點是：

容易更改主題
中文支持
使用nodejs，容易部署。

缺點是：

需要自己生成頁面，只能把靜態頁面推送到github倉庫，而src源碼文件需要額外備份

因為這個缺點，我選擇了jekyll

但是jekyll缺點也很明顯，就是ruby這個環境真的很麻煩，目前也沒怎麼用過，期望只是初期配置麻煩一點吧。

2. 搭建過程

我在雲服務器和本地PC設立了兩個倉庫

雲服務器在騰訊雲，CentOS
本地PC是Windows，基於WSL搭建環境

2.1 CentOS搭建

通過yum安裝ruby (此條不行)，因為版本比較老，是2.0版本，jekyll需要2.4

sudo yum install ruby

遂通過源碼安裝

wget https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.1.tar.gz
tar -zxvf ruby-2.7.1.tar.gz
cd ruby-2.7.1
mkdir -p /usr/local/ruby
./configure --prefix=/usr/local/ruby
make && make install

修改profile，添加到全局變量

nano /etc/profile

將如下內容添加到末尾

export PATH="/usr/local/ruby/bin:$PATH"

然後按Ctrl+X保存，然後激活

source /etc/profile

2.1.1 安裝及配置jekyll

使用gem直接安裝即可

gem install jekyll

然後查看一下版本，這裏我是3.7

jekyll -v

生成頁面文件（如果是新建博客站點的話）

jekyll new myblog

2.1.2 修改_config.yml

目前我的配置文件如下，以後還需要修改

# 站點文件路徑
#source: .
#destination: ./_site
encoding: utf-8

# 目標網站路徑設置
permalink: :year/:month/:title.html
markdown: Kramdown

# 時區
timezone: Asia/Shanghai

# 設置導航目錄
nav:
- name: Home
  link: /
- name: About
  link: /about.html

2.1.3 修改Gemfile

這個文件，主要是管着jekyll的構建環境

我參照谷歌來的教程，直接使用瞭如下內容

source 'https://mirrors.cloud.tencent.com/rubygems/'
require 'json'
require 'open-uri'
versions = JSON.parse(open('https://pages.github.com/versions.json').read)
gem 'github-pages', versions['github-pages']

這裏的source使用的是騰訊雲的源，因為官方源太慢了。此外，還有一個淘寶源，不過好像已經死了，連不上。

使用bundle可以直接安裝Gemfile要求的環境

bundle install

這樣，就和github的構建環境一致了。

2.1.4 運行

直接通過bundle運行

bundle exec jekyll serve

默認是 http://127.0.0.1:4000

2.2 Windows搭建

不要使用windows下的exe文件來安裝，比如rubyinstall，總是因為msys2，出現一堆問題，我放棄了，然後直接使用的WSL下的Ubuntu 18搭建完成。

首先更新一下apt

sudo apt update

然後安裝ruby-dev，這個裏面就包含了gem，我的源裏面是ruby2.5，也夠用了。

sudo apt install ruby-dev

然後安裝bundle和jekyll

gem install jekyll
gem install bundle

然後通過bundle運行即可（為什麼要bundle，當成python中的conda管理就行了）

bundle exec jekyll serve

3. 怎麼維護和更新

我這裏採用的是github + webhook的方法

通過在本地修改，然後上傳到github，然後github觸發webhook，自動同步到騰訊雲的主機上。

3.1 構建webhook

webhook是什麼，可以自行谷歌。

因為雲主機是使用的寶塔面板，所以比較方便，在面板軟件中心安裝webhook管理器即可

參考的是寶塔論壇

在運行腳本內添加如下內容：

#!/bin/bash
echo ""
#輸出當前時間
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "Start"
#判斷寶塔WebHook參數是否存在
if [ ! -n "$1" ];
then 
    echo "param參數錯誤"
    echo "End"
    exit
fi

#git項目路徑
gitPath="/www/wwwroot/$1"
#git 網址
gitHttp="git@github:com/$1.git"

echo "Web站點路徑：$gitPath"

#判斷項目路徑是否存在
if [ -d "$gitPath" ]; then
    echo "目錄存在"
    cd $gitPath
    #判斷是否存在git目錄
    if [ ! -d ".git" ]; then
        echo "在該目錄下克隆 git"
        git clone $gitHttp gittemp
        mv gittemp/.git .
        rm -rf gittemp
    fi
        #拉取最新的項目文件
    git reset --hard origin/main
    git pull
    #設置目錄權限
    chown -R www:www $gitPath
    source /etc/profile
    bundle exec jekyll build
    echo "End"
    exit
else
    echo "該項目路徑不存在"
    echo "End"
    exit
fi

需要注意的坑：一定要注意縮進，shell語言對縮進比較嚴，然後就是判斷語句中的[]這個括號，其中的內容和括號之間要有空格，不然不會進行判斷。

然後會生成如下的url：

http://[ipaddress]:[port]/hook?access_key=DzsH8SQdasdQTBOllSy3477asdasQwJN8XP9VWIt2kajsdkj&param=xxx.github.io

ipaddress: ip地址
port：端口
access_key：生成的接入碼
param：設定的參數，建議直接設置為你的github page的網址

然後來到Github的項目頁面，依次'Setting'>'Webhooks'>'Add webhook'
將url填入，然後在選項“Which events would you like to trigger this webhook?”中選擇“Just the push event.”
那麼以後當push到github時，就能自動在自己的服務器刷新網站內容了。

4. 遇到的問題

圖片還不知道怎麼管理比較好
文章的分類

暫且先上線，後續再管

cnzhwei 博客

cnzhwei 博客

博客 / 詳情