当前位置: 首页 > 工具软件 > DISQUS > 使用案例 >

搭建Jekyll个人博客与配置 Google Analytics 和 Disqus 教程

公羊浩气
2023-12-01

Jekyll 介绍

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上。

可以通过创建文章、改变头信息来控制模板和输出、修改 Jekyll 设置来使你的站点变得更有趣。

学习指导:jekyll官网

安装与运行

借助 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站点

  1. GA官网(需要科学上网)输入想观察的站点地址获取对应的“跟踪id”
    跟踪 ID:UA-127******80-1

  2. 配置_config.yml
    google_analytics:UA-127******80-1

  3. 在_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

  1. 注册Disqus

     设置和拿到shortname:Your website shortname is ho****ah.
    
  2. 在_config.yml添加

     ```yml
     # disqus settings
     disqus:
     shortname: hongaah
     ```
    
  3. 添加_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 %}
     ```
    
  4. 在_includes/signoff.html添加

     ```js
     <br/><br/><br/><br/><br/><hr/>
     <div>
     {% if site.disqus.shortname %}
     {% include disqus_comments.html %}
     {% endif %}
     ```
    
  5. 在_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.
    
 类似资料: