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" (space left intentioned because of rendering issues)
            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 -the space if left intentioned because of rendering problems-).

            {{ 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="{{ .RelPermalink }}">
      <img src="{{ .Params.featured_image | absURL  }}" alt="{{ .Title }}"/>
      <p>{{ .Title }}</p></a>
  </li>
  {{ end }}
</ul>
{{ end }}
</div>

The .RelPermalink function generates a relative URL, which will be correctly resolved based on your baseURL setting. This should ensure that the links in your related posts section point to the correct public URLs rather than localhost.

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 hugo in kitty (Alacritty is my default emulator)
# I have an alias in .zsh_aliases (Linux(Arch), Zsh): alias webserver='sh ~/.local/bin/myStartup.sh &'
# I force kitty on workspace 8 (Linux(Arch), i3). vim .config/i3/config for_window:
# [class="kitty"] move to workspace $ws8
PATH_BLOG=~/justtothepoint # Path to the Hugo blog directory
SITE_URL="http://localhost:1313" # URL of the Hugo blog site

# Function to stop the Hugo server
function kill_blogserv() {
    echo "Starting blog"
    cd $PATH_BLOG || return 1
    killall hugo
}

# Main function to start the Hugo server
function main() {
        kill_blogserv # Stop the Hugo server if it's already running
	# Check if Kitty terminal emulator is already running
	if pgrep -x "kitty" > /dev/null
	then
	    echo "Kitty is already running"
	else
	    echo "Kitty is not running. Launching..."
	    kitty & # Launch Kitty terminal emulator in background mode
            sleep 1 # Wait for Kitty to start up
	fi

	# Run blogserv function in Kitty
	# kitty --hold sh -c "hugo server -d-disableFastRender --gc --cleanDestinationDir"
	kitty --hold sh -c "hugo server --disableFastRender --gc --cleanDestinationDir"
	# 1. By default, Hugo uses fast rendering to speed up page generation during development. It avoids rendering pages that haven’t changed since the last build. --disableFastRender forces a full re-render of all pages on every change which can be useful for debugging.
	# 2. --gc: enable to run some cleanup tasks (remove unused cache files) after the build
	# 3. --cleanDestinationDir: remove files from destination not found in static directories
}
# Run the Hugo server in Kitty terminal
main

Start Hugo automatically with Visual Studio Code.

Create or open the directory .vscode in your Hugo project.
Create a file tasks.json in it.
Edit it as follows:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start Hugo Server",
            "type": "shell",
            "command": "hugo server --disableFastRender --verbose",
            "group": "none",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": [],
            "runOptions": {
                "runOn": "folderOpen"
            }
        }
    ]
}

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