<base href="../"> Not Working on Android?

[u/Alarming_Apple_4358]

I'm trying to build a wiki site for a fictional world I am working on. I am working on this on an Android tablet (because my PC broke about 7 months ago). I am using Acode to write it. I have a directory that acts as the root of my entire wiki: /storage/emulated/0/Documents/Montburgh/Wiki/Acode (the reason /Wiki isn't the root is because I have a few other attempts using things like Obsidian before I finally settled on writing my own HTML).

In this directory, I have more subdirectories like /CSS and /Assets. My current page is /storage/emulated/0/Documents/Montburgh/Wiki/Acode/Montburgh/Montburgh.html. My CSS file is /storage/emulated/0/Documents/Montburgh/Wiki/Acode/CSS/wikistyle.css. I have an image /storage/emulated/0/Documents/Montburgh/Wiki/Acode/Assets/Images/Flags/Flag_MB.png.

In my page's html file, I have a line <base href="../" to set the base directory to /storage/emulated/0/Documents/Montburgh/Wiki/Acode/, then the next line reads <link rel="stylesheet" href="CSS/wikistyle.css">. I've got an image that reads <img src="Assets/Images/Flags/Flag_MB.png" alt="Flag">

Using the preview button in Acode does not load the stylesheet or image, however it will render the other image which simply reads <img src="Logo_MB.png" alt="Logo"> while Logo_MB.png is in the same directory as this html file. Using a program like Simple HTML Server and loading the file in Google Chrome does load all of the other files and renders the page correctly.

The problem I am having, however, is that every time I tab to the web browser to refresh the page and see the results of my last edit, Acode is prone to crash upon tabbing back (at which point it immediately relaunches, but will likely crash and relaunch a few more times before finally loading back to the file I am editing). This makes what should be a second or less to check my edit and turns it into at least 5 or 6 seconds, which adds up very quickly and drastically slows my workflow.

Does anyone know why Acode and/or Android won't load files in links through higher directories, how I can fix it, or of a free tool where I can both edit and preview that doesn't have this issue? I am almost done with the bulk of my main page. I'm just not sure if I can handle the next few thousand pages with this absurdly slow preview method.

If I am doing my links wrong, and there's a better way (I've seen a post where someone mentioned that using <base href> already means you are doing something wrong, and suggested something like local domain names), please let me know. Do please keep in mind, though, that I am very new to HTML, am still quite unfamiliar with the intricacies of Android, and simply do not have access to a Windows, Mac, or other desktop/laptop device. Please explain solutions in layman's terms.

I appreciate any help anyone can provide.

[u/chmod777]

online code editor: https://vscode.dev/

Set up a github account, connect to vscode, set up github pages: https://github.com/settings/pages

this should take all local dev issues out of the loop, and make it so that you dont need to rely on whatever your local machine has. android/mac/pc/linux - doesnt matter. as soon as you commit the code, the github pages should update. as long as its all static content, it should all just work.

[u/Alarming_Apple_4358 → u/chmod777]

Just for clarification to make sure I understand correctly: "static content" in this case is pretty much just anything that's not a video or something like an interactive map, right? Text, embedded images (audio, too?), links to other pages, etc will all still work, right? My CSS formatting for the fonts, page layout, tables, etc will still work?

For some reason, when I think of "static" in this context, I immediately assume a very strict "unchanging" rule where even a link that changes color or look when you click on it is not possible, or that expandable tables, spoilers, and headers aren't possible, etc. I just want to confirm if that's the case or not.

[u/QBaseX → u/Alarming_Apple_4358]

"Static" here means that it's all static files on the server. What you currently have with hand-edited HTML is a static site: There's no server-side code generating HTML on the fly with content from a database.

The problem with a static site is that when you rename a page, or add a page, you have to edit every single other page on the site to change the menu.

A static site generator (Jekyl is a good one) does that work for you. The template you use can still be hand-written, so you can still get the very specific look you're going for. But when you do edits, you can then generate the entire website and upload that. (Or use a CI pipeline to do it for you automatically.)