GitHub + Jekyll 免费搭建个人站点

tomhyluo
204 阅读4分钟

博客园的博客很久没更了，大学时注册的域名也到期失效了，最近偶然得闲于是决定将博客及站点转移到 Github 上降低运维成本~

前言

一般来说，一个网站由以下结构组成

  • 域名
    • DNS解析
  • 服务器
    • 数据存储
    • 代码发布
    • 文件处理
  • 前端页面
    • 首页
    • 详情页
    • ....

如果正儿八经从零搭一个站点需要以下步骤：

  1. 购买域名
  2. 域名实名认证
  3. 购买服务器
  4. 开发站点
  5. 部署代码到服务器
  6. 配置域名到服务器的 DNS 解析
  7. 编写站点内容（博客或其它）
  8. 发布更新到服务器

那么有没有省事的方式呢？答案就是：

站点框架 + github Pages

站点框架中比较常见的就是：

  • Hexo

  • Jekyll

选择 Jekyll 的原因在于

github 集成了 Jekyll 的发布流水线不用自己写

新建仓库

1.png

输入仓库名称，注意选择公开仓库，私密仓库的项目站点得加钱~

2.png

创建好仓库后进入仓库页面，在 settings 中找到 pages 选项，在红框部分能看到当前项目站点的访问地址，一般来说是你的 git 账号名称 + 仓库名称， 如果有自己的域名可以将域名解析到当前仓库的页面

3.png

4.png

安装Jekyll

由于Jekyll 是 Ruby 开发的所以需要先安装 ruby

笔者电脑为 windows 系统，若为其它系统，安装方式可自行 Google

  1. 首先需要下载 Ruby，优先考虑带版本管理的库，不然多版本的重装会让你深刻理解

    这里使用的是 Rbenv-for-windows（直接安装特定版本 ）

    后续操作需要翻墙进行，如果没有梯子参考 中国内安装部分

    以下命令需在 Power Shell 运行

    # 自定义你想安装到的位置，最好不要有空格
$env:RBENV_ROOT = "C:\Ruby-on-Windows"
iwr -useb "https://github.com/ccmywish/rbenv-for-windows/raw/main/tools/install.ps1" | iex

    # rbenv for Windows
$env:RBENV_ROOT = "C:\Ruby-on-Windows"

# Not easy to download on Github?
# Use a custom mirror!
# $env:RBENV_USE_MIRROR = "https://abc.com/abc-<version>"

& "$env:RBENV_ROOT\rbenv\bin\rbenv.ps1" init

    如果上述命令在 power shell 运行报错，可能是版本过低，可以在下方链接安装新版本

    在 Windows 上安装 PowerShell

  2. 安装完成后在命令行输入

    rbenv versions

    出现版本信息则安装成功

5.png

  1. 安装希望的 ruby 版本

    rbenv install 3.1.2
ruby --version
gem --version

    同理出现版本号即安装成功

  2. 安装Jekyll Cli

    gem install bundler jekyll

    如果网络出现问题，可以尝试 国内镜像源安装

    如果依然有问题尝试安装时指定代理端口

    gem install --http-proxy http://localhost:7890 jekyll

    出现版本号即安装成功

    jekyll -v

配置 Jeykll

安装完成后通过 jekyll new xxx 新建一个 Jekyll 项目

其中最主要的文件是以下两个：

  • Gemfile 用于管理 需要使用 gem 安装的包（类比 package.json）
  • _config.yml 用于配置你的站点

如果只是简单搭建，不自定义只需要关注上述两个文件即可

下方为笔者项目中的配置，供大家参考 ：

  • _config.yml
lsi: false
safe: true
incremental: false
highlighter: rouge
github: [metadata]
# url 为 gitpages 中显示的链接
url: "https://www.tomhyluo.com"
# 你的项目的仓库（用于给 jekyll 提供 github相关信息）
repository: "lhy2813419591/tomhyluo.com"
gist:
  noscript: false
kramdown:
  math_engine: mathjax
  syntax_highlighter: rouge
# 所使用的主题 
theme: minimal-mistakes-jekyll
# 主题中对应的皮肤
minimal_mistakes_skin: "dark"
# 站点的语言，注意此配置需要复制_data/ui-text.yml 到你的项目 
locale: "zh-CN"  
# 配置各个模块相关信息
defaults:
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      related: true
# 自定义的js      
head_scripts:
  - https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.3/viewer.min.js
  - /assets/js/custom.js 
# 项目所使用的插件  
plugins:
  - jekyll-paginate
  - jekyll-sitemap
  - jekyll-gist
  - jekyll-feed
  - jemoji
  - jekyll-include-cache
  • Gemfile
source "https://rubygems.org"

gem "jekyll"
gem "minimal-mistakes-jekyll"
# github-pages 用于在github上发布
gem "github-pages", group: :jekyll_plugins
# 其它插件的依赖 可忽略
gem "webrick"

本地调试

配置完成后通过以下命令在本地启动 devSever (进入项目目录执行)

 bundle exec jekyll serve

发布站点

调试完成后，将代码 push 到 git 仓库

在最开始的 pages 选项中选择 Github Actions 作为发布方式

6.png

这里选择 GitHub Pages Jekyll 作为发布流水线

7.png

选择后在发布页面观察发布状态，发布完成后即可在 pages 中的地址看到站点

8.png

avatar
文章
阅读
粉丝