Self-Hosted Main

set up a web server (nginx is fine, bit any will do), and have each qr point to a different url in that server, each serving a plain html page with the image you want, quite simple really. dont forget to redirect the appropriate ports.

~~I made a website that displays an image as large as possible. You don’t need most of my code (omit any script) but use one of the imgs and its style. Change its src to your image’s relative or absolute URL.~~

~~If you want to center the image horizontally, that's easy: add display: block; margin: auto into its style. For vertical centering that works across devices, you'd need to put it in a flexbox – I can do that for you in 3 minutes.~~

~~You can host the thing on GitHub by deploying to GitHub Pages like I do. Feel free to just fork the repo, I’ll help.~~

Edit: Finished. Source / Preview. It's so simple it should work perfectly in any browser of the past 10 years, or basically any browser ever if the centering and background color is not important.

Easy, free way to put it online (no selfhosting but high reliability):

1. Download the source of the website as index.html. (It’s public domain.)
2. Create a GitHub repository, say “ChristmasMessage”. Skip readme creation.
3. Upload your first image to the repo. Or any other site that hosts images and gives you direct links.
4. Get direct links to your image(s). If they’re in the GitHub repo, you can just use their filenames, unless they have spaces.
5. Add the image URL/filename to the index.html file as the image’s src.
6. Optionally change the page’s title and background-color from navy to any other: use HTML named colors or hex #rrggbb.
7. Upload the file index.html in the repo, with this source code.
8. Commit changes to main.
9. Go to Settings → Pages and deploy the main branch. Check that your site is now live at yourGithubUsername.github.io/ChristmasMessage/.
10. You can make additional changes in the online editor or by uploading a file of the same name again. They apply within 1-2 minutes. However:
    • Some smartypants relatives can check the repo or its history for the surprise image if you upload it there before the surprise day. So it’s better to only upload it when needed.
    • Browsers use cache so if you replace the image and reload the page, it will not necessarily change. To fetch the image when the page reloads, you MUST change the image’s URL:
      • by pointing to the same image but adding a junk parameter like ?a, or
      • by having uploaded the image to another location.
    • I suggest uploading the surprise image somewhere nobody will find it (like Imgur, which has random image URLs) and then patching index.html with the new URL.
      • Double check both image URLs are embeddable, some websites block that! Best way is a local copy of index.html where you can commit changes without them being visible publicly.

You can use the open source alternative, GitLab, too. But why not load Microsoft’s servers a little more?

If it’s only on your local network, you can achieve this pretty easily with python’s built in http web server. Find a site that transforms urls into QR codes, save them in a directory on your computer, slap some html and css in there to present the QR code images how you want, and create a few simple routes for the corresponding images. Put it all in a index.html file, then open a terminal in that folder and type

python3 -m http.server

Read the docs on that command to specify the address and such. You’ll need that to be consistent for the QR code generation step.