文章

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

手把手教你用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.写在最后

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

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

热门标签