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: ? 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 will be 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>
            - - - - Style was collapsed for brevity - - - -
        </style>
        <title>Serov</title>
    </head>
    <body>
        <div id="header">
            <strong>Serov</strong>
            <a href="index.html">About me</a>
            <a href="cv.html">CV</a>
        </div>
        <center>
            <h1>PSKOV_ITEM_TITLE</h1>
            <div class="contents">
PSKOV_ITEM_CONTENTS
            </div>
        </center>
    </body>
</html>

Note: style was collapsed for brevity.

As you can see, item.template is an average HTML file with two 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 index.md and cv.md files

index.md file has the following contents:

 Title: About me
 Slug: index

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

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

 - - - - Contents were 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

index.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 this particular Markdown file should be saved under <slug>.html filename

The rest of index.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/local-file-system-access.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:

Take time to observe your new shiny personal web site consisting of two pages.

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