利用 GitHub Pages + jekyll 搭建我的博客

博客的搭建教程修改自 qiubaiying

查看博客戳这里 👆

使用

• 开始
  • 起步
  • 开始
  • 撰写文章
• 组件
  • 侧边栏
  • 推荐标签
  • 社交帐号
  • 好友连接
• 评论与 Google/Baidu Analytics
  • 评论
  • 网站分析

起步

博客使用 GitHub Pages + jkeyll 搭建，配置极其简单，搭建完成仅需不到半小时。首先你须要点击跳转到 个人仓库，点击右上角 fork 按钮将此项目拉取到你的仓库下。

开始

├── _includes                 // 公共页面
│   ├── footer.html           // 底部页面 
│   ├── head.html             // 头部页面
│   ├── nav.html              // 导航栏页面
├── _layouts                  // 页面布局
├── _posts                    // 存放博客（仅支持markdown格式）
├── css                       // css样式
├── fonts                     // 引入字体
├── img                       // 图片资源
├── js                        // js函数
├── less                      // less样式
├── pwa                       // pwa配置
├── .gitignore                // git忽略文件
├── .travis.yml               // Travis CI配置文件
├── 404.html                  // 404页面
├── CNAME                     // 域名解析文件
├── Gruntfile.js              // Gruntfile插件构建
├── LICENSE                   // 许可文件
├── README.md                 // 项目简介
├── _config.yml               // 主配置文件
├── about.html                // '关于我'页面
├── feed.xml                  // jekyll相关
├── index.html                // 主页面
├── offline.xml               // 网络离线页面
├── package.json              // package依赖
├── sw.js                     // scoket相关
└── tags.html                 // '关键字'页面
复制代码

主要经过修改_config.yml文件配置博客内容：

## 网站设置
# 标题
title: Blog
# 选项卡标题
SEOTitle: 周大路的博客 | SuperZhouDalu‘s Blog
# 首页背景图片
header-img: img/post-bg-debug.png
# 邮箱设置
email: zhoujianlu666@gmail.com
# 网站介绍
description: "I guess it comes down to a simple choice:get busy living or get busy dying."
~~~ ~~~ （内容较多，不适合所有展现，关键配置均有中文注释）
复制代码

将 _config.yml 文件中 url 修改成 https://"你的GitHub用户名" + .github.io, 清空CNAME文件内容并提交，再将项目名称修改成 你的GitHub用户名 .github.io ，以下图

点击 Rename 按钮后，你就能够在网页输入 https://"你的GitHub用户名".github.io 查看效果了。至此已经完成了一半啦，剩余的就是一些你专属的配置了。

撰写文章

要发表的文章通常以 Markdown 的格式放在这里 _posts/，若是你还不了解 Markdown 语法，能够点击这里进行学习。每篇博客的标头是固定的，如下是的配置内容：

---
layout:     post
title:      这是标题
subtitle:   这是子标题
date:       2019-02-26
author:     SuperZhouDalu
header-img: img/post-bg-coffee.jpeg
catalog: true
tags:    
        - 标签
---

## 标题
### 内容
复制代码

侧边栏

看右边：

关于侧边栏的设置是在 _config.yml 中：

## 侧边栏设置
# 是否开启侧边栏 true 开始 false 关闭
sidebar: true
# 侧边栏描述语句
sidebar-about-description: "知识就是力量。"
# 侧边栏头像
sidebar-avatar: /img/sidebar-avatar.jpg
复制代码

侧边栏是响应式布局的，当屏幕尺寸小于992px的时候，侧边栏就会移动到底部。具体请见bootstrap栅格系统。

推荐标签

推荐标签位于侧边栏首部，针对博客的tags进行分类。相关配置在 _config.yml 中：

## 标签设置
# 是否使用首页标签
featured-tags: true
# 相同标签数量大于这个数，才会出如今首页
featured-condition-size: 0
复制代码

惟一须要注意的是featured-condition-size: 若是一个标签的 SIZE，也就是使用该标签的文章数大于上面设定的条件值，这个标签就会在首页上被推荐。 内部有一个条件模板 {% if tag[1].size > {{site.featured-condition-size}} %} 是用来作筛选过滤的。

社交帐号

目前支持微博、知乎、GitHub、Facebook、简书、Twitter社交帐号连接，未罗列的暂不支持，能够本身手动集成。相关配置在 _config.yml 中：

## 社交网站设置
RSS: false
# 微博 打开我的主页截取用户编号 例如我的主页网址为https://weibo.com/u/5089298519 填写 5089298519
weibo_username:     5089298519
# 知乎我的页面 填写用户名
zhihu_username:     username
# GitHub我的页面 填写用户名
github_username:    username
# facebook我的页面 填写用户名
facebook_username:  username
# 简书我的页面截取用户编号 与微博同理
jianshu_username:   56a2c6b6027c
# twitter我的页面 填写用户名
twitter_username:   zhoudalu
复制代码

好友连接

好友连接部分会在因此页面展现，相关配置在 _config.yml 中：

## 友情连接
friends: [    
    {       
        title: "帅超",
        href: "https://github.com/shuaichaoA" 
    },
    {        
        title: "鸡大婶",        
        href: "https://github.com/ruinszero"    
    },
    {        
        title: "Apple",
        href: "https://apple.com"   
    },
    {        
        title: "Apple Developer",   
        href: "https://developer.apple.com/"   
    }
]
复制代码

评论

博客目前支持 Disqus和Gitalk 评论系统。

Disqus

优势：配置简单，国际比较流行，界面也很大气、简洁，若是有人评论，还能实时通知，直接回复通知的邮件就好了。

缺点：评论必需要去注册一个disqus帐号，分享通常只有Facebook和Twitter，而且在国内被墙了。

使用：

1. 前往disqus官网注册一个属于本身的帐号。
2. 进入设置页面配置我的信息：

   

3. 在左侧菜单栏选择 Account ，并找到 Username 。

   

   Username 对应着 _config.yml 中  disqus_username ：

# Disqus（https://disqus.com/）
disqus_username: superZhoudalu
复制代码

Gitalk

优势：界面干净简洁，利用 Github issue API 作的评论插件，使用 Github 账号进行登陆和评论，最喜欢的支持 Markdown 语法，对于程序员来讲真是太 cool 了。

缺点：配置比较繁琐，每篇文章的评论都须要初始化。

使用：

1. Gitalk 须要一个 Github Application，点击这里申请。填写如下参数：

   

2. 点击建立，会生成 Client ID 和 Client Secret，填入 _config.yml 下列的参数内

## Gitalk
gitalk:  
    #是否开启Gitalk评论  
    enable: true  
    #生成的clientID 
    clientID: `Github Application clientID`
    #生成的clientSecret 
    clientSecret: `Github Application clientSecret`
    #仓库名称  
    repo: `GitHub仓库名`
    #github用户名  
    owner: `GitHub用户名`  
    admin: `GitHub用户名`  
    #是否启用相似FB的阴影遮罩  
    distractionFreeMode: true
复制代码

3. 点开任意一篇博客就会显示聊天框啦，随意输入内容进行讨论吧。

网站分析

统计目前集成了 百度统计 和 Google Analytics 两种方式，在相应官网绑定本身的博客网站信息后能够拿到 track_id，而后填写到对应的 _config.yml 中：

## 统计
# Baidu Analytics
ba_track_id: b50bf2b12b5338a1845e33832976fd68

# Google Analytics
ga_track_id: 'UA-135281137-1'
# 默认的是 auto, 这里我是自定义了的域名，你若是没有本身的域名，须要改为auto
ga_domain: https://aigq.me
复制代码

致谢

1. 这个模板是从这里 qiubaiying fork 的, 感谢这个做者。
2. 感谢 Jekyll、Github Pages 和 Bootstrap!
3. 转载请注明出处，喜欢的话帮忙点个赞再走呗。

License

遵循 MIT 许可证。有关详细,请参阅 LICENSE。