Hello Blog
A first blog post, while figuring things out
How does this display the text? I don’t know… How do I deploy this blog? I don’t know… How does Hugo work? I don’t know…
But I want to figure it out and start this.
Theme
echo "I hope it does format it well"
I’m going to try a few Hugo themes. I started with the paper theme, but I don’t like thos colors and I think it was more then I wanted or needed.
The Console theme was kind of what I am looking for, but the code blocks didn’t work as I expected.
After this I tried the Void theme but Hugo returned some compiling errors I didn’t feel like troubleshooting…
As of now I am using the Archie theme.
this is A multiline code block
I would like to have it be colored black and be syntax highlighted
When no code language is specified it looks like it behaves normally
do inline codeblocks work as wel? They seem to work.
# When there is a language specified it does some weird styling...
# I don't know why it does this
Write-Host "The syntax Highlighting seems to work"
Write-Host "But the styling is just weird"
I have used the above text as a way of validating the themes I tried. I think for now I will stick with Archie and try to customize it in the future.
Things I want to try to customize. But I’m not sure how flexible the themes are. I like the Archie theme a lot, but have some things I’d like to change. In the future I’ll try to figure out how I should go about changing the themes.
A todo list before ending this post…
So my current to do’s are:
- Figure out how to add pictures to a post
- Figuring out how to host the site after I build with Hugo
- When figured out, making it an automated process after I write something, I only have to run one command or even none at all
- Git
- Add this git repository to my github
- Use git as intented and commit more changes.
- Customization
- Footer Text
- Theme colors
- Possibly a dark mode?
- circles at the bottom of the page don’t have to be there in my opinion, but not sure if I’ll be able to remove them
Git / Github
At the moment of writing this sentence this folder is initialized with git, but the repository has no remote origin. I want to upload this to my Github account.
To do this I created a Github repository named blog.podepod.be. With the commands below I added it as a remote origin and pushed the contents of the folder to Github.
git commit -m "init"
git branch -M main
git remote add origin https://github.com/Podepod/blog.podepod.be.git
When logging in to Github from the terminal I ran into an issue I always run into after not using Github for a while. Logging in with just a username and password does not work anymore. Which is a good thing security wise, but I always have to lookup how authenticating should be done… More of a me problem but still.
Figured it out again, and now I can commit and push without any problem. Using git-credential-oauth it’s way easier to login.
For now this is good enough. The commands I need to use to update my repository are just the default git commands
git add * # or a specific file or folder
git commit -m "<commit message>"
git push -u origin main
Hosting
With Hugo you can run a developments server with the command below. But this is not recommended for a production environment. So I’ll need to figure out how to host the static site generated by Hugo.
# Commands to run the development server
hugo server --bind <server-ip> --baseURL http://<server-ip> -D
After this, the development server starts and is available on <server-ip>:1313
As far as I can find, after you run the hugo command, the folder ./public is generated. This is the full static site. This can be hosted a lot of ways, but the 2 main ones that stick out for me are Github Pages and Cloudflare Pages (under Build > Compute & AI > Workers & Pages)
I think I want to try and use one of those two options because the project should already be uploaded to GitHub and my DNS is already with Cloudflare.
Cloudflare Pages
I found documentation about Hugo in the cloudflare docs: https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/ I also found some documentation in the cloudflare docs about adding a custom domain and disabling access to the default pages.dev domain: https://developers.cloudflare.com/pages/configuration/custom-domains/ The Cloudflare documentation looks very usefull and complete :) This should be very usefull when I eventually setup the Cloudflare pages project.
It’s a day later and today I’ll try the hosting part of this website. For me the easiest way to host this seems to be to just run a docker container with a simple webserver that only servers the /public/ folder generated by Hugo.
But the easy way isn’t always the most fun. So I’ll try to host the static site on Cloudflare pages, guided by the docs above.
I went to the Workers & Pages page and clicked Create Project. I clicked on Connect to GitHub, connected my Github account, gave access to the repository and when I returned to the page the Connect to GitHub button had changed to Continue with GitHub. So that’s what I did :)
After that I needed to select the repository I wanted to use, so I selected the one for this website and went to the Create and deploy part op de process.
Here I filled in the fields required:
- Project name:
blog-podepod-be - Build command:
hugo -b $CF_PAGES_URL - API token name:
<filled in :)>
After this the build failed… I think the $CF_PAGES_URL variable is not a standard one or not filled in so I made the variable in the build settings. I also added the custom domain blog.podepod.be. The base URL for hugo now is blog.podepod.be. This seemed to fix the build issue. Only the deploy failed.
For this issue I found another documentation link on the deploy command: npx wrangler deploy: https://developers.cloudflare.com/workers/wrangler/commands/#deploy. The wrangler deploy command has a parameter PATH which specifies what needs to be deployed. So I tried a new deploy command: npx wrangler deploy public/. This gave a new error. The PATH parameter seemns not to accept a directory, for this I should have used the --assets flag. So this is what I tried: npx wrangler deploy --assets=./public. This again gave a new error message…
The new error had to do with the compatibility_date flag of wrangler deploy. I found this documentation page to help me understand what it is: https://developers.cloudflare.com/workers/configuration/compatibility-dates/. It states that the compatibility date should be set to the date of deployment. This can be done by putting it in the wrangler config file (which I do not yet have). But I can also includ it in my deploy command as a flag: npx wrangler deploy --assets=./public --compatibility_date 2026-01-22. Which (again) is what I did. And it worked! The site is now hosted on Cloudflare pages, there are only a few problems with it.
- the styling does not work
- the links, don’t work because they prefix
blog.podepod.beto the folder structure. This is weird.
I think this is probably because of some issues with the baseURL and bind IP of hugo.
Another day later and I’m again trying to figure out why the styling on the site isn’t working properly…
I figured out my $CF_PAGES_URL had a typo in the variable. This seemed to have fixed the weird hyperlinks on the site. But not yet the styling.