yukijoou/yukijoou.kemonomimi.gay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

site-inator: Added page about my new project!

Browse source
This commit is contained in:
Yuki Joou 2023-08-16 21:30:14 +02:00
parent 8b6cf1db9b
commit eb547c9b7f
4 changed files with 203 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/index.html
View file

@ -53,6 +53,14 @@
<h1>silly projects</h1>
<p>the things i do at my computer :3</p>
<h2>site-inator</h2>
<p>
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. <br />learn more
<a href="/site-inator.html">over here</a>
</p>
<h2>convertablet</h2>
<p>
it's a dameon to get 2-in-1 laptop/tablet convertible devices to work well

184
src/site-inator.html Normal file
View file

@ -0,0 +1,184 @@
<h1>site-inator</h1>
<p>
this is a silly webpage/websites generator i made mostly to help me make
this website. its goals are:
</p>
<ul>
<li>
<b>be as simple as possible</b>: very little code, very little
functionality, no more, no less than what i need
</li>
<li>
<b>no hidden secrets</b>: it's easy to see where the pieces of the
generated code come from
</li>
<li>
<b>generate html ahead-of-time</b>: 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
</li>
<li>
and most importantly, <b>have a good user experience for me</b>: 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!
</li>
</ul>
<h1>making a website using it!</h1>
<p>
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
<a
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"
>the mdn html introduction</a
>. once you're familiar with html, come back to this page!
</p>
<h2>step zero: installing the tool</h2>
<p>
you can find the source code for it at
<a href="https://git.kemonomimi.gay/yukijoou/site-inator"
>yukijoou/site-inator</a
>. 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! <br />
once you have the tool installed, run it in the <em>example/</em> folder to
check everything works. this should make a <em>public/</em> folder with 2
html files.
</p>
<p class="tip">
if you want to start experimenting with how the tool works, editing the
example is a good place to start!
</p>
<h2>step one: create the folder structure</h2>
<p>
you'll need to structure your site in a specific way for site-inator to know
what to do with all your files.
</p>
<p class="tip">
check out the
<a
href="https://git.kemonomimi.gay/yukijoou/site-inator/src/branch/master/example"
>example</a
>
if you're unsure of what goes in which folder/file!
</p>
<h3>the <em>template/</em> folder</h3>
<p>in this folder, you need to create two files:</p>
<ul>
<li>
<em>header.html</em><br />this will be your website's header. in this
file, you should not only specify the <code>&lt;head&gt;</code> tag, but
also part of the <code>&lt;body&gt;</code> 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!)
</li>
<li>
<em>footer.html</em><br />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 <code>&lt;body&gt;</code> and <code>&lt;html&gt;</code> tags
in there
</li>
</ul>
<p>
those file will wrap around any other html file you use for your website!
speaking of other html files...
</p>
<h3>the <em>src/</em> folder</h3>
<p>
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.
</p>
<p>
the file structure inside this folder will be replicated in your final
website, so if you create the file <em>foo/bar.html</em>, it'll correspond
to the file <em>/foo/bar.html</em> on your final website, except it'll also
have the header and footer surrounding it!
</p>
<h3>the <em>static/</em> folder</h3>
<p>
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.<br />
this is where you put in your <em>style.css</em>, or your images and other
assets!
</p>
<p class="tip">
you don't have to create a <em>static/</em> folder! if you don't,
site-inator will just ignore it
</p>
<h2>step two: configuration files</h2>
<p>
configuration files mostly allow you to configure a page's title for now,
but will be able to do more in the future!<br />
there is a global configuration file you're required to create, and you can
optionally create one for each of your html file in <em>src/</em> if you
want to!
</p>
<p>
the main config file is located at the root, so next to the
<em>src/</em> and <em>template/</em> folders. it should be named
<em>site-config</em>, and contain the following:
</p>
<pre>
#!/bin/bash
TITLE="&lt;your title goes here!&gt;"
</pre>
<p>
this 'title' isn't used by default, but whatever you set the title to will
replace any occurence of <code>&lsqb; title &rsqb;</code> in the source or
template html files!<br />
on this website, i use it in the header to set the value of the
<code>&lt;head&gt;</code> tag in the header, but you can use it in any place
you want, or multiple times!
</p>
<p>
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 <em>.config</em> appended to the end.<br />
so, for example, if i want to change the title of the page
<em>src/foo/bar.html</em>, i would create a file named
<em>src/foo/bar.html.config</em>. this file should contain the exact same
thing as the global config file, except it will only be used for that one
page!
</p>
<h3>step three: generating and publishing your site!</h3>
<p>
you can now just run <code>site-inator</code> at the root of your website
(in the folder where you have your <em>template/</em> and
<em>src/</em> folders), and it will generate a <em>public/</em> folder with
all your generated website code!<br />
you can now test your website with something like
<code>python -m http.server</code>, and copy it to wherever you need to have
it shown to the internet!
</p>
<hr />
<p>
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!
</p>

2
src/site-inator.html.config Normal file
View file

@ -0,0 +1,2 @@
#!/bin/bash
TITLE="site-inator: silly site generator - yukijoou"

9
static/style.css
View file

@ -90,3 +90,12 @@ footer {
#site-navigation li {
padding: 0 1em;
}
.tip {
font-style: italic;
}
.tip::before {
content: "TIP: ";
font-style: normal;
}