For some time, I had the idea of using different technologies to save a few bucks. Until recently, I was using a local hoster for my site and some friend’s emails and web pages. The service is good, but it comes at a price. Besides this hoster, I am using Cloudflare for managing DNS entries at no cost, and I figured out that you can also host at no additional fees your own website. Provided it is a static website. Which my website was not. It is managed by WordPress.
Being a bit tech-savvy I’ve rather quickly figured out that there are different frameworks which allow you to create simple static web pages, in the form of blogs. I went with hugo, written in Go (not that I knew what this was before) and you can choose and select a hugo template of your own gusto. I went with PaperMod, which is aesthetic and simplistic at the same time. I’ve installed hugo and tried it out using the vast tutorials available on Youtube.
Other tutorials showed a way to automatically deploy my website and any changes to CloudFlare as pages, using GitHub, so I was eventually happy to proceed with the following steps:
- Export your content from Wordpress using the builtin function
- Export each individual picture Gallery from Envira Gallery - a rather tedious and timeconsuming process
- Use ChatGPT to organize your blogs through some simple scripts
- Review and adjust the blog entries, tag all your blogs
- Create a contact form in hugo, using FormSpree (a free service)
- Using Github, synchronize your hugo code in a repository
- Create a new website (page) on CloudFlare and connect it to your GitHub repository
- Configure a subdomain on CloudFlare and map it to your new page
- Configure a DNS redirect at your web hoster to redirect any request to the subdomain
The overall process took several weeks, given I only had limited time available besides my fulltime job, but it was a satisfying experience. The migration is not yet completed though. I still need to transfer my caswane.photo domain to cloudflare and cancle my yearly subsription at the local hoster.
Now, I can create new blogs with hugo and commit changes to my Github repository from where they are automatically pulled to CloudFlare.
Following is a collection of links pointing to my sources throughout my journey:
- Setting up a blog on Cloudflare Pages - Hello world - Dev Ramblings
- Bing Search for “git push” - Search results on Bing for the command
git push. - Hugo PaperMod Theme - Official Hugo theme directory page for the PaperMod theme.
- Hugo PaperMod Wiki - Comprehensive wiki for the PaperMod theme, hosted on GitHub.
- PaperMod Installation Guide - Step-by-step guide for installing the PaperMod theme in Hugo.
- YouTube Video on Git Basics - A video explaining basic Git commands, including
git push. - PaperMod Example Site - Example site configuration for the PaperMod theme on GitHub.
- YouTube Video on Deploying Hugo Sites - A tutorial on deploying Hugo static sites.
- WordPress to Markdown Converter - A tool for converting WordPress content into Markdown format, hosted on GitHub.
- WordPress Migration Blog - Blog post explaining how to migrate from WordPress to a static site.
- Caswane Photo GitHub Repository - A GitHub repository for a photography-related Hugo project.
- Adding Git User Credentials - Tutorial on adding user credentials to global Git configuration.
- GitHub Dev Environment - A sample development environment hosted on GitHub.
- DuckDuckGo Search for Blog Deployment - DuckDuckGo search results for creating and deploying blogs with Cloudflare.
- Medium Blog on Hexo and Cloudflare - Tutorial on building a blog using Hexo, GitHub Pages, and Cloudflare.
- Build a Blog with Nuxt and Sanity - Official Cloudflare tutorial for building blogs with Nuxt.js and Sanity CMS.
- Markdown Render Hooks in Hugo - Guide to using render hooks for captioned images in Hugo Markdown.
- Arkalim Site - A sample Hugo-based website hosted on Netlify.
- Hugo Demo Repository - A GitHub repository with a Hugo demo setup.
- YouTube Video on Hugo Tips - A video offering tips for using Hugo effectively.
- Hugo Search with Fuse.js - GitHub repository showcasing integration of Fuse.js for search functionality in Hugo sites.
