ogs-site

6.7KB

Rå Blame Historik

Title: Education: 03. Site Date: 2019-05-14 00:00 Category: Page Slug: education.03.site Lang: en

< 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
02. Investigate cfg file
03. Investigate item.template file
04. Investigate about.md and cv.md files
05. Launch LFSA
06. Generate the site
07. Summary

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:

About me
Curriculum vitae (CV)

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

cfg
item.template
about.md
cv.md

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:

Go to Tool page
Make sure
- Path: points to the same directory you specified before
- Input directory: and Item template: have values from cfg
Press Generate button to generate HTML files right where Markdown ones reside
Open generated about.html from the site's directory
You should see your web site running locally

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

6.7KB Rå Blame Historik