265 lines
7.4 KiB
Markdown
265 lines
7.4 KiB
Markdown
Title: Education: 03. Site
|
|
Date: 2019-06-25 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 `pskov.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. Observe the site](#observe)
|
|
* [08. 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]:
|
|
|
|
* pskov.cfg
|
|
* item.template
|
|
* about.md
|
|
* cv.md
|
|
|
|
Let's look at their contents closer.
|
|
|
|
<a name="cfg"/>
|
|
|
|
## 02. Investigate `pskov.cfg` file
|
|
|
|
`pskov.cfg` file has the following contents:
|
|
|
|
```
|
|
input = .
|
|
item = item.template
|
|
```
|
|
|
|
`pskov.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 `pskov.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` | 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
|
|
|
|
<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 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.
|
|
|
|
<a name="lfsa"/>
|
|
|
|
## 05. Launch LFSA
|
|
|
|
<video controls poster="../vid/education.03.site.launch-lfsa.w2k.poster.png">
|
|
<source src="../vid/education.03.site.launch-lfsa.w2k.mp4" type ="video/mp4">
|
|
<source src="../vid/education.03.site.launch-lfsa.w2k.webm" type ="video/webm">
|
|
ERROR Your browser does not support HTML5 video
|
|
</video>
|
|
|
|
Launch [LFSA][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'
|
|
```
|
|
|
|
<a name="gen"/>
|
|
|
|
## 06. Generate the site
|
|
|
|
<video controls poster="../vid/education.03.site.gen.w2k.poster.png">
|
|
<source src="../vid/education.03.site.gen.w2k.mp4" type ="video/mp4">
|
|
<source src="../vid/education.03.site.gen.w2k.webm" type ="video/webm">
|
|
ERROR Your browser does not support HTML5 video
|
|
</video>
|
|
|
|
Go to [Tool][tool] page and press `Generate` button to generate HTML files right where Markdown ones reside.
|
|
|
|
<a name="observe"/>
|
|
|
|
## 07. Observe the site
|
|
|
|
<video controls poster="../vid/education.03.site.observe.w2k.poster.png">
|
|
<source src="../vid/education.03.site.observe.w2k.mp4" type ="video/mp4">
|
|
<source src="../vid/education.03.site.observe.w2k.webm" type ="video/webm">
|
|
ERROR Your browser does not support HTML5 video
|
|
</video>
|
|
|
|
Observe generated web site locally by opening `about.html` and switching between pages.
|
|
|
|
<a name="summary"/>
|
|
|
|
## 08. 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` | 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 |
|
|
|
|
</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
|