New!
- Try Owly's Static Ultra tutorial video!Or continue below if you prefer a written tutorial!
First, download Static Ultra. Don't worry, there's no exe or installer, it's just plain HTML, CSS and JavaScript!
If you're building your site directly on Neocities, just extract the files and upload them to your Neocities root. As of late, recursive upload works on Neocities if you use drag and drop. So drag and drop the contents of your Static Ultra folder to your Neocities site root.
Once done, you can simply visit your site just like you normally would.
If you're developing your site on your PC, and then uploading the files to Neocities, you'll need a local development web server.
The reason for this is that Static Ultra makes use of something called XMLHttpRequest (don't worry, you don't need to know what it is or how it works), which doesn't work on the normal File System, thus the need for a dev server.
For easy set up and development, I recommend installing VS Code and the Live Server extension.
Extract the Static Ultra files into a folder, then open that folder in VSCode and hit the Go Live button to view your site.
When you're ready to publish, you can upload all your files to Neocities or your preferred web host.
Actually, since it's all static content the instructions are the same as Neocities! :P Just upload the files and visit your site. xD
Once you've done the uploading or project creating etc, visit your site. You should see this:
Nice work! You now have the beginnings of a website with a theme, title, slogan, breadcrumb, page content and a footer.
It's time to start making the website your own. In these examples, the website will be called "Squirrel Central" xD. But obviously, you can put your own information. Anyway, open su-config.js for editing. Look for the following:
this.SITE_TITLE_HTML = `
Untitled Website
`;
this.SITE_SLOGAN_ENABLE = true;
this.SITE_SLOGAN_HTML = `A new <strong>Static Ultra</strong> powered website`;
this.SITE_FOOTER_HTML = `
<p>By Someone</p>
`;
Let's go ahead and update those!
this.SITE_TITLE_HTML = `
Squirrel Central
`;
this.SITE_SLOGAN_ENABLE = true;
this.SITE_SLOGAN_HTML = `The ultimate squirrely website!`;
this.SITE_FOOTER_HTML = `
<p>By <em>#1 Squirrel Fan</em></p>
`;
Next, open up index.html for editing. You should see the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Website</title>
<script src="su/su-init.js"></script>
<script>suInit.init( "" );</script>
</head>
<body>
<h1>Welcome</h1>
<p>
A new Static Ultra powered website begins...
</p>
<p>
Be sure to visit the
<a href="https://scott2.neocities.org/projects/static-ultra/">Static Ultra Website</a>
to get started!
</p>
</body>
</html>
Change the <title> tag to the title of your website.
Make some changes to the page's <body> HTML.
After your changes, index.html's code might look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Squirrel Central</title>
<script src="su/su-init.js"></script>
<script>suInit.init( "" );</script>
</head>
<body>
<h1>Welcome</h1>
<p>
Welcome to <strong>Squirrel Central</strong>, the ultimate resource for
information about your favourite animals: squirrels!
</p>
<p>
This site is under construction. So be sure to check back later!
</p>
</body>
</html>
Visit your website, and if you don't see your changes, press Ctrl+F5. This will cause Static Ultra to load the very latest version of your website. Don't worry - your visitors will not have to do this - more on that in a moment.
You should see something like this:
Congrats, you just created your first Static Ultra webpage! How easy was that?
Later, once you have finished making changes to your website, you'll be able to open up su-config.js for editing, and increase SITE_VERSION. This will ensure Static Ultra is delivering the latest version of your site to your visitors, so that they don't have to press Ctrl+F5! But while making changes to your site, it's faster and easier just to use Ctrl+F5 as you go.
Anyway, next, you'll probably want to add some more pages... After that we'll take a look at creating a theme/layout!
