Proper websites, done properly

Part 1: Getting started

3 minute read time / 406 words

Let's get the basics in place we need to dive in and start making our first module.

Getting started

This guide assumes you've already got the expected basics in place:

  • A code editor. There's enough choice of powerful code editors out there. VS Code (free) is probably the obvious one, but I would highly recommend Sublime Text (paid) too.
  • A decent web browser. Any ever green browser is a decent choice. Firefox, Chrome, Edge (based on Chrome), Opera (based on Chrome), Vivaldi (based on Chrome), Arc (based on Chrome), Chromium (Chrome without the Google), or even Safari (macOS only) (much better in recent times).

Setting up our script

Create yourself a new file at /public/js/index.js and paste this into it: 

console.log('Hello World!');

Our base template (/src/site/layouts/base.njk) will look a bit like this if you're using the Eleventy set up from the previous guide: 

<!DOCTYPE html>
<html>
    <head>
        {% include 'head.njk' %}
    </head>

    <body>
        {% include 'header.njk' %}
        {% include 'nav.njk' %}

        <h1>{{ title }}</h1>
        {{ content | safe }}

        {% include 'footer.njk' %}
    </body>
</html>

We're going to update the /src/site/includes/head.njk file to pull in our script file. Go ahead and open that file, and add the script tag to pull in our new file: 

<script src="/js/index.js" type="module"></script>

We might as well add a nice performance enhancer here as well. Let's add ourselves a preload script tag in as well since we know our JavaScript is going to be needed on every page. 

<link rel="preload" href="/js/index.js" as="script">

We'll need to let Eleventy know there's new files to copy through, so open up .eleventy.js and add a new passthrough file copy line after the others: 

eleventyConfig.addPassthroughCopy({ 'public/js': 'js' });

Now, go to your locally run dev environment (usually at http://localhost:8080 for Eleventy), open your developer tools (On a Mac: command + option + i, on Windows: ctrl + shift + i, or right click on the page and click 'Inspect') and go to the 'Network' tab.

When you refresh the page you should see that under JS files, your new index.js file is being pulled in. If you switch to the 'Console' tab you should now see a Hello World! message.

Perfect! We're ready to move on.