Hi All!

The end goal here is to print QR code Christmas present tags that when scanned direct the person to a very simple page that just displays one image (per page, one page for each person). Before Christmas Eve, the image will be something generic, but on Christmas morning it will be the appropriate person’s name (I will swap the image on Christmas Eve, no need for fancy date recognition or anything).

I am sure this is a very simple job, but I am clearly not searching for the appropriate key words/tricky phrases to make my search results yield what I need. Just looking for instructions for how to create and self-host this, it only needs to be accessible on my local network…super simple.

Can anyone direct me to a guide or guides that will give me an idea of not just how to setup apache, mariaDB, etc, but then what to do to actually display something on the page?

Thanks!

EDIT: If there is a simpler non-self hosted option, I am all ears, but I don’t want to buy a domain, use WIX (or something similar), etc.

  • ChaoticNeutralCzech@feddit.deEnglish
    1·
    1 year ago

    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?