Intended workflow

create/modify a post locally -> build and publish with ‘hugo’ -> git commit and publish to remote -> GitLab repo main branch gets updated -> Cloudflare Pages triggers a rebuild -> web pages of the blog get updated.

Steps, Difficulties and Solutions

• download hugo using snap
• create a git repo in the blog directory
• create a GitLab access token. Define my GitLab repo as a remote for the blog git repo. Git push to the remote. Use the GitLab access token when asked to authenticate - not the GitLab account credentials!
• by default the main branch on GitLab is protected. For the initial ‘git push remote origin main’, I deactivated the protection feature in GitLab under Settings -> Repository -> Protected branches -> main.
• to create blog posts, I placed them under ‘content/posts’. I placed images under ‘static/images’. I insert an image in a blog post using this syntax:

  

• integrate mit GitLab repo with Cloudflare Pages. I spent much time troubleshooting this. I confused Cloudflare Workers with Cloudflare Pages. I should have chosen the right config option. Firefox does not display the Cloudflare dashboard correctly. Use Chrome instead.
• create a custom domain in Cloudflare Pages. Associate my domain name with the Cloudflare Page.
• verify local rendering of the draft blog using ‘hugo server –buildDrafts’
• once the blog post is ready for publishing, set the parameter ‘draft’ to ‘false’, execute ‘hugo’, git push origin {branch_name}, create a merge request on GitLab and accept it. Cloudflare Pages will automatically rebuild the code. Reload the website to see the changes.

Topologies I will practice inshAllah

Read more...