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.
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
Python 2.7 or 3 is installed. [I'm using Python 3.7.0.]
Install lektor using Python's pip utility. At the Windows command prompt, simply enter:
pip install lektor
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:
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]:
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.
lektor build and
lektor server separately allows you to see what lektor does at each step along the way.
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:
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.
Click on the "Blog" link to go to the blog index page.
From the blog index page, click on the "Hello Website" link. That takes you to the first (and so far only) 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.
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".
Save your changes by clicking the "Save Changes" button. That will preview your modified 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.
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.)
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.
Click the "Save Changes" button. That will preview your new second 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.
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.
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/:
and the website itself is online at https://russelljqa.github.io/lektor-out-of-the-box-step-01/.