Non-starter

Create a Home Page

The first step we’ll take in building your blog with Eleventy is to create a home page for your site.

Create your project directory

To begin, open your terminal application and create a directory to contain your website.

~ $ mkdir my-blog

You can name your directory anything you like, it doesn’t have to be “my-blog”. And you can put it anywhere on your filesystem that you like. For simplicity, we created it in your home directory (denoted by the ~), but it can be anywhere.

A note about some conventions used in this tutorial.

When we show command-line input, the line is preceded with somehing like ~ $ or my-blog $. This text is not part of the actual command. The first bit of text — ~ or my-blog — show you the current working directory; the $ is a symbol commonly used to denote the end of the shell’s prompt and the beginning of the space for user input, although your shell may use a different character, such as > or #.

When copying commands from the examples in the tutorial, you do not copy the $ or anything that comes before it. The command you type is everything that comes after the $.

With your new project directory created, you’ll want to enter that directory in your shell.

~ $ cd my-blog
my-blog $

Create the home page

Next, open your text editor and create a new file with the following contents and save it as “my-blog/index.md”.

# My Blog
	
Welcome to my blog!
my-blog/index.md

Run your server

Back in your terminal, run the Eleventy development server.

my-blog $ npx --yes @11ty/eleventy@3.1.2
[11ty] Writing ./_site/index.html from ./index.md (liquid)
[11ty] Wrote 1 files in 0.17 seconds (v3.1.2)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Once you see the message Server at http://localhost:8080/, the development (dev) server is up and running, and you can visit http://localhost:8080 in your browser to see your first web page! You can leave the dev server running while you work on your website, and as you make changes to the files in your project, the dev server will update the output and refresh the pages in your browser.

Previous
Tutorial
Next
Add Some Style
  1. Tutorial
  2. Create a Home Page
  3. Add Some Style