捡起我的个人站点,使用 GitHub 构建免费的博客网站

jekyll   tool  
发布于 Oct 5, 2024

N 年前就使用 GitHub pages 结合 Jekyll 构建了自己的博客站点,那是年轻时候的事情了,翻看一下最后更新记录,哈哈,已经 4 年前了(见下图)

现在有点后悔当初贪图安逸没有持续坚持记录自己的学习工作心得了。

写作,记录点点滴滴,真的可以让自己收获良多,不仅仅是知识,更重要的是可以扩大自己的影响力,收获到一批优质圈友,有时候写作也方便自己找到更好的工作呢(侧面证明自己)。

目前我主要在 CSDN 和 公众号(新质程序猿)上写文章,由于 CSDN 或 公众号 有时候存在一些不便写的(不让发)的内容,而个人站点就没有这些限制,因此对于一些敏感内容,可以同步写在个人站点上。

下面我们就来看一下我这个老古董的个人站点吧:

https://huangyanxiang.com/

站点是托管在 GitHub 上的,只有一个域名是我购置的,其他内容都是免费的(可能部分图片是来自存储在 CDN 上的,后面也尽量托管到 GitHub 上),这里将我的站点分享给大家,大家也可以直接克隆进行删减作为自己的博客站点使用。

构建这个博客站点所使用的技术是 Jekyll ,一个静态网站生成工具,Ruby 技术栈的一员,有一些年头了,目前依然还是 GitHub Pages 流行(默认)的方式。

个人站点地址:https://github.com/Chinaxiang/Chinaxiang.github.io

你可以直接 fork 自己用。

克隆到本地之后,我们要想本地运行,首先需要准备 Jekyll 环境,Jekyll 官网如下:

https://jekyllrb.com/

jeyllrb 本地启动依赖 ruby 环境,那就来开整吧!

安装 Ruby

ruby 是一个流行的编程语言,官网:https://www.ruby-lang.org/zh_cn/

在 windows 上安装 ruby 推荐采用 rubyinstaller 方式,国内站点:https://rubyinstaller.cn/

当然要使用推荐的 rbenv 了,新手友好,官方介绍如下:

https://rubyinstaller.cn/rbenv-for-windows

对应的 gitee 地址:https://gitee.com/RubyMetric/rbenv-for-windows

对应的 github 地址: https://github.com/RubyMetric/rbenv-for-windows

安装需要一些前置条件:

  • Windows 7 SP1+ / Windows Server 2008+
  • PowerShell 5 (or later, include PowerShell Core) and .NET Framework 4.5 (or later)
  • PowerShell must be enabled for your user account
  • cURL
  • Git
  • 7zip

我的电脑是 win11 ,默认带了 PowerShell, .NET 也默认安装了,如果 .NET 没有安装,可以到官网下载:https://dotnet.microsoft.com/zh-cn/download

git 也有安装,默认带了 curl : https://git-scm.com/downloads

7zip 安装 : https://www.7-zip.org/

我这里由于网络情况 ok,所以我选择使用 github 进行安装。

管理员运行 powershell,执行

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser


# 自定义你想安装到的位置,最好不要有空格,如我的 D:\soft\Ruby-on-Windows
# powershell 执行记得连下面前面的 $ 符号也带上
$env:RBENV_ROOT = "D:\soft\Ruby-on-Windows"

# iwr 是 powershell 下载资源的工具,类似 wget
iwr -useb "https://github.com/RubyMetric/rbenv-for-windows/raw/main/tool/install.ps1" | iex

红色的报错可以忽略,因为我提前创建了 D:\soft\Ruby-on-Windows 目录,这个不影响

下面还有一个 curl 的报错,是因为 ps 脚本里会去下载 ruby.exe 和 ruby-exec.exe 其中一个下载失败了,*可以手动下载一下*

其实安装脚本也很简单,大家看一下 install.ps1 脚本即可。

下载完成,放置到正确的位置,再执行如下 init 操作,这一步相当于切换到全局 ruby 环境

$env:RBENV_ROOT = "D:\soft\Ruby-on-Windows"
& "$env:RBENV_ROOT\rbenv\bin\rbenv.ps1" init

我执行的适合报错了,提示我要添加一下 git 配置,接下来,先添加一下 git 配置,并更新 rbenv

git config --global --add safe.directory D:/soft/Ruby-on-Windows/rbenv
rbenv update

# 列出当前 ruby 版本列表
rbenv install -l

执行又报错了,安装 ruby 时需要 7zip ,上面已经安装了,但是命令行找不到,那就重新用 scoop 安装一下吧

scoop 是 windows 安装软件的工具,类似 yum, apt 之类的,正好安装一下吧说不定下次用得到

https://github.com/ScoopInstaller/scoop

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression

scoop install 7zip

安装过程图示

再次安装 ruby

rbenv install -l
rbenv install 3.3.3-1
rbenv versions
ruby -v

# 当前目录切换至 3.3.3-1 版本,会在本地目录创建一个 .ruby-version 文件
rbenv local 3.3.3-1

安装完成,安装目录结构如下,有 2 个版本的 ruby 环境了。

可以配置一下环境变量 RBENV_ROOT 和 Path 下次在终端打开就可以直接使用了。

配置 RBENV_ROOT

配置 Path,便于执行 rbenv init 指令

在项目目录下,使用终端打开

ruby -v
rbenv versions

看起来 ruby 和 rbenv 配置正常,接下来来尝试安装 jekyll 吧!

安装 Jekyll

下面我们来尝试安装 Jekyll 并创建一个空白的博客站点吧

在项目路径下,打开终端,执行如下命令

rbenv init
ruby -v 
gem install jekyll bundler
jekyll -v

jekyll new my-site

这样一个新站点就创建好了,进到站点目录,执行本地启动命令可以开启开发者预览模式

cd my-site
bundle exec jekyll serve

输出结果如下就表示启动成功

浏览器直接访问 http://127.0.0.1:4000 即可查看站点详情,如下图

默认创建出来的项目结构如下图,包含了一篇示例博客

总结

今天主要挑战安装了 ruby 和 jekyll 并使用 Jekyll 构建了一个模板项目。

在安装的过程中有可能遇到不少问题,但是大家要学会去不断探索,去寻根问底,比如可以去尝试阅读项目源码(当然会花点功夫,不过比放弃好),我相信每个人都可以成功的。

另外,我的个人站点也重新启用,多平台同步更新了,大家可以通过多种途径与我互动。

本次的分享到此结束,希望对你有所帮助。

如果你对我分享的内容感兴趣,欢迎扫码关注公众号:新质程序猿,并设置星标,推送更实时哟!

本文由 黄彦祥 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。
可自由转载、引用,但需署名作者且注明文章出处。