In this document we create a simple static web site with two pages. Estimated completion time: 10 minutes. **Table of contents** * [01. Inspiration](#inspiration) * [02. Investigate `cfg` file](#cfg) * [03. Investigate `item.template` file](#item) * [04. Investigate `about.md` and `cv.md` files](#md) * [05. Launch LFSA](#lfsa) * [06. Generate the site](#gen) * [07. Summary](#summary) ## 01. Inspiration Suppose you are a great Russian painter named Valentin Serov. Everytime anyone wants to know about you they refer to [Wikipedia][serov]. 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][01-files]: * 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][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: ``` Serov

PSKOV_ITEM_TITLE

PSKOV_ITEM_CONTENTS

``` **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 `.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)
* 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][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][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][01-sample]. 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 `.html` filename |