This is the second part in a series of posts detailing the set up of my personal blog. It details how to enable google analytics, commenting and a simple contact page. See part 1 for the basic setup.
Enable Google Analytics
Google Analytics can provide you with some interesting insights on your site’s visitors and the way they use your site. Enabling it on my personal blog provides a nice opportunity to learn a bit more about the possibilities it offers to site owners.
Lucky for me, it is a straight forward exercise. After signing up for google analytics and creating an account for your website, all you need to do is open your params.toml in _/config/default and add the account id:
############################
## Marketing
############################
[marketing]
google_analytics = "UA-***"
# google_tag_manager = ""
I signed up for Google Tag Manager as well, and tried to activate it, but no luck so far. In order to get Google Analytics to work I had to comment out the google_tag_manager entry. If I decide to take another look at this and get it to work, I’ll detail it in a follow up post.
The next step is to configure the base URL of your site, in config.toml in _/config/default. If you used a custom domain:
# The URL of your site.
baseurl = "https://www.yourdomain.com/"
Otherwise, use your GitHub Pages URL:
# The URL of your site.
baseurl = "https://<username here>.github.io/"
The last change is an improvement to the deploy script we created in the previous post. In deploy.sh replace the following:
echo "Running Hugo Build"
hugo -t academic
with:
echo "Running Hugo Build"
env HUGO_ENV="production" hugo --gc --minify -t academic -b https://<username here>.github.io
Doing so will activate the Google Analytics scripts when the site is running in production. In addition, it also instructs Hugo to run some cleanup tasks after the build and to minify the output, something I didn’t pay attention to in my previous post.
Enable Google Search Console
Another thing I decided to add is Google Search Console, another free-to-use service offered by Google that helps you monitor, maintain, and troubleshoot your site’s presence in Google Search results.
After using the ‘URL prefix’ method, my site ownership was automatically verified based on the Google Analytics account. I added an additional verification method by going to Settings->Ownership Verification, and selecting HTML File. Download the file, add it to your /static folder and redeploy the site:
./deploy.sh
Of course I realize that, as is the case with most ‘free service’ offerings, I am being part of the product here. Google will use all information they get in ways they see fit. Since what I am doing here is ‘out in the open’ and dedicated to the public domain, I figured it would make a good opportunity to learn more about these Google services, and I appreciate that the collected information (or at least some of it) is shared with me as well.
Commenting with Disqus
Enabling others to comment on your site turns it into an interactive site and is relatively easy to do. First go to https://disqus.com and sign up. I selected the basic, free package. Then open params.toml in your _config/default directory and fill in the comments section to enable commenting:
############################
## Comments
############################
[comments]
...
engine = 1
...
[comments.disqus]
shortname = "<shortname>" # Paste the shortname from your Disqus dashboard
When you run the site locally, the commenting section won’t be enabled, but you should see a warning like “Disqus comments not available by default when the website is previewed locally." at the bottom of your posts.
Deploy your website to production and see how it works!
Contact Page
Adding a simple contact page can be done with Academic’s contact widget.
For this side, I decided to add it to the bottom of the about page, and in addition, add a top-level menu and a link from my profile.
To add a top level menu, open _config/default/menus.toml and add:
[[main]]
name = "Contact"
url = "about/#contact"
weight = 50
In _config/default/params.toml, make sure that an email address is configured.
To add a link from your profile, open _authors/admin/index.md and add this to the social section:
- icon: envelope
icon_pack: fas
link: 'about/#contact'
To add the contact form itself, in the content/about/ folder, add contact.md with the following content:
+++
# Contact widget.
widget = "contact"
headless = true
active = true
weight = 50
title = "Contact"
subtitle = ""
# Automatically link email and phone?
autolink = true
# Email form provider
# 0: Disable email form
# 1: Netlify (requires that the site is hosted by Netlify)
# 2: formspree.io
email_form = 2
+++
This sets up your site to use Formspree to email you the request. After deploying to production, simply fill in the form once and you will receive an email to complete your registration. Their free plan gives you a limited amount of monthly submissions.
The contact widget can be further customized by providing additional information in your params.toml, see the docs for more detail.