Documentation | Hostium

Learn how to use Hostium.

  • Created: 28 April, 2024

If you have any questions that are beyond the scope of this Documentation, please feel free to write me a message via Telegram.

Signing up

Follow the steps below to setup your Account:

  1. Visit the Signup Page
  2. Fill in all Fields like this:
  1. In the first field enter your full name. For Example: Mark winson

    2. image

  2. Here enter any Username you want. But make sure to remember it for later.

    3. image

  3. In this Field, enter your E-mail Adress.

    4. image

  4. This Step is very important. Choose a password you can remember well.

    5. image
  5. In this field, you are promted to enter your Birthdate. This is manditory since Hostium needs to comply with the COOPA Regulations. It's to check if your Age is 13+.

    6. image

  6. Here, enter your Telegram Username. It's important for the Host Process later.

    7. image

  7. Enter a word you remember well, so it can be used for password resetting.

    8. image

  8. Specify what your website will be about.

    9. image

  9. In this last Field, enter the Reason why you are using Hostium or overall Free Hosts.

    10. image

  10. Make sure to check the reCAPTCHA box.

    11. image

  11. And to accept the Rules too.

    12. image

Logging in

To login, follow these steps:

  1. Visit the Github Login Page
    • Press on "Sign in with Github"

      • image

    • You were now redirected to the Github oAuth Page. Here press "Authorize"

      • image

    • After succesfull Authorization, you are now redirected to this Screen.

      • image

Hostium x Github

The Github Connection is essential for Hostium to work. It allows Repository Management directly from the Hostium Panel.
Please note that it's strictly prohibited to edit your Github Repository directly from the official Github App/Website as stated in the Terms of Service.
If you do attempt to edit any files directly on Github, you will not be allowed to host your website on Hostium anymore, until you contact me on Telegram to fix your issue.

Create a Website

If this is your first time using Hostium, you must create a new website. You are not allowed to load a Repository (Website) that was not created by Hostium.
Follow these Steps to create your website

  1. Visit the create and load websites Page.
    2. image
  2. Here, press on "Create Website"

  3. In the following Dialog, enter a name for your website. (This is just a nick name for your website. It doesn't affect your subdomain.)


    4. image
  4. Now also choose a Description. This can be as short as one word or as long as 500 words.

    5. image
  5. After succesfull Website creation, the next Step is loading the websites, which brings us to the next part.

Load Websites

After successfull Website creation, you can now press on the "Load Websites" button.
Here all your Repositories will be shown, but make sure to only select those Repositories that were created directly on Hostium through the "Create Website" Button.
Else, you will have problems later..


After selecting your Repository (Website), you will now be redirected to the Management Panel.

Website Editing

The Management Panel is big. We'll first concentrate on Website Editing overall.


A quick look on the Management Website Editing Panel:

image

Add File

Here you'll find an Instruction for adding Files on Hostium



To add a file, navigate to the Hostium Management Panel

Here, press on Add file.

image
You will be redirected to the "Add File" Page.
In the input, you can enter a filename and the content of the file.



⚠️ You can only add html, css and js files.
If you want to add a file in a specific folder, add the foldername before the actual filename.

For example, if you want to add a file named styles.css in the folder "button", you would need to enter this in the "Add File" Input: "button/styles.css"
And then in the other field, the actual content.

To simplify adding files in folders, you can press on "Show Folders" to display all folders and subfolders of your website.

image


Add Folder

Here you'll find an Instruction for adding Folders on Hostium



To add a Folder, navigate to the Hostium Management Panel

Here, press on Add File.

image

You will be redirected to the "Add Folder" Page.
In the input, you need to enter a foldername, add "/" and then directly the file you want in your Folder. In the bottom input, enter the content of the file in the folder.

image

⚠️ You can only add html, css and js files.
If you want to add a Folder in a specific folder, add the foldername before the new nested folder.

Create Folder Example:
If you want to create a folder named styles and a styles.css directly in it, you would need to enter this in the "Add File/Folder" Input: "styles/styles.css".
And then in the other field, the actual content of the file in the newly created folder.

image

To simplify adding nested folders, you can press on "Show Folders" to display all folders and subfolders of your website.

Delete Files


How to delete a file Deleting files is simple. Head to the Management Panel

There, press on the "Delete" Button.

image

In the next screen, you will see all your files and folders.

image

Now, just press on the delete button right next to the filename.

image

⚠️ Beware: If a deletion of a file causes the parent folder to be empty, the parent folder itself gets deleted.

Example:

Directory structure:
📁 Root folder:
    📁 styles [folder]
      📄 styles.css [File]

For Example, if you would decide to delete the file named "styles.css", it will cause the parent folder named "styles" to be deleted too. Empty folders are not possible.
Only Root folders can be empty.

Deleting Folders

There are 2 ways. One simple and one time consuming way.

Time consuming way: You could ofcourse just delete all files in the folder and cause the folder to be deleted, but that's the hard and time consuming way.
That's why there is a direct option:

Simple way:

  1. To directly delete the directory, head to the Management Panel
  2. Here press on the "Delete" Button


    3. image

  3. After you get redirected to the Files and Folders section, simply press on the "delete" button next to the directory.


    4. image



⚠️ If a deletion of a folder causes the parent folder to be empty, the parent folder itself gets deleted too.
Example:
Structure:
📁 Root Folder:

    📁 new [folder]

      📁 Styles [Folder]

        📄 styles.css

If one decides to delete the folder named "styles", it would cause the deletion of the parent folder named "new"

Folders can't be empty. Only Root Folders can.

Edit Files

To edit a file, follow the following steps:

  1. Go to the Hostium Management Panel
  2. Press on the "Edit" button.

    3. image

  3. Choose the file you want to edit.

    4. image


  4. Now, you will the filename/filepath in the title and then the content of that file in an input. This is the input, where you can edit the file's content.



  5. Don't forget to press on "save" to officially save your changes.


    6. image


You can also cancel the file editing.

Rename File

Renaming files is easy. First go to the Hostium Management Panel

  1. Here press on "Rename".


    image

    You will get redirected to the Files & Folders Site.
  2. Press on the "Rename" button for the file you want to rename.

    image

    You will be prompted to enter a new name for the file.

    3. image
⚠️ Only .html, .css and .js extensions are allowed.
If you, for example, try to rename sky.css to sky.php, it wont work. You will recieve an error.

image


Contact me for any Requirements and file extention allowances.
The extension should also not be empty.

Minified Css files are allowed.
For example: bootstrap.min.css

The important part is only the extension. The last letters after the last "."

Rename Folder

Introduction
At Hostium, there is no official way to rename a folder. It isn't needed much anyways. After reading this guide, you will surely know how to rename a folder very fast and easy.

Quick Overview
Instead of directly renaming a folder, you will download a ZIP file containing your renamed folder. This is the ZIP file you will need to upload in your preffered directory. At the end, just delete the old directory (folder).

Detailed Steps:

  1. Click on the "Rename" Button next to your Folder Name after you pressed on the "Rename" Button in the Hostium Management Panel

    2. image

  2. Scroll down and enter your preffered new name for your folder.


  3. Click the "Okay" Button

    4. image
Now you will download a ZIP file with your renamed Folder. Examples are in the bottom of this message.

  1. Go to the Hostium Management Panel

    2. image

  2. Click on "Upload" and select ZIP file
    3. image

  3. Select and choose where you want to upload the contents of the ZIP file (normally in the same directory as the original folder)

    4. image

  4. After uploading, you can go back to the Hostium Management Panel and select "Delete"

    5. image

  5. Here you can delete the old folder, to now succesfully replace it with your renamed folder.

    6. image


Example:
1. User wants to rename this folder path:
sky/blue/style.css

The user wants to rename the parent folder called "sky", located in the root folder, to "sky2"

2. In the popup he scrolls down and enters "sky2" and then downloads the generated ZIP file

3. This is how the ZIP file looks from the inside:
sky2/blue/style.css

As you can see, it has the exact same content, except that the folder the user wanted to rename, is now renamed.

4. Now he goes to the Upload ZIP page, accesible from the Hostium Managemt panel and there uploads the ZIP to the root folder (where the original folder was)

5. At the end, he deletes the folder: sky/blue/style.css
Which deletes the whole directory and only keeps: sky2/blue/style.css

So now the folder was succesfully renamed (replaced).

Upload File

To upload your own file, head to the Hostium Management Panel

There, press on the "Upload" Button.

In the following popup, select "Single File"

image

You are now at the "Upload File" Page. Here, select a file from your File Manager and then, eventually select a folder, you want to upload the file to.

image

⚠️ The folder, your file gets uploaded to, is not the one that was opened the latest, but the one you clicked at lastly.

⚠️² If you upload a file with the same name as an exisiting file in that directory, the old file will be replaced by the new file automatically.

⚠️³ Only html, css and js files are allowed. Files like "bootstrap.min.css" are allowed.

Upload Zip File

When you upload a ZIP file, the content gets extracted directly. You can not have a .zip file in any directory, only the content.

To upload your ZIP file, head to the Hostium Management Panel

There, press on the "Upload" Button.

In the following popup, select "ZIP File"

image



You are now at the "Upload ZIP" Page. Here, select a ZIP file from your File Manager and then, eventually select a folder, you want to upload the content of the ZIP to.

image

⚠️ The folder, your ZIP gets uploaded to, is not the one that was opened the latest, but the one you clicked at lastly.

⚠️² If you upload a ZIP file with the same content as an exisiting file in that directory, the old file/-s will be replaced by the new file/-s automatically.

⚠️³ Only html, css and js files in the ZIP file are allowed. Files like "bootstrap.min.css" are allowed.

Backup website

To backup your whole website, follow these steps:

  1. Visit the Hostium Management Panel
  2. Press on "Backup Website"

    3. image

  3. Here press the "Download" Button too.

    4. image

  4. You will now be able to download your whole website in a zip file

Tools

All Tools are:

  1. IP Adress Analyzer
  2. Bandwith Calculator
  3. Website Screenshot Taker
  4. Image Uploader
  5. More coming soon..

In the Following, you will get a small Description about what every Tool does


  1. IP Adress Analyzer: Enter any website URL, to recieve several Information, like: IP Adress, Hostname and Host Location

    image

  2. Bandwith Calculator: Get to know your estimated Bandwith Usage per month by only entering some information about your website.

    image

  3. Website Screenshot Generator: Generate High Quality Screenshots of any website and download them to use them for several purposes.

    image

  4. Image Uploader:Instead of directly hosting your Image, why not upload your Image using the free Image Uplaoder, to then get the Image's URL for embedding and more.

    image

New Tools will be added soon.

Games

All Games are:

  1. Circle Rush
  2. Guess the Number
  3. More coming soon..

In the Following, you will get a small Description about how every Game is played.


  1. Circle Rush: You are a Circle which needs to avoid collisions with any other circles. It especially gets hard at a Score over 100.

    image

  2. Guess the Number: Test your Intuition by guessing the right number. With a maximum tries of 3, you are counted as a person with good Intuition. Can you guess it with your first Try?

    image

New Games will be added soon.

FAQ

A list of frequently asked questions (FAQs).

Hostium's main Goal is to provide free web hosting for the prople that can't afford it or dont want to pay for hosting services, since they for example have a small site. (Hostium accepts large websites too)
It might appear complicated, but in Reality it's very simple. It's the way like it is, since I've tried fixing the bugs for renaming folders, for over 11 hours. I saw no hope and decided to provide an alternative way.
Examples include:
  1. Showcase Websites
  2. Digital Agency websites
  3. Donation Websites
  4. Startups
  5. Portfolio websites
  6. Reciepe websites
  7. Blogs
  8. Advertising Page
  9. Informative websites
  10. Resource Websites (eg. Developer Help)
  11. Your Freelancer Client websites
  12. Simple Games website
  13. And much more.
For now Hostium is well funded to sustain more than enough. In future, ads will be added to the Hostium Panel too. There will also be other practises, because obviously there needs to be a buisiness in place.
Even tho Hotium only allows static websites, you can easily connect your serverside API's from Vercel to your frontend code.
For example for a form that handles submissions on a php serverside, this would be your code in the frontend:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP Form<title/>
</head>
<body>
    <form action="https://yourlink.vercel.app/api/handle-form.php" method="POST">
       <input type="text" name="name" placeholder="Name" required>
       <input type="email" name="email" placeholder="Email" required>
       <button type="submit">Submit!</button>
   </form>
</body>
</html>
For more information research online or ask ChatGPT
You can review Hostium on Google and on Trustpilot

Account Settings

You have these 3 Options


image 

Change Theme (soon):
Modify Hostium's Design with your Prefferences

Change Current Website
Change the website you are editing.

Change Github Account:
Switch your Github Account, to select another Account.

Host & Deploy

The probably most intresting part of this Documentation



Host Website:

If this is your first Time at Hostium, you successfully uploaded your Files via the Management Panel and finally want to host your website here at Hostium, follow this step-by-step guide

  1. Head to the Hostium Management Panel
  2. Here, press on the "Host Website" Button.

    3. image

    This is the Screen you will see if you never hosted a website at Hostium


    image

  3. Enter your Hostium - API Token

    4. To get your unique Hostium API Token, press here

    Message me like this:
    Email: (your email you registered with)
    Password: (your password you used when registrating)

    If you forgot your password, the good rememberable word works too.

    This ensures Security, no abuse and more. Once you have it, you have it forever and don't need to get a new one anymore.

    Beware: If someone has Access to your Hostium API token, your website might be at risk. It won't be deleted, but updated with new Content!

  4. Now enter a domain prefix you want. Enter the value for x:
    x.pages.dev

    5. image

  5. The Connection with Hostium is now established and the Domain name was checked, now proceed.
  6. Your Website is now slowly beeing uploaded and will be available online in ~5 Minutes.


    7. Don't leave the page until you see the Message:

    "Connecting to Hostium's Server"


    image

Now, deploying websites is way easier. Once your website is hosted one time, you can easily deploy it


Deploy Website:

  1. Visit the Management Panel

  2. Press on "Host website"
    3. image

  3. Here, just click on "Update Website"

    4. image

  4. Your website is now going to be uploaded to Hostium and the changes should be visible, depending on your Website Size, in about 3 minutes.

    5. image

If you need more websites, contact me

Minimum Requirements

To use Hostium, there are some minimum Requirements..


Minimum Internet Speed: 50kb/s
Minimum Ram: 1.5GB (2GB recommended)
Minimum Storage: 5MB
Minimum CPU: 1GHz

Changelog

See what's newly added, changed, fixed, improved or updated in the latest versions.

Version 0.9 (01 September, 2024)

  • Updated Toasts instead of Alerts
  • Added Account Settings
  • Added Connection with Hostium's server
  • Started with Homepage Development
  • Finished Docs

Version 0.7 (21 August, 2024)

  • Added New Tool: IP adress Information
  • Added Website backups
  • Implemented Folder functionalities
  • Updated Github Authorization

Version 0.5 (12 August, 2024)

  • Added Github Authorization
  • Added Host Button
  • Added Deploy Button
  • Added Upload File Option
  • Added Upload ZIP Option
  • Updated Stuff to serverside

Version 0.3 (29 July, 2024)

  • Added 2 Minigames
  • Fixed Cors Issues
  • Added Styles

Version 0.1 (23 July, 2024)

First Changelog

  • Added Management Panel
  • Added Tool: Image Uploader
  • Added Tool: Bandwith Calculator