Add LFSA and en PSKOV
This commit is contained in:
247
pskov/en/education.03.site.md
Normal file
247
pskov/en/education.03.site.md
Normal file
@@ -0,0 +1,247 @@
|
||||
Title: Education: 03. Site
|
||||
Date: 2019-05-14 00:00
|
||||
Category: Page
|
||||
Slug: education.03.site
|
||||
Lang: en
|
||||
|
||||
| < Back | Index | Next > |
|
||||
|---|---|---|
|
||||
| [02. Dependencies][prev] | [Education][index] | [04. Language][next] |
|
||||
|
||||
</div><div class="contents">
|
||||
|
||||
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)
|
||||
|
||||
<a name="inspiration"/>
|
||||
|
||||
## 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.
|
||||
|
||||
<a name="cfg"/>
|
||||
|
||||
## 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.
|
||||
|
||||
<a name="item"/>
|
||||
|
||||
## 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
|
||||
|
||||
<a name="md"/>
|
||||
|
||||
## 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.
|
||||
|
||||
<a name="lfsa"/>
|
||||
|
||||
## 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'
|
||||
```
|
||||
|
||||
<a name="gen"/>
|
||||
|
||||
## 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
|
||||
|
||||
<a name="summary"/>
|
||||
|
||||
## 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 `<slug>.html` filename |
|
||||
|
||||
</div><div class="contents">
|
||||
|
||||
| < Back | Index | Next > |
|
||||
|---|---|---|
|
||||
| [02. Dependencies][prev] | [Education][index] | [04. Language][next] |
|
||||
|
||||
[index]: education.html
|
||||
[prev]: education.02.deps.html
|
||||
[next]: education.04.lang.html
|
||||
|
||||
[01-files]: https://github.com/OGStudio/site-pskov-sample/tree/master/01.TwoPages
|
||||
[01-sample]: http://opengamestudio.org/pskov/sample/01.TwoPages/about.html
|
||||
[ini-file]: https://en.wikipedia.org/wiki/INI_file
|
||||
[serov]: https://en.wikipedia.org/wiki/Valentin_Serov
|
||||
[lfsa]: http://opengamestudio.org/lfsa
|
||||
[tool]: http://opengamestudio.org/pskov
|
||||
Reference in New Issue
Block a user