diff --git a/src/index.html b/src/index.html index 7bc5c21..57ac2c6 100644 --- a/src/index.html +++ b/src/index.html @@ -53,6 +53,14 @@
the things i do at my computer :3
+
+ this is a dead simple HTML pages generator that makes making dead simple
+ websites easy! it's written in bash, so really easy to run on all sorts of
+ systems, and fairly simple to use.
learn more
+ over here
+
it's a dameon to get 2-in-1 laptop/tablet convertible devices to work well diff --git a/src/site-inator.html b/src/site-inator.html new file mode 100644 index 0000000..a7f07a8 --- /dev/null +++ b/src/site-inator.html @@ -0,0 +1,184 @@ +
+ this is a silly webpage/websites generator i made mostly to help me make + this website. its goals are: +
+ ++ 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! +
+ +
+ 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! +
+ ++ 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! +
+ +in this folder, you need to create two files:
+<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!)
+ <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... +
+ ++ 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! +
+ +
+ 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 +
+ +
+ 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!
+
+ 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! +
diff --git a/src/site-inator.html.config b/src/site-inator.html.config new file mode 100644 index 0000000..6e3378a --- /dev/null +++ b/src/site-inator.html.config @@ -0,0 +1,2 @@ +#!/bin/bash +TITLE="site-inator: silly site generator - yukijoou" diff --git a/static/style.css b/static/style.css index 4a8afd3..c5b90eb 100644 --- a/static/style.css +++ b/static/style.css @@ -90,3 +90,12 @@ footer { #site-navigation li { padding: 0 1em; } + +.tip { + font-style: italic; +} + +.tip::before { + content: "TIP: "; + font-style: normal; +}