Lektor Out-of-the-Box Step 1: Building Your Basic Demo Website

- July 7, 2018

This is the first blog post in the Lektor Out-of-the-Box: Step-by-Step series. This blog series uses the Lektor static CMS "out-of-the-box" (without any plugins) to build a demo website in a series of steps. Each subsequent step will show a step-by-step increase in functionality.

Step 1 starts with the output from the lektor quickstart command. The Lektor admin panel is then used to edit the first blog post and create a second post. The resulting demo website is hosted on GitHub Pages.

The instructions and output below are Windows-specific. However, since Lektor is cross-platform, they should be similar on Linux or macOS.

How to Create this Website

Prerequisite:

Python 2.7 or 3 is installed. [I'm using Python 3.7.0.]

1. Installation:

Install lektor using Python's pip utility. At the Windows command prompt, simply enter:

pip install lektor

2. Quickstart:

Create a "C:\lektor" folder on your computer. Open a Windows command prompt and cd to that folder. Create the Lektor project "lektor-out-of-the-box-step-by-step" by entering:

lektor quickstart

and answering its prompts as follows (but answering your name instead of mine):

- Project Name: lektor-out-of-the-box-step-by-step
- Author Name: Russell J
- Project Path [C:\lektor-out-of-the-box-step-by-step]:
- That's all. Create project? [Y/n]:

NOTE: In steps 3 and 4 below, the -O output is optional. That puts lektor's output files in the "lektor-out-of-the-box-step-by-step\output" folder. Without it, your output is put in a randomly-named subfolder (such as "8c6e01521aa3769ff2f439b9f5dbd729") of your AppData\Local\Lektor\Cache\builds folder.

3. Build (OPTIONAL):

Build this site into the "output" subfolder of the "lektor-out-of-the-box-step-by-step" folder:

cd lektor-out-of-the-box-step-by-step
lektor build -O output

The reason that this Step is optional is that the lektor server command (below) also builds the site if needed. But doing lektor build and lektor server separately allows you to see what lektor does at each step along the way.

4. Server:

Launch a local Web server (using that same output folder) on a specified port, such as 5000 (the default):

lektor server -O output -p 5000

You're Command prompt output window should look something like this:

Command Prompt Output

5. Browse your site:

In a Web browser on the same PC, enter "127.0.0.1:5000" in the address bar. That brings up the home or "Welcome" page of the demo site you've created.

Website Homepage

Click on the "Blog" link to go to the blog index page.

website blog index

From the blog index page, click on the "Hello Website" link. That takes you to the first (and so far only) blog post.

website 1st Blog Post

6. Admin panel - Modify the first blog post:

Click the "pencil" icon in the page's upper-right corner. That brings up the Lektor admin panel.

Admin Panel 1st Blog Post

Within the admin panel, change the Title to "First Post: Created by Quickstart, Then Modified Using Admin Panel". In the Body, change "This is an example" to "This is a modified example".

Admin Panel 1st Blog Post Modified

Save your changes by clicking the "Save Changes" button. That will preview your modified blog post.

Admin Panel Preview 1st Blog Post

7. Admin panel - Add a second blog post:

Still within the Admin panel, click the "Blog" link, either in the "breadcrumb" at the top of the page, or in the previewed blog post. That will preview the blog index page.

Admin Panel Preview BlogIndex

Then click the "Add Page" link in the left-hand sidebar. Set the Title to "Second Post: Created Using Admin Panel". (Lektor fills in the ID field for you.)

Admin Panel Add Blog Subpage

Click "Add Child Page". Enter your name in the Author field, enter a future Publication date in the "Publication date" field (so you can see how the blog index page sorts), and enter "Blog post #2" in the Body field.

Admin Panel Edit 2nd Blog Post

Click the "Save Changes" button. That will preview your new second blog post.

Admin Panel Preview 2nd Blog Post

8. Leave the Admin Panel

Click the "eye" icon at the page's upper right corner. That will take you to the second blog post itself, rather than just an Admin panel preview.

website 2nd Blog Post

Click the "Blog" link in the navigation menu. That returns you to the site's blog index page. Note that your posts are sorted with the most recent one at the top.

website blog index Modified

9. Terminate the lektor server command:

When you're done examining the site, terminate the lektor server command with Ctrl-C. If prompted "Terminate batch job (Y/N)?", then confirm with "Y".

10. Where's the code and the website?

The Lektor source code is on GitHub at https://github.com/RussellJQA/lektor-out-of-the-box-step-by-step/:

Lektor Source Code On GitHub

and the website itself is online at https://russelljqa.github.io/lektor-out-of-the-box-step-01/.

Demo Website On GitHub Pages