想要查看手机端显示效果,扫描下方二维码浏览器打开即可
jekyll 3.8.1
开发dispus
、 来必力
、 Gitment
三种评论系统百度统计
、谷歌分析
两种网站追踪系统 首先在 github
上开启一个仓库起名为 你的github用户名.github.io
。并 clone
你的仓库到本地。 然后下载 HardCandy-Jekyll
的 源码 到本地之后,将 _config.yml
文件更改为自己的配置(下面会介绍)。之后,将所有文件拷贝至自己的本地仓库根目录下,再上传至自己的 github
线上仓库,即可通过域名 https://你的github用户名.github.io
访问看到自己的博客页面。
首先在本地安装 Jekyll
详情请戳
安装完成之后,使用命令 jekyll -v
查看 jekyll版本号 ,若低于 jekyll 3.x.x
则需要升级至 jekyll 3.x.x
。
使用 gem install jekyll-paginate
或 sudo gem install jekyll-paginate
安装Jekyll的分页插件。
将源码 clone
到本地后,在终端进入 HardCandy-Jekyll
根目录,运行 jekyll server
或 bundle exec jekyll serve
,即可开启jekyll的服务。通过浏览器访问 http://localhost:4000 ,即可看到本地部署的 HardCandy-Jekyll
博客了。
warning!值得注意的地方:
由于本主题是基于
jekyll 3.8.1
开发 ,jekyll的版本差异也许会导致相关显示效果的差异。详情请参考官方文档:news
通用修改
_config.yml
文件,你便可以轻松搭建属于你自己的个人博客。 一部分配置,默认已经是配置好的,你只需要修改下面列出的内容即可完成搭建。
---
# Site settings 配置站点
title: 'your awesome title'
description: 'your web description'
keywords: 'your web keywords, another keywords'
url: 'https://abc.github.io' # your host
---
title
:用于页面的 title 标签的显示内容
description
:网站的简介
keywords
:网站的关键词
url
:网站域名
博客通过解析 markdown
文件来部署文章页面的,所以用户写文章只需要写一篇markdown,并放置在站点根目录下的 _post
文件夹即可。具体的markdown语法自行上网搜索学习,或使用markdown编辑器进行写作。推荐一款 markdown编辑器:typora 。支持 windows 、mac OSX 、Linux 。
关于文章 YAML头信息:
layout: post
title: "post title"
subtitle: 'post subtitle'
date: 2018-05-29 08:44:13
tags: html js css
description: ''
color: 'rgb(154,133,255)'
cover: ''
关于color:
此处的color用于post页面的顶部位置的背景色。如上面展示图所示为 rgb(154,133,255)
色。
对于color的书写,如果颜色代码为 rgb
或 rgba
又或是 英文单词
的话,可以不用引号包裹,但如果颜色代码为 #123456
这种16进制码的话,就必须使用引号包裹。所以,在使用中,推荐一致都使用引号,以免错误使用。
当然,如果你在书写文章时,忘记写color的值的话,主题默认会为你填写 rgb(154,133,255)
色。就是上图显示的颜色。虽然不影响页面的显示,但如果想要更多彩的页面效果的话,建议在每一篇的头信息里写上 color 值。
关于cover:
此处需填写某一张图片的 url
,url
值可以是线上的某张图片,也可以是博客目录下的图片。关键是要书写正确。这张图片用于在首页下博客列表里显示,如下图。
# 博主
author: true
name: 'your awesome name'
NickName: 'your awesome nickname'
webtitle: 'your awesome webtitle'
bio: 'your awesome bio'
about: true
aboutyou: 'your introduction'
portraits: '/assets/profile.jpeg' # your portraits image file path
该部分显示在 关于博主
页面,与 社交媒体
一同在下图显示。
关于author:
使用 true
或者 false
来打开或关闭博主信息卡片,默认 true ,最佳体验也是 true 。
关于about:
使用 true
或者 false
来打开或关闭博主关于信息,即是否显示 aboutyou 部分的信息。默认 true ,该部分需要在 aboutyou 中输入相关信息,支持在此填写html代码。
# SNS
SNS: true
SNS-icon: #['Facebook', 'weibo', 'qq', 'github', 'Dribbble', 'Twitter', 'instagram', 'weixin', 'Codepen']
mail: 'mailto:abc@gmail.com'
weixin: '' # 你的微信二维码存放的地址
qq: '' # 你的qq二维码存放的地址 or http://wpa.qq.com/msgrd?v=3&uin='你的QQ号'&site=qq&menu=yes
github: ''
Codepen: ''
weibo: ''
instagram: ''
Twitter: ''
Dribbble: ''
Facebook: ''
Google: ''
zhihu: ''
juejin: ''
twitch: ''
主题一共配置了 13种 社交媒体的图标,只要在需要开启的社交账号的名字后填写你的个人主页链接即可,不需要开启的就在那一行的头部用
#
注释这一行即可。同样的,如果需要更换每个图标的排列位置,只需要改变他们的每一行排列的顺序即可。
在 SNS
后填写 true
或者 false
来打开或者关闭这一部分。
2018/09/28 更新:
---
layout: default
title: your awesome title
page-title: awesome page-title.
home-title: awesome home-title.
description: description
---
该部分位于 index.html
页面,修改 title
、page-title
、home-title
、description
为个人想要的信息,默认配置的显示效果如下图。
# nav 中文字符空格: 
nav: # 最佳体验 六个标签 且最好每个标签不超过4中文字
首页: '/'
标签: '/tags.html'
时间线: '/timeline.html'
关于博主: '/about.html'
友情链接: '/friendLink.html'
默认全部开启他们,当然如果想要自己添加,按照格式填在下方即可,当然页面显示顺序与每一行的位置有关。
# 分页
paginate: 2
paginatepath: ['page:num']
随个人爱好在,在上面填写你需要的在首页一页最多显示多少篇博客的数字。
本地部署的需要使用 gem install jekyll-paginate
或 sudo gem install jekyll-paginate
安装Jekyll的分页插件。
# 代码高亮 使用rouge
highlighter: rouge
# 代码高亮主题使用pygments主题: autumn\ default\ emacs\ friendly\ manni\ murphy\ pastie\ perldoc\ tango 任选一个你喜欢的主题名称填在下面的单引号中
pygmentsTheme: 'default'
代码高亮使用 jekyll3.0 之后的默认高亮引擎 rouge
。关于主题,只需要在 pygmentsTheme
后填写喜欢的主题名称即可。共有9款主题可选,主题名见上文。
代码高亮的写法:
``` css
*{
margin:0;
padding:0;
}
```
2018/09/28 更新:
上图为 代码高亮试例图 ,仅以 html 作为参考例子,其他代码参考 上图,或自行切换测试选择自己喜欢的代码高亮主题
# 友情链接
friends:
jekyll: 'https://www.jekyll.com.cn/'
按格式填写即可,排序与配置文件里的排序有关。
# since
footer:
since: 2018
用于页脚显示时间。
# 评论 最佳体验 在disqus、livere和Gitment之间三选一
# disqus 评论
disqus: false
disqus_url: '' # https://abc.disqus.com/embed.js
# 来必力评论
livere: true
livere_uid: 'MTAyMC8zNDI2OS8xMDgwNg==' # MTAyMC8zNDI2OS8xMDgwNg==
# Gitment评论 OAuth Application
Gitment: false
Gitment_owner: '' # github用户名
Gitment_repo: '' # github博客存放的仓库名
client_id: '' # 注册 OAuth Application 后获得的 client_id
client_secret: '' # 注册 OAuth Application 后获得的 client_secret
按申请第三方评论是获取的相关信息在配置文件中进行填写即可。
共有三款评论可供选择,使用 true
或者 false
开启或关闭某个评论系统。可开启多个甚至全开。当然,最佳体验,开一个即可。
三款评论的样式如下图:
dispus:
来必力:
Gitment评论:
三款评论各有各的优势与坏处。出于显示样式与中国大陆网络环境考虑,主题默认开启 来必力
评论为最佳体验。当然需要填写好相关的 livere_uid
代码。
# Share : weibo, qq, wechat, tencent, douban, qzone, linkedin, diandian, facebook, twitter, google
social-share: true
social-share-items: ['qq', 'wechat', 'weibo', 'twitter', 'facebook']
为了让文章更方便地分享,使用了第三方分享插件Share.js,支持一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。
只需要填写相关的名称在 social-share-items
后即可,显示顺序与书写顺序有关。
# 百度统计 在baidu-url里填写自己相关的url代码
baidu: true
baidu-url: ''
# 谷歌分析 在google-ID里填写自己在谷歌分析获得的追踪ID
google: false
google-ID: ''
在 baidu-url
和 google-ID
分别填上注册获取的相关信息。使用 true
或者 false
开启或关闭他们。出于中国大陆网络环境,默认开启 百度统计 ,当然可以多开。
HardCandy-Jekyll is licensed under MIT.
看到这里,如果你喜欢我的小项目,欢迎下载使用他,也请你为我点个小星星
症状: 因为这篇文章GitHub Pages now faster and simpler with Jekyll 3.0,打算将jekyll 2升级到jekyll 3。 执行 gem update jekyll 后,查看jekyll版本 jekyll --version确已升级至到时最新的3.1.1版本.但是在本地启动运行jekyll serve --watch却发生以下错误: Dependen
在命令行上运行 jekyll build 或者 jekyll serve 时,可以指定 JEKYLL_ENV 变量: JEKYLL_ENV=production jekyll build 在代码的 TAG 中,可以用 jekyll.environment 引用该变量。该变量用于区分不同环境,以执行相应的动作。该变量的默认值为 development 。 参考: Environments Jeky
0x0 简介 Jekyll是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和自带的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。
虽然jekyll有着jekyllbootstrap模板,但是本人觉得如果是做个博客,只需要将默认的模板修改一下就可以了。 1 中文编码问题 如果html页面中有中文就会报错,“invalid byte sequence in UTF-8”。 **原因:**html页面编码是ANSI。 方法:使用Notepad++编辑器,修改页面的编码格式,如:header.html文件保存为UTF-8无BOM编码
用github搭建自己的博客,其实github自己就可以支持jekyll,搭建jekyll环境的目的只是为了方便本地调试而已,下面是官方给出的教程。 由于教程是英文的,可能有人会不耐心,其实英文文档很简单的,慢慢品味,比起jekyll官方给出的中文文档好多了,建议以后还是看英文文档,更加详细。 http://jmcglone.com/guides/github-pages/#css
Jekyll & AppVeyor How to install Jekyll in the environment? Deploying a Pretzel generated static site to Github Pages using Appveyor Building A Site Using The Latest Hugo on AppVeyor GitHub & Jekyll G
Jekyll是什么? 博客形式的静态站点生成机器 http://jekyllcn.com/docs/home/
问题内容: 我尝试使用Jekyll新命令,但是它不起作用,并在出现错误后出现。 我正在使用Mac OS X 10.8.5 Mountain Lion。 但这对我的情况不起作用。我卸载并重新安装了json,但没有任何反应。如果您知道其他解决方案,请告诉我。自本周初以来,我一直在解决这个问题。 我的宝石清单和宝石环境如下。 请给我建议以帮助我。谢谢! 3月7日更新。 以防万一您想查看自制软件列表, 2
本文向大家介绍jekyll GitHub页面,包括了jekyll GitHub页面的使用技巧和注意事项,需要的朋友参考一下 示例 GitHub为用户或组织和项目站点提供无限托管。Jekyll和静态文件均可用。 以下是在Github上托管Jekyll博客的步骤。 设定 用户或组织站点 创建一个名为username.github.io的存储库,其中username是您在GitHub上的用户名(或组织名
Jekyll 是最早开始流行的静态网站构建工具,使用Ruby语言开发,开源已有9个年头了,是Github Pages默认的静态网站构建工具。当前互联网上有大量基于jekyll构建的静态网站,包括现在流行的开源容器编排调度引擎kubernetes的官网。 Jekyll的理念 Jekyll网站构建的理念就是只做用户告诉它要做的事情,不多也不少: No Magic:简单易懂 It “Just Works
本文向大家介绍如何在Ubuntu 16.04上设置和配置Jekyll开发站点,包括了如何在Ubuntu 16.04上设置和配置Jekyll开发站点的使用技巧和注意事项,需要的朋友参考一下 在本文中,我们将学习如何设置和配置Jekyll开发站点。Jekyll在数据库驱动的站点中提供了内容管理系统(CMS)的优势,并具有性能和安全性。它也称为博客意识,具有处理按日期组织的内容的功能。它特别适合于离线工
在Jekyll的帖子中,我想在地址中包含我的图像。 此外,我希望它具有750px的宽度。 我试过了 我应该使用什么语法?
我天真地以为只需在post.md页面中添加带有内容的标记就会很容易,如下所示: 但我看到的不是图像,而是SVG代码(在Firefox中)。到目前为止还没有找到任何办法来解决看起来很简单的事情。在jekyll/liquid减价范围内有可能吗? > 我想用d3.js来操作svg代码,所以我假设我需要嵌入svg代码,而不是作为外部映像文件引用它。 我可以直接用d3.js生成初始的svg内容(这是可行的)