Jekyll 介绍
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上。
可以通过创建文章、改变头信息来控制模板和输出、修改 Jekyll 设置来使你的站点变得更有趣。
学习指导:jekyll官网
安装与运行
- Ruby http://rubyinstaller.org/downloads
直接运行exe文件。在安装好rubyinstaller后可以通过命令ruby -v
检测是否安装成功 - RubyGems https://rubygems.org/pages/downloads,在cmd with ruby界面运行
ruby setup.rb
借助 RubyGems 安装 Jekyll
安装 Jekyll 的最好方式就是使用 RubyGems. 你只需要打开终端输入以下命令就可以安装了:
gem install jekyll
jekyll new myblog
cd myblog
jekyll serve
# => Now browse to http://localhost:4000
如果安装成功,会安装在D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems目录下,并把相应的依赖项一起安装下来。
检测是否安装成功
jekyll -v
卸载
gem uninstall jekyll
运行
jekyll serve --detach
# 该功能和jekyll serve命令相同,但是会脱离终端在后台运行。
# 如果你想关闭服务器,可以使用`kill -9 r234`命令,"1234" 是进程号(PID)。
# 如果你找不到进程号,那么就用`ps aux | grep jekyll`命令来查看,然后关闭服务器。
基本用法
配置
还有一些可以配置的配置选项. 很多配置选项既可以在命令行中作为标识(flags)设定,也可以在源文件根目录中的 _config.yml 文件中进行设定。Jekyll 会自动加载这些配置。比如你在你的 _config.yml 文件中添加了下面几行:
source: _source
destination: _deploy
那么就等价于执行了以下两条命令:
jekyll build
jekyll build --source _source --destination _deploy
头信息
正是头信息开始让 Jekyll 变的很酷。任何只要包含 YAML 头信息的文件在 Jekyll 中都能被当做一个特殊的文件来处理。头信息必须在文件的开始部分,并且需要按照 YAML 的格式写在两行三虚线之间。
---
layout: post
title: Blogging Like a Hacker
---
安装插件到网站
添加Google Analytics监控你的Jekyll站点
-
到GA官网(需要科学上网)输入想观察的站点地址获取对应的“跟踪id”
跟踪 ID:UA-127******80-1 -
配置_config.yml
google_analytics:UA-127******80-1 -
在_includes/google_analytics.html
{% if site.google_analytics %}
<script>
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},
i[r].l=1*new Date();
a=s.createElement(o),
m=s.getElementsByTagName(o)[0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m)
})
(window,document,'script''https://www.google-analyticscom/analytics.js','ga');
ga('create', '{{ site.google_analytics }', 'auto');
ga('send', 'pageview');
</script>
{% endif %}
4.在_includes/head.html添加
<!-- 配置Google Analytics -->
{% if jekyll.environment == 'production' and site.google_analytics %}
{% include google-analytics.html %}
{% endif %}
添加 Disqus 评价系统到 Jekyll
-
注册Disqus
设置和拿到shortname:Your website shortname is ho****ah.
-
在_config.yml添加
```yml # disqus settings disqus: shortname: hongaah ```
-
添加_includes/disqus_comments
```html {% if page.comments %} <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url ="https://hongaah.github.io/{{page.url}}" // <--- 修改成你的博客地址 this.page.identifier ="https://hongaah.github.io/{{page.url}}"; }; (function() { // DON'T EDIT BELOW THISLINE var d = document, s = d.createElemen('script'); s.src ='https://hongaah.disqus.com/embed.js';// <--- 修改成你的 disqus 站点缩写名 s.setAttribute('data-timestamp', +newDate()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript toview the <a href="https://disqus.com/ref_noscript" rel="nofollow">commentspowered by Disqus.</a></noscript> {% endif %} ```
-
在_includes/signoff.html添加
```js <br/><br/><br/><br/><br/><hr/> <div> {% if site.disqus.shortname %} {% include disqus_comments.html %} {% endif %} ```
-
在_posts/日志下
Add a variable called comments to the YAML Front Matter and set its value to true. A sample front matter might look like: --- layout: default comments: true (ture为有评论/false为无) # other options --- In between a {% if page.comments %} and a {% endif %} tag, copy and paste the Universal Embed Code in the appropriate template where you'd like Disqus to load. Note: Comments can be disabled per-page by setting comments: false or by not including the comments option at all.