简体中文 | English

knightyun.github.io

基于 jekyll 的响应式 Github Pages 个人博客网站

特性

• 适配移动端与桌面端展示效果 | 预览
• 个性化自动展示 GitHub 项目 | 预览
• 文章按类别与标签归档展示 | 预览
• 支持搜索框，按关键词搜索全站文章 | 预览
• 文章评论与留言板功能 | 预览
• 生动的 “关于” 页面 | 预览

使用

详细搭建教程：搭建 Github Pages 个人博客网站

jekyll 使用教程：https://www.jekyll.com.cn/

配置

配置文件是位于主目录的 _config.yml，关于配置的完整参数介绍和默认值等内容，请查阅官网文档：https://www.jekyll.com.cn/docs/configuration/

以下是我的网站配置示例，以供参考：

# 以下为自定义的全局变量，可以在 HTML 文件中引用，
# 比如代码：<h1>{{ site.title }}</h1> 
# 将会展示为设定的值，也可以自行添加其他自定义全局变量。
title: 瑝琦的博客 # 网站的标题
description: > # 网站的描述，可能会出现在搜索引擎展示结果中
  基于 jekyll 的 Github Pages 个人博客网站，技术的学习、总结、分享与提升
url: "https://knightyun.github.io" # 网站地址
github_repo: knightyun/knightyun.github.io
github_profile: "https://github.com/knightyun" # GitHub 个人主页
user: "瑝琦" # 用于侧栏展示的名字
user_email: "[email protected]" # 侧栏展示的联系方式
paginate: 5 # 主页展示的博客文章数量

# jekyll 相关配置
markdown: kramdown
plugins:
  - jekyll-feed
  - jekyll-paginate
  - jekyll-seo-tag
  - jekyll-sitemap
exclude:
  - Gemfile
  - Gemfile.lock
  - README.md
  - COPYING
  - vendor
sass:
  style: compressed
future: true
permalink: /:year/:month/:day/:title
theme: jekyll-theme-slate

配置开发环境

提交推送代码后，GitHub Pages页面（即博客网站主页）更新较慢，所以推荐搭建本地开发环境，以便调试。

详细教程请见：安装 jekyll

配置好依赖后在项目主目录运行：

bundle exec jekyll s

然后会提示浏览器打开 http://127.0.0.1:4000 预览网站，正常情况预览效果与 GitHub Pages 展示的一样，这样就可以在本地开发调试好了再推送到 GitHub。

用到的第三方库

• Materialize.css：一个不错的样式组件库
• GeoPattern：格式化生成有趣的背景图
• particles.js：粒子连接效果
• Valine：博客评论插件

参考

• https://github.com/ShawnTeoh/matjek

License

GPL v3