site-inator

this is a silly webpage/websites generator i made mostly to help me make this website. its goals are:

be as simple as possible: very little code, very little functionality, no more, no less than what i need
no hidden secrets: it's easy to see where the pieces of the generated code come from
generate html ahead-of-time: no on-the-fly generation, cgi, or special server software, all the content is generated ahead of time, and can be served by any generic http server
and most importantly, have a good user experience for me: i mostly made this tool to suite my purpose, while i'm happy if others want to use it or contribute code, i don't want for it to become harder to make my dead simple website with it!

making a website using it!

if you want to make your own website using this tool, i recommend starting by learning how to write html pages. for this, you can check out one of the many tutorials about this online, like the mdn html introduction. once you're familiar with html, come back to this page!

step zero: installing the tool

you can find the source code for it at yukijoou/site-inator. i'll assume you know how to use git and can figure out how to download the file from there. if you don't, hit up your local ccomputer nerd on fedi, or me, and ask them, they'll know how to help you!
once you have the tool installed, run it in the example/ folder to check everything works. this should make a public/ folder with 2 html files.

if you want to start experimenting with how the tool works, editing the example is a good place to start!

step one: create the folder structure

you'll need to structure your site in a specific way for site-inator to know what to do with all your files.

check out the example if you're unsure of what goes in which folder/file!

the template/ folder

in this folder, you need to create two files:

header.html
this will be your website's header. in this file, you should not only specify the <head> tag, but also part of the <body> that you want to keep consistant between pages (like, for example, your site's logo, or a bar with buttons to navigate around your website!)
footer.html
this works the same way the header file does, but for the bottom of your web page. you should add your copyright notice, or links to your social networks there! also, don't forget to close your <body> and <html> tags in there

those file will wrap around any other html file you use for your website! speaking of other html files...

the src/ folder

this folder will contain all the html source files for your website. any html file you put in here will be wrapped in the header and footer defined earlier. non-html files will (mostly, more on that later!) be ignored.

the file structure inside this folder will be replicated in your final website, so if you create the file foo/bar.html, it'll correspond to the file /foo/bar.html on your final website, except it'll also have the header and footer surrounding it!

the static/ folder

this is the simplest one of the bunch: put file in, and they'll just be copied to your final website, exactly as you put them. no header/footer add-on, just the raw file.
this is where you put in your style.css, or your images and other assets!

you don't have to create a static/ folder! if you don't, site-inator will just ignore it

step two: configuration files

configuration files mostly allow you to configure a page's title for now, but will be able to do more in the future!
there is a global configuration file you're required to create, and you can optionally create one for each of your html file in src/ if you want to!

the main config file is located at the root, so next to the src/ and template/ folders. it should be named site-config, and contain the following:

#!/bin/bash
TITLE="<your title goes here!>"

this 'title' isn't used by default, but whatever you set the title to will replace any occurence of [ title ] in the source or template html files!
on this website, i use it in the header to set the value of the <head> tag in the header, but you can use it in any place you want, or multiple times!

this title can then be overriden on a page-by-page basis by creating a page-specific config file. you can do so by making a file with the same name as your page, but with .config appended to the end.
so, for example, if i want to change the title of the page src/foo/bar.html, i would create a file named src/foo/bar.html.config. this file should contain the exact same thing as the global config file, except it will only be used for that one page!

step three: generating and publishing your site!

you can now just run site-inator at the root of your website (in the folder where you have your template/ and src/ folders), and it will generate a public/ folder with all your generated website code!
you can now test your website with something like python -m http.server, and copy it to wherever you need to have it shown to the internet!

i hope this tool will be useful to some people! if you have any question or concern, feel free to reach out to me, my contact info is on the main page of this website!