how the sausage is made
this is some technical info about how i made this site to help people who might want to make a site similar to this one.
my own advice on coding and building a site
if you’d like to make a site from scratch, the best route is to learn some very quick and basic html and css using youtube or a site like codecademy. don’t get too lost in the weeds - you just need the basic principles. most ‘coding basics’ sites will have exercises to help you practice those basics.
look at sites you like on neocities and inspect the source code (ctrl+shift+i or ctrl+u) to see how they are made and what they used. google features you want to learn how to implement, plus the coding language you are struggling with. lots of people on stack overflow will write code that you can easily adapt to your site.
mdn web docs has an excess of information about all the possible html tags and css properties. some of the articles can be quite intimidatingly written, because they are written to give as much details possible, but it gives some really handy demonstrations of e.g. the different CSS options.
a lot of people do not want to make a site from scratch, which is very fair. i would then recommend one of the templates floating around neocities in the templates tag. editing these templates to your liking will also help you to learn!
learning coding is a trial and error process of just fucking around and finding out what is possible. you will get very frustrated and then take a break and then come back and it will take you 5 minutes to figure out what went wrong. google stuff all the time. you can copy and paste other people’s code from stack overflow. to be honest you might as well do this because the LLMs do this too, but instead of pasting in broken code from ChatGPT, you get to learn how to research coding questions for yourself and you’re not like. ruining the environment. lol
very important: get a code editor that allows you to have a live preview. i personally use vscodium, with the live server extension installed. i had no idea this was a thing i could use, and in fact the first version of this site was laboriously and painstakingly edited in neocities.
my favourite visual studio/vscodium shortcuts
oh my god so? rather than having to type code yourself you have these amazing shortcuts that will make it so much quicker. if you are in visual studio you will need to add the **emmet** extension for some of these. i don't remember installing it, but vscodium just. has emmet pre-installed.- ctrl+., then tap ‘enter’, in a new page, and it will put in the boring html boilerplate (e.g. the head section).
- ‘emmet: wrap with abbreviation’ command will automatically type things like divs, classes, list items, available by typing ctrl+shift+p, then searching ‘wrap’ (after doing this once you can just hit enter after the shortcut).
- ctrl+click while you are editing text (sometimes alt-click, i think it depends if you have an external mouse connected? or i just forgot that i changed this at some point lol) to add a SECOND CURSOR. that way, you only have to type something once and have it appear in multiple locations in the text. you can add as many cursors as you want.
- ctrl+d while you are on a section of text that repeats later, in order to select the next instance that it appears.
- ctrl+shift+L will add a cursor to EVERY instance of a repeating section of text. it’s like find and replace but faster and offers a slightly finer amount of control!
you don’t need javascript initially. javascript will help to create interactive elements for your site, and automate aspects of coding the site (like loading up the same navigation bar for every page so you only have to update it once). i have some javascript running on my end but not yours (as i just uploaded the static site to neocities), but it allows me to pull the data for a page from a JSON file instead of having to type it in directly into the code.
a lot can be done with html and css alone, as well as… copying and pasting other people’s javascript from stack overflow if you need just one function you can’t do in html/css.
i would say, i left learning javascript quite late and regretted it a lot, because it helped me grasp other concepts more quickly. but my goal was to have a site that was as easy as possible to update quickly. it just depends what your goals are.
javascript is an ugly fucking language. it has lots of idiosyncracies that are super annoying. if you have never done any programming (i hadn’t), you will probably find it easier to learn a language like python (i started there too, using automate the boring stuff with python, a free guide). but i ultimately went further with javascript. i like that javascript instantaneously works in the browser, without you needing to add any extra technologies (like django, php, ruby on rails, etc). i love that you can execute JS in the browser console and suddenly a lot of annoying operations are way easier.
the tech!!
the neocities CLI
once your site gets big enough, you will probably want to use the neocities CLI because reuploading everything will suck. this just uploads everything in a folder on a computer i specify, skipping unchanged files and editing existing files.
astro shilling
i will sing the praises of astro forever more. astro is a static site generator. basically this means that my site is divided into a bunch of different components, rather than pages. for example, the top header and bottom link navigation is stored in separate folders. astro takes those components and builds them into full html pages, with only the bare minimum of javascript required to load the page. as a result, most of my site will work fine even if you don’t have javascript enabled, but i don’t have to type loads of redundant code.
in fact, if the page is simple and just text, i can literally just type it out as a markdown file instead of a full HTML file. this page is just markdown, and if i do want some specific HTML feature (like <details> and <summary>, used above to collapse a list) i can just write it in!
i could not make so many of the features of this site without astro! their blog tutorial is very easy to follow, if you’re interested.
would i use tailwind again? no. am i tethered to it for this website? regrettably, yes.
i’m using tailwind for the styling, in addition to pre-defined styles that i had already created. tailwind is a css framework. a css framework basically just means that the formatting for page components such as sidebars, images, etc is handled exclusively through classes in your html, rather than you defining every single possible layout you could have in your CSS file (this is, originally, what i did, and i HATED EVERY MINUTE). pages and templates are much quicker to build because you don’t have to go into a separate css file, and you don’t have to think about making new stuff, you just style it direct in the html. i would say that i didn’t really enjoy this process and tailwind is still confusing to me in ways that may have been easier with a simpler framework (e.g. bootstrap), or just literal vanilla CSS. the only thing i like is that it is very fine-tunable for things like how layouts will translate to mobile. e.g. you can have complex multicolumn layouts on desktop, but render alternatives quite precisely in mobile.