Me & My Bad Blog

Simple webpage & CMS using Google Docs

Overview

My 7 year old expressed interest in having his own web page, and I wanted a solution that he could update using his heavily secured school iPad.

The result was https://brooks.cool

Steps

  • Create a Google Doc using kid’s Google account https://doc.new
  • If you’d like some level of oversight:
    • Share the document to yourself parent as Editor (File > Share > Share with Others)
    • Set up notifications to alert you of changes
  • Publish the document as iframe (File > Share > Publish to Web)
    • Click Embed and copy the iframe HTML.
  • Create a new Github Pages static page.
  • Edit index.html, replacing the iframe with the one you copied from Google Docs.
<html>

<head>
	<title>Brooks Dot Cool</title>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		iframe {
			max-width: 468pt;
			margin: 0 auto;
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
		}
	</style>
</head>

<body>
	<!--- Replace the line below //-->
	<iframe width="100%"
		src="https://docs.google.com/document/d/e/2PACX-1vSByy36Nn1OeX99y-XJ2atLcb90ktoLwSW31gL_zXC9VwgvC0z6FQxcJdh6aZQOMw8x5vyByDfWPjCo/pub?embedded=true"></iframe>
</body>

</html>

This project is maintained by meandmybadself