The footer is a section of the site that appears at the very bottom of every page. It typically contains a copyright notice and links to your privacy policy, terms of use, and social media. To reduce maintenance, we are going to use Hugo’s configuration file, config.yaml, to place these links and information:

params:
    author: PhD. Máximo Núñez Alarcón, Anawim
    og_image: https://www.justtothepoint.com/myImages/logotipoMagotipoCabecera.png
    description: Free bilingual e-books, articles, resources, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.
    social:
        profiles: 
            facebook: "https://www.facebook.com/nmaximo7"
            github: "https://github.com/nmaximo7"
            twitter: "http://Twitter.com/justtothepoint"
            instagram: "http://instagram.com/justtothepoint"
            linkedin: "https://www.linkedin.com/in/justtothepoint"
            youtube: "https://youtube.com/justtothepoint"
        share:
            facebook: true
            linkedin: true
            twitter: true
            whatsapp: true
            email: true
            line: true

    # My footer
    websiteTermsEs: "/contactes/terminos-y-condiciones-de-uso/"
    privacyPolicyEs: "/contactes/politica-de-cookies/"
    websiteTermsEn: "/contact/website-terms-and-conditions-of-use/"
    privacyPolicyEn: "/contact/cookies-policy/"
    copyrightStart: "2011"

    # Related posts. Hugo provides a sensible default configuration of Related Content, but you can fine-tune it in Hugo's configuration file.
    related:
      threshold: 70
      includeNewer: true
      toLower: false
      indices:
      - name : "keywords"
        weight: 150
      - name: "categories"
        weight: 80
      - name : "date"
        weight: 10
        pattern: "2006"

Next, we will create a new partial under layout/partials/footer.html that is referenced in _default/baseof.html:

<div class="site-info">
    <div class="site-info-container">
       <center>
        <img src="{{ "myImages/nenes2.png" | absURL }}" width="60%" ></center>
        <p><a href="https://justtothepoint.com/">JustToThePoint</a> Copyright &copy; {{ .Site.Params.copyrightStart }} - {{ dateFormat "2006" now }} {{ .Site.Params.author }}. ALL RIGHTS RESERVED. Bilingual e-books, articles, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.</p>

Let’s add Copyright information to our footer. We are adding {{ dateFormat "2006" now }}, so we don’t need to update our copyright info every year. now returns the current local time. We use the .Format function to display only the current year.

       {{ range $key, $url := site.Params.social.profiles }}

Please observe that Hugo variables are always prefixed with a $sign. To look through a list of items, we use the Range function. We are initializing two variables at once, a key-value pair, e.g., $key (facebook) and $url (https://www.facebook.com/nmaximo7).

            {{ if eq $key "facebook"}}

Observe that if is the condition, and eq is a function. It compares the first parameter ($key) with the following one, in this particular case, facebook. If the key is Facebook, then we will show the corresponding icon (we are using Awesome fonts) and href will point to our Facebook link (it is provided in config.yaml).

                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-facebook fa-2x" ></i></a>
            {{ else if eq $key "twitter" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-twitter fa-2x" ></i></a>
            {{ else if eq $key "github" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-github fa-2x" ></i></a>
            {{ else if eq $key "instagram" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-instagram fa-2x" ></i></a>
            {{ else if eq $key "youtube" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-youtube fa-2x" ></i></a>
            {{ else if eq $key "linkedin" }}
                <a class="btn btn-default" href="{{ $url }}"><i class="fab fa-linkedin fa-2x" ></i></a>
            {{ end }}   
        {{ end }}       
        {{ if eq (string .Params.language) "es" }}      
            <p>Esta web utiliza 'cookies' propias y de terceros para ofrecerte una mejor experiencia y servicio. <br>Al navegar o utilizar nuestros servicios, estas aceptando nuestra <a href="{{ .Site.Params.privacyPolicyEs }}">Política de Cookies</a>, así como, nuestros <a href="{{ .Site.Params.websiteTermsEs }}">Términos y condiciones de uso.</a></p>
        {{ else }} 
            <p>This website uses cookies to improve your navigation experience.<br> By continuing, you are consenting to our use of cookies, in accordance with our <a href="{{ .Site.Params.privacyPolicyEn }}">Cookies Policy</a> and <a href="{{ .Site.Params.websiteTermsEn }}">Website Terms and Conditions of use.</a></p>
        {{ end }}
       
   </div> <!-- .site-info-container -->
</div><!-- .site-info -->

We are going to create another partial to show our social icons and share our links on social media. You can copy the below code snippet as a reference and save it under layout/partials/socialshare.html:

<!-- Social Share Button HTML -->
<style> <!-- We can add a separate .css file to Hugo, but we can also add an internal stylesheet. Adapt your own CSS style based on your theme -->
  .myButtonShare  {
  padding: 0;
  border: 0;
  background: transparent;
}
 .myImageShare {
  display: block;
}
.containerBitcoin {
    background: url( "/myImages/myBitcoin.png" ) no-repeat;
    display: inline-block;
    background-size: 100px 100px; /* image's size */
    height: 100px; /* image's height */
    padding-left: 100px; 
}

.containerBitcoin span {
    height: 100px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

</style>
<section class="social-share">
  {{ $title := .Title }}
  {{ $url := printf "%s" .Permalink }}
  {{ $body := print .Site.Title " " .Params.description }}
  <!-- We create and initialize three variables: title, url, and body. Observe that we use "printf" to format our URL (.Permalink), and "print" to concatenate the Site's title with the page's description. -->
  <!-- Twitter -->
  {{ if .Site.Params.social.share.twitter }}

We have added: params, social, share, twitter: true in our main Hugo’s configuration file, config.yaml, so we can enable and disable our social media icons and links site-wide.

  <a href="https://twitter.com/intent/tweet?hashtags=justtothepoint&amp;url={{ .Permalink }}&amp;text={{ $body }}&amp;" target="_blank" rel="noopener" aria-label="Share on Twitter">
    <button class="myButtonShare" >
      <img class="myImageShare" src="/myImages/twitter.png">
    </button>
  </a>
  {{ end }}
  <!-- Facebook -->
  {{ if .Site.Params.social.share.facebook }}
  <a href="https://facebook.com/sharer/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener" aria-label="Share on Facebook">
    <button class="myButtonShare" >
      <img class="myImageShare" src="/myImages/facebook.png">
    </button>
  </a>
  {{ end }}

  <!-- LinkedIn -->
  {{ if .Site.Params.social.share.linkedin }}
  <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $url }}&amp;source={{ $url }}&amp;title={{ $title }}&amp;summary={{ $title }}" target="_blank" rel="noopener" aria-label="Share on LinkedIn">
    <button class="myButtonShare" >
      <img class="myImageShare" src="/myImages/linked-in.png">
    </button>
  </a>
  {{ end }}

  <!-- WhatsApp -->
  {{ if .Site.Params.social.share.whatsapp }}
  <a href="whatsapp://send?text={{ $body }}-{{ $url }}" target="_blank" rel="noopener" aria-label="Share on WhatsApp">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/whatsapp.png">
    </button>
  </a>
  {{ end }}

  <!-- Email -->
  {{ if .Site.Params.social.share.email }}
  <a href="mailto:?subject={{ .Site.Title }} - {{ $title }}.&amp;body={{ $body }} - {{ $url }}" target="_self" rel="noopener" aria-label="Share by E-Mail">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/email.png">
    </button>
  </a>
  {{ end }} 

  <!-- Line -->
  {{ if .Site.Params.social.share.line }}
  <a href="https://social-plugins.line.me/lineit/share?url={{ $url }}" target="_blank" rel="noopener" aria-label="Share on Line">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/line.png">
    </button>
  </a>
  {{ end }} 

  <!-- Buy me a coffee -->
  <a href="https://buymeacoffee.com/justtothepoint" target="_blank" rel="noopener">
    <button class="myButtonShare">
      <img class="myImageShare" src="/myImages/buyMeCoffee.png">
    </button>
  </a>

Hugo supports a solution for related content Hugo, Related Content out of the box.

<!-- Related Posts -->
<div id="relatedposts">
<h2>Related Posts</h2>
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<ul>
  {{ range . }}
  <li>
    <a href="{{ .Permalink }}">
      <img src="{{ .Params.featured_image | absURL  }}" alt="{{ .Title }}"/>
      <p>{{ .Title }}</p></a>
  </li>
  {{ end }}
</ul>
{{ end }}
</div>

Finally, we have added our socialshare partial to the single.html file:

{{- define "main" }}
[....]
{{ partial "socialshare.html" . }}
{{- end }}

Broken Links

There are several free online tools that allow you to check for broken links (W3C Link Checker, Dead Link Checker, Dr. Link Check and Online Broken Link Checker).

However, if you’re happy working with the command line, you could use wget to recursively download your website and then grep for 404 error in the output:

    wget --spider -r -w 1 -o ~/wget.log http://example.com # --spider stops wget from downloading the page, -r makes wget recursively follow each link on the page, -w 1, short for --wait, orders to wait 1 second between requests to avoid,  -o saves the output to a file called wget.log
    grep -B2 '404 Not Found' ~/wget.log # It searches for lines containing '404 Not Found' in the log file and prints those lines

    curl -s https://justtothepoint.com/ | grep -Eo 'href="[^"]+"' | cut -d'"' -f2 | while read -r link; do
    if ! curl -s --head "$link" | grep "HTTP/1.[01] [23].." > /dev/null; then
        echo "Broken link: $link"
    fi
done

Note: It is fast, then solve it Dr. Link Check.

Start Hugo from a script

    #!/bin/zsh
    # @description My startup: it starts code, hugo, and brave
    PATH_BLOG=~/justtothepoint
    SITE_URL="http://localhost:1313"

    # Function to stop Hugo server
    function stop_hugo() {
        echo "Stopping Hugo server..."
        # Find the PID of the Hugo server process and send SIGTERM
        kill -15 $hugo_pid
        exit 0
    }

    function blogserv() {
        echo "Starting blog"
        cd $PATH_BLOG
        hugo server &
        hugo_pid=$! # It assigns the PID of the most recently executed background process to the variable hugo_pid.
        # Wait for the test server to start up
        until $(curl --output /dev/null --silent --head --fail $SITE_URL/); do
            printf '.'
            sleep 1
        done

        # Keep the script running
        sleep infinity &
        wait
    }

    # Trap Ctrl+C signal and call stop_hugo function
    trap stop_hugo INT EXIT 

    blogserv

Hugo V: Social Media. Buy me a Coffee. Related Content.

Social Media, Copyright, Privacy Policy and Terms of Use

Social Share & Buy me a Coffee & Related Content

Broken Links

Start Hugo from a script

Related Posts