OGS-Main
/
ogs-site
2
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 Commitit
2 Branchit
402MB
Puu: 450c2b4027
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '450c2b4027'
${ noResults }
ogs-site/pskov/en/education.03.site.md

7.4KB
Raaka Blame Historia

Title: Education: 03. Site Date: 2019-06-25 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

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:

  • pskov.cfg
  • item.template
  • about.md
  • cv.md

Let's look at their contents closer.

02. Investigate pskov.cfg file

pskov.cfg file has the following contents:

input = .
item = item.template

pskov.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 pskov.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 Value of Title key of the page's Markdown file
PSKOV_ITEM_CONTENTS Provides HTML contents generated out of Markdown contents

Notes:

  • other PSKOV constants are described later
  • page's Markdown file 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 key 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

ERROR Your browser does not support HTML5 video

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

$ /path/to/lfsa_1.0.0.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

ERROR Your browser does not support HTML5 video

Go to Tool page and press Generate button to generate HTML files right where Markdown ones reside.

07. Observe the site

ERROR Your browser does not support HTML5 video

Observe generated web site locally by opening about.html and switching between pages.

08. 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 Value of Title key of the page's Markdown file
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 keys include:

Header key 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