dotcomboom the bulb is you, the bulb is me


This site's directory tree with AutoSite

AutoSite helps you keep all of your website's pages in the same basic template. Managing a navigation bar, a footer, and even meta/OpenGraph tags across several pages is simple.

Three folders are used to build the site: "in", "includes", and "templates". The in folder holds the pages you want to use in your site. Includes holds other files, like images, stylesheets, and scripts. The files in the in folder are slotted into a template, and the folders merge to create the out folder.

Try it online on!

GitHub Repository



AutoSite can be installed with the command pip install autosite or pip3 install autosite and used anywhere with the command autosite.

Your templates

AutoSite supports using these placeholder tags in your templates:

[#content#] - The page's content.
[#path#] - The relative file path from root.
[#root#] - Use this to point to the site's root folder.

You can also use attributes mentioned below, like [#title#] and [#description#].

Your input pages

Each page can start with a few lines telling AutoSite what attributes the page has that can be slotted into the template. The template attribute also tells AutoSite what template to use for that page. If not present, it will just use the templates/default.html file. You can really use whatever attributes you want in the template, like a cover image for the page, or something for breadcrumbs.

Inputs pages can be HTML or, now, Markdown files. If you use a markdown file for your input page, it will run through the markdown parser and output into an HTML file. AutoSite's attribute comments and syntax is the same for markdown files as in html files.

<!-- attrib title: Your title -->
<!-- attrib description: Your description -->
<!-- attrib template: default -->
<p>Everything under the above lines will replace [#content#] in template.html.</p>
If your input page is Markdown (has the .md extension) you can use both HTML and Markdown *like this*.

Embedding a file from includes/ can be done like this:

<img src="[#root#]goodjob.png" width="128" height="128" />

You may wonder what [#root#] does and why it is necessary. AutoSite puts in the relative path from that file to the root of the site. This can be done so you don't need to use / or absolute paths to find your way to root from whatever page it is, so assets will be loaded correctly wherever the site is, whether locally, on the server root, or in a subdirectory on a server.

Conditional Text

Many sites have a navigation where if you're on a page, that page's name in the navigation is not a link. AutoSite has a feature that lets you replicate this. Consider the following example:

[path!=index.html]<a href="../index.html">[/path!=]

You can also omit the ! symbol and it will only show if it is that page, like this:

    This is the index page.

Conditional text is not limited to just file paths! Nearly any attribute can be used with conditional text.

However, conditional text still has some issues. You can only have one instance of conditional text per line, it is not nestable, and it is not multiline either.

Building your site

Building your site can be done by running the file with a Python 3 interpreter. It will prompt you to press the enter key, then process the files. The finished site will be in the out/ folder. You should test your site thoroughly to make sure links are working before uploading to your server.