Blogging with Hugo
Following a guide from Ryan in youtube.. (https://www.youtube.com/watch?v=LIFvgrRxdt4)
What you need:
- 2 repos, one for the code of the site and one to deploy (we are going to use github pages)
Those two repos will be joined using git submodule.
In the code repo do:
git submodule add -b main <github pages repo> public
Where the -b main is the branch of the repo, abd public is the folder that will be linked within the code repo and will point to that branch of the github pages repo.
Note: Depending on if you already tested locally, public might be already available here… in this case the submodule command will not work and you need to remove the directory before you execute that command again.
Create a blog post
In order to create a new blog post with hugo you simple write:
hugo new blog_post.md
which in turn will create a file and respond to you with its location, and will have the following content already in that file:
+++
title = 'Blogging with Hugo'
date = 2024-04-18T12:56:02+03:00
draft = true
+++
hugo create site
hugo new site RandomStuff
Congratulations! Your new Hugo site was created in /Users/apostoloss/code/mine/myblog/RandomStuff.
Just a few more steps...
1. Change the current directory to /Users/me/code/mine/myblog/RandomStuff.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- Install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".
See documentation at https://gohugo.io/.
get a theme
I’m choosing https://github.com/panr/hugo-theme-hello-friend (saw it from a slack user in a group and liked it)
use from the main directory of the repo
git submodule add -f https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
git submodule add -f https://github.com/me/BitsThoughtsAndMore.git RandomStuff/public
running on tailscale enabled server
Lets assume you have a tailnet or tailscale in general and you want to run hugo server and blog using a remote machine.
Get your tailscale IP, then run the hugo server with the --bind:
hugo server ---bind=<tailscale IP>
configure your theme
todo (theme dependent)
Publish
You can read all about it here
Normally you’ll set up CD so that every new post (merge) on the posts repo will trigger a rendering and a merge on the public blog repo. The way to do this manually based on the structure we have is the following.
- create the .md file (post) either manually or with
hugo new post/myfile.mdand write your content - get the hugo server running so that it will render the content. Note that
hugo serverandhugoare different. The later will render for publication the first is for development - commit the file to the repo (it is not required in order to view your content in the internet but you must do it to keep the content available for re-rendering next time)
- commit the changes that
hugodid on the public repo. Now this is important. navigate to the public directory which is set by the git submodule (justcdto it) and do agit commit .since hugo during rendering has changed several files. As soon as you commit and merge these, github-pages will trigger the deployment and you will have your changes published.