Welcome

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

Quick Overview

NotSSG is a small script that enables you to build a website or blog, using just files. Update your layout once, all pages are updated. Optionally add site-wide sheets and scripts in one place.

NotSSG uses JavaScript, but you do not need to know JavaScript to use NotSSG!

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

  1. 📄 index.html - The home page on your site
  2. 📄 about.html - Another page on your site
  3. 📄 layout.js - Edit your layout HTML here (no JS knowledge needed)
  4. 📄 layout.css - Edit your layout CSS here
  5. 📄 config.js - Edit your website settings here (no JS knowledge needed)
  6. 📄 notssg-init.js - NotSSG system file, don't worry about this
  7. 📄 notssg.js - NotSSG system file, don't worry about this

You can add more pages, and sections. You can also add more stylesheets, and scripts if you want!

Getting Started

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

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.

When you are ready to publish your site, upload it to your web host.

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.

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.

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

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

Set my Website Title

Open up config.js. You'll see: 

SITE_TITLE: My Website

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

Visit and refresh (Ctrl + F5) your site to see the change!

Layout HTML Overview

Your site's layout HTML is in layout.js, which contains the following: 

let notSSGLayoutHTML = `

	[SHEET]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>
		</div>
		<div class="main">
			[PAGE]
		</div>
		<div class="footer">
			(c) Your name/organisation
		</div>
	</div>

`;

You can ignore the first and last lines.

Everything between is your layout HTML.

[SHEET]layout.css[/SHEET] - Loads your stylesheet

[SITE_TITLE] - Inserts SITE_TITLE value from your config file (optional)

[ROOT] - Points to your site's root folder. Use this tag in all your layout's links and images

[PAGE] - Inserts the current page's contents here

Edit Layout HTML

Let's try updating the layout HTML!

Download the following image and save it in your website's root folder as logo.png.

Open up layout.js, and replace [SITE_TITLE] with: 

<img src="[ROOT]logo.png">

Save, and refresh your site (Ctrl+F5). The logo will appear on every page.

Edit my Layout CSS

Open layout.css.

This is your stylesheet. It's a normal stylesheet!

We've provided some basic styles you can build on, or completely change as you wish!

Let's try updating this stylesheet.

Download the following image, and save it in your website's root folder.

Update the body class: 

body
{
	margin:0;
	padding:16px;
	background-color:white;
	background-image:url("background.jpg");
	font-family:Verdana, Geneva, Tahoma, sans-serif;
}

Save and refresh your site (Ctrl + F5). The background will appear on every page.

Edit a Page

Your pages are responsible for their unique content, which gets inserted into your layout HTML wherever [PAGE] is.

Open up index.html for editing.

To change the page's title, you can edit the <title>. In this case, you probably want to leave the title as Home, but you can put whatever you want.

You don't need to include your website title, NotSSG adds this for you, using the value from your config.js.

To change the page's contents, edit the <body>.

You might change it to something like the following: 

<h1>Welcome to my New Site</h1>

<p>
	Coming soon!
</p>

Note: The <h1> is not required. You can use whatever HTML you want!

Rename a Page

Let's rename the About page to My Cat.

Rename about.html to my-cat.html.

Open up my-cat.html for editing.

Change the <title> to My Cat.

Change the <body> section to be about your cat.

It might look something like this: 

<h1>My Cat</h1>

<p>
	My cat is the best cat ever.
</p>

<p>
	Meow!
</p>

Open up layout.js, and update your menu code. 

<div class="menu">
	<a href="[ROOT]index.html">Home</a>
	<a href="[ROOT]my-cat.html">My Cat</a>
</div>

Save and refresh your site. You will see that the menu has updated, and you can visit the My Cat page!

Add a New Page

To add a new page, we simply duplicate an existing one, and make changes to the copy.

Make a copy of index.html.

Rename the copy ohhh idk, links.html.

Open links.html for editing.

Change the <title> to Links.

Edit the <body> to include some links to your favourite sites! It might look something like this: 

<h1>Links</h1>

<p>
	Here's some links to some stuff.
</p>

<ul>
	<li>
		<a href="https://scott2.neocities.org/notssg/">NotSSG</a> - 
		I use this to build my website.
	</li>
	<li>
		<a href="https://neocities.org/">Neocities</a> - 
		Awesome free web host!
	</li>
	<li>
		<a href="https://brave.com/">Brave</a> - 
		Privacy friendly web browser
	</li>
</ul>

Save.

If you want this page to appear on your main menu, open up layout.js.

Add the page to your main menu HTML: 

<div class="menu">
	<a href="[ROOT]index.html">Home</a>
	<a href="[ROOT]my-cat.html">My Cat</a>
	<a href="[ROOT]links.html">Links</a>
</div>

Save and refresh your site (Ctrl+F5). You have added a page to your site!

Delete a Page

To delete a page, you just... delete the file!

Remember to remove any links to the file, including any in your main menu in layout.js.

Add a Section (Folder)

A section is just a folder with more pages in it!

Let's create a section called My Favourite Games.

Create a folder in your website's root folder called my-favourite-games.

Copy the index.html file from your top-level folder into the my-favourite-games folder.

Open up the new index.html for editing.

Because this page is in a folder, we need to update the path to NotSSG. Look for: 

document.head.appendChild( document.createElement( "script" ) ).src = "notssg-init.js?cb=" + Math.floor( ( Date.now() / ( 1000 * 60 * 15 ) ) );

In this line, change src="notssg-init.js?cb=" to src= "../notssg-init.js?cb=". Notice we've added ../ just after the src=".

Now we can edit it like a normal page!

Change the <title> to My Favourite Games.

Change the <body> contents to: 

<h1>My Favourite Games</h1>

<a href="testris.html">Tetris</a><br>
<a href="pacman.html">Pacman</a>

You have just created a section with its first page.

If you want a link to this section in your main menu, open layout.js, and update the menu code to the following: 

<div class="menu">
	<a href="[ROOT]index.html">Home</a>
	<a href="[ROOT]my-cat.html">My Cat</a>
	<a href="[ROOT]links.html">Links</a>
	<a href="[ROOT]my-favourite-games/index.html">My Favourite Games</a>
</div>

Now we just need to create tetris.html and pacman.html.

To do this, duplicate the index.html file that is inside the my-favourite-games folder, and edit each page as normal!

Remove a Section (Folder)

To remove a section, simply delete its folder, and remove any links from your pages and layout.js menu HTML!

Start a Blog

Here's the scoop. A blog is just a section where the index.html has links to the other pages, which serve as blog entries.

So your blog folder might look like this: 

📂 blog/
	📄 index.html
	📄 01-first-entry.html
	📄 02-i-bought-a-packet-of-crisps.html

So, revisit the Add a Section section, and repeat the steps, but with blog.html and Blog!

Site-Wide Sheets and Scripts

You can have NotSSG load one or more stylesheets and/or scripts on every page. You can use this for stylesheets and scripts which are not layout related. For example you could use it to expand NotSSG's capabilities by loading third party sheets/scripts (analytics, comment systems, etc).

Let's give it a go.

In your NotSSG folder, create a file called site-wide.css.

Open site-wide.css, and enter the following code. 

#smile
{
	position:fixed;
	left:calc(50vw - 16px);
	top:calc(50vh - 16px);
	width:32px;
	height:32px;
	font-size:32px;
	text-align:center;
}

Create a file called site-wide.js. 

var smileDiv = document.createElement( "div" );
smileDiv.id = "smile";
smileDiv.innerHTML = "😊";
document.body.appendChild( smileDiv );

setTimeout( () => { document.body.removeChild( smileDiv ); }, 1000 );

Open config.js. Somewhere between the first and last lines, add: 

SHEET: site-wide.css
SCRIPT: site-wide.js

Visit and refresh (Ctrl + F5) your site! Each time you visit a page, you'll get a smiley face for a second lol.

You might want to delete those two files and remove them from config.js now. 😭

Layout Sheets and Scripts

Open up layout.js. Notice the line: 

[SHEET]layout.css[/SHEET]

This is an example of a layout sheet. It is loaded on every page, and its purpose is to style your layout.

You can add more layout sheets, and you can also add layout scripts with: 

[SCRIPT]layout-script.js[/SCRIPT]

Page Sheets and Scripts

There may be times where you want some CSS or JS just on one of your pages.

You can do this the same way you would for a layout sheet or script. 

[SHEET]about.css[/SHEET]

or 

[SCRIPT]about.js[/SCRIPT]

Page scripts sheets and scripts are loaded relative to the page.

Customise Cache Busting

Have you ever had to press Ctrl+F5 to see changes you've made to a stylesheet? This is because the browser has cached the stylesheet so that it can load it more quickly. When you press Ctrl+F5, you are telling the browser to get the latest version of everything on the page, aka cache busting.

Your visitors may not know that they need to do that.

By default, NotSSG solves this problem for you, by internally cache busting every 15 minutes of the hour. So, at 8:00, 8:15, 8:30, 8:45, 9:00 and so on.

However, if you wish, you can switch to NotSSG's manual/instant cache busting. To do this open up config.js and paste in the following line: 

CACHE_BUST: 1

Each time you publish changes to one or more of your stylesheets or scripts, increase the number.

Personally, for my own site, I just let NotSSG's default automatic cache busting do its thing.

Note: Once in a while, servers and browsers can be a bit stubborn. You may still need to Ctrl+F5 for a brief period of time, or during the same session. But the cache busting will do its thing for new sessions and after your web host's servers have propagated your changes.