Education: 03. Site

< Back Index Next >
02. Dependencies Education 04. Language

In this document we create a simple static web site with two pages.

Estimated completion time: 10 minutes.

Table of contents

01. Inspiration

Suppose you are a great Russian painter named Valentin Serov. Everytime anyone wants to know about you they refer to Wikipedia. You wake up earlier today with a distinct desire to have your very own personal web site.

You set on to create the following pages:

Some time later you have the following files in your site directory:

Let's look at their contents closer.

02. Investigate cfg file

cfg file has the following contents:

input = .
item = item.template

cfg is an INI file with the following keys specified:

Key Description
input Points to a directory where item's file is located
item Points to an HTML template file that is used to generate HTML files out of Markdown ones

In our case, item.template file is located alongside cfg, so we use . to denote current directory.

03. Investigate item.template file

item.template file has the following contents:

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            - - - - Collapsed for brevity - - - -
        </style>
        <title>Serov</title>
    </head>
    <body>
        <div id="header">
            <strong>Serov</strong>
            <a href="about.html">About me</a>
            <a href="cv.html">CV</a>
        </div>
        <center>
            <h1>PSKOV_ITEM_TITLE</h1>
            <div class="contents">
PSKOV_ITEM_CONTENTS
            </div>
            <div id="footer">
                This sample web site has been generated by <a href="http://opengamestudio.org/pskov">PSKOV</a>.
            </div>
        </center>
    </body>
</html>

Note: style was collapsed for brevity.

As you can see, item.template is an average HTML file with two PSKOV constants specified:

PSKOV constant Description
PSKOV_ITEM_TITLE Provides title from Title: part of page's header section
PSKOV_ITEM_CONTENTS Provides HTML contents generated out of Markdown contents

Notes:

  • other PSKOV constants are described later
  • page's header section is described below

04. Investigate about.md and cv.md files

about.md file has the following contents:

 Title: About me
 Slug: about

 Hi, my name is Valentin Serov. Here's my self-portrait:

 ![Valentin Serov self-portrait][serov-portrait]

 - - - - Collapsed for brevity - - - -

 Have a look at my [CV][cv] now.

 [serov]: https://en.wikipedia.org/wiki/Valentin_Serov
 [revolution]: https://en.wikipedia.org/wiki/Russian_Revolution
 [serov-portrait]: myself.jpg
 [serov-work]: mywork.jpg
 [girl-with-peaches]: https://en.wikipedia.org/wiki/Girl_with_Peaches
 [pskov]: http://opengamestudio.org/pskov
 [cv]: cv.html

about.md starts with a so-called header section:

Header constant Description
Title: Provides value for PSKOV_ITEM_TITLE constant when generating HTML out of Markdown
Slug: Tells PSKOV that particular Markdown file should be saved under <slug>.html filename

The rest of about.md contents is what any Markdown file looks like.

Note: cv page is referenced as cv.html, not cv.md

cv.md file has the following contents:

 Title: Curriculum vitae
 Slug: cv

 Here's my CV in case my paintings still interest you. I took a bit of a modern IT approach to structure my CV as key-value pairs of a dictionary (map), enjoy!

 | Key | Value |
 |---|---|
 | Name | Valentin Serov |
 | Age | 46 |
 | Marital status | Married |
 | Country | Russian Empire |
 | Alma mater | Imperial Academy of Arts |
 | Education | * Member Academy of Arts (1898) <br> * Full Member Academy of Arts (1903) |

As you can see, there's nothing new in cv.md except for a Markdown table.

05. Launch LFSA

Launch LFSA so that it points to directory with the files we just observed:

$ /path/to/lfsa-201905.py /path/to/dir/01.TwoPages

You should see output similar to this:

DIR: '/Users/kornerr/p/site-pskov-sample/01.TwoPages'
PORT: '8000'

06. Generate the site

Now it's finally time to generate your personal web site:

07. Summary

You have successfully generated a web site with two pages. Check out the result.

Introduced PSKOV constants include:

PSKOV constant Description
PSKOV_ITEM_TITLE Provides title from Title: part of page's header section
PSKOV_ITEM_CONTENTS Provides HTML contents generated out of Markdown contents

Introduced configuration keys include:

Key Description
input Points to a directory where item's file is located
item Points to an HTML template file that is used to generate HTML files out of Markdown ones

Introduced header constants include:

Header constant Description
Title: Provides value for PSKOV_ITEM_TITLE constant when generating HTML out of Markdown
Slug: Tells PSKOV that particular Markdown file should be saved under <slug>.html filename

< Back Index Next >
02. Dependencies Education 04. Language