hugo social buttons
It stated with wanting to add social buttons on my web page. This was as easy
as changing the config.toml file. For Ananke theme, it is looking for some
parameters, in the
[params] sections. Just add you link to facebook, twitter,
facebook = "https://www.facebook.com/ID".
case of missing id
I was upset that it had a slack link available, but no discord one. One because
I don’t even know what is one’s slack id. There are so many workspaces in
slack. And each workspace may have an id associated with it. The cleanest
thing to do seems to create a slack workspace and then go to your profile and
then get the copy your id. Then it is pretty non-intuitive from there. You use
your group name such as WORKSPACE.slack.com/team/ID. The only way I found out
about this was through this obscure website:
Honestly I never been happy with Slack, this being only the tick of the iceberg.
Not that I had a brillant way to do this in discord, you have to turn on a
developer setting in discord to be able to click on a user and copy their id.
And like slack, once you get the user id, what do you do with it. Luckily with
discord it is just one central repository so it looks like
discordapp.com/users/ID. I can take that, much better than slack.
where to add discord
I then did a quick search in ananke looking for facebook, and it landed me in
the layout/partials/social-follow.html from there you copy and paste from one of
the existing ones and add a logo which goes into the svg directory.
Note that every icon has a class associated with it. We will return to this in
I googled discord blanding and found ready made svg’s. Way to go discord!
I put the symbol in the svg directory and updated the social-follow.html
template with the appropriate svg file and crossed my fingers.
Long story short, didn’t work.
- because the svg’s in the directory are templated. Okay, I copied the
template and voila, nothing happened.
- I then copied the medium svg just to see if there was something wrong with
the svg from discord. Nope that didn’t work.
- it turns out that the problem was in the coloring of the icon using a css
I did Shift-J in chrome to check if the icons were at fault. After templating
maybe the discord.svg didn’t get the right values… No not the case
a tale of css
Poking around more in the ananke directory, I found a css for facebook and other
social follows in src/css. It was being included by main.css.
_social-follow.css actually contained the css class elements that I was looking
for. I added the a discord class definition, and looked up discord’s color,
again thanks to discord blanding website, the 3-tuple was already there for the
Note because I don’t change anything in the ananke theme directory you need to
usually make a copy of the hierarchy in the hugo base. For example for
social-follow.html and svg one just copies the it into a similar one in
layouts/partials under hugo and puts the svg in that directory as well, since we
are working off social-follow.html I also had to copy the whole svg directory
over with the added discord.svg. Note that I had to move the discord path a
bit because it wasn’t centered and was not as small as the one used by ananke.
The problem is how to replace the css files, since they are not used by hugo in
the same way. Googling around found that there are options for including one’s
own css. I looked for custom_css in ananke and found that
layouts/_default/baseof.html it is as simple as adding a custom_css parameter in
config.toml and pointing it at a file that can accessed by hugo.
For such files, I usually put them in the static/ directory, keeping simple
convensions I started a static/css directory and added the _social-icons.css.
Lo and behold everything looked fine in the local server, but somehow the css
was not being picked up from github pages.
Sure enough the directory css/_social-icons.css was created, but wasn’t somehow
being picked up. I had a similar issue before with images, because I am using
namecheap as my nameserver provider and I include the requesite CNAME in the
github repo, and in general set the baseURL with the correct relative location
for github project gh-pages, i.e. https://mydomain/PROJECT/ . I canonifyURLs so
that the full path is usually being used.
I forcefully tried many variations in adding a slash in front of the
/css/_social-icons.css and removing relURL ($.Site.BaseURL) altogether
none of these seemed to make any difference.
TL;DR story is that the underscore in the css file name indicates that it is
to be imported by some other css file, therefore the server does not server
css files with underscores in front of css file names. I changed to it a
non-underscore name and voila it worked.
Now that I was in a row I decided to add a comment system. There ia a very cool
work called utterances.es which allows one to post comments as github issues.
The instructions in the site are pretty minimal, you have to add utterances api
layouts/_default/single.html. The only caveat is that one has to login with
their github account. Most people probably already have a github account so it
should be work pretty much everywhere.