// john.squibb

Electronics | Music | Code

HomeAboutElectronics ProjectsMy MusicCode Projects


Resources for Building Static Websites

Here are some approaches I use to produce the super simple static HTML website you are currently viewing.

There's a plethora of robust platforms available for generating static websites and blogs using fancy templates. If your project requires regularly posting new content, i.e. blogging, I'd recommend checking something like Hugo out.

Personally, I just like a good Markdown editor and a simple PHP script to generate my static content. My infrequent posts don't need features like tagging, summaries, and pagination, so tools made for that purpose just get in my way.

Choosing a Markdown Editor

The beauty of Markdown is in its simplicity, and any text editor will do the job.

I like an editor with a visual rendering component and some export options (i.e. HTML).

MarkdownPad 2 is my current favorite.

What I like about it:

Hosting on AWS S3

You don't need a k8s stack and bunch of boaty whales to serve static HTML pages. All you need is a publicly accessible hard drive, and some basic organizational skills. S3 buckets are robust, scalable, affordable solutions for this purpose.

AWS provides an Implementation Guide to walk you through the process of setting everything up. If you use Google Domains as your registrar, check out this article for a great step-by-step guide to setting up your domain to work with S3.

Favicon

Favicons are great for bookmarks and establishing brand identity. I don't care about that, so I use a completely transparent icon to silence the 404 errors generated by browsers looking for a favicon.ico. You can grab one here, or just steal mine (Right-click, Save link as...).

Hacking Templates

Exporting HTML and uploading it directly to S3 will work, but there are some limitations I like to work around.

Chiefly, is the ability to reuse universal elements like headers, footers, and other reusable components like navigation. This won't be a problem for a single page application, but as the number of static pages grows, so does the risk of templates getting out of sync.

To solve this problem, I use a base template and isolate universal items into their own HTML docs. The basic hierarchy looks like:

+---html
|       error.html
|       index.html
|
+---markdown
|       error.md
|       index.md
|
+---public
|   |   error.html
|   |   favicon.ico
|   |   index.html
|   |
|   \---css
|           theme.css
|
\---template
    \---layout
            base.html
            footer.html
            header.html

Using a bit of PHP, I can stitch these together on my local machine, and upload the generated templates from public/ to S3. This approach is a simplified version of what the more robust platforms like Hugo are doing. Check out my Static Website Generator project over on GitHub if you're looking for this kind of lightweight approach to generating static web pages with some reusable elements.


© 2020 john.squibb | statically generated | Privacy Policy | Cookie Policy