getup8

Splash Page with Cover Image

2025-05-11T00:00:00-07:00

This is part 2 of a series exploring how to get a simple splash page up and running.

This post will walk through the HTML and CSS needed to create a simple splash page with a background image.

The Template

Let's start off with a bare-bones HTML template.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Splash Page</title>
  </head>
  <body>
    Coming soon...
  </body>
</html>

Example

The Logo

Next, let's add a background color and a logo that stays centered both vertically and horizontally.

Using flexbox, this is easily done with a few lines of CSS. The gist of it is below.

.splash-container {
  background-color: darkcyan;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Example

The Background Image

The last step is to swap in an image for the background. We'll pick a fitting photo from the ubiquitous Unsplash.

Taking what we have so far, we just need to add a bit more CSS.

.splash-container {
  /* Have the image take up the full viewport */
  height: 100vh;
  width: 100vw;
  background-image: url("images/splash-bg.jpg");
  /* Scale image to cover entire container, preserving aspect ratio */
  background-size: cover;
  /* Center the image */
  background-position: center center;
  background-repeat: no-repeat;
  /* ... everything from above ... */
}

And that's it. This used to be much harder but is pretty trivial these days.

See the finished product here with a screenshot below.

The full HTML and CSS for this is below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Splash Page</title>
    <!-- Custom Fonts. Optional. -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet" />
    <style>
      /* Ensure the body takes up the full viewport, and default margins are removed */
      html,
      body {
        height: 100%;
        margin: 0;
      }
      /* Use flexbox to simply center both horizontally and vertically */
      .center {
        background-color: darkcyan;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .splash-container {
        /* Have the image take up the full viewport */
        height: 100vh;
        width: 100vw;
        background-image: url("images/splash-bg.jpg");
        /* Scale image to cover entire container, preserving aspect ratio */
        background-size: cover;
        /* Center the image */
        background-position: center center;
        background-repeat: no-repeat;
        /* Center all content within the container */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
      }

      /* Style the logo */
      .logo {
        color: white;
        /* Add text shadow to make it slightly more readable */
        text-shadow: 1px 1px 4px black;
        margin: 0;
        font-family: Aladin, system-ui, sans-serif;
        font-size: 5rem;
        /* Add padding to shift slightly up and keep it away from margins */
        padding: 50px 20px 150px 20px;
      }
    </style>
  </head>
  <body class="splash-container">
    <h1 class="logo">Splash Co.</h1>
  </body>
</html>

Static Site Hosting

2025-05-10T00:00:00-07:00

My good friend asked me to help him set up a simple splash page for his new business. The requirements were simple: get something up quickly that showed their branding and allowed interested parties to leave an email address to get more information.

I was busy with work and other things at the time, so didn't put too much thought into it and pointed him to use either Wix or Square Space. Those both work, and have a nice GUI to build out a simple site, but there are many cheaper options available these days that are almost as simple to set up, and likely a better end result.

We'll break this down into a few parts:

Hosting the site
Designing a simple splash page with a background image
Setting up a form, which is slightly outside the normal specs of a "static site"

This post will focus on the first, and we'll follow up with the other two. The options we'll go through are:

Github Pages

This is the solution currently used (as of May 2025) for this site. It's fast, easy, and free. However, this solution, like most of the services here, are more technical than something like Square Space, and knowing or being familiar with command line tools like git will certainly help.

Gitlab Pages

Cloudflare Pages

Cloudflare is.. kind of awesome. They offer free static site hosting and have a global CDN as well that not only can help prevent some bot spam, but should give quick page load speeds across the globe.

Similar to other solutions, there is a git integration to deploy the site, but there is also a Direct Upload solution for those less technical.

Vercel

I've never used Vercel, but have heard great things. Upon browsing their docs, however, it seems slightly more complex than some other solutions here. Although, if you're using one of their supported frameworks (see link above), it might be a good fit.

Netlify

Similar to Vercel, also have not used, but have heard much about.

AWS S3 + Cloudfront

The heavyweight in the ring - AWS - offers a few different solutions for hosting. The most basic is setting up a storage bucket in S3 and throwing your files there. However, Cloudfront is needed to then serve the site over a CDN for much better global performance, and to set up SSL.

AWS usually provides a free tier for a limited amount of time (usually up to a year though), and then should be quite cheap even after that.

AWS Amplify

This is Amazon's more plug-and-play, bells and whistles version of the above. It seems similar to Vercel and Netlify, Amazon-style. As above, this is free for up to a year with bandwidth limits before being charged (but again, should be inexpensive).

Amplify can work directly with assets stored in S3, or there is a drag-and-drop solution as well.

The Verdict?

To be honest, we're a bit spoiled these days; all of these solutions are great. The "right" one really depends on your requirements, where your code is stored, your technical prowess, and your familiarity with some of the services and tools above.

My recommendation would be to try out Cloudflare Pages first, and move to other options if needed.

A Fresh Start

2025-05-09T00:00:00-07:00

We're restarting the blog!

Not much to say here, just kind of needed this to make sure everything works as intended. This blog is a static site, built using Pelican (Python SSG). It's hosted using Github Pages, with Cloudflare as a proxy.