sarahfrench / wedding-website

Instead of spending £££ on Squarespace etc, I'm hosting my wedding website in GitHub Pages 😂

Wedding Website - Status = Hitched! 📨

If you're reading this- hello! I didn't want to spend money on Squarespace/Wix/etc to make a website for my wedding guests, so here it is deployed on GitHub Pages.

The man I'm marrying is called Hugo, and the framework used to make the site is also called Hugo, ain't that fun.

Inspiration

I took heavy inspiration from this Wix template. I copied the UI (parallax, nav positioning) and made my own version of the round header image using Affinity Designer using a colour palette I found.

No HTML/CSS code was copied from that template- I wrote everything here (that'll be apparent when you see the mess that is my CSS).

Tools

I used Hugo to build the site even though it's just a single page because

1. It means I can edit the HTML in partials and have easier to understand commits
2. By generating the HTML from config and markdown files I can let non-devs, i.e. my fiance, edit the sites content easily without needing to set up a CMS for a single page of content.

I wish I used SCSS but I've already started making the CSS and I promised myself that I'd not get caught up in unnecessary bells and whistles at the expense of not making the website quickly.

Deployment

This repo is deployed using GitHub Actions free tier and the instructions in this guide.

The GitHub Action runs the hugo --minify command to generate the static pages of the site, and then it commit them to the root directory in the gh_pages branch. This branch (& the root dir) is the source for the GitHub Pages deployment.

Tutorials/Resources Used

• W3 Schools - How TO - Parallax Scrolling
• Animated Hamburger Menu Tutorial - CSS Effects