Getting Started

Download a theme

First things first—you need to pick a premade theme and download it. There are examples up to show you your options. You can edit the theme to your liking later.

Once you've chosen a theme, you should download it from either Itch or GitHub. After it's downloaded, you need to unzip it. There should be a folder named after the theme you choose. This will be your site folder; feel free to rename it to whatever you want.

Configure site variables

So, now that your site is downloaded, you need to set some variables. Open deadlogs.js in a text editor or IDE. You should be bombarded with comments once opened. They explain some of what we're going to go over here. We'll be going through them in sections.

First Section: About the site

let siteName = 'My Site!';
let lang = 'en'; // The language of your site. Example, en = english, fr = français (french), etc.
let siteUrl = ''; // You can just put the url of your site here, whether that be a subdomain or custom.

// Put down your name and website/social media
let author = {
    name: 'Your Name',
    url: ''
};

I feel as if these variables are kinda self-explanatory. The name of your site, your sites url, your name, and the url to one of your socials or websites.

The variable I'd like to point out is the lang. Whatever you define lang as gets automatically inserted in your HTML files. It's very important for accessibility reasons for you to put the proper tag in for the language your site will be in. You can read more about it in the MDN Web Docs.

Second Section: Navigation

// This is where you define the pages that'll be in your navigation bar throughout the site.
let navi = [
    ['home','/index.html'],
    ['about','/about.html'],
    ['archive','/archive.html']
];

The navi variable lists all of the pages that will be included in the header navigation. By default, this variable includes a home page, about page, and archive page. You can change the navigation how ever you want. Add pages, subtract pages, etc. Just keep in mind how packed the header may become if you add too many.

// The link that holds the archive list.
let middleLink = ['archive', '/archive.html'];

The middleLink is the link that's listed inbetween the 'next' and 'previous' links:

By default, it's set to the archive page, but it can be anything you want. Or, you can leave it blank for nothing.

// Name of folder your posts are in.
let folder = 'post';

The folder is simply the name of the folder that your post are going to be in. By default, the folder is named 'post'; you can see it in your files, but if you don't like that then you can change it. Maybe you want it to be called 'files', 'pages', etc.

Third Section: The Footer

// This is the text that appears in the footer of your site. Feel free to customize it.
let footer = `
    Owned & Written by <a href="${author.url}" target="_blank">${author.name}</a>
`;

This is simply the code that get inserted into your footer. By default, it inserts what you put as your name and social link in whilst saying you own the site. You can change this how ever you'd like.

Fourth Section: The Archive

let postArchive = [
    //['Title', 'Date', 'Location']
];

This is where all your posts will be accounted for. Every post you want to have shown up in the post navigation and archive should be put here.

We're actually going to be covering how to set this up in the next section.

Make your first post

First, you need to create a new file in your 'post' folder, or whatever you may have renamed it, and save it as an HTML file. I'll be referring to it as example.html.

In that same folder, there should be a file named template.html. Copy the contents of that file and paste them it into example.html.

let postArchive = [
    //['Title', 'Date', 'Location']
];

And now we're back at postArchive. Every time you make a new post, you're going to want to add it to this list. Let's add example.html:

let postArchive = [
    //['Title', 'Date', 'Location']
    ['Example Post', 'May 11th, 2022', 'example.html']
];

As the comment says, you want to list posts' information in the correct order. It doesn't matter what you name your post or how you format the date. Heck, you don't even have to use that space for a date. You can use it for a tag name if you wanted to.

Now, let's add a second file to the archive list. I'll call it example2.html.

let postArchive = [
    //['Title', 'Date', 'Location']
    ['Example Post', 'May 11th, 2022', 'example.html'],
    ['Example Post 2', '11 May 2022', 'example2.html']
];

When adding additional posts to the list, you need to add them to the bottom of the list. Make sure to add a comma at the end of the post before it or JavaScript will freak out over your imperfect syntax.

Add content

In each file, there's an area where it states to type your content at. Make sure you keep all the main content of your pages within the <main> tags.

This is what these sections might look like:

<main>
    <!------------------------------------------------>
    <!-- This is where you place your content! -->

</main>

<main>
    <!------------------------------------------------>
    <!-- This is where you place your post content! -->
    <!--
        I recommend not deleting the `template.html` file,
        but instead to copy from it.
    -->

</main>

In the top level of your files, where your index.html file is, you will have to type the header and title into while you don't have to for your posts.

<title>Your page title</title>

<h1>Your page title</h1>