How to static blog in 2020
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:
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 email@example.com:GitlabUsername/GitlabUsername.gitlab.io.git git push -u origin master
Create gitlab pipeline
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:
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:
Use a nice Theme - Tranquilpeak
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.
- Social Media Stuffs,
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.
Build your site and test
hugo hugo server
Now click on the link in the terminal or go to probably
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
How to add a page
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.
Try to use feature branches to develop new features. Test them locally and then merge into master. Only the master will be published.