Beginners Guide For Hosting Your Stuff On Your Own Site With Neocities.

hello! this is the simplest possible guide to neocities to get you started.
well, it's not actually a guide to neocities, but all websites.
because you write your own code, you can download your website to your own computer and reupload it to any other hosting site.
its all part of the freedom that comes with having a website of your own
the downside? you have to write the html yourself.
which also has upsides. you actually know how websites work, you learn a skill, you have complete freedom to do almost anything
this guide is meant for artists/creators, so you should have no problem with that though.
if you have read this far, i recommend saving this page to your bookmarks now.
i want to make neocities more accessible bcuz i love it and recently mainstream sites have become terrible.
credentials: i have studied web programming, but my english is bad, i have used neocities for 2 years :P

okay, here is all you need to know to start hosting your content on your own website:

get to know the basics:

html is the page where things are actually viewable.
it has a head and a body
the head takes priority over the body, and contains technical instructions for showing the html.
a basic head will have meta charset which tells the browser what unicode/symbols are used. just leave this alone. meta name and content can make your site viewable on any device size.
the title is what appears in the browser tab and you can change this to anything for each page. this is usually a greeting from the webmaster. not important.
webmaster is what you are called as the person who wrote the html and updates the site :P
link for css is very important! the css contains where things are placed, what fonts they are in, and what tags you can use. tags are shorthand for how things should be formatted or what kind of media it is.
you dont need css because html can default to no formatting. this is what i have done on this page.
to keep bots off your page from viewing and downloading the contents, you can upload a robots.txt file to your website folder. other and illegal bots can visit anyway, but this is a formal thing used for any site that doesnt want bots to visit. they have lines in their codes that prevents them for visiting if they find their name in a robots.txt file. its important if you dont want too much traffic on your site. all new neocities sites will have a robots.txt included.

HERE IT IS!!! putting content on your site!

html text is like a normal text but with tags for new lines and stuff. you can use a converter to write your text and not have to convert to code manually. there are ones built into most text programs, but there are also online ones like htmled.it
you can make html pages directly from google docs or word, the downside to this is that sites like google convert to horrible looking code that is difficult to edit directly in with neocities. but its not impossible to just put a single link at the top of your writing to link back to your homepage or something like that.
tags hold the content, the ones you should know are:

<p> which means paragraph. it will put a couple lines between itself and other tags
<br> or <br /> is break: goes to next line
<img src=""> to insert an image! write its name like name.filetype to call on it from your own website folder. OR link to its source by copying image link and inserting all of that if its hosted somewhere else. NB! this is called hyperlinking and it makes website traffic from the place its called from so maybe dont do it for small servers/indie sites that dont want the extra traffic. if its okay with image owner, you can host it yourself too, and link it so clicking on the image takes people to source. heres how to do that:
<a href=""> is a link. just put the destination between the quotation marks. you can make anything a link/clickable. make sure to close it with </a>
<div> means division and is any container type. a container is a placement and stylization of content on your site, and has some border customization usually. it can also autoscale and format your content. containers can be nested within each other like <div id="navbar"><div class="box"> </div closes box></div closes navbar> for a box inside a navbar.
id is a segment of the html page. so you can link to a certain part of the same page if you want to make a table of contents for example. just put it in the tag like so id="segment" and then link to it with <a href="#segment">
<p hidden> will hide contents of that tag from viewing. if you want to disable a line of code you can use <!--- and end it with ---!>

you can add new tags in your css. use recognized tags like flexbox or come up with your own. just name them and define their formatting properties. anything using that tag in the code will try to enforce the properties. this gets complicated quickly so i do not recommend for beginners.
always remember to close a tag with a slash and the same tag again with </tag> or all your html will be contained in the tag or it wont work. same for quotation marks which denote a name.
you can of course not write <> in html, so to do it as I have here, &lt followed by ; which is < and &gt followed by ; which is > closing triangle bracket
followed by ; is a space. html will consider a tag empty and ignore unless you write a space out like this.
the best workflow for neocities is to keep each category of pages on your site in the same folder. then click view while editing code and make sure to refresh that page whenever you save an edit so you can see in real time what your editing does to your page.
to learn all about html code visit the excellent www.w3schools.com/html/

ok so say you want a nice website quickly

if you used tumblr before the forced mobile layout, you probably know how to do this already: you can use a template made by somebody which contains an easy to fill and customize code with a guide. i recommend the ones made by https eggramen.neocities.org who is also an old tumblr head with tumblr-like website layouts nice for blogging and shrines and fandom and lore pages. they do have some quirks though so not entirely easy to use.
to learn how to add any function to yoru site, you can find it on w3schools.com
STEALING! you can go to any website and view its code. right click -> inspect. click the small square on the terminal which lets you browse around on the visual page and click the exact part of the code you want to view. you can also open the code in a new tab for something that looks more like the neocities editor. dont steal code if people say not to or without giving credit if you can. like using anything, ask if a lot of work went into it. if yes, then make sure you dont exploit other peoples work!
you can copy only a part of a websites code. say, you want to display your art in a container like theirs or you want to make music play on their site like them you can find that part in the code, and it might rely on their css, in that case you have to find the css page or on the html where the css is called.
the reason i kept this page simple is so you can inspect it and see how it works rn! you can also download this page and code if you want, i dont mind if you dont credit me either. just spread it far and wide to complete beginners!
and yes, if you write anything in your code, including things you have hidden from showing, other people can read it. its bothersome but you can hide secrets in your code for people to find on purpose this way. nothing in your website is really private, so i recommend having a local folder too. which brings me to...

quirks of neocities

neocities has a feed on your profile which tells everyone seeing your page when an html has been updated and links to view it. even unfinished or unlinked stuff. so there is less privacy. but regardless, people can always view your stuff as long as it is uploaded to your dashboard. let's say you upload an image titled secret.png. if they type yoursite.neocities.org/secret.png anyone can view that.
when you upload a file, neocities will always replace it with the old if they are named the same. so you have to be careful of this if you for example download from discord and every file is named image.png.
folders can only use things from within the folders. for example outside the folder can get "/folder/image.png" but a html inside the folder will only need "/image.png" and will not be able to get "/image.png" from outside the folder.
your browser saves old css and sometimes html code. so if you edit something, it might not show up. you need to delete your loaded files history, maybe often. for firefox this is program-menu->history->remove recent history->temporarily cached files and websites. this may make some sites load slower next time but doesnt delete other data at all. there is also a shortcut on windows: ctrl+shift+del.

limitations

if you want any complicated interaction on your website, for example a chatbox or a like button, you need to use javascript. javascript calls on a server of data to do something. it remembers the amount of likes and changes it for example. it is different to html because html is not changed unless you do it. so .js is responsive.
but you can . the only downside is that they need a neocities account.
i dont think everyone should get a neocities. we have these issues with websites in the first place, because they and need a big companys support to handle the traffic. if everyone got a neocities, the manager would be overwhelmed and have monopoly. find a site that works for you. you dont have to write html from the bottom, but this is useful for multimedia artists. just be critical of what data the site takes, how it treats you and your content, and if it allows you to download your content and host it elsewhere if you need to leave.

customization: the big bonus of own website

websites have almost full customization (not everything is supported by the file formats of html, css and js etc.) which is nice, but can also be overwhelming. start small, and dont edit anything you dont know what does.
the quickest way to make sites is have a css and a html template you are happy with, and just put something different in each html.
how things appear visually should be in a css document for your html which is linked in its head. different html can have different css if you want to change things up.
if you want to use circumstantial formatting, you can in your html document add style="thing:choice;" to any tag. if you for example want a portion of the text in a different font or color.
you can also write css that only works on a single html. before the head, write a <style> segment (and remember to close it with </style>) and then for example to style the body, write body { background-image: url(""); } to give it a background image for example.
css code looks a little different than html. within the <style> segment it will use css code. curly brackets contain the info for the element. there is a certain amount of things that can be customized and you have to use the exact names, and each command must be ended with ;

final advice

no matter what you do, your website will have mistakes. because when different browsers read it, they will expect you to have put in failsafes and customization for them. many webmasters for this reason do not bother designing for mobile, not only because no mobile supports a complicated site without scroll, but because there are many different mobile browsers that mess up viewing your site in different ways. if you have not tested your site for phones, it is polite to write "not suitable for mobile" for visitors. that said, neocities as a host works great for mobiles or if you only use a tablet, because you can easily edit and view a site on mobile.

thank you goodbye i love you! you can ask me questions on my neocites profile or tumblr