Neocities is a social network of websites that brings back the lost individual creativity of the web. It offers free static web hosting and tools to create and share your own website.
This guide is for anyone with little to no HTML/CSS knowledge who
wants to build their first site! \(★ω★)/
Planning
Before creating your website, plan it out. What pages do you want? An about page? A gallery? What do you want your website to look like? There are no rules—it’s up to you. The only limit is your coding ability and the resources you can find.
Start by browsing Neocities or other websites. See what you like and don’t like. Some people have a page dedicated to how they built their site, so look out for those.
Write down anything that comes to mind. Make a simple mockup of what you want. Make a Pinterest board with inspiration—anything that’ll help you!
Once you have a plan, look for resources to help you create your website. You can use your browser’s web developer tools to inspect elements and view source code.
Here are some resources I’ve found:
- sadgrl’s webmastery links - HTML and CSS help, pre-made layouts, a layout builder, tiled backgrounds, etc.
- Google Fonts - Use the Google Font Finder to compare and find fonts easily.
- eggramen’s templates
- Zonelets - HTML blogging engine (something to consider if you want a blog!)
- Neocities tutorial page
Coding
You need to learn HTML and CSS to build your site. If you want to add interactivity, learn JavaScript. Finding code snippets online is helpful, but understanding HTML/CSS basics goes a long way.
Editor
Visual Studio Code is a popular editor with many helpful extensions. Although many editors are available, I recommend this one. For a simple Neocities site, you could write your code in Notepad, but VSCode offers many helpful features. Check out this video to get started.
To customize VSCode, look for themes here. Click on a theme you like, then click the VS Code button to apply it. You can also preview it in your browser.
Here are some plugins I recommend:
- Prettier - Formats your code, with an option to format on save.
- Live Server - Updates the browser preview every time you save.
- Auto Rename Tag - Automatically renames paired tags.
- HTML CSS Support - Provides CSS support for HTML files.
- Auto Close Tag - Automatically adds closing tags for HTML.
- Code Spell Checker - Checks your code for spelling errors.
Learning
Before coding, plan your content and layout. Write your HTML first, then style it with CSS.
Follow a tutorial in a format that works best for you, whether written or video. Make sure you actively code along with the tutorial—watching alone isn’t enough. There are tutorials mentioned in the planning section.
You don’t need to memorize every HTML tag or CSS property. Learn enough to bring your ideas to life on the webpage. If you have an idea but aren’t sure how to implement it, look it up! Don’t get discouraged—there are plenty of resources online, and you can always ask for help.
Uploading to Neocities
Once your site is done, upload it to Neocities. Click the upload button to select your files or drag and drop them (faster).
Warning!
- Do not upload multiple folders at once.
- If a file has the same name as an existing file in that folder, the old file will be overwritten.
Every time you want to update a page, just drag and drop it to replace the old file. If you’re adding a new page, remember to link to it so people can access it.
Remember to have fun!! ˖✧◝(⁰▿⁰)◜✧˖