Seeking very simple website template for static site

July 22, 2024 1:06 PM

I would like to create a simple, static website (not a blog) with a total of about eight pages. I'd like it to work well on both desktop computers and mobile devices. More info below the fold.

This will be a simple, informational website that won't be updated often. In my ideal world, the website will have a banner image across the top with the site's name superimposed on the banner. It will have a main column for content, and then a right-hand sidebar for links. I've made a sketch here (forgive my horrible drawing skills).

I already have a hosting plan with DreamHost, and I'm familiar with WordPress. However, I'd much prefer a basic HTML/CSS template. I don't know web design well enough to create a suitable template from scratch, but I could probably edit a pre-existing template if necessary. If no such template exists, I'll settle for a WordPress template.

I've spent quite a bit of time Googling, but I can't find anything appropriate. Most of the templates have all sorts of extra, unnecessary bells & whistles, or feature huge images. I'm really looking for something minimalist that will serve to emphasize the content (mostly text).

posted by alex1965 to Technology (9 answers total)

Best answer: You're looking for a responsive website template. It's going to be hard to find one that looks like your sketch because the design you have there is not likely to be mobile-friendly. It's hard to fit both a text-based side navigation and a text body onto a phone screen and have it be readable. That's why you're much more likely to see a "hamburger menu" or other device that obscures the navigation when you're reading the text itself.

Because responsive designs are so much the norm now, you're unlikely to see the design you've proposed. It looks to my eye like a layout from a time when small screens weren't the norm.

Something like this could easily be tweaked to meet your overall goals, though.
posted by chesty_a_arthur at 1:27 PM on July 22 [1 favorite]

I know you said you've already got Dreamhost and Wordpress, but to be honest for an 8 page site thats rarely updated, it's probably overkill. I would recommend taking a look at github pages which uses Jekyll to power them. It'll either be free or something like $4 a month, depending if you need a paid github account or not. And then hopefully you can find a theme you like for Jekyll; I'd start here: http://jekyllthemes.org/

Another suggestion would be to try and get ChatGPT to build you the html you want. It's a fairly simple layout, ChatGPT should hopefully get you most of the way there especially if you think you're capable of tweaking it once you have the basics.
posted by cgg at 1:55 PM on July 22

This would be easy to build in HTML, and in fact would be a good starter project for learning how.

However, if you just have 8 pages, Wordpress will do it too, with no fuss.
* Write each page as a "blog entry."
* Give each one a separate category. You can use their titles.
* Do the intro page last, so it appears at the top.
* Choose a theme which puts the category widget on the right. Voilà, there's your list of links.
posted by zompist at 2:44 PM on July 22 [1 favorite]

I think I learned about this site via Jessamyn, but I don't recall for sure.

HTML 5 UP!

Free under Creative Commons license.
posted by terrapin at 3:41 PM on July 22 [1 favorite]

A good CSS framework makes this pretty simple. I like Bulma, personally, so here's a minimal example of roughly what you're looking for made with Bulma. You can copy the code out of the 'HTML' pane into a new file, and it should just work. Resize your browser window (or use your browser's responsive/mobile design mode) to see how it works with smaller screens.

One caveat: with the links in a column on the right, they will show up under the main content on mobile by default. It is possible to change that so the column shows on the right in desktop and above in mobile, but it would take some more CSS work.
posted by whatnotever at 8:19 PM on July 22

I use hugo which is IMO
the easiest Markdown/HTML/CSS static site generator. There are a lot of themes to choose from to start with, which you can then edit to be however you'd like. I started with the Bearblog theme and just changed it up (my site). I think the themes like this, this, or this could be easily tweaked to get what you want, but this is just from a glance at the list. There are a lot more.
posted by lianove3 at 9:34 PM on July 22

I've used Google Sites to do this exact kind of thing, for nearly 10 sites now already, over the past 5 years (example, example). If you have a Google account, it's pretty much effortless to set up (start at sites.google.com), and it's free.

Design-wise it's fairly limited (compared with Squarespace or Wordpress etc), but that's also what makes it easy to use. Sites look professional but not amazing, and are 100% responsive. You can use it with a custom domain name.

I'm a competent web designer who can do HTML and CSS from scratch, but I choose Google Sites for things like this because it's "good enough" and makes content management effortless.
posted by snarfois at 4:05 AM on July 23

I manage a page on Wordpress. They have good templates.
posted by theora55 at 10:08 AM on July 23

Response by poster: I was intrigued by Hugo and Jekyll, but their learning curves seemed steeper than I would have liked. I also tried Google Sites, but I couldn't get it to do the simplest thing -- namely, have an image with some text around it.

My biggest problem here is a lack of time. I needed to get the site up and running, and I didn't have the resources to test a lot of different solutions. I'm already familiar with WordPress. I held my nose and ultimately chose WordPress, although I really dislike it.

Thanks go out to everyone for your advice. I might resume my investigations sometime in the future when I'm not so pressed for time.
posted by alex1965 at 3:52 PM on July 29