Rewriting this site with Twig and Markdown

Separating the content and the page structure

Explanation

warning: over simplified

Most websites are made with the following files:

HTML for the layout and content of the site
CSS for the styling
JS for actions (ex: doing math)

The issue with this is that the layout and the content are in the same file. In the case of this website the layout is always the same, just some text in the middle of a gray rectangle. Writing HTML every time is tedious. I found a new solution called Twig that separates the content and the layout.

The files are like this:

markdown - the content of the page
twig - the layout of the page
CSS for styling
JS for actions

Markdown files are extremely easy to work with and I installed a content manager called Grav so I have a web interface to easily edit these pages. Twig files are essentially just HTML files with placeholders for the content. I can even reuse my CSS from my old site.

Examples

HTML

The top part of this page in HTML

<!DOCTYPE html>
<html>
<head>
<link href="/user/themes/sowtheme/css/website.css" type="text/css" rel="stylesheet">

<title>i rewrote this site with twig and markdown - sg's site</title>
</head>
<body>
<a href="/" rel="noopener noreferrer"><- home</a>
<div class="container">
<h2 class=g>sowgro's site:</h2>
<h1>i rewrote this site with twig and markdown</h1>
<h2>seperating the content and the page structure</h2>
<h3>explanation</h3>
<div class="notices yellow">
<p>warning: over simplified</p>
</div>
<p>Most websites are made with the following files:</p>
<ul>
<li>HTML for the layout and content of the site</li>
<li>CSS for the styling</li>
<li>JS for actions (ex: doing math)</li>
</ul>

Markdown

The top part of this page in markdown

# i rewrote this site with twig and markdown
## seperating the content and the page structure

### explanation

! warning: over simplified

Most websites are made with the following files:
- HTML for the layout and content of the site
- CSS for the styling
- JS for actions (ex: doing math)

As you can see it is very readable even when not rendered.

Twig

The twig file used for all pages on this site (besides the home page)

<!DOCTYPE html>
{% do assets.addCss('theme://css/website.css', 100) %}
<html>
<head>
    {{ assets.css()|raw }}
    <title>{% if header.title %}{{ header.title|e }} - sg's site </title>
</head>
<body>
    <a href="/" rel="noopener noreferrer"><- home</a>
    <div class="container">
        <h2 class=g>sowgro's site:</h2>
        {{ page.content|raw }}
    </div>
</body>
</html>