NotSSG Guide

Welcome

Welcome! Thank you for choosing, or at least trying out NotSSG! I hope you will find it to be indispensable in building your multi-page website!

The aim of this guide is to help you build your website! I recommend reading the Quick Overview, and then using the remainder of the guide to answer any questions you may have on how to do specific stuff.

Quick Overview
Getting Started
Set my Website Title
Edit my Layout
Edit a Page
Rename a Page
Add a New Page
Delete a Page
Add a section or sub-section
Blogging with NotSSG
Work with CSS
Work with JS
Customise Cache Busting

Quick Overview

Let's take a look at the files that come with your NotSSG download.

index.html and about.html are your website's first two pages. They contain their unique content inside their <body>, and their page <title>. (Website title is added to the page title by NotSSG).

my-layout.html.js is where your layout HTML resides (which includes your site's main menu). In this HTML, there is a special [PAGE] tag. When you visit one of your pages, this layout will be loaded, and [PAGE] will be swapped for that page's unique contents, then the combined layout/page will be shown.

my-layout.css is where you edit your site's CSS. This is a normal stylesheet!

my-config.txt.js is where you edit website settings. For most users this will just be your WEBSITE_TITLE.

notssg.js and notssg-init.js are NotSSG itself. You don't need to worry about these or edit them! But feel free to check them out, or if you have JavaScript experience, update them however you want!

NOTSSG_GUIDE.html is the file you're looking at now lol. It's included with your download so you always have access to it!

Getting Started

Alrighty, first, it's best to choose where you want to build your site. Here are the options!

Option #1) Build on computer, then upload

Open the notssg folder on your computer.

To edit a file, right click it and open it with Notepad, Notepad++, VSCode etc.

To view your site, double click one of the HTML files and that page will open in your web browser.

Your web host will have its own way of uploading the files. For Neocities, go to https://neocities.org/dashboard. Then drag and drop all of the files from the notssg folder on your computer to the Neocities browser window.

Option #2) Build on your web host

If you'd prefer, you could start by uploading all the files to your web host, and just edit your site there.

You can then edit the files directly on your web host.

Option #3) Build on your phone

For goodness sake. Please... just don't.

Additionally, NotSSG sites are truly portable. Which means if you just want to test NotSSG out, you can upload it to a subdirectory on your site and it will work absolutely fine!

Personally I like to build on my computer, and then upload. But it's your choice and there's no wrong answer.

Advanced user note: You absolutely can use XAMPP, Live Server or similar if you wish! But it is not a requirement, and NotSSG sites run just fine off the file system.

Set my Website Title

Alrighty, easy one!

Open up my-config.txt.js for editing. You'll see:

# Website title
SITE_TITLE: My Website

Change "My Website" to your website's title.

Done. This change will now automatically apply to every page on your website!

Visit one of your pages to see the change. You may need to Ctrl+F5.

Note: Your visitors will not have to Ctrl+F5 to see changes to your website! NotSSG automatically handles cache busting for you!

For most NotSSG website owners, that's the last time you'll ever need to edit my-config.txt.js!

Edit my Layout

When you edit your layout, the changes will automatically be applied to every page on your site!

To edit your layout's HTML, you edit my-layout.html.js.

To edit your layout's CSS, you edit my-layout.css. This is a completely normal stylesheet you would edit the same way you would on a normal site.

Let's start by editing our website's HTML. Open my-layout.html.js. You'll see the following:

let notSSGLayoutHTML = `

	[SHEET]my-layout.css[/SHEET]

	<div class="wrap">
		<div class="header">
			[SITE_TITLE]
		</div>
		<div class="menu">
			<a href="[ROOT]index.html">Home</a>
			<a href="[ROOT]about.html">About</a>
			<a href="[ROOT]blog/index.html">Blog</a>
		</div>
		<div class="main">
			[PAGE]
		</div>
		<div class="footer">
			(c) Your name/organisation
		</div>
	</div>

`;

Alright, let's break this down!

let notSSGLayoutHTML = `

You can ignore this first line! Don't delete it! But don't worry about it (it's part of NotSSG itself).

[SHEET]my-layout.css[/SHEET]

This is a special NotSSG tag you can use to load a stylesheet for your layout. We have loaded the provided my-layout.css file, which provides you some basic styles for your layout that you can build on.

If you're (very very) old fashioned and prefer to build your site in plain HTML with <table>s, <font> and so on, you could remove the [SHEET] line.

You can also add more [SHEET]s, or rename the existing one (remember to rename the file as well).

<div class="wrap">

Alrighty, we're onto the actual HTML of the layout!

First, we have a "wrap" div. In the CSS (my-layout.css), we center it and give it a max-width of 760px.

<div class="header">
	[SITE_TITLE]
</div>

Next is the layout's header. Inside here we've used one of NotSSG's special tags. [SITE_TITLE]. This is swapped for whatever you've set your SITE_TITLE to in my-config.js.txt.

You do not have to use the [SITE_TITLE] tag. You could instead just type your site title directly here, or even use an <img src> to do a logo!

<div class="menu">
	<a href="[ROOT]index.html">Home</a>
	<a href="[ROOT]about.html">About</a>
</div>

Your website's menu! When you add more pages, you may want to update this.

Notice the special NotSSG [ROOT] tags in there! These make your site truly portable. No matter whether your site is live, on your computer, in a subdirectory, your site will work, because [ROOT] is swapped for the path to your website's root folder. You should use [ROOT] for all <a href>s and <img srcs> in your layout HTML.

Just like the rest of the HTML you can do your menu HTML however you want. If you'd prefer to use an HTML list, or divs, or spans, you can! We've provided very simple menu HTML as a starting point.

<div class="main">
	[PAGE]
</div>

Notice the [PAGE] tag? This is the important bit. When you visit one of your pages, NotSSG will take the contents of that page, and replace [PAGE] with that content.