Sam Tripp

Creating and Hosting a Website with Hugo

Thu, 19 Feb 2026 20:45:00 +0000

A colleague wanted to host his own website. Whilst explaining that I use Hugo, I realised this would make a useful blog post others could use as a reference to setting up their own Hugo website. This is not a unique topic. There are plenty of blog posts and social media comments praising Hugo but another bit of good press won’t do the project any harm.

What is Hugo

Hugo is a blazingly fast static site generator written in Go with a rich ecosystem of themes, a very flexible framework and a active community. It is what I use to run this website.

Why I Like Hugo

Portability: As Hugo is generating HTML pages it is very lightweight to host. I have hosted this website a few places such as locally behind nginx, AWS S3 object storage and now GitHub Pages. Should my current hosting provider decide to change its terms, I could pick up my 628 KB website and move it elsewhere
Maintainability: As it is just HTML, there is no database to keep updated and by leveraging services such as GitHub Pages, AWS S3, Cloudflare Pages there is less underlying server maintenance on my part.
Security: Again it’s just HTML pages. Fewer moving parts means a smaller attack surface. Just because it’s HTML does not mean there are no potential risks. Someone could breach the hosting provider and leave something malicious, however compared with many other content management systems and blog platforms the risk is considerably reduced.
Themes: I am by no means a great frontend developer, thankfully due to the popularity and the active community of Hugo I have been able to use a theme that somebody else has created under a permissive licence. A small selection of themes can be found on the Hugo themes website.

How to use Hugo

Want to create a new website?

hugo new site my-hugo-website
cd my-hugo-website

Want to use a theme?

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Creating a blog post?

hugo new content/posts/$(date +%y%m%d)-blog-post.md

Want to see your website before you publish your post?

hugo serve -D

Publishing your website? Once configured it can be as simple as

hugo deploy

These are just a few examples of how straightforward Hugo can be. You can find plenty more examples and useful bits of information in the Getting Started guide and documentation

Hosting your website

Hugo’s flexibility leaves you with a whole load of options for hosting. I’ve listed a few when discussing maintainability but you can find a considerable number of options that have been battle tested on Hugo’s Host and Deploy documentation page. This list is not exhaustive but gives you ideas. Remember this is just HTML pages so any web server would be sufficient. At the time of writing this post I use GitHub Pages. This is predominantly cost driven as GitHub Pages provides me web hosting at no fiscal cost to myself. The simplicity of not having to manage the underlying host system has reduced the maintenance effort also.

Automating website deployment

Finally you may wish to automate the deployment process if you’re using something like GitHub/GitHub Pages. If you’re in the GitHub ecosystem you could leverage GitHub Actions to achieve this thanks to the fine work of peaceiris. I use a 2 git repository solution to achieve this. One that is private so I can commit draft blogs prior to them going public and my public github user repo sbt92/sbt92.github.io which automatically enables GitHub Pages and serve my website. If you wish to do what I do you can store this Github Actions pipeline code in your private repo under .github/workflows/deploy-website.yaml.

name: Deploy website to GitHub Pages (<github_username>.github.io)

on:
 push:
 branches:
 - main

jobs:
 deploy:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 with:
 submodules: true # Fetch Hugo themes 
 fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod

 - name: Setup Hugo
 uses: peaceiris/actions-hugo@v3
 with:
 hugo-version: '0.131.0' # Optional
 extended: true

 - name: Build website
 run: hugo --minify

 - name: Deploy
 uses: peaceiris/actions-gh-pages@v4
 with:
 personal_token: ${{ secrets.GITHUB_API_KEY }} # Generate this in user Development Settings and add to your private repository secrets.
 external_repository: <github_username>/<github_username>.github.io
 publish_branch: main
 publish_dir: ./public
 full_commit_message: ${{ github.event.head_commit.message }}
 cname: www.<mywebdomain>.co.uk # https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site

Fixing SMLIGHT SLZB-06M Zigbee Coordinator for Zigbee2MQTT

Mon, 26 May 2025 12:20:00 +0100

I recently bought a new Zigbee Coordinator after my old SONOFF ZBDongle-P was damaged in an accident when my knee caught it while it was plugged into the front USB port of my server. Wanting to avoid the same situation again I decided to purchase the SMLIGHT SLZB-06M to replace it after a recommendation from a friend. I liked that it gave me the choice to serve the coordinator either over USB or TCP. Decoupling the coordinator from the server did give me plenty of flexibility in the future to where I could put my server without impacting the Zigbee network.

While it was advertised as plug and play, I found that I still needed to take a few steps to get it working with Zigbee2MQTT. The deprecated EZSP driver functions but the recommended Ember driver does not. If you find yourself with this coordinator you can test this out of the box by setting adapter: ember in your Zigbee2MQTT configuration.yaml. If Zigbee2MQTT will not start change the configuration.yaml to adapter: ezsp. If Zigbee2MQTT starts with the EZSP adapter set in your configuration you’ve identified that the SMLIGHT SLZB-06M needs a firmware update.

To perform the firmware update the SMLIGHT SLZB-06M provides its own admin console on your network if your coordinator is connected to the LAN. Once you’ve accessed the admin console via its IP address on your network navigate to Settings and Tools and then Firmware update. Click the Check for Zigbee updates button. Under the Zigbee Coordinator section you want the installed firmware version to be 20250220 or later. If it is not at that version click the Flash Zigbee Coordinator 20250220 button. This process usually takes a couple of minutes. Once completed set adapter: ember in your Zigbee2MQTT configuration.yaml. Zigbee2MQTT should start up now and you can go through the process of pairing your devices again.

AI Model Wars: o1-mini vs gpt-4o-mini

Thu, 05 Dec 2024 22:30:00 +0000

On 20 November 2024 I received an email saying that Open AI’s o1-preview and o1-mini models are available for use via the OpenAI API. I did a brief test via my Open WebUI application on my server to prove I could access and use the o1-mini model. I was able to use the model however first impressions of the model left me quite surprised at the performance and quality of the response. It felt like it was no better than gpt-4o-mini and I was paying a considerable amount more for the tokens. I decided to stay on gpt-4o-mini until I could conduct more thorough testing of the new model to see how it fits my use cases. This day has now come and I have documented my findings in this blog post.

How are we going to test.

Open WebUI has some default suggested prompts which we are going to run against each model. The prompts are:

What are 5 creative things I could do with my kids’ art? I don’t want to throw them away, but it’s also so much clutter.
Show me a code snippet of a website’s sticky header in CSS and JavaScript.
Tell me a random fun fact about the Roman Empire.

We will run these prompts against each model and compare the quality of the response. We will also gather the cost of running these queries from the OpenAI Dashboard. All of these queries will be ran on the same machine using the same version of Open WebUI which is v0.4.4 .

Quality of Response

Keep in mind that the responses generated may not be identical. What we want to focus on is the quality of those responses.

What are 5 creative things I could do with my kids’ art? I don’t want to throw them away, but it’s also so much clutter.

o1-mini response

Absolutely, finding creative ways to cherish your kids’ artwork while managing clutter is a wonderful approach. Here are five ideas to help you honor their creations:

Create a Rotating Gallery Wall
- How: Designate a specific wall or space in your home as the “gallery.” Use frames, clipboards, or a wire with clips to display their latest masterpieces.
- Benefits: This allows you to showcase their work proudly and easily swap out older pieces for new creations, keeping the display fresh without accumulating clutter.
Transform Art into a Photobook
- How: Photograph or scan each piece of artwork and compile the images into a professionally printed photo book using services like Shutterfly, Mixbook, or Blurb.
- Benefits: This not only preserves the artwork in a compact, organized manner but also creates a beautiful keepsake that you and your child can revisit for years to come.
Design Custom Gifts and Household Items
- How: Use online platforms (such as Zazzle, Snapfish, or VistaPrint) to print your child’s artwork onto items like mugs, t-shirts, tote bags, pillows, or calendars.
- Benefits: These personalized items make unique gifts for family members and allow you to enjoy the art in everyday use, reducing the need to store physical copies.
Make a Digital Slideshow or Screensaver
- How: Scan or photograph the artwork and use the images to create a digital slideshow or screensaver for your computer, tablet, or smart TV.
- Benefits: This provides a space-saving way to enjoy the artwork regularly and can be easily updated as new pieces are created.
Create a Collage or Mosaic
- How: Select portions of various artworks and arrange them into a large collage or mosaic, either digitally or physically on a canvas. You can also use photo editing software to blend multiple images into a single piece.
- Benefits: This artistic approach consolidates many pieces into one aesthetically pleasing artwork, reducing the volume of individual items while highlighting multiple creations in a unified display.

Implementing these ideas can help you celebrate your children’s creativity while keeping your home organized and free from excessive clutter. Choose the methods that best fit your lifestyle and the sentimental value you place on their artwork!

gpt-4o-mini Response

It’s wonderful that you want to preserve and celebrate your kids’ art! Here are five creative ideas to help you manage the clutter while showcasing their creativity:

Create a Rotating Art Gallery: Designate a wall or a space in your home as a mini art gallery. Use frames, clipboards, or string with clothespins to display a selection of their artwork. Rotate the art regularly, allowing your kids to decide which pieces to feature and keeping the display fresh.
Art Book Compilation: Photograph or scan your children’s artwork and create a printed photo book. You can use online services to design and print the book, which will serve as a lovely keepsake and take up much less space than storing physical art.
Custom Gift Wrap: Use your kids’ art as unique and personal gift wrap for presents. This not only adds a special touch to gifts but also helps minimize clutter by finding a practical use for the artwork.
Art Collage or Quilt: Take portions of different art pieces and create a larger collage or have a sewing service make a quilt out of fabric printed with their art. This way, you condense their creations into one beautiful piece that can be displayed or used.
Digital Slideshow: Create a digital slideshow or screensaver using scanned or photographed images of their artwork. This way, you can enjoy their creations on your computer or TV screens without the physical clutter. Consider pairing the slideshow with music for an engaging presentation!

These ideas can help you celebrate your children’s creativity while also managing the volume of art they produce.

The o1-mini model does give more detail here breaking down the suggestions into how and the benefits of doing so. The gpt-4o-mini model does not do that and captures the how and the benefit in one paragraph. Despite this difference in structure, both models deliver relatively similar answers.

o1-mini response

Creating a sticky header ensures that your website’s header remains visible at the top of the viewport as users scroll down the page. You can achieve this using CSS alone with the position: sticky property or enhance its functionality with JavaScript for additional effects, such as changing the header’s appearance after scrolling a certain distance.

Below is a complete example demonstrating both CSS and JavaScript approaches to creating a sticky header.

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Sticky Header Example</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>

 <header id="header">
 <h1>My Website</h1>
 <nav>
 <a href="#home">Home</a>
 <a href="#about">About</a>
 <a href="#contact">Contact</a>
 </nav>
 </header>

 <main>
 <section id="home">
 <h2>Home</h2>
 <p>Content goes here...</p>
 </section>
 <section id="about">
 <h2>About</h2>
 <p>More content...</p>
 </section>
 <section id="contact">
 <h2>Contact</h2>
 <p>Even more content...</p>
 </section>
 <!-- Add more sections as needed to enable scrolling -->
 </main>

 <script src="script.js"></script>
</body>
</html>

2. CSS Styling (`styles.css`)

Using CSS `position: sticky`

The simplest way to create a sticky header is by using the position: sticky property. This method requires minimal code and works well in modern browsers.

/* Basic Reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: Arial, sans-serif;
}

/* Header Styling */
header {
 position: sticky;
 top: 0;
 background-color: #333;
 color: #fff;
 padding: 15px 20px;
 z-index: 1000; /* Ensure the header stays on top */
 transition: background-color 0.3s, padding 0.3s;
}

/* Navigation Links */
header nav a {
 color: #fff;
 margin: 0 10px;
 text-decoration: none;
}

header nav a:hover {
 text-decoration: underline;
}

/* Scrolled Header Styling (for JavaScript Enhancement) */
header.scrolled {
 background-color: #222;
 padding: 10px 20px;
}

/* Main Content */
main {
 padding: 20px;
}

section {
 margin-bottom: 100vh; /* To create scrollable content */
}

section h2 {
 margin-bottom: 10px;
}

Explanation:

position: sticky: This positions the header relative to its nearest scrolling ancestor and sticks to the top (top: 0) when you scroll past it.
z-index: 1000: Ensures the header stays above other content.
Transition Effects: Smoothly transition background color and padding when the header’s state changes (useful for JavaScript enhancements).

3. JavaScript Enhancement (`script.js`)

While CSS can handle the basic sticky behavior, JavaScript can add more interactive features, such as changing the header’s appearance after the user scrolls a certain distance.

// Select the header
const header = document.getElementById('header');

// Function to add or remove the 'scrolled' class based on scroll position
function toggleHeaderScrolled() {
 if (window.scrollY > 50) { // You can adjust the value as needed
 header.classList.add('scrolled');
 } else {
 header.classList.remove('scrolled');
 }
}

// Listen to the scroll event
window.addEventListener('scroll', toggleHeaderScrolled);

Explanation:

Selecting the Header: The script selects the header element by its ID.
toggleHeaderScrolled Function: Adds the scrolled class to the header when the user scrolls down more than 50 pixels, and removes it when the user scrolls back up.
Event Listener: The function is called every time the user scrolls, allowing real-time updates to the header’s appearance.

4. Final Result

With the above HTML, CSS, and JavaScript:

The header locks to the top of the viewport when scrolling down.
When you scroll more than 50 pixels, the header’s background color darkens, and padding reduces for a sleek effect.
Navigation links are styled for better user experience.

Demo

You can see a live demo of the sticky header here.

Browser Support

position: sticky is supported in most modern browsers, including Chrome, Firefox, Edge, and Safari.
Always ensure to test across different browsers to verify consistent behavior.

Alternative Approach: Using `position: fixed`

If you need broader browser support or different behavior, you can use position: fixed. However, this method removes the header from the normal document flow, which might require additional styling adjustments.

header {
 position: fixed;
 top: 0;
 width: 100%;
 /* Other styles remain the same */
}

Note: When using position: fixed, ensure that the main content has a top margin equal to the header’s height to prevent it from being hidden behind the fixed header.

Feel free to customize the styles and JavaScript logic to fit the specific needs and design of your website!

gpt-4o-mini Response

Sure! A sticky header is a common UI feature that remains at the top of the viewport as a user scrolls down the page. Below is a simple example of how you can implement a sticky header using CSS and JavaScript.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sticky Header Example</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header id="header">Sticky Header</header>
 <main>
 <section>
 <h1>Welcome to the Sticky Header Example</h1>
 <p>Scroll down to see the header stick to the top of the page.</p>
 <div class="content">
 <!-- Add some dummy content to enable scrolling -->
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac efficitur nulla. Praesent at velit eget justo rhoncus pulvinar. Sed ac posuere lectus, quis pretium ipsum. Etiam eget felis vitae augue elementum ullamcorper a non tortor.</p>
 <p>(Add a lot more content here to make the page scrollable)</p>
 <p>...</p> <!-- Extend this with more paragraphs to ensure scrolling -->
 </div>
 </section>
 </main>
 <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
}

header {
 background-color: #333;
 color: white;
 padding: 10px 20px;
 text-align: center;
 width: 100%;
 transition: top 0.3s;
}

main {
 padding: 15px;
}

.content {
 height: 1500px; /* Set a height for content to ensure the page is scrollable */
}

.sticky {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1000; /* Ensure the header is on top */
}

JavaScript (script.js)

// Get the header
const header = document.getElementById("header");

// Get the offset position of the navbar
const sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickHeader() {
 if (window.pageYOffset > sticky) {
 header.classList.add("sticky");
 } else {
 header.classList.remove("sticky");
 }
}

// When the user scrolls the page, execute stickHeader
window.onscroll = function() {
 stickHeader();
};

Explanation

HTML: The <header> element serves as our sticky header. The <main> section contains the content.
CSS: The .sticky class sets the header to fixed positioning at the top of the viewport when scrolling occurs.
JavaScript: The script checks the scroll position and applies the .sticky class to the header when the user scrolls past the top position of the header.

You can add more content inside <div class="content"> to make the page scrollable and demonstrate the sticky header functionality.

Both models provide valid and usable answers, with the o1-mini model offering greater detail and even presenting an alternative approach that users can adopt if they wish to.

Tell me a random fun fact about the Roman Empire.

o1-mini response

Fun Fact about the Roman Empire:

The Romans were pioneers in engineering and construction, and one of their most impressive feats was the creation of concrete. Roman concrete, known as opus caementicium, was incredibly durable and was used to build iconic structures like the Pantheon and the Colosseum, many of which still stand today. Interestingly, the secret to their concrete’s longevity lies in its unique mixture, which included volcanic ash. This ingredient helped the concrete withstand the test of time, especially in marine environments, allowing Roman harbors and buildings to endure for over two millennia. Modern scientists have studied Roman concrete to inspire more sustainable and long-lasting building materials today.

gpt-4o-mini Response

One fun fact about the Roman Empire is that they had a form of postal system known as the Cursus Publicus. Established by Emperor Augustus, it allowed for the efficient transport of messages, documents, and officials across the vast empire. This system used relay stations with fresh horses and riders, enabling messages to travel up to 50 miles a day. This infrastructure was crucial for maintaining communication and governance throughout the sprawling territories of the empire.

I felt the quality of the responses was so similar that it was hard to tell which model generated the response. The key difference being that the o1-mini model generated a header, while the gpt-4o-mini model did not.

Cost

The cost of running the three prompts against the o1-mini came up to $0.063462. The cost of running the exact same prompts again gpt-4o-mini cost $0.00123075. This makes running queries against the o1-mini model approximately 5056% more expensive than gpt-4o-mini. I was quite surprised to see such a significant cost difference, especially considering the comparable responses generated by both models.

Conclusion

According to my findings, the average user would be better off sticking with gpt-4o-mini. According to OpenAI blog post on the o1-mini model it looks like you could potentially benefit more if you’re running STEM related prompts against the model which my test do not cover enough to prove that theory. They did note that the models non-STEM topics knowledge is comparable to gpt-4o-mini.

Noteworthy Talks from Ubuntu Summit 2024

Sat, 23 Nov 2024 10:00:00 +0000

I was fortunate enough to get my first opportunity to attend the Ubuntu Summit 2024 at the World Forum in the Hague. As someone who has used Linux in some capacity since about 2006 with my first experience of Ubuntu being 8.04 Hardy Heron it was safe to say I was quite excited to attend.

The conference itself was a great advocacy for the open source ecosystem with attendance from many key vendors and projects in this space. I came away from the conference inspired. It was great to experience how open source has influenced many people’s lives, from software engineers to creatives in the arts. I was especially impressed in the variety of talks, it really did have something for everyone.

Beyond the talks, the hallway track was particularly enjoyable, featuring some excellent booths that allowed me to experience things I hadn’t had the privilege to encounter first hand. Framework Laptop, System76 Launch Keyboard, Fairphone, Intel Arc GPU for AI purposes just to name a few things that ended up on my wish list when my current hardware is due a refresh. It was also a pleasure to speak to many like-minded individuals at the booths and throughout the conference.

I had an excellent time. Should I get the opportunity to do it again you can rest assured I will be there. One of my favourite conferences I’ve attended to date. Below are a selection of talks which I thoroughly enjoyed and would recommend checking out.

No, Open Source Didn’t Destroy My Creative Agency - Ryan Gorley

Watch on Youtube

As someone who is not a creative it was truly inspirational to see Ryan advocating for the open source tools available in this space and is able to utilise them to make a living. The creative space is unfortunately dominated by proprietary offerings some which charge an extortionate amount monthly which can and probably has made creativity unreachable to many. I was able to speak to Ryan and other like minded people after the talk about whats available in this space and this exposed me to the Ubuntu Studio distribution which I will be encouraging my wife who is a creative to try out.

Servo: Building a Browser Rendering Engine in Rust - Rakhi Sharma

Watch on Youtube

This talk was quite conveniently timed as I’ve only been aware of Servo since Mozilla once again shot themselves in the foot with their advertising blog post. Quite a remarkable undertaking to achieve what they have so far with this browser engine. I hope it continues and secures the necessary funding so we can enjoy greater choice in browsers. This talk and Servo itself gives me hope that we will have another choice in the future.

Engineering COSMIC DE: A Vision Realized - Carl Richell, Victoria Brekenfeld

Watch on Youtube

It was great to see what the folks at System76 have been able to achieve with the COSMIC Desktop Environment. For an Alpha product it was quite incredible how stable and usable it was. What I did appreciate about this talk was the honesty that there will be bugs and being upfront about these bugs. Whilst I am very happy with the GNOME Desktop Environment at the moment I would certainly be keeping a close eye on COSMIC and would be tempted to try it out in the near future.

Master Advanced Anti-Ban & Web Scraping Techniques - Fabien Vauchelles

Watch on Youtube

Having dabbled in some scraping myself I have hit a few issues in the past that have blocked me from scraping. This workshop exposed me to scrapoxy and I got the chance to try it hands on against a demo site using come common techniques to circumvent some of the common blocks implemented. I also fully appreciated the workshop being available on Github for future reference.

Open Platform for Enterprise AI - Christian Holsing

Watch on Youtube

As someone who is currently working on an AI project, I fully appreciated what the OPEA project is trying to achieve here. Due to the rapid movement of the various AI ecosystem standards are lacking and everyone is implementing their solutions in their own way. The frameworks and blueprints that OPEA are creating is utilising open standards and technologies to create a open platform for GenAI. The project has contributions from some of the biggest industry players involved in AI so its something I will certainly be keeping a close eye on.

ROCm for AMD GPUs on Ubuntu - Cordell Bloor

Watch on Youtube

This talk introduced me to AMD ROCm and the considerable amount of work being done by Cordell and the community to support a wider range of AMD GPU support for AI/ML workloads. It is excellent to see the work being done here will enable a wider range of devices and as a result will enable greater competition in the GPU market for AI/ML purposes.

Harnessing HTCondor: How DreamWorks Animation Orchestrates Massive Workloads for Feature Films - Mark Jackels

Watch on Youtube

It was quite impressive to see the insights on how an animation studio structures and distributes its workload across 1800 workstations using HTCondor. Gives me a greater appreciation for the raw power required to produced some of the latest and greatest blockbuster animation movies. Can’t see me using this as I do not have a blockbuster budget but nevertheless was incredible to see the capabilities of this piece of free and open source software.

Framework Lightning Talk - Nirav Patel

Watch on Youtube

Managing to swap your laptop hardware from x86 to RISC-V architecture in the space of a 5 minute lightning talk. I was amazed that it could be done. A true credit to the Framework brand. Certainly deserved the standing ovation they got for achieving this. They will certainly be on my radar when I am due a laptop refresh.

Creating a subscription-free ChatGPT Plus alternative

Tue, 30 Jul 2024 08:00:00 +0100

AI has taken the world by storm over the past 18 months with many people utilising it in many ways. One of the most popular ways of interacting with AI is using ChatGPT. Like most modern software OpenAI’s ChatGPT offers a free tier as well as their subscription called ChatGPT Plus which offers more features and a selection of Large Language Models.

A friend of mine has been using ChatGPT Plus. Key reasons he was paying for the Plus subscription was to ensure he had access to it whenever he needed which is something that is not guaranteed on the free tier. However at $20 a month he is questioning if he used it enough to warrant paying the monthly subscription cost. He said if the cost was lower he would be happy to continue paying for it. I had to agree with him as a casual user myself I could never justify that expense. This is when I went to explore the option of building a ChatGPT Plus like experience at a lower cost.

How did I do this

To grant ourselves access to our very own ChatGPT like experience we are going to use 2 tools:

If you have not done so already create an account at https://platform.openai.com/. Once you’ve done this navigate to the API Key Page. There is a bizarre restriction which means you need to enter a mobile phone number before you can generate your first API Key. As this is only used one time, I purchased a sim card at the supermarket and registered that number against the account. Feel free to use your own personal phone number if you wish. Once this is done generate an API Key.

You need to go and add credit to your account to actually be able to use the API. To do this navigate to the billing page and add some credit to your account. I decided on just adding the minimum to my account which is $5 + VAT.

You now have an account and access to OpenAI’s API.

Set up Open WebUI

There are a number of ways to set up Open WebUI but the recommended process is using Docker so before you go any further ensure you have got this set up. Once that has been completed run the command below. Make sure you’re replacing <your_generated_api_key> with your OpenAI API key that you have generated.

docker run -d -p 3000:8080 -e OPENAI_API_KEY=<your_generated_api_key> -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

Start prompting

Navigate to http://localhost:3000 in your web browser. Create an account, login, select a model of your choice in the dropdown at the top left of the page and start using it as you would with ChatGPT. At the time of writing the gpt-4o-mini model is OpenAI’s most cost effective model.

How does it compare

Cost

I created the prompt “Can you give me the number of workdays between December and April. I do not work weekends or UK bank holidays.” using the gpt-4o model and that costs approximately $0.01. You would have to put 2000 equivalent requests within a month to break even with the ChatGPT Plus subscription cost. If you put the same request through gpt-4o-mini it costs $0.0005 which means you would need to put 40000000 equivalent requests to break even.

If you’re heavy user you may exceed the 2000 requests but if you’re a casual user such as myself then the API proves to be considerably better value than ChatGPT Plus. I would be surprised if many exceed the gpt-4o-mini break even cost.

Convenience

ChatGPT Plus wins here but as you can see it does not take an awful lot of effort to get this up and running. Personally for me the small convenience sacrifice pays off considerably in terms of fiscal savings for the casual user.

Quality of response

My friend still had access to his ChatGPT Plus subscription so we have done some comparisons to check the quality of the responses from the API against the responses from ChatGPT Plus. All responses below were ran against the gpt-4o model.

What are 5 creative things I could do with my kids’ art? I don’t want to throw them away, but it’s also so much clutter.
ChatGPT Plus Response
Finding creative ways to preserve and display your kids’ art can be a wonderful way to honor their creativity while managing clutter. Here are five ideas:
1. Create a Rotating Gallery: Designate a space in your home, like a wall or a bulletin board, as a rotating gallery for your kids’ artwork. You can frame a few pieces or use clipboards, wire with clips, or magnetic strips to easily change the display. This way, the art can be regularly updated, and older pieces can be stored or used in other projects.
2. Make a Digital Archive and Photo Book: Scan or photograph your children’s artwork and create a digital archive. You can use these images to make a photo book, which is a compact and organized way to keep the art accessible. Many online services allow you to customize and print these books, making them a wonderful keepsake.
3. Create Art Collages or Murals: Take pieces of their artwork and cut out favorite sections or elements to create a large collage or mural. This can be a fun project for the whole family and a unique way to blend different pieces into one large, cohesive artwork.
4. Turn Art into Gifts or Home Décor: Transform their art into gifts or home décor items. You can print their drawings on mugs, t-shirts, cushions, or even create custom puzzles. These make great personalized gifts for family members or unique decorative items for your home.
5. Make an Art Book or Portfolio: Create a special art book or portfolio for each child where you can store and organize their artwork. This helps in reducing clutter and makes it easy to look back on their creative growth over the years. You can categorize the pieces by date or theme and add notes or stories about each piece.
These ideas can help you cherish your children’s artistic expressions while keeping your home organized and clutter-free.
OpenAI API Response
Absolutely, finding creative ways to preserve and showcase your kids’ artwork can be both fun and practical. Here are five ideas:
1. Create a Rotating Gallery: Dedicate a wall or a section of a wall in your home to be a gallery for your kids’ artwork. Use frames, clipboards, or a wire with clothespins to create a rotating display. You can change the displayed pieces every few weeks or months, giving each piece its moment to shine without overwhelming your space.
2. Make a Photo Book: Scan or photograph the artwork and create a professional-looking photo book. There are many online services that allow you to design custom photo books. This way, you can keep the original works stored safely while enjoying the collection in a compact, accessible form.
3. Turn Art into Gifts: Use the artwork to create personalized gifts for family members. Some ideas include:
  - Printing their art on mugs, t-shirts, or tote bags.
  - Using the drawings to create custom calendars or greeting cards.
  - Making a set of coasters with their art laminated or encased in resin.
4. Create a Digital Slideshow: Digitize the artwork and set up a digital photo frame or a smart display in your home to show a continuous slideshow of the art. It will free up physical space while still celebrating your child’s creativity.
5. Make Collages or Scrapbooks: Combine several pieces of artwork into a larger collage or scrapbook. This can be a seasonal activity where you make collages that reflect the art produced over a certain period. Kids can get involved in the process, helping to cut, arrange, and glue their works, which makes it a fun and engaging family project.
These creative ideas can help you manage the clutter while still cherishing and celebrating the special art your kids create.
Tell me a random fun fact about the Roman Empire

ChatGPT Plus Response

The Roman Empire was known for its impressive engineering feats, including the construction of a vast network of roads. One fun fact is that the saying “All roads lead to Rome” originates from the Roman Empire’s extensive road system. By the peak of the empire, this network spanned over 400,000 kilometers (approximately 250,000 miles), with around 80,000 kilometers (about 50,000 miles) of paved roads. These roads were crucial for the movement of troops, trade, and communication across the vast territories of the empire.

OpenAI API Response

Sure! Did you know that the Romans had a highly advanced form of concrete that was incredibly durable? One of the key ingredients they used was volcanic ash, which allowed the concrete to set underwater and contributed to the longevity of many Roman structures. This special mix made their piers, aqueducts, and buildings remarkably resilient, many of which still stand today. This ancient recipe has even been studied by modern engineers to improve contemporary construction materials!

Show me a code snippet of a website’s sticky header in CSS and JavaScript.

ChatGPT Plus Response

To create a sticky header for a website, you can use a combination of CSS and JavaScript. Here’s a basic example: HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sticky Header Example</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header id="header">
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
 </header>
 <main>
 <section>
 <h1>Welcome to Our Website</h1>
 <p>Content goes here...</p>
 </section>
 </main>
 <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body, html {
 margin: 0;
 padding: 0;
 font-family: Arial, sans-serif;
}

header {
 background-color: #333;
 color: white;
 padding: 10px 0;
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 z-index: 1000;
 transition: background-color 0.3s ease;
}

header.sticky {
 background-color: #000;
}

header nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
}

header nav ul li {
 margin: 0 15px;
}

header nav ul li a {
 color: white;
 text-decoration: none;
 font-size: 16px;
}

main {
 margin-top: 70px; /* To avoid content overlap with the sticky header */
 padding: 20px;
}

JavaScript (script.js)

Copy code
window.addEventListener('scroll', function() {
 var header = document.getElementById('header');
 var sticky = header.offsetTop;

 if (window.pageYOffset > sticky) {
 header.classList.add('sticky');
 } else {
 header.classList.remove('sticky');
 }
});

Explanation

HTML Structure: A basic structure with a header and main content.
CSS:

header is styled to be fixed at the top of the page with a dark background.
.sticky class changes the background color of the header when it becomes sticky.
main has a top margin to prevent content from being hidden under the header.

JavaScript:

The script adds a sticky class to the header when the user scrolls past the header’s initial position.
This script listens to the scroll event and checks the page’s Y offset.

OpenAI API Response

Certainly! Below is a basic example of how to create a sticky header using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
 <h1>Sticky Header</h1>
</header>
<main>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <!-- Repeat the paragraph or add more content to create a scrollable page -->
</main>
<script src="scripts.js"></script>
</body>
</html>

CSS (styles.css)

body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
}

header {
 background-color: #333;
 color: white;
 padding: 10px 0;
 position: sticky; /* CSS `position: sticky` makes the header sticky */
 top: 0; /* The header sticks to the top */
 width: 100%;
 z-index: 1000; /* Ensures the header is above other content */
 transition: top 0.3s;
}

main {
 padding: 20px;
}

p {
 padding: 20px 0;
}

JavaScript (scripts.js)

No JS is strictly required for a sticky header, but you might want to add some JS for additional functionality, such as hiding the header on scroll down and showing it on scroll up. Here’s an example:

document.addEventListener("DOMContentLoaded", function() {
 var header = document.getElementById("header");
 var lastScrollY = window.scrollY;

 window.addEventListener("scroll", function() {
 if (window.scrollY > lastScrollY) {
 // Scrolling down, hide the header
 header.style.top = "-60px"; // Adjust the value to match the header height
 } else {
 // Scrolling up, show the header
 header.style.top = "0";
 }
 lastScrollY = window.scrollY;
 });
});

Explanation:

HTML: Defines the structure with a header and main content.
CSS:
- position: sticky with top: 0 makes the header stick to the top of the page.
- z-index: 1000 ensures the header stays above other content.
JavaScript: Adds interactivity to hide the header when scrolling down and show it when scrolling up, using the scroll event listener and comparing the current scroll position with the previous one.

This is a very basic example. Depending on your project needs, you might have to make additional adjustments.

As you can see whilst the responses are not the same, the responses are of a similar quality. If I did not label which system the output came out of I think you would probably struggle to determine which system produced it.

Conclusion

As you can see with very little effort I was able to implement a subscription-free, cost effective ChatGPT Plus alternative using the OpenAI API and Open WebUI. In an ideal world you would run the Open WebUI software on a server that only you had access to which I have done.

Whilst Open WebUI is a quality piece of software there are plenty of alternatives you could leverage to get a similar experience. The OpenAI API is doing the heavy lifting of answering your prompts whilst Open WebUI is providing you with a good interface to interact with it.

3 Weeks island hopping in Thailand

Mon, 15 Jul 2024 22:10:00 +0100

This blog post is just a collection of bullet points regarding mine and my wifes trip around Thailand. There is a lot of information online about this great country but it can be a problem to get accurate answers due to some of the information being quite dated. Hopefully my first hand experience will help someone.

Departing UK side

Booked to fly with EVA AIR. With it being an overnight flight I was able to take a half day on the Friday ensure we made the most of our time.
- We had to move our flights from February to May/June due to unforeseen circumstances. I was able to do this online with EVA AIR for the fee of £100.
- We were able to check in at the airport free of charge.
National Express from Bristol to Heathrow was delayed. Fortunately giving ourselves plenty of time this did not impact us but would certainly give myself plenty of breathing room flying from Heathrow again.
Heathrow was a well oiled machine. Everything straightforward from check in to boarding the flight. Not my first time flying from Heathrow but always impressed with its operation.
The Flight
- A meal was provided shortly after takeoff. Did not expect this.
- We got another meal aproximately a couple of hours prior to landing in Bangkok.
- Seats were quite snug in economy.
- Earplugs & Eyemask I brought with me did help with me getting a few hours sleep on the plane.

Landing in Bangkok

We were doing a self transfer from Bangkok to a flight to Chiang Mai
We were through passport control and had our bags within 30 - 40 minutes
We did not requre to fill out a landing card as British citizens which was a change from our previous visit in 2018
I was able to pick up a tourist sim card in the baggage collection area.
- A passport must be provided to get a Sim Card in Thailand. This is practically unavoidable.
- Sim cost approximately £25 for unlimited data with True Mobile for 1 month. Other providers were there but went with True as I could pay for the sim with a credit card.
Once passed through the security checkpoints and in the arrival hall make way to the 4th Floor to get to departures for the next flight.
Was able to check in immediately and go through domestic departures security checkpoint.
Once past the security checkpoint your limited to vending machines for any food and beverages so worth keeping in mind if you have time to spare.
Overall the process was painless and would self transfer again for a domestic flight.

Chiang Mai

Baggage collection again was straightforward.
Download Grab onto your mobile phone for taxi services in Chiang Mai including getting to and from the airport
To get to the grab pick up point exit the airport and turn left. Keep walking until you see a grab shelter
Was picked up in seconds for 150฿
Stayed Glory Suites
- Hotel was lovely well furnished, had a rooftop pool and reseraunt which served great food
- Slightly far from the tourist areas but with Grab accessible and affordable this was not much of a problem.
Most of the tourist/expat entertainment happens around Loi Kroh Rd, the night bazaar and near Moon Muang.
Visited multiple temples in Chiang Mai. If you choose to visit one I would reccomend Wat Chedi Luang. There is a seperate entrance for tourists. Entry cost around 50฿ per person.
There was an incredible resteraunt across the road from Wat Chedi Luang called Sattaya Izakaya. Would reccomended the skewers as they were excellent.
Biggest regret was not being more prepared for Chiang Mai. Whilst there is plenty to keep you busy for a couple of days in Chiang Mai city there is a lot more offered further out of the city. Would reccomend others to look up some excursions before arriving. Plenty of tour operators to book from inside Chiang Mai so booking online in advance may not be nessecary.

Koh Samui

Grab is not an option from the airport. When you collect your luggage you can (and probably should) book a taxi at the desk in the luggage collection area. SmackONE I believe the company was called. A taxi to Chewang cost 400฿ for 2 people.
Stayed J4 Samui Hotel.
As a guest at this hotel you get to utilise the pool and beach at Chewang Gardens which is right next to J4.
Room is quite close to the strip in Chewang and is right next to ARKBar. Whilst we found the rooms adequately soundproofed if you’re sensitive to sound you may want to use some earplugs.
If you like to do a bit of shopping Chewang has a large shopping center with a lot of large well known brand and a great food court.
Thai massages and various beauty treatments are plentiful in Chewang so be sure to utilise this whilst you’re here.
A large number of places will take Mastercard but fully expect to pay a minimum of 3% extra in most places. I believe this is to cover Mastercard fees.
Despite a lot of reports saying this is not the place to go and see tropical fish we saw a fair amount when we went snorkeling on the beach.
The beach in Chewang was delightful and we spent a lot of our time here. - The staff at Chewang gardens were very friendly and do go above and beyond. Worth considering staying there for the excellent service alone.
When departing to go to Koh Phanagan we used Grab to take us to Bangrak pier which was the nearest ferry port to Chewang.
- Due to weather conditions we had to sail from Nanthon pier but the transfer to there was provided by Lompayah free of charge.

Koh Pha-ngan

This is a notorious party island and home of the infamous full moon party and many other parties in between. Despite this if you’re not looking to party like us you can completely avoid it. You probably would want to avoid Haad Rin though if you do not intend to do a lot of partying.
We stayed in the Baan Tai area of the island
Speedboat to Koh Pha-ngan cost 350฿ each booked directly via Lomprayah
Taxi cost 400฿ from Thong Sala port to hotel. We captured ours from the car park outside the port.
Stayed Pratchee Resort.
- We were the only people staying on the resort during our entire stay. It was a tranqual peaceful paradise which was something I did not expect from this island.
Did not roam far from this area of the island. Managed to get sunburnt and didn’t fancy making the problem any worse.
If you did wish to roam the island moped rental shops are plentiful.
Nearest 7/11 was aproximately 7 minute walk from hotel.
Baan Tai Night Market catered to most of our entertainment needs whilst we were here. Plenty of food to sample here along with some excellent cocktails. Live music was on each night also.
Cash is king on the island. With the exception of 7/11 and the hotel I did not notice card being accepted. Fortunately there are multiple ATMs near the 7/11.
Krungsai Bank ATM fee was 220฿. Probably the cheapest you will find in the area.

Koh Tao

Ferry to Koh Tao cost 600฿ each booked directly via Lomprayah
Getting off the boat was quite chaotic as we had to get the bags from the front of the boat and then exit the back but there was no structure to this and it was a complete free for all.
To enter Koh Tao you need to pay a 20฿ pier fee. This usually is not included in your ferry fee.
Our accomodation offered a free transfer to the hotel. It appeared many others did also so worth considering taking up their offer if availible.
We stayed at Koh Tao Beach Club on Mae Head Beach.
- We have a Beach Bungalow. It was lovely to be on the front of the beach.
- Internet access was very unreliable and when it did work was very poor. Mobile signal also was nonexistant so tethering was not an option.
- We were able to get clothes washed with a 24h turnaround arranged by the hotel. Cost was 50฿ per kg.
- If you paid for breakfast in your room rate be sure to get your coupons on check in.
- Would be happy enough to stay there again if the price was right however would consider staying on Sairee Beach if there was a next time as that appears to be a very popular location on the island.
We booked a snorkeling excursion with Oxygen. They did 5 stops in great scuba locations around the island. The tour was well ran and all the staff we’re very helpful. We managed to swin with giant turtles at one of the locations. We were able to book this via our hotel but you do see a lot of advertisements of theirs along Sairee beach
I did a try dive with Phoenix Divers. It cost 3500฿ for 2 dive try dive, diving theory and a practice in their pool.
- I was able to arrange the majority of this via Whatsapp. They were very responsive. I just needed to pop down to their site on Sairee Beach to fill out paperwork and pay.
- I loved this experienced and I am hooked. Regretted not booking the Open Water Diving course but unfortunately time was not on my side. I will be doing this in the near future.
- Koh Tao is renound for diving globally so if you are curious about diving this is certainly the place to try it.
We had plenty of nice food in Koh Tao but the one place that stood out was Sandbar. They did a BBQ platter which was absolutely fantastic.

Bangkok

To get back to Bangkok it was a ferry back to Chumpthon and then a night train
We booked a ferry/taxi combined ticket via 12go.asia as there appeared no way to do this online via Lomprayah.
We booked the night train back from Chumpthon to Krung Thep Aphiwat (Bangkok) via the State Railway of Thailand D-Ticket site
- First class private room cost 2180฿ for the two of us.
- You can only book these tickets usually 1 month in advance.
- The D-Ticket website was incredibly slow to operate from the UK so patience would be needed. It was however very fast when accessed in Thailand.
- Was able to get some sleep. Was not the most comfortable journey in the world but beats an 8 hour coach to Bangkok
We probably gave ourselves far too much time to be on the safe side. If I was to do this again I would probably book on the first night train availible after arriving via boat to Chumpthon
We arrived in Bangkok at 6:30.
We got a Grab to our accomodation.
We stayed at Villa de Khaosan which is on the corner of the famous backpackers street of Khaosan Road.
- Would stay again accomodation was comfortable and location was perfect.
We visited Jim Thompsons House Museum whilst we stayed.
- Jim Thompson was a famous silk merchant based in Thailand who was largely considered to have saved the Thai silk industry
- This was a very insightful and informative tour which I was glad to do. My wife was especially happy to see this being a keen textile artist.
We paid a visit to the MBK Shopping Center as it was near Jim Thompsons House.
- Given its size and boasting about a considerable sum of shops I was not particularly impressed. Felt more like a bazaar over a western standard shopping mall.
- Food Court was good and had plenty of choice if you did want to eat nearby.
Grab back to Khaosan road was pretty slow due to Bangkok traffic.

Back to the UK

Got a Grab from the accomodation to airport. Worth noting that your quoted price does not include tolls but the driver can and will add them at the end of your journey. The driver was upfront about this.
Check in and security was seamless and nothing of noteworthy.
We were able to get a tax refund on some items. If you’re buying any expensive products this is worth considering. The refund took a couple of minutes to process. Refund was paid in cash.
Managed to get emergency exit seats on the way back. On a 12 hour flight the extra legroom is a blessing.
When landing in Heathrow boarder control queue was quite long but didn’t take much longer than 10 minutes to pass through.
Baggage collection was quite slow.
We were able to get on the National Express an hour earlier than planned thanks to the very friendly driver letting us on. Will be booking National Express to Heathrow next time just because of that alone.

Terraforming my Cloudflare configuration

Mon, 29 Apr 2024 16:10:00 +0100

A couple of weeks ago I was having a conversation with a friend regarding Cloudflare. He was saying how it is not uncommon for people to make configuration changes using the Cloudflare UI potentially introducing breaking changes that could go unnoticed. I meantioned that with Infrastructure-as-Code implemented there is no excuse for this to happen. I also came to a realisation that I do not practice what I preached so to rectify this I have decided to capture my Cloudflare configuration into my Infrastructure-as-Code tool of choice Terraform.

Cloudflare handles a number of things for me on this domain but most notably it handles my DNS records for this website and my emails. An outages of either of these would not be ideal for me so to avoid this we are going to use cf-terraforming to generate Terraform code based on my current DNS configuration in the Cloudflare UI and to generate the terraform import commands so I can import my Cloudflare configuration into my Terraform state.

Building the application

Unfortunately cf-terraforming is not packaged in the Debian repositories and there is no flatpak or snap availible for it so we do have to resort to building it. If you’re following along on a Macbook there is a brew package for this which would save some time. Fortunately building this was incredibly straigtforward:

git clone https://github.com/cloudflare/cf-terraforming.git
cd cf-terraforming
make build

There may be some dependancies that need to be installed such as the Go programming language but I already had this on my laptop. Once the make command has successfully ran a binary file will appear in the same directory called cf-terraforming. I was able to interact with this binary in the terminal by running ./cf-terraforming

Create Cloudflare API token with sufficiant permissions

I needed to create a Cloudflare API token so cf-terraforming and Terraform can interact with Cloudflare. To do this I navigate to the Cloudflare API Token page, Select create token and then create custom token. Give the token sufficiant privalages to do what I needed it to do. For the purpose of DNS I selected Zone DNS Edit from the permissions dropdown and under the Zone Resource dropdown I selected Include Specific Zone samtripp.co.uk. I then followed the rest of the wizard to create my API Token.

Once this was created I was able to export my API Token along with my zone id which can be found on the Cloudflare dashboard onto my laptop as an environment varible in my terminal

export CLOUDFLARE_API_TOKEN='YOURAPITOKEN'
export CLOUDFLARE_ZONE_ID='YOURZONEID'

Initialise Terraform working directory with Cloudflare module present

To start using the cf-terraforming tool I need to add the Cloudflare provider to my terraform code. I created a cloudflare.tf file and added the following

terraform {
 required_providers {
 cloudflare = {
 source = "cloudflare/cloudflare"
 version = "~> 4.0"
 }
 }
}

Once this was added I ran a terraform init to initialise the terraform working directory.

Generating the Cloudflare terraform code

This is where the magic happens. I was able to generate the Cloudflare terraform code from the terraform working directory by running the following command:

cf-terraforming generate --resource-type "cloudflare_record" --zone $CLOUDFLARE_ZONE_ID

This outputted:

resource "cloudflare_record" "terraform_managed_resource_05e4f175dfbb21e818e9ff4e30e75796" {
 name = "samtripp.co.uk"
 proxied = true
 ttl = 1
 type = "CNAME"
 value = "dnsrecordvalue.co.uk"
 zone_id = "myzoneid"
}
...

Perfect that worked as expected. I copied the output into a new file called cloudflare-dns.tf. I ran a terraform plan and saw that terraform wants to create the infrastructure. I need to import this resource into the terraform state to avoid destroying anything already configured. To do this I ran the following command:

cf-terraforming import --resource-type "cloudflare_record" --zone $CLOUDFLARE_ZONE_ID

This outputted:

terraform import cloudflare_record.terraform_managed_resource_05e4f175dfbb21e818e9ff4e30e75796 myzoneid/05e4f175dfbb21e818e9ff4e30e75796

This command would be sufficiant to import the Cloudflare DNS record into terraform state. One thing I was not happy about was the names of these resources. As this was not in state yet I was able to manually edit the resource name to something more meaningful.

resource "cloudflare_record" "cname_root" {
...
}

Once renamed I ran the terraform import command with the ammended name

terraform import cloudflare_record.cname_root myzoneid/05e4f175dfbb21e818e9ff4e30e75796

The Cloudflare DNS record is now in state. I was able to run a terraform plan and see there are no changes to be made to my infrastructure. If you have multiple DNS records like I did you may want to run import and then plan each time to ensure no issues. You will see the number of changes to be made decrease after each successful import.

Add Cloudflare API key to Github Actions

Github Actions provides me with my all my Continuious Intergration and Continuous Delivery needs. I use dflook/terraform-github-actions to give me the functionality of running a terraform plan and apply when I make infrastructure changes. For Github Actions to interact with Cloudflare via Terraform I will need to add my API key to Github Actions. I managed this by navigating to my Github repository, select Settings > Secrets and Varibles > Actions > New Repository Secret. I named the secret CLOUDFLARE_API_TOKEN and then added the API token that I generated earlier. Once thats done I added the following lines to my Github actions .yaml file.

env:
 CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

Conclusion

The cf-terraforming tool was straightforward to use and made the process of importing some of my Cloudflare configuration into Terraform a pain-free experience. Credit to all the developers involved in making this tool possible. I have also been able to import my page rules successfully following the same process as above. I will continued to use this tool to capure the rest of my Cloudflare configuration into Infrastructure-as-Code.

It does not support every resource type in the Cloudflare provider currently but it at least covers some of the critical ones that could be disruptive without being able to import it into my Terraform state.

Migrate from LineageOS for microG to LineageOS with microG

Fri, 12 Apr 2024 08:00:00 +0100

I’ve decided to migrate my phones OS from LineageOS for microG to LineageOS with microG and I’ve documented my process of doing this.

Why use LineageOS

I’ve ran LineageOS back when it was called Cynogenmod on my OnePlusOne and I’ve stuck to it ever since on my Android phones. I liked how it was a clean consistent Android OS which was well supported across many phones meaning if my device broke and was beyond economical repair I can get a new supported device and enjoy the same experience that I had before. It also prolongs the life of my phones as the majority of phones will get 2 to 3 years OS updates from manufacturers whereas LineageOS is still providing updates for my previous phone, a Xiaomi Pocophone F1 which was released in 2018. This allows me to run a system with the latest android securirty patches and reduces the creation of unnessecary e-waste.

Why use microG

It may be no great surprise to anyone how much information Google collects on any given person but people may overlook how much data the Google Play services collect on you. I can’t tell you exactly how much they collect or what they collect because it is not open source. That is a problem in its own right as I can’t audit what the Play Services are collecting on me. Sadly using Android without the Play Services whilst not impossible is a less desirable experience. A lot of developers utilise a lot of the Google Play API’s in their apps which will mean that some apps will either malfunction or not behave as designed when Google Play services are not installed. This is where microG enters the arena. It bridges the gap between usability and open. Google may still get some metrics whilst using microG but its just enough to ensure that the various apps I want to use now work. Its not perfect but a pragmatic compromise.

Why did I use LineageOS for microG

The official LineageOS team took a stance that they would not allow signature spoofing. This was required by microG to pretend to be the Google Play Services so apps called its reimplemented API’s. This was largely driven by security concerns which is somewhat fair however with this being a nessecity for microG an unofficial fork was created and the LineageOS for microG custom ROM was born. This ROM was LineageOS with MicroG built in and was arguably the easiest way for me to get both LineageOS and microG in one convenient package.

Why migrate away from LineageOS for microG

LineageOS/android_frameworks_base change 383574 has now allowed the microG to signature spoof. This has made LineageOS for microG custom rom redundant. Whilst they’ve not stopped releases immediately I am predicting in the near future they may do this.

Other than speculation there are a couple of minor benefits to moving back to the official LineageOS release, most notably frequent updates. For my device there is a weekly release for the official LineageOS custom ROM. As a result of this I will get security fixes and any other changes quicker than LineageOS for microG custom ROM which was a monthly release.

How am I migrating

Inconveniently its not as simple as installing the official LineageOS release over LineageOS for MicroG so the plan is as follows:

Take a full nandroid backup just incase it goes horribly wrong and I need to revert
Backup all applications and their data
Install latest phone firmware
Install LineageOS Recovery
Install LineageOS
Restore all applications and their data
Install microG

Prerequisite

adb and fastboot needs to be installed on the computer. On a Debian based system this is as simple as running the following command in the terminal.

sudo apt install adb fastboot

Take full nandriod

To do this I will be using OrangeFox recovery. I followed this guide to get OrangeFox recovery installed.

Once booted into OrangeFox recovery I then took a backup of boot, data & super partitions. This should hopefully be enough for me to abort and revert if nessecary.

Once this has done I took a copy of the Fox directory from the phone onto the computer.

Backup all applications and their data.

To do this we are utilising the built in backup functionality in LineageOS which is seedvault. This is not a perfect solution as we’re depending on app makers to implement backups the Android standard way. As a result of doing this I am expecting to lose my Whatsapp chat history. I could backup to Google Drive if I really was that precious over the chat history but there is nothing that I need to keep there and I was not willing to backup to Google Drive.

To turn on seedvault backups I did this in Settings > System > Backup > Seedvault Backup

Once I completed my backup I took a copy of the .SeedVaultAndroidBackup directory onto the computer.

Install latest phone firmware

As I have been running LineageOS for quite a while there is a possibility that my phone firmware is out of date. On Xiaomi phones these usually get delivered as part of the MIUI update. Fortunately the kind folks at Xiaomi Firmware Updater provide flashable firmware meaning you do not need to install MIUI to get firmware updates. Firmware updates can bring driver fixes and security updates to your device so there is value to doing this periodically. Now seems a perfect time given we’re doing a full system refresh.

To do this I downloaded the latest firmware from Xiaomi Firmware Updater. I then rebooted my device into recovery. Once in recovery I went to Apply Update > Apply from ADB

Once ADB is enabled I should be able to run this command from the directory where I downloaded the firmware from inside my terminal:

adb sideload fw_alioth_miui_ALIOTHEEAGlobal_V14.0.11.0.TKHEUXM_067e9d6f67_13.0.zip

A popup on the phone will say Signiture verification Failed install anyway? I selected yes here. This is due to the flashable firmware not being signed by the LineageOS Team.

Install LineageOS Recovery and LineageOS

To avoid reinventing the wheel the folks over at LineageOS have a very good guide on how to install LineageOS for the Xiaomi Poco F3 on their website.

If you’re coming from a custom rom before some of these steps are not nessecary such as unlocking bootloaders. It is worth noting at this point I will be resetting the phone to factory settings so be sure to take a copy of anything important as data will be lost beyond this point.

Once those steps are complete I rebooted the device and follow the wizard to setup the device for the first time.

Restoring applications and data

As a result of resetting the phone I need to copy our backup onto the phone. To do this I copied the .SeedVaultAndroidBackup from the computer back onto the phone. Once thats completed open the phone dialer and type *#*#7378673#*#*. This will open up the seedvault restore process.

I was plesantly surprised at what a good job seedvault did at restoring my apps. Only a couple had issues being restored. One being F-Droid and the others being microG components. Both will be installed in due course.

The rest of my restore was internal storage items such as photos etc which I was able to move onto the device via the file explorer on my computer.

Install microG

The final piece of the jigsaw. To install microG I need to install F-Droid from the projects homepage. Once this is done I can go to settings in F-droid and add the microG repository which can be found on the microG project website. Once I’ve added this I then installed microG Service, microG Service Framework Proxy & microG companion from the F-droid repository. Once completed I rebooted the phone as I patched some key system components. Once rebooted I navigate to microG setting and select self check. I saw a lot of unchecked boxes so click on them to give microG the nessecary permissions to function. Once this has been completed I have done the minimum to get get microG running.

Optional tasks that would be worth doing

If you’re following along with what I did and this is your first time running microG you may want to consider these extra tasks:

You may want to return to the microG settings and turn on Cloud Messaging. This is used by a lot of applications to handle push notifications.
You may also want to install a location backend to improve the quality of your location services. There are many backend you can choose for this. I personally use the MozillaNlpBackend but you can find a list of them on the UnifiedNlp GitHub repository which is maintained by the microG project.
You may also want to install the Aurora Store. This is an open source Google Play client that you can use to install your apps. Considerably more privacy respecting in comparision to the official Google Play client.

Conclusion

This was a relatively uneventful OS swap. All worked fairly seamlessly with the exception of losing Whatsapp chat history which could have been avoided if I was willing to back it up to Google Drive. A successful change which will help to prolong the life of my Xiaomi Poco F3. The device has proven to be good value for money up to this point and I will probably stick with it for the foreseeable especially when the current phone market is not offering me much more than what I’ve got.

A selection of my favorite EuroPython 2023 talks

Sun, 03 Mar 2024 22:00:00 +0000

Back in July I attended my first Software Engineering conference EuroPython 2023. If you’re holding off of booking your first conference for various reasons or are unsure of which one to attend I found EuroPython a very friendly and welcoming conference, that is tailored to the developer. I found the conference fairly priced for the value that I got out of it. Unfortunately I can’t comment on the tutorials or the sprints as I did not attend them.

Would I go to another conference after that experience: Yes - I went to FOSDEM 24

Would I go to EuroPython again: Yes, I will give it a couple of years before going again as I’ve now got a taste for attending Software Engineering conferences so I would like to check others out first but no doubt I will return in the future.

The key purpose to this blog post is to reflect on a selection of talks that I found valuable or enjoyed during the conference. There was a wide selection of talks to attend although sadly I could not attend them all. Most of the talks I attended were aimed towards a DevOps audience.

CLI application development made easier with typer — Vinícius Gubiani Ferreira

Watch on Youtube

This talk introduced me to the Typer library. As someone who has built CLI’s in the past using such libraries as Argparse and Fire, I quickly discovered that Typer is a game changer. You can get a CLI app running in no time at all using this. I created a proof of concept CLI thanks to this talk. If I was to make a CLI application in the future this would be my go to library.

Optimizing Your CI Pipelines — Sebastian Witowski

Watch on Youtube

This talk could not have come at a more appropriate time for me, as when I returned to work I was going to have to spend a lot of time creating pipelines. Some solid advice and recommendations around pipeline creation that I was able to utilise immediately.

pip install malware — Max Kahan

Watch on Youtube

Nothing in this talk was a great shock to me. Plenty of bad actors are deploying malicious packages on PyPI. That being said it was a very well presented talk and is a great reminder to not just blindly install anything off the internet. The key takeway could extend beyond the Python ecosystem.

Designing a Human-Friendly CLI for API-Driven Infrastructure — Oliver Rew

Watch on Youtube

A great talk discussing closely coupled API’s and autogenerated CLI’s based off the API documentation. I can think of plenty of times in the past where I would have benefitted from such tooling. The only downside is that this tool is not publicly available, however the insight into well designed tooling was valuable.

From idea to production — Honza Král

Watch on Youtube

A self declared opinionated checklist for going from an idea into production. The example given was for a Django website but I would say it could be applied to most development projects. Key point to note is setting ideas up with the necessary tooling to succeed from the beginning will save a lot of pain retrofitting it once you’ve gone to production.

Honerable meantion for lighting talk F**k it - How to Fix Production Code in 5 Minutes — Sebastien Crocquevieille

Watch on Youtube

Bit of light humour to finish off the conference. Content Advisory as you can probably work out there is some bad language in this lightning talk.

Digital Security 101: Reinforce you password security with two-factor authentication

Fri, 09 Feb 2024 12:30:00 +0000

Congratulations, If you’re following on from my previous post you have taken the first steps into improving your digital security. Unfortunately what you probably won’t want to hear is that strong passwords, whilst an excellent start are just not enough on there own. To ensure you’re account is even more secure it is strongly enouraged that you apply two-factor authentication to your accounts wherever this is availible.

Why should I do it

Imagine if you were at top of the list of people who have had their accounts compromised which account are they likely to start with. Two-factor authentication offers you a second line of defence and could potentially buy you some time to change your password before someone compromises your account. If you enable two-factor authentication you are protecting your account with something you know (your password) and something you have (your device containing your two-factor authentication codes).

What are my options

There are many ways to implement two-factor authentication and below I’ve listed a selection of the most common and convenient ways of implementing this. Whilst some of these methods are better than others it is always worth keeping in mind that any two-factor authentication is better than no two-factor authentication at all.

SMS One Time Passwords are quite a common way of implementing two-factor authentication. I would discourage against this unless there is no other option. If someone was able trick your mobile phone operator to issue a Port Authorisation Code, they could move your mobile number to a phone which they possess and would be able to receive your One Time Passwords. You may be thinking whats the probability of this happening, unfortunately it is common enough to have earned the term Simjacking.

There is a good chance that your password manager has the capabilities of handling your two-factor authentication. KeepassXC & 1Password are just an example of a couple of password managers that have that capability. Whilst a very convenient way of using two-factor authentication, if someone unfortunately gains access to your password manager they will have everything they need to access your accounts.

Then there is the Mobile Phone App solution. You may have seen in the security settings of the service that you use “protect your account with Google Authenticator”. Google Authenticator uses 2 standards called Time-based One Time Passwords and HMAC-based One Time Passwords to generate new codes every 30 seconds to grant you access to an account. Once setup and you’ve entered your username and password on a service that you use, you will then be taken to a page where you are asked to enter this code from your device. As you can imagine with this changing every 30 seconds it makes a breach of your account very difficult.

Which app should you choose? As we just stated above Google Authenticator is completely capable of handling your two-factor authentication but there are plenty more applications that can and that are open source, something which Google Authenticator has not been since version 2.21. I was a previous user of Google Authenticator so should you wish to use it then its better than nothing however I personally believe there are better apps that offer a greater feature set.

I’ve tried a few apps for Android such as FreeOTP+, Aegis Authenticator but the one I did settled on was andOTP. It’s a free and Open Source app that has all the capabilites of Google Authenticator and the extras like backup your one time passcodes and password protect your one time password. I have noticed that andOTP is now unmaintained so you may want to consider one of the other two apps as no doubt I will migrate to one of them soon.

Don’t lock yourself out

You may want to take some precautionary measures to ensure you don’t accidently lock yourself out of your own accounts. As you can imagine storing these passcodes on a device like your mobile phone is excellent until you lose or break your mobile phone. You could create a new vault in KeepassXC and scan the QR Code (or enter the secret key) in that vault. That way if you lose access to your device you still have the same codes availible to you. Whilst convenient some may advise against this as you have muliple copies of these one time codes now. If you feel that is to much of a security risk then you’ll be glad to know there is an alternative and they are called backup codes.

I can not stress how important backup codes are. If a service offers you backup codes then be sure to take note of them. By taking note of the backup codes these single use passcodes will allow you to regain access to your account allowing you to setup your One Time Passcodes on a new device. The recommended storage method for these codes are on paper and store them in a fire proof safe. I can imagine some people do not have a safe in their house so the next best thing would be to store them in an encrypted method like in a Keepass Vault and store that Password Vault offline.

How do I do it

I take the same approach for setting up two-factor authentication as I do with my passwords. I protect the most important services I use or the ones that will cause you the most problems if I were breached. You can see if the website/services you use support two-factor authentication by visiting the website 2fa.directory. You then visit the service you want to set up two-factor authentication on. Scan the QR Code or enter the Secret Key into your app and then enter the passcode to verify the code is working.

Congratulations you have just taken the next step in protecting yourself with two-factor authentication.

TL;DR (Too Long Didn’t Read)

Use two-factor authentication wherever possible
Some two-factor authentication is better than no two-factor authentication
Google Authenticator is not your only choice of app
Make sure you take note of your backup codes

Digital Security 101: Time to start using a password manager

Sun, 28 Mar 2021 11:45:00 +0000

I’ve written this post as a result of my frustrations with people from all walks of life using terrible password practice. If this post ends up changing one persons way of managing their passwords then it has served its purpose.

It’s time to take back control of your internet security. Breaches are becoming more common and one day you will get caught. You may see it as insignificant as an old email address you used at secondary school or an old social media account that you’ve not logged onto for about 10 years but I will go on to explain that it is much more significant than you might think, hopefully before it becomes an invasion of your privacy.

These breaches are currently worth the hackers time and this is largely down to peoples poor password practices. Whilst you may think your password is a good password all it takes is one breach to make that password a bad password. You probably use that password everywhere from your online banking to your social media accounts. You may think having two or three passwords will outsmart them but I can assure it will not. There is a practice called credential stuffing where hackers will use your username and password from a breach and test it against multiple websites to gain unauthorized access to your accounts. You can check if you’ve been part of any breach using HaveIBeenPwned. Don’t be alarmed if you find you’re part of a breach just ensure you take the necessary action to protect yourself now you know your password could be exposed.

The best practice is to use one password per account built up of letters, numbers and symbols. The longer the password the better. Now this is absolutely impossible to remember for every single account you own and this is where a tool like a password manager proves to be very useful. You use a password manager to generate strong passwords for your multiple accounts and store them in an encrypted password database. Think of it as a vault for all your passwords. This vault is protected by a strong master password which you can remember. Make sure this password is strong and is only used for your password vault. This interview with Edward Snowden on Last Week Tonight with John Oliver will show you how to think of a strong master password.

Now the choice of password management software. There are plenty of choices to go with here. Some examples of such popular commercial offerings are 1Password and Bitwarden with their cloud based solutions meaning you can access your password from anywhere on any device so long as you have internet connectivity. These are certainly viable solutions and are worth considering if you’re looking for convenience.

I personally use KeepassXC on my laptop and KeepassDX on my Android mobile phone. These are both compatible with accessing my Keepass password vault. I find Keepass a very good solutions due to its optional two step verification meaning you can protect your vault not only with a strong password but also with a key file. The key file is a separate file which you would need to provide to access your password vault. This would mean if your strong password ever got breached they should not be able to access your password vault without the key file and vice versa. Keepass is also an offline password manager so should you find yourself without any internet connectivity or a service is down you can still access your passwords. Also with a password manager being offline this means the likelihood of you losing your password vault as part of a breach online is incredibly low. KeepassXC is also open source meaning that you can verify yourself that there is no malicious code going into your password management solution by reading the software’s source code should you wish. Also should the project get abandoned or development halts someone can fork the software and continue to contribute to the application as part of a separate project, after all KeepassXC is a fork of KeepassX when development stalled in 2016. KeepassXC is also excellent value for money as there is no charge for usage. Its also worth noting that if you are an iOS user there are plenty of Keepass compatible password managers in the app store, however as I do not use this on any iOS device I can not comment on the usability of the applications.

Whilst the idea of keeping your passwords offline is great from a security standpoint there are some inconveniences, such as accessing my most up to date password vault on the go. You can achieve similar results to the cloud based password managers with Keepass by storing your vault in a cloud storage solution such as Dropbox, Google Drive, Microsoft OneDrive etc. Now doing this does increase the risk of unauthorized access to your vault but the risk is reduced by using a strong password and a key file to your vault. Under no circumstances should you store the keyfile in the cloud, only store your vault there. Keep the keyfile local on your laptop and devices and transfer it locally using a USB Cable or another solution that does not involve the internet. Its also strongly encouraged that you keep this backed up somewhere safe. Data corruption can happen and it can be hard work regaining access to all your accounts.

Now to begin on changing all your passwords. I would start off with all the accounts that could impact your life should unauthorized access happen such as internet banking, email, social media etc. There is no question that this is a tedious task and whilst its strongly encouraged to change all of your passwords right away, it may also not be feasible. Get the critical ones done first and then just change the rest when you can. I also strongly advise whilst changing your password that you enable two factor authentication where you can for that extra bit of security. I hope to write a post on this subject in the near future.

Now when the next breach occurs no matter how big or small you’re prepared. You will just need to change that one exposed password instead of every password you have. This one initial effort of changing all your passwords has now paid off saving you time, effort and stress.

Update on 9th August 2025: A small update to this blog post was made to refresh the commercial offerings and correct some spelling mistakes. The majority of the content has not changed since the original blog post on 28th March 2021.

Sam Tripp

Creating and Hosting a Website with Hugo

What is Hugo

Why I Like Hugo

How to use Hugo

Hosting your website

Automating website deployment

Fixing SMLIGHT SLZB-06M Zigbee Coordinator for Zigbee2MQTT

AI Model Wars: o1-mini vs gpt-4o-mini

How are we going to test.

Quality of Response

What are 5 creative things I could do with my kids’ art? I don’t want to throw them away, but it’s also so much clutter.

Show me a code snippet of a website’s sticky header in CSS and JavaScript.

1. HTML Structure

2. CSS Styling (styles.css)

Using CSS position: sticky

Explanation:

3. JavaScript Enhancement (script.js)

Explanation:

4. Final Result

Demo

Browser Support

Alternative Approach: Using position: fixed

HTML Structure

CSS (styles.css)

JavaScript (script.js)

Explanation

Tell me a random fun fact about the Roman Empire.

Cost

Conclusion

Noteworthy Talks from Ubuntu Summit 2024

No, Open Source Didn’t Destroy My Creative Agency - Ryan Gorley

Servo: Building a Browser Rendering Engine in Rust - Rakhi Sharma

Engineering COSMIC DE: A Vision Realized - Carl Richell, Victoria Brekenfeld

Master Advanced Anti-Ban & Web Scraping Techniques - Fabien Vauchelles

Open Platform for Enterprise AI - Christian Holsing

ROCm for AMD GPUs on Ubuntu - Cordell Bloor

Harnessing HTCondor: How DreamWorks Animation Orchestrates Massive Workloads for Feature Films - Mark Jackels

Framework Lightning Talk - Nirav Patel

Creating a subscription-free ChatGPT Plus alternative

How did I do this

Sign up to OpenAI and generate an API Key

Set up Open WebUI

Start prompting

How does it compare

Cost

Convenience

Quality of response

HTML

CSS (styles.css)

JavaScript (scripts.js)

Explanation:

Conclusion

3 Weeks island hopping in Thailand

Departing UK side

Landing in Bangkok

Chiang Mai

Koh Samui

Koh Pha-ngan

Koh Tao

Bangkok

Back to the UK

Terraforming my Cloudflare configuration

Building the application

Create Cloudflare API token with sufficiant permissions

Initialise Terraform working directory with Cloudflare module present

Generating the Cloudflare terraform code

Add Cloudflare API key to Github Actions

Conclusion

Migrate from LineageOS for microG to LineageOS with microG

Why use LineageOS

Why use microG

Why did I use LineageOS for microG

Why migrate away from LineageOS for microG

How am I migrating

Prerequisite

Take full nandriod

Backup all applications and their data.

Install latest phone firmware

Install LineageOS Recovery and LineageOS

2. CSS Styling (`styles.css`)

Using CSS `position: sticky`

3. JavaScript Enhancement (`script.js`)

Alternative Approach: Using `position: fixed`