使用Github快速搭建博客

正所谓前人栽树，后人乘凉。

感谢Huxpro提供的博客模板 感谢qiubaiying的博客总结

我的博客

前言

Github Pages主要有什么作用呢

• 分享日常
• 分享你的技术记录
• github图床，存放自己的图片

踩坑的话倒是没踩什么坑，大家如果踩了什么坑，可以提在我的博客项目下提issues

博客主页：

进入正文

快速开始

从注册一个Github账号开始

我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。

要使用 GitHub Pages，首先你要注册一个GitHub账号，GitHub 是全球最大的同性交友网站(吐槽下程序员~)，你值得拥有。

拉取我的博客模板

注册完成后搜索 labixiong.github.io 进入我的仓库

点击右上角的 Fork 将我的仓库拉倒你的账号下

稍等一下，点击刷新，你会看到Fork 了成功的页面，仓库名下方会显示forked from labixiong/labixiong.github.io

修改仓库名

点击settings进入设置

这时你在在浏览器中输入 你的Github账号名.github.io 例如:labixiong.github.io

这时候你的博客就会出现了，如果没出现的话可以等一会儿

若是出现

则需要 检查一下你的仓库名是否正确

整个网站结构

修改Blog前我们来看看Jekyll 网站的基础结构，当然我们的网站比这个复杂。

├── _config.yml
├── _doc
|   ├── Manual.md
|   └── README.zh.md
├── _drafts
|   ├── xxx
|   └── xxx
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2023-07-18-xxx.md
|   └── 2023-07-19-xxx.md
├── _data
|   └── xxx
├── _site
├── img
└── index.html

其中重要的几个文件：

• _config.yml 全局配置文件
• _posts 放置博客文章的文件夹
• img 存放图片的文件夹

一个基本的jekyll站点通常是这样的

修改博客配置

来到你的仓库，找到_config.yml文件,这是网站的全局配置文件。

点击修改

然后编辑_config.yml的内容

接下来我们来详细说说以下配置文件的内容：

基础设置

# Site settings
title: You Blog Title   				  	#你博客的标题
SEOTitle: 你的博客 | You Blog    	 #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg.jpg  	#显示在首页的背景图片
email: You@gmail.com	#邮箱
description: "You Blog"  			 #网站介绍
keyword: "LBX, LBX Blog, 蜡笔熊的博客, labixiong, 蜡笔熊" # 关键词
url: "https://labixiong.github.io"          # 这个就是填写你的博客地址
baseurl: ""      # 这个不用填写

侧边栏

# Sidebar settings
sidebar: true                           # 是否开启侧边栏.
sidebar-about-description: "说点装逼的话。。。"
sidebar-avatar:/img/avatar-by.JPG      # 你的个人头像 这里你可以改成我在img文件夹中的两张备用照片 img/avatar-m 或 avatar-g

社交账号

展示你的其他社交平台

在下面你的社交账号的用户名就可以了，若没有可不用填

# SNS settings
RSS: false
weibo_username:     username
zhihu_username:     username
github_username:    username
facebook_username:  username

评论系统

博客中使用的是 Disqus 评论系统，在 官网 注册帐号后，按下面的步骤简单的配置即可：

进入 设置页面 配置个人信息

找到 Username

这个 Username 就是我们 _config.yml 中 disqus_username

# Disqus settings（https://disqus.com/）
disqus_username: dcjin

很对人反映 Disqus 评论插件加载不出来，因为 Disqus 在国内加载缓慢，所以我新集成了 Gitalk 评论插件（感谢@FeDemo的推荐），喜欢折腾的朋友可以看这篇：《为博客添加 Gitalk 评论插件》。 我已经在_config.yml 配置就好了，只需要填写参数可以了。

网站统计

集成了 Baidu Analytics 到各个网站注册拿到track_id替换下面的就可以了

拿百度统计来进行示例：

也可以使用谷歌统计进行分析，这里就不进行举例了

若不想启用统计，直接删除或注释掉就可以了

# Analytics settings
# Baidu Analytics
ba_track_id: xxx

# Google Analytics
ga_track_id: xxx           # Format: UA-xxxxxx-xx
ga_domain: auto

好友

friends: [
    {
        title: "简书·BY",
        href: "http://www.jianshu.com/u/e71990ada2fd"
    },{
        title: "Apple",
        href: "https://apple.com"
    },{
        title: "Apple Developer",
        href: "https://developer.apple.com/"
    }
]

保存

如果是在github网站直接编辑_config.yml文件的话，将网页拉倒底部，点击 Commit changes 提交保存，这样的话连git都不用安装

如果是clone到本地的话，使用git进行提交就行了。

至此就算配置完成了。

写文章

创建

文章统一放在网站根目录下的 _posts 的文件夹中。

创建一个文件

文章内容有好几种布局，可以任意选择一种

---
layout:     post  # 文章布局 page post keynote default
title:      强缓存和协商缓存 # 文章标题
subtitle:   了解缓存机制 # 副标题
date:       2023-07-18 # 文章日期
author:     LBX # 文章作者
header-img: img/bg-material.jpg # 头部图片
catalog: true # 是否显示目录
tags: # 文章标签
    - HTTP
    - 前端
---

### 内容
xxx

按格式创建文章后，提交保存。进入你的博客主页，新的文章将会出现在你的主页上.

你已经成功搭建了自己的个人博客以及学会在博客上撰写文字的技能了。

首页标签

在首页可以看到这些特色标签，当你的文章出现相同标签（默认相同的标签数量大于1），才会自动生成。

所以当你只放一篇文章的时候是不会出现标签的。

建站的初期，博客比较少，若你想直接在首页生成比较多的标签。你可以在 _congfig.yml中找到这段：

# Featured Tags
featured-tags: true                     # 是否使用首页标签
featured-condition-size: 1              # 相同标签数量大于这个数，才会出现在首页

将其修改为featured-condition-size: 0, 这样只有一个标签时也会出现在首页了。

相反，当你博客比较多，标签也很多时，这时你就需要改回 1 甚至是 2 了。

本地运行博客 -- windows系统为例

先行下载Ruby

下载地址, 我下载的是最新的版本

操作

安装了ruby之后，可以 cmd + r 组合键，输入cmd进入windows终端

1. 输入 ruby -v 查看ruby版本，确定是否安装成功

2. 输入gem -v 查看gem版本，确认gem是否安装成功

3. 接着输入gem install bundler 安装bundler

4. 接着找到文件夹中clone下来的项目文件夹，右键点击文件夹，选择git bash here 打开终端

   前置条件：需要先安装git

   

   

   点击下载好的文件，进行安装，一路点击next默认安装即可

5. 打开终端之后，输入bundler install 进行安装依赖

6. 安装以来完成后，会多出一个 Gemfile.lock文件，接着再输入 bundler exec jekyll serve 运行博客项目

7. 运行完毕后会出现一个地址，打开地址即可 下图中Server address一栏就是本地运行的项目地址

参考

• Huxpro的博客
• qiubaiying的博客
• qiubaiying的博客搭建教程