手把手教你用github_page+jekyll搭建自己的个人博客
1.为什么选择使用github-page部署个人博客
1
github-page是github官方推出的由仓库构建出一个静态网站的功能。
它完全免费,你只需要编写.html文件并上传到你的仓库,github会自动帮你构建并部署到公共网络。
一个静态网站足以实现你想要的博客,它不需要后台,不需要数据库,仅需前端页面即可完成
2.如何使用github-page部署个人博客
1.首先,你需要有一个github账号.
…
2.使用你的github账号创建一个repository,repository仓库名格式为”{github_id}.github.io”,创建时,请务必勾选”add readme”.
3.使用git clone 将你的代码克隆到本地,cd进入仓库文件夹的根目录,创建主页面
index.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
</head>
<body>
<h1>欢迎来到我的博客!</h1>
<p>这是一个简单的个人博客示例。</p>
</body>
</html>
- 提交代码并推送到origin
1 2 3
git add ./ git commit -m "init" git push
5.几分钟之后,使用https://{github_id}.github.io 你就可以访问你自己的github-page啦
3.如何使用jekyll设置你的博客主题
我的设备是macos 13.5.1版本,以下示例皆基于我的当前设备
1.安装homebrew并设置国内镜像
这一步就不写教程了,网上一搜有很多
2.安装ruby 3.0+,macos自带ruby2.6,但是由于jekyll4.4.1需要ruby3.0或更高版本,这里我们重新安装一下
1
2
3
4
5
brew search ruby
brew install ruby@3.3
ruby -v #验证ruby版本,如果ruby版本还是2.6.n的话,去网上搜索一下怎么将ruby的可执行文件链接到@3.3版本
3.使用gem安装bundler和jekyll
1
gem,bundler,jekyll是什么?
I-gem是ruby中的类似于包或库的概念,当你安装完ruby过后,就自动安装了gem的可执行文件
II-bundler既是ruby中的一个包,又是ruby的一个包管理器,有点类似于maven
III-jekyll也是ruby中的一个包,它的主要功能是用模版生成静态网页(这也就是我们要用到的核心功能)
1
2
3
4
5
6
7
8
gem install bundler jekyll #安装
jekyll new my-awesome-site #使用jekyll初始化一个网站目录
cd my-awesome-site
bundle exec jekyll serve #使用bundle本地运行网站
#然后输入localhost:4000,你就可以看到生成的网站啦
4.部署到你自己的github-page上
1
2
3
4
5
6
#将jekyll生成网站作为模版全量替换到github-page本地目录下
cp -r ./my-awesome-site/* ./{github_id}.github.io
#将代码推送到你的github origin仓库
#等待几分钟,就部署完毕了
4.如何使用jekyll为你生成的模版来写博客
1.写博客
在_post文件目录下新建一个.markdown文件,并在里面编辑你的文章内容。 这里的markdown文件名需满足格式(YYYY-MM-DD-title)
2.设置博客
在_config.yml文件中,你可以找到如下很多相关设置
1
2
3
4
5
6
title: xxx
email: xxx
description: >- # this means to ignore newlines until "baseurl:"
xxx
lang: xxx
logo: xxx
更多设置你可以在你选择的主题的github上找到,一般会被放到layout(布局)下,库、jekyll使用的默认主题是minima,通过修改这些设置,可以在你的网站上展示你自己独特的东西,另外,你也可以通过覆盖修改主题的默认layout实现更多定制化
5.如何换一个其他主题
主题清单 你可以在这里找到更多你想要的主题,这里用我正在使用的minimal举例
1.修改博客目录下的gem配置文件,安装主题 **Gemfile
1
2
gem "jekyll-theme-minimal"
2.通过bundle安装主题
1
bundle install
3.修改博客配置文件_config.yaml
1
2
3
4
theme: jekyll-theme-minimal
remote_theme: pages-themes/minimal@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one
4.重新执行
1
2
bundle exec jekyll serve #使用bundle本地运行网站
#访问localhost:4000查看效果
5.到此为止,minimal主题就安装完毕了,我们还需要再做一些小优化
1
2
3
4
5
6
7
8
9
10
11
12
## 最新文章
- [为什么要用游标分页?如何更好使用游标分页](/posts/%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E6%B8%B8%E6%A0%87%E5%88%86%E9%A1%B5-%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8%E6%B8%B8%E6%A0%87%E5%88%86%E9%A1%B5%E6%9B%B4%E5%A5%BD/) - 2025-03-13
- [我们常说的‘IO多路复用’,到底解决了什么](/posts/%E6%88%91%E4%BB%AC%E5%B8%B8%E8%AF%B4%E7%9A%84epoll-%E5%88%B0%E5%BA%95%E6%98%AF%E4%BB%80%E4%B9%88/) - 2025-03-12
- [从golang的反射聊起,讨论'反射'存在的必要性](/posts/%E4%BB%8Egolang%E7%9A%84%E5%8F%8D%E5%B0%84%E8%81%8A%E8%B5%B7-%E8%AE%A8%E8%AE%BA'%E5%8F%8D%E5%B0%84'%E5%AD%98%E5%9C%A8%E7%9A%84%E5%BF%85%E8%A6%81%E6%80%A7/) - 2025-03-10
- [手把手教你用github_page+jekyll搭建自己的个人博客](/posts/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E4%BD%BF%E7%94%A8github_page+jekyll%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/) - 2025-03-09
- [【搬运】博客该写些什么](/posts/%E6%90%AC%E8%BF%90-%E5%8D%9A%E5%AE%A2%E8%AF%A5%E5%86%99%E4%BA%9B%E4%BB%80%E4%B9%88/) - 2025-03-08
在你的index.markdown文件中加入上面这段,就可以将你的所有文章展示在你的首页啦
另外,你也可以覆盖修改它的layout(布局)和css样式来让博客有更多你自己的特点
6.写在最后
博客搭建只是写博客中最简单的一步,坚持写文章,持续内化并输出,博客才有它存在的真正意义