First, download Static Ultra. Don't worry, there's no exe or installer, it's just plain HTML, CSS and JavaScript!
Due to its use of XMLHttpRequest, if you'd like to develop your site on your computer, you'll need a local web development server. I highly recommend the free and easy to install XAMPP.
If you're developing your site directly on your web host (e.g. Neocities) then you don't need XAMPP.
When you're ready, extract Static Ultra. Then, either upload all the files to your web host (e.g. Neocities). Or, if you're using a local server, place them in your www or htdocs folder.
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:
// Site's title HTML. Saves you having to put it in every page/theme! You
// can put HTML here, so it's also a good place to put a logo
this.SITE_TITLE_HTML = `
Untitled Website
`;
// Site's slogan HTML for a little info about your site that usually
// appears very near the site title. To disable, set enable to false, or
// slogan to empty string: ``
this.SITE_SLOGAN_ENABLE = true;
this.SITE_SLOGAN_HTML = `A new <strong>Static Ultra</strong> powered website`;
// Site's footer HTML for copyright or whatnot
this.SITE_FOOTER_HTML = `
<p>By Someone</p>
`;
Let's go ahead and update those!
// Site's title HTML. Saves you having to put it in every page/theme! You
// can put HTML here, so it's also a good place to put a logo
this.SITE_TITLE_HTML = `
Squirrel Central
`;
// Site's slogan HTML for a little info about your site that usually
// appears very near the site title. To disable, set enable to false, or
// slogan to empty string: ``
this.SITE_SLOGAN_ENABLE = true;
this.SITE_SLOGAN_HTML = `The ultimate squirrely website!`;
// Site's footer HTML for copyright or whatnot
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!
