Skip to content

Commit 1393a93

Browse files
mattmakaimattmakai
committed
proofread then post should be ready
1 parent a917eab commit 1393a93

File tree

10 files changed

+66
-63
lines changed

10 files changed

+66
-63
lines changed

content/posts/170605-static-sites-pelican.markdown renamed to content/posts/170609-static-sites-pelican.markdown

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ title: How to Create Your First Static Site with Pelican and Jinja2
22
slug: generating-static-websites-pelican-jinja2-markdown
33
meta: Learn how to generate static websites with Python, the Pelican static site generator, Jinja2 and Markdown.
44
category: post
5-
date: 2017-06-05
6-
modified: 2017-06-07
7-
headerimage: /img/170605-static-sites-pelican/header.jpg
5+
date: 2017-06-09
6+
modified: 2017-06-09
7+
headerimage: /img/170609-static-sites-pelican/header.jpg
88
headeralt: Pelican, Jinja2 and Markdown logos.
99

1010

@@ -23,7 +23,7 @@ In this tutorial you will learn how to create a
2323
[static website](/static-site-generator.html) from scratch
2424
using [Pelican](/pelican.html).
2525

26-
<img src="/img/170605-static-sites-pelican/gunship-bootstrap-css.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Articles page after Bootstrap CSS has been added.">
26+
<img src="/img/170609-static-sites-pelican/gunship-bootstrap-css.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Articles page after Bootstrap CSS has been added.">
2727

2828
Our simple static site will have pages that look like the above screenshot
2929
but the entire site can be easily customized and expanded with your own design
@@ -80,7 +80,7 @@ source staticsite/bin/activate
8080
When activated the virtualenv should prepend its name to your command prompt,
8181
as shown in the following screenshot of my terminal.
8282

83-
<img src="/img/170605-static-sites-pelican/activate-virtualenv.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Create and activate the Python virtual environment.">
83+
<img src="/img/170609-static-sites-pelican/activate-virtualenv.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Create and activate the Python virtual environment.">
8484

8585
Install the appropriate dependencies after your virtualenv is activated.
8686
Use the `pip` command to install Pelican and Markdown, which will also
@@ -199,7 +199,7 @@ The Pelican development server will start serving up your site with a
199199
daeman process. Go to [localhost:8000](http://localhost:8000) in your web
200200
browser and you will see the first version of your static site.
201201

202-
<img src="/img/170605-static-sites-pelican/default-style.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Default styling on the Pelican static site.">
202+
<img src="/img/170609-static-sites-pelican/default-style.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Default styling on the Pelican static site.">
203203

204204
What if you don't have `make` installed on your system? Change into the
205205
`output` directory and use the `python -m http.server` command to use the
@@ -252,8 +252,8 @@ the following content.
252252
title: Gunship
253253
slug: gunship
254254
category: bands
255-
date: 2017-06-05
256-
modified: 2017-06-06
255+
date: 2017-06-09
256+
modified: 2017-06-09
257257

258258

259259
[Gunship](https://www.gunshipmusic.com/) is a *retro synthwave* artist out of the UK.
@@ -334,7 +334,7 @@ python -m http.server
334334

335335
Our first post in all its glory...
336336

337-
<img src="/img/170605-static-sites-pelican/gunship-first-post.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Gunship as our first band post on retro synthwave static site.">
337+
<img src="/img/170609-static-sites-pelican/gunship-first-post.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Gunship as our first band post on retro synthwave static site.">
338338

339339
You can change the HTTP server port binding by adding a number after the
340340
command, if you want to serve more than one static site at a time or you
@@ -391,13 +391,13 @@ python -m http.server
391391

392392
Head back to the browser and refresh to view the updated configuration.
393393

394-
<img src="/img/170605-static-sites-pelican/updated-configuration.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="New links created by the pelicanconf.py configuration settings file.">
394+
<img src="/img/170609-static-sites-pelican/updated-configuration.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="New links created by the pelicanconf.py configuration settings file.">
395395

396396
What happens when we click on the blog post title? It takes us to a
397397
very similar-looking page with the
398398
[localhost:8000/gunship.html](http://localhost:8000/gunship.html) URL.
399399

400-
<img src="/img/170605-static-sites-pelican/gunship-post.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Gunship subpage for the site.">
400+
<img src="/img/170609-static-sites-pelican/gunship-post.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Gunship subpage for the site.">
401401

402402
Alright, we updated some basic site-wide data, but our site really could
403403
use a change of paint.
@@ -414,64 +414,66 @@ Create a new directory under your project directory that is named
414414
`templates` is where our [Jinja2](/jinja2.html) templates will be stored and
415415
can override the default theme.
416416

417-
...base.html...
418-
419-
```jinja2
420-
```
421-
422-
Within `theme/templates` create a file named `article.html` that will have a
423-
different theme for blog posts than the rest of the site. Fill `article.html`
424-
with the following Jinja2 markup.
417+
Start by creating a file named `base.html` which will store the boilerplate
418+
used by templates across the site.
425419

426420
```jinja2
427421
<!DOCTYPE html>
428422
<html lang="en">
429423
<head>
430-
<title>{{ article.title }}</title>
424+
<title>{% block title %}{% endblock %}</title>
431425
</head>
432426
<body>
433427
<div class="container">
434-
<div class="row">
435-
<div class="col-md-8">
436-
<h1>{{ article.title }}</h1>
437-
<label>Posted on <strong>{{ article.date }}</strong></label>
438-
{{ article.content }}
439-
</div>
440-
</div>
428+
{% block content %}{% endblock %}
441429
</div>
442430
</body>
443431
</html>
444432
```
445433

434+
Within `theme/templates` create a file named `article.html` that will have a
435+
different theme for blog posts than the rest of the site. Fill `article.html`
436+
with the following Jinja2 markup.
437+
438+
```jinja2
439+
{% extends "base.html" %}
440+
441+
{% block title %}{{ article.title }}{% endblock %}
442+
443+
{% block content %}
444+
<div class="row">
445+
<div class="col-md-8">
446+
<h1>{{ article.title }}</h1>
447+
<label>Posted on <strong>{{ article.date }}</strong></label>
448+
{{ article.content }}
449+
</div>
450+
</div>
451+
{% endblock %}
452+
```
453+
446454
Next we will use a Jinja2 template to override the default `index.html` main
447455
page. Again within the `theme/templates` directory, create a file named
448456
`index.html` with the following markup.
449457

450458
```jinja2
451-
<!DOCTYPE html>
452-
<html lang="en">
453-
<head>
454-
<title>{{ SITENAME }}</title>
455-
<!-- Latest compiled and minified Bootstrap CSS -->
456-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
457-
</head>
458-
<body>
459-
<div class="container">
460-
<div class="row">
461-
<div class="col-md-8">
462-
<h1>{{ SITENAME }}</1>
463-
{% for article in articles %}
464-
<h2><a href="/{{ article.slug }}.html">{{ article.title }}</a></h2>
465-
<label>Posted on <strong>{{ article.date }}</strong></label>
466-
{{ article.content|truncate(110) }}
467-
{% else %}
468-
No posts yet!
469-
{% endfor %}
470-
</div>
471-
</div>
472-
</div>
473-
</body>
474-
</html>
459+
{% extends "base.html" %}
460+
461+
{% block title %}{{ SITENAME }}{% endblock %}
462+
463+
{% block content %}
464+
<div class="row">
465+
<div class="col-md-8">
466+
<h1>{{ SITENAME }}</h1>
467+
{% for article in articles %}
468+
<h2><a href="/{{ article.slug }}.html">{{ article.title }}</a></h2>
469+
<label>Posted on <strong>{{ article.date }}</strong></label>
470+
{{ article.content|truncate(110) }}
471+
{% else %}
472+
No posts yet!
473+
{% endfor %}
474+
</div>
475+
</div>
476+
{% endblock %}
475477
```
476478

477479
Regenerate the site and make sure you are serving it with the development
@@ -485,21 +487,22 @@ pelican -s pelicanconf.py -o output -t theme content
485487
```
486488

487489
Go to [localhost:8000](http://localhost:8000) and refresh the page.
488-
The styling on the main page remains the same because it is not a
489-
blog post, but a page with a collection of the blog articles.
490+
The styling on the main page is now different because it uses the `index.html`
491+
theme.
490492

491-
<img src="/img/170605-static-sites-pelican/basic-theme.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Basic theme remains unchanged.">
493+
<img src="/img/170609-static-sites-pelican/index-no-styling.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="The index.html page without any styling applied.">
492494

493-
Click on the Gunship post however and we see that the `article.html`
494-
"styling" has been applied to the page.
495+
Click on the title of the Gunship post. This page uses the `article.html`
496+
template, although it's hard to tell because there is no
497+
[CSS](/cascading-style-sheets.html) applied to the page.
495498

496-
<img src="/img/170605-static-sites-pelican/gunship-no-styling.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Articles have an entirely different theme based on article.html markup.">
499+
<img src="/img/170609-static-sites-pelican/gunship-no-styling.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Articles have an entirely different theme based on article.html markup.">
497500

498501
Pretty sparse! We can at least add the Bootstrap CSS to the HTML to
499502
align our content.
500503

501-
Within `article.html`, add the following line for Bootstrap under
502-
`<title>{{ article.title }}</title>`.
504+
Within `base.html`, add the following line for Bootstrap under
505+
`<title>{% block title %}{% endblock %}</title>` and above `</head>`.
503506

504507
```jinja2
505508
<!-- Latest compiled and minified Bootstrap CSS -->
@@ -508,13 +511,13 @@ Within `article.html`, add the following line for Bootstrap under
508511

509512
Regenerate the site and refresh the Gunship page.
510513

511-
<img src="/img/170605-static-sites-pelican/gunship-bootstrap-css.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Articles page after Bootstrap CSS has been added.">
514+
<img src="/img/170609-static-sites-pelican/gunship-bootstrap-css.png" width="100%" class="technical-diagram img-rounded" style="border:1px solid #ccc" alt="Articles page after Bootstrap CSS has been added.">
512515

513516
Well at least our design has moved from 1996 to 2001. I am sure you can
514517
do a whole lot more to improve your own site's design.
515518

516-
The new `article.html` is not much of a theme for now but it at least
517-
provides a fresh start for completely customized blog posts.
519+
The new `base.html` does not provide much of a theme yet but it at least
520+
provides a fresh start for completely customized sites.
518521

519522

520523
## What's next?
@@ -533,5 +536,5 @@ on Twitter
533536
or [@mattmakai](https://twitter.com/mattmakai).
534537

535538
See something wrong in this blog post? Fork
536-
[this page's source on GitHub](https://github.com/mattmakai/fullstackpython.com/blob/master/content/posts/170605-static-sites-pelican.markdown)
539+
[this page's source on GitHub](https://github.com/mattmakai/fullstackpython.com/blob/master/content/posts/170609-static-sites-pelican.markdown)
537540
and submit a pull request.

static/img/170605-static-sites-pelican/activate-virtualenv.png renamed to static/img/170609-static-sites-pelican/activate-virtualenv.png

File renamed without changes.

static/img/170605-static-sites-pelican/default-style.png renamed to static/img/170609-static-sites-pelican/default-style.png

File renamed without changes.

static/img/170605-static-sites-pelican/gunship-bootstrap-css.png renamed to static/img/170609-static-sites-pelican/gunship-bootstrap-css.png

File renamed without changes.

static/img/170605-static-sites-pelican/gunship-first-post.png renamed to static/img/170609-static-sites-pelican/gunship-first-post.png

File renamed without changes.

static/img/170605-static-sites-pelican/gunship-no-styling.png renamed to static/img/170609-static-sites-pelican/gunship-no-styling.png

File renamed without changes.

static/img/170605-static-sites-pelican/gunship-post.png renamed to static/img/170609-static-sites-pelican/gunship-post.png

File renamed without changes.

static/img/170605-static-sites-pelican/header.jpg renamed to static/img/170609-static-sites-pelican/header.jpg

File renamed without changes.

‎static/img/170609-static-sites-pelican/index-no-styling.png‎

62.4 KB
Loading

static/img/170605-static-sites-pelican/updated-configuration.png renamed to static/img/170609-static-sites-pelican/updated-configuration.png

File renamed without changes.

0 commit comments

Comments
 (0)