A Basic Site Template

This post is over a year old. The information here may be out of date, and may not reflect my current thoughts or opinions.

I have two jobs, one of them is as a cybersecurity TA. One of the projects we have the students do, is to deploy a basic website in an Azure container. While they’re working on there site, we discuss the benefits of a personal site, and why they should have at least a basic one. The students can keep their site up if they want¹, but Azure is pricey. So, I had an idea.

The project gives them a starting template for their site². The students are free to deviate from that template, but they start out with one. My thought was, with how much we say that they should have their own site. And with how much Azure can cost. Why not make a basic template for use outside of Azure³.

So I made Basic Site Template, it’s exactly what it sounds like. My goal was to have an easy to understand template, that doesn’t look like crap when rendered. The template is only 39 lines, and has clear labels of what goes where.

Template index.html

<!DOCTYPE html>
<html lang="en-us" dir="ltr">
	<head>
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
	</head>
	<title>SITE TITLE</title>
	<body>
		<header>
			<h1>SITE TITLE</h1>
			<nav>
				<ul>
					<li>
						<a href='LINK'>LINK 1</a>
					</li>
					<li>
						<a href='LINK'>LINK 2</a>
					</li>
				</ul>
			</nav>
		</header>
		<main>
			<center>
			<img src='/pics/FILENAME' width='256' height='256'/> <br>
			
			<p>ABOUT YOU</p>
			
			<p><a class='button' href='mailto:YOUR EMAIL'>Contact Me!</a></p>
			
			</center>
		</main>
		<footer>
			<p>Copyright NAME 2024
				<br>
			Site made with <a href='https://simplecss.org'>Simple.CSS</a>
			</p>
		</footer>
	</body>
</html>

I’ve learned from my students, that examples go a long way. Not only did I put examples in the readme instructions, I also spun up a simple demo site. The demo site is hosted out of the demo branch, so its index file is easily viewable⁴.

I’m hoping this will help a few students get a basic landing page up. I even dropped a link to the GitHub pages docs for free hosting. I might follow this post up in a few semesters with how’s it’s gone.

You can find the GitHub repo here

After grading, the student has to take up the hosting costs. ↩︎
The project is a mixture is them writing their own site, and deploying it. ↩︎
They can rip the index file out of the container if they want, however they’d also have to rip out the CSS file. ↩︎
I put a link to it in the readme, I know how my students can be. ↩︎