There are times where you may want to have a folder for a bunch of related pages. Maybe a blog section? Or maybe you have some kind of category? You get the idea.
Actually, a blog is a good example xD. So, create a folder in your website root called "blog".
Copy your index.html file, and paste it inside of the blog folder. Open up blog/index.html for editing. You should see something like the following:
<!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>
Let's adjust the title tag for the new page. It should look something like this right now:
<title>Squirrel Central</title>
to
<title>Blog | Squirrel Central</title>
Once again, it MUST be in that format for the time being, more on this shortly.
Next, change the lines:
<script src="su/su-init.js"></script>
<script>suInit.init( "" );</script>
to
<script src="../su/su-init.js"></script>
<script>suInit.init( "../" );</script>
This tells the web browser where Static Ultra is relative to the current folder, and it tells Static Ultra the path to your website's root. "../" means "one folder up".
Let's update the <body> section. Delete what's there, and replace it with the following:
<h1>Blog</h1>
<p>Welcome to my blog. Entries:</p>
<ul>
<li><a href="first-entry.html">First Entry</a></li>
</ul>
With all the changes done, your blog/index.html should now look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blog | Squirrel Central</title>
<script src="../su/su-init.js"></script>
<script>suInit.init( "../" );</script>
</head>
<body>
<h1>Welcome</h1>
<h1>Blog</h1>
<p>Welcome to my blog. Entries:</p>
<ul>
<li><a href="first-entry.html">First Entry</a></li>
</ul>
</body>
</html>
You'll probably want a link to the blog section on the main menu.
Open su-config.js for editing and add look for the menu. At the moment it looks like this:
this.SITE_MENU = [
[
"",
"Home"
],
[
"other-page.html",
"Other Page"
]
];
Let's add that link to the blog section:
this.SITE_MENU = [
[
"",
"Home"
],
[
"other-page.html",
"Other Page"
],
[
"blog/"
"Blog"
]
];
Okay, due to this being a new folder/section, there's one more step! We need to update the breadcrumb hint. Find the following:
this.BREADCRUMB_HINT =
[
/*
[
"blog",
"Blog"
]
*/
];
Change it to the following (we're removing the comment tags):
this.BREADCRUMB_HINT =
[
[
"blog",
"Blog"
]
];
Alright. Let's take a look at the result of what we've done so far. Visit your site, Ctrl+F5 and go to the blog page. You should see something like the following:
Notice that the main menu is up to date, and the breadcrumb also shows you that you are in the blog section.
Alright that's that page done. But you'll get an error if you click the link to first-entry.html. So what do we do? Well, let's create the first-entry.html!
Copy and paste the blog folder's index.html file, and rename it first-entry.html.
Open first-entry.html for editing. You've already sorted out the paths, so all you need to do is update the title and content:
<title>First Entry | Blog | Squirrel Central</title>
<h1>First Entry</h1>
<p>Today I started using Static Ultra!</p>
<p><a href=".">Blog Home</a>
Note: The dot in the link just means go to index.html in current folder, this is not a Static Ultra specific thing and you can do it in normal HTML as well. :P
You'll probably not want to add this one to the main menu, since you have a link to it on the blog's index.
So you're done! You now have a nice blog section to expand upon. Visit your site, Ctrl+F5 and you should be able to navigate to the First Entry page, which should look a bit like this:
I've mentioned this before, but for the moment the title element must be formatted in a specific way. This is best for Search Engines, and also makes the Static Ultra breadcrumb work correctly. A summary is as follows:
| Root Folder index.html | Website Title |
|---|---|
| Root Folder other-page.html | Page Title | Website Title |
| Other Folder index.html | Section Title (e.g. Blog) | Website Title |
| Other Folder other-page.html | Page Title | Section Title | Website Title |
Additionally, at the moment Static Ultra only supports one level of sub-folders, and what happens with sub-sub-folders, and sub-sub-sub-folders is untested. A future version will suport infinite levels of subfolders, however I wanted to get a version 1.0.0 out before I expire, so yeah.
This concludes the section tutorial.
I'd say at this point you have everything you need to work with Static Ultra. However, if you'd like to get a little more advanced and learn how you can have stylesheets and scripts on a site-wide, theme, and/or page-by-page basis, read on!
