Skip to main content

🔮 Beyond Handwritten HTML & CSS

Potential Growing Pains

While creating websites by creating HTML and CSS files by hand can be fun, educational, and sufficient for many use cases, there are certain situations where using this method can result in an excessive amount of tedious copy-pasting.

Here are some situations you may run into that may suggest your site is outgrowing the handcrafted HTML/CSS medium:

  • Your site has a lot of pages (a rough number would be over 20), and you want them to all have a consistent layout. If you have a handwritten site with that many pages, and you want to update the layout on all your pages, you will probably either need to do a lot of copying-and-pasting or use some delicate find-and-replace wizardry.
  • You have a lot of items of content (portfolio projects, blog posts, etc.) and want to be able to generate pages with a certain number of items for page.

There are many website building tools out there — so many, in fact, that trying to find or pick one can be extremely overwhelming. However, I'd like to focus SSGs as a type of tool that you might want to look into if you've already started your site and run into the above limitations.

Static Site Generators

One type of tool that seems like a natural progression from plain HTML/CSS is a Static Site Generator, or SSG. These are pieces of software that take in source data from some files (formats can vary), and output a static website (usually simply a bunch of HTML and CSS files). When you want to update your site, you would usually update the source data, and then run the SSG to generate a new version of your site. You can then upload your site to a static web host in the exact same way you would with a handcrafted site.

The most simple version of an SSG would be a script that takes the following pieces of information and combines them together into an HTML file for each page:

  • The top part of your HTML file, including the entire <head> section, the beginning of the <body> section, and any header content that you want to appear at the top of every page
  • The middle part of your HTML file — this is the part that you'd want to be unique to the page
  • The bottom part of the HTML file, including any footer content you want to appear at the bottom of every page, and the closing tags for </body> and </html>

If you enjoy coding your own tools, it can be a fun project to roll your own static site generator. If you want to use an existing tool, see below for a list of SSGs that you can check out.

Even if your site may outgrow plain HTML/CSS, or you plan to use an SSG for your site, it can be useful to create a few pages by hand anyway, so that you can experiment with the design and layout for your site. This is called prototyping. Then, once you are ready to implement your site using an SSG or similar tool, you'll already have much of the code for your template.

Additionally, basic knowledge of CSS and HTML will go a long way in helping you build a site with many SSGs.

List of SSGs & Site-Builder Resources

Back to top