Hugo - Service

   
   
 hugo  
 ssg  frontend  
Article Series

This article series contain few sections.

Supplementary Article for Windows User.

Clone Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Setup Google Analytic and Disqus Comments.

Reading

1: Google Analytics

Get The Code

You should setup google analytic before you begin. And get the code.

Hugo: Google Analytic: Get The Code

Partial: Service

Copy and Paste directly:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78098670-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-78098670-2');
</script>

Default: Baseof Template

Consider go back to our ancient artefact baseof.html. And add this partial:

  {{ partial "service-google-analytics.html" . }}
<!DOCTYPE html>
<html lang="en">
{{ partial "site-head.html" . }}
<body>
{{ partial "service-google-analytics.html" . }}
{{ partial "site-header.html" . }}

  <div class="container-fluid maxwidth">

    <div class="row layout-base">
      {{- block "main" . }}
      {{ .Content }}
      {{- end }}

      {{- block "aside" . }}{{- end }}
    </div><!-- .row -->

  </div><!-- .container-fluid -->

{{ partial "site-footer.html" . }}
{{ partial "site-scripts.html" . }}
</body>
</html>

Get The Chart

I mostly watch the chart for result.

Hugo: Google Analytic: Get The Chart

2: Disqus Comment

Get The Code

You should setup disqus account before you begin.

Partial: Service

Copy and Paste the code:

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = 'epsirnsgithubio';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Notice this line, if you do not want to bother with config setting.

    var disqus_shortname = 'epsirnsgithubio';

Layouts: Single

Consider go back to our ancient artefact single.html. And add this partial:

  {{ partial "service-disqus-comments.html" . }}
{{ define "main" }}
  <main role="main" class="col-md-8">
    <div class="blog-main p-3 mb-3
                bg-light rounded border border-dark shadow-hover">
      <div class="blog-post" 
           itemscope itemtype="http://schema.org/BlogPosting">
        {{ partial "post-header.html" . }}

        <article class="main-content" itemprop="articleBody">
          {{- with .Page.Params.toc -}}
          {{ partial (print . ".html") . }}
          <br/>
          {{- end -}}

          {{ .Content }}
        </article>

        {{ partial "post-navigation.html" . }}
        {{ partial "post-footer.html" . }}
      </div><!-- /.blog-post -->
    </div><!-- /.blog-main -->

    {{ partial "service-disqus-comments.html" . }}
  </main>
{{ end }}

{{ define "aside" }}
  <aside class="col-md-4">   
    {{ partial "card-related-posts.html" . }}
  </aside>
{{ end }}

Server Output: Browser

Open in your favorite browser. You should see, the disqus comments, already served.

Hugo Highlight: Disqus Comments

What is Next ?

There are, some interesting topic about setting up Search in Hugo, using lunr js. Consider continue reading [ Hugo - Javacript - lunr Search ].

Thank you for reading.