From eb547c9b7faf488d20f23ae449e00c450b0c931a Mon Sep 17 00:00:00 2001 From: Yuki Joou Date: Wed, 16 Aug 2023 21:30:14 +0200 Subject: [PATCH] site-inator: Added page about my new project! --- src/index.html | 8 ++ src/site-inator.html | 184 ++++++++++++++++++++++++++++++++++++ src/site-inator.html.config | 2 + static/style.css | 9 ++ 4 files changed, 203 insertions(+) create mode 100644 src/site-inator.html create mode 100644 src/site-inator.html.config 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 @@

silly projects

the things i do at my computer :3

+

site-inator

+

+ 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 +

+

convertablet

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 @@ +

site-inator

+ +

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

+ + + +

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:

+ + +

+ 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! +

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; +}