文章

手把手教你用github_page+jekyll搭建自己的个人博客

发表于 更新于
作者 张子禾
7 分钟阅读
手把手教你用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>
  1. 提交代码并推送到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.写在最后

博客搭建只是写博客中最简单的一步,坚持写文章，持续内化并输出，博客才有它存在的真正意义

技术
blog
本文由作者按照 CC BY 4.0 进行授权

热门标签

blog golang Linux MySql