The grand opening…
After many years I have finally decided to but a blog online. Lately I have been playing a lot with the awesome features of Netlify and decided to go ahead and put my blog online. Not sure if I will keep on writing but at least now I have an easy way of doing it.
I’m retrofitting olg blog posts that I never published (online) so in case you see posts older than the blog itself that is correct.. :)
The steps to get here are fairly easy. I installed hugo (already had git) on my Ubuntu laptop:
apt-get install hugo
Then built the site by following the tutorial: https://gohugo.io/getting-started/quick-start/
At GitLab I added a new repository and did the steps to add an existing folder as a git repo.
On Netlify created a new project that points to the GitLab repository and added as build command:
hugo
And build folder:
public
The build unfortunately failed. After some googling I found that I had to add a netlify.toml file to tell Netlify which version of Hugo to use. Pushing these changes (and adding a .gitignore for the public folder) fixed it! Since you are reading this post it means the deployment was a success!
Now that I have a blog I wanted to polish the look and feel. After browsing the hugo themes I decided to go for the retro theme terminal. The theme looks good but needed some small adjustments. I added a static/style.css to change the coloring as I wanted the contrast to be less strong. And similarly updated the blog to be aligned in the center of the page. Once the about page was done I pushed the site online.
After re-reading my about page I was missing the links to my social-media pages. In the end I used socicon and to achieve this I had to override the head.html from the theme to add the link reference to the socicon CSS file. This can be done by placing a copy of the head.html from the theme in partials/head.html and adding the link. Then using a shortcode to create the social media elements.
shortCode snippet:
<a href="{{.Get "url"}}" class="social-icon {{.Get "cls"}}" style="font-size: 20px; text-decoration: none;"></a>
Usage:
<social cls="socicon-internet" url="https://andretan.nl">