Hugo Tranquilpeak Gitlab

or how to static blog in 2020

You want to write your own blog. You want to make it fancy. Use something powered by a modern language like go. You want it fast. You want it flawless. You dont care about Javascript. You just want a small, simple website. You want the website to be fast. Not interactive. Your way to go is the following: Make a static website.

But now what do you do? After looking for some static site generators go for the simple and fancy one. Choose Hugo. Where are alternatives, either they need something exotic like Ruby(Jekyll). Who writes Ruby nowadays. Or they just look like crap on their example-sites. Python based solutions. Well look no further. Just take hugo.

So start your Linux machine, or download your subsystem for linux. Download your Visual Studio Code editor and lets get started.

Well just basically follow the latest procedures for installing it on your Machine. The easy way for linux seems to be snaps. They should also autoupdate as far as i know. Install git, and add your publickey to gitlab as well to make it easier for you to update your stuffs.

Create a gitlab project named: GitlabUsername.gitlab.io

You can also rename your project later on if needed to have an easy to clone blog project, thats easy to remember.

Create a new site and init the repo

hugo new site blog cd blog git init git add . git commit -m "Initial commit" git remote add origin git@gitlab.com:GitlabUsername/GitlabUsername.gitlab.io.git git push -u origin master

So next follow the guide here: https://gohugo.io/hosting-and-deployment/hosting-on-gitlab/#create-gitlab-ciyml

What it boils down to is the following:

Create a .gitlab-ci.yml With the following content

# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry image: registry.gitlab.com/pages/hugo:latest variables: GIT_SUBMODULE_STRATEGY: recursive HUGO_VERSION: '0.66.0' test: script: - hugo except: - master pages: script: - hugo artifacts: paths: - public only: - master

Create a new .gitignore file and put the public folder into it. Or just use this command:

echo "/public" >> .gitignore

Now add everything

git add . git commit -m "Added CI plan"

Don’t push yet. Although you could now see after pushing the pipeline working:

https://gitlab.com/\<YourUsername>/\<your-hugo-site>/pipelines

Onto Theming.

Download the latest tranquilpeak theme. Don’t add it as a submodule. It would work and netlify wants you to do it, but Gitlab doesn’t care. Just make it your own and add it by Downloading the latest tranquilpeak theme into the themes folder and rename it tranquilpeak. https://github.com/kakawait/hugo-tranquilpeak-theme

Just download the zip file from there, or use git, or use submodules. I did it my way.

Now go into the folder /themes/tranquilpeak/exampleSite and copy the config.toml into your main hugo folder, replacing the original config.toml.

Adjust everything!!! Mainly rename the theme to be correctly named as tranquilpeak.

Copy over the /themes/tranquilpeak/archetypes folder into the main hugo folder. And delete the default.md

Now more configuration.

adjust the main things you need.

For disqus integration you need to do some more heavy lifting and i don’t remember how i did it. But it boils down to creating a new shortname for your hugo site: https://gohugo.io/content-management/comments/

Add a new static cover image. Some tutorials suggest using a CDN network to store them, but meh. Who needs those anyways?! (Cloudflare is dead, long live Cloudflare)

Commit all your changes.

hugo hugo server

Now click on the link in the terminal or go to probably

http://localhost:1313

See if it looks good. It doesn’t? Well ask your Designer friends to come up with solutions and then do the opposite, add a new image

Every other tutorial I read ends here. But not me. No. I will do the correct thing.

Now to add a new page, open a terminal and type:

hugo new post/MyNiceFancyFirstPost.md hugo hugo server

Well as you can see i don’t use drafts. And neither do you need to use them. They are designed for the heavy users not us simple bloggers. Also the changes in public are ignored and gitlab does its own builds. Lucky!

Now add some text adjust the tags and categories. Add a thumbnailimage if you can and where you are. Ready to publish. Or are you?

Optimize your Images. Remove Exifdata and compress the s**t out of them.

sudo apt-get install jpegoptim libimage-exiftool-perl -y

Now go into the image folders and execute the following to compress the images and delete the original afterwards.

exiftool -all= *

To compress images with lossy compression use the following, for example the cover image.

jpegoptim cover.jpg --overwrite

I will be back for more. For example some RC and Arduino stuff. Enjoy the show.

Use Branches

Try to use feature branches to develop new features. Test them locally and then merge into master. Only the master will be published.

Originally published at https://blog.hein.ninja on March 4, 2020.