gorciu

gorciu's corner

gorciu

learn it!

uc

so... you want to make a website on neocities? i will try to guide you step by step.

before i'll start, i want you to know some things. it will be quick, i promise.

  • websites on neocities often aren't consistent AND that's normal, because you do not have backend like PHP or new frontend like React with components, so don't worry about that; but if you still want to achieve 99% of consistency, see this section
  • unless you have a backend and on neocities you just don't have it, you can't restrict access to certain parts of your website. even doing secret html file will not protect you as it will display in built-in Neocities update log.
  • you can write for example in vim/notepad, but code editor is always better - i use vsc

your website is written in XML-like language called HTML. there are a lot of courses online, but mine will try to as much as possible tailored to Neocities.

you have to start with basic structure, which you can copy:

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
    
</body>
</html>

here's a quick explanation by lines (skip)

  • the first line tells your browser that it views a HTML file. browsers often switch to the "legacy mode" (whatever it means) if the type header is pointing to HTML and there is no doctype. (don't worry about Content-Type header, Neocities handles this for you)
  • within the html tag (you will see what it is in the next line's explanation) you should provide the code of language you're using. if you donn't do that, you may mess up translation services.
  • then you have the beggining of head section. there are closable tags (like head) and unclosable (like img). with closable tags you can provide the elements and text inside; with unclosable you won't be able to do it - like with line breaks or images. head is one of the closable tags.
  • with meta tags you set properties for you website like seo description, embed title and more. meta tags are like metadata in mp3. you can also specify charset. if you don't want to break other languages' characters just set it always to utf 8.
  • inside title tag you can set a title for seo and a title of your browser card. you can also hide here small informations for desktop users, because mobile users just can't see it that easily.
  • then you have the body tag - which indicates elements that are visible on the user's screen and the end of html tag which should end your html file.

always make sure this structure is present - you can mess up other languages, translations in the user browser, site title and switch to "legacy mode" in firefox whatever this means.

you can write text like this:

<p>your text</p>

you should use p tag (paragraph) for every line. if you need to add additional line break you have to insert unclosable br tag (break), outside the paragraph if possible. so this breaks a line:

<br>

but that's just writing text. what about... adding images? many websites are image-heavy and knowing how to insert an image is mandatory.

warning: store your images in a separate folder and unless you see someone is a Neocities supporter (find how to check it on google) don't hotlink, because it eats someone's bandwitch UNLESS someone gave a visible information that hotlinking is okay. supporter is likely okay because they have an enormus amount of bandwitch and you won't consome it that easily than on non-supporter accounts.

<img alt="alternative text for people to which this image wont load; always insert it, even a blank text does a difference in your code being as standards wanted it to be (this alttext confirms im not good at english)" src="/assets/img.png">

and i need to stop for a while:

  • if your image starts with data: it means your code is messy, go and download that picture, save it and go to next instructions
  • if your image is somewhere you cannot guareentee where by the current position (for example using .. to go back), use / at the start - it will start from your domain/subdomain root
  • if your image is from https:// or http:// it means it's probably from another domain
  • otherwise your image will be relative to the file you're displaying it from (use / because Neocities makes /about.html -> /about and it does not work like that)

that's how links work in html.

so do you want to link to something? you just need to use a tag to make a hyperlink. this is how it looks like:

<a href="https://gorciu.neocities.org">check out the website that made me know html</a>

and yes, you follow the same instructions about urls that you follow with linking images. and i forgot to mention - you can add images inside links. you can even add multiple images and images and a text. it just needs to be displayed to be clickable.

you have the basics of a website. congratulations! now, you have to publish it and then, update regurarly.

make sure you have a valid e-mail. you will need it a lot on Neocities - to apply to a webring you will need, you will need it to make a neocities account and you will need it for the guestbook. believe me - you will be checking your mail more times than ever before.

then make an account on neocities - that's easy. just go to neocities.org

your website probably is not consistent. there are three ways to do it.

number 1:

this method will require your viewiers to have JS enabled

  • use everywhere the same CSS file
  • do HTML code injecting

you can achieve the last by creating for example components/navbar.html, components/footer.html and one JS file that will be included in every single website (you should also include one CSS file).

that's what you need to paste in JS file

if (document.readyState == 'loading') {
    const YOUR_FIRST_COMPONENT = '/components/navbar.html';
    // ^ change it to file you have to insert before the site content
    const YOUR_LAST_COMPONENT = '/components/footer.html';
    // ^ change it to file you have to insert after the site content

    let fc;
    let lc;
    (async function () {
        document.body.insertAdjacentHTML('afterbegin', await (await fetch(YOUR_FIRST_COMPONENT)).text());
        document.body.insertAdjacentHTML('beforeend', await (await fetch(YOUR_LAST_COMPONENT)).text());
    }) ();
}

this is the code that will add navbar and footer in all of your sites with JS included

number 2:

you will not get url's for every page but it works.

<style>
    .page {
        display: none;
    }
    .page:target {
        display: block;
    }
</style>
<a href="#page1">page1</a>
<a href="#page2">page2</a>
<div class="page" id="page1">page 1</div>
<div class="page" id="page2">page 2</div>

number 3: (advanced, used by me)

you can create your own site generator or use something like 11ty. i won't show you how to do it since this tutorial would have 30 pages. but the effect is insane.