StefanK - Hello World 🌎

Um zukünftig über meine Aktivitäten rundum Freie Software zu berichten, habe ich mir eine kleine Webseite zusammengebaut bzw. ich bin noch dabei. Ich verwende für die Seite Pelican und Bootstrap.

Pelican ist ein in Python geschriebener static site generator
Bootstrap ist ein CSS/JS framework

Installation

Die Installation von pelican und bootstrap via apt:

apt install pelican pelican-doc libjs-bootstrap5 libjs-bootstrap5-doc

Konfiguration

Ein neues Projekt kann mit folgendem Befehl angelegt werden: pelican-quickstart

mkdir content/images
edit pelicanconf.py

In der pelicanconf.py folgende Einträge hinzufügen:

THEME = 'themes/bootstrap5'
THEME_STATIC_DIR = 'theme'

Theme erstellen

mkdir -p themes/bootstrap5/
pelican-themes -p
cp -r /usr/lib/python3/dist-packages/pelican/themes/simple/* themes/bootstrap5/
mkdir themes/bootstrap5/static
cp -r /usr/share/bootstrap-html/css themes/bootstrap5/static/
cp -r /usr/share/bootstrap-html/js themes/bootstrap5/static/

Templates-Dateien anpassen

Danach müssen die Dateien in themes/bootstrap5/templates/ angepasst werden, damit pelican die Seiten für bootstrap erstellt.

themes/bootstrap5/templates/base.html

<!DOCTYPE html>
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
<head>
        {% block head %}
        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
        <meta charset="utf-8" />
        <meta name="generator" content="Pelican" />
    <link rel="stylesheet" href="/theme/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/theme/css/main.css" type="text/css" />
    <script src="/theme/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">

        {% if FEED_ALL_ATOM %}
        <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
        {% endif %}
        {% if FEED_ALL_RSS %}
        <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" />
        {% endif %}
        {% if FEED_ATOM %}
        <link href="{{ FEED_DOMAIN }}/{%if FEED_ATOM_URL %}{{ FEED_ATOM_URL }}{% else %}{{ FEED_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
        {% endif %}
        {% if FEED_RSS %}
        <link href="{{ FEED_DOMAIN }}/{% if FEED_RSS_URL %}{{ FEED_RSS_URL }}{% else %}{{ FEED_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
        {% endif %}
        {% if CATEGORY_FEED_ATOM and category %}
        <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
        {% endif %}
        {% if CATEGORY_FEED_RSS and category %}
        <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_RSS_URL %}{{ CATEGORY_FEED_RSS_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_RSS.format(slug=category.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
        {% endif %}
        {% if TAG_FEED_ATOM and tag %}
        <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_ATOM_URL %}{{ TAG_FEED_ATOM_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_ATOM.format(slug=tag.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" />
        {% endif %}
        {% if TAG_FEED_RSS and tag %}
        <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
        {% endif %}
        {% endblock head %}
</head>

<body id="index" class="home">
<div class="container">

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{ SITEURL }}/">{{ SITENAME }}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        {% for title, link in MENUITEMS %}
          <a class="nav-link active" aria-current="page" href="{{ link }}">{{ title }}</a>
            <li><a href="{{ link }}">{{ title }}</a></li>
        {% endfor %}

        {% if DISPLAY_PAGES_ON_MENU %}
          {% for p in pages %}
        <li class="nav-item">
            <a class="nav-link {% if p == page %}active{% endif %}" href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a>
        </li>
          {% endfor %}
        {% endif %}

    {% if DISPLAY_CATEGORIES_ON_MENU %}
          {% for cat, null in categories %}
        <li class="nav-item">
            <a class="nav-link {% if cat == category %}active{% endif %}" href="{{ SITEURL }}/{{ cat.url }}">{{ cat.name }}</a>
        </li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

        {% block content %}
        {% endblock %}
        <footer id="contentinfo" class="body">
                <address id="about" class="vcard body">
                Proudly powered by <a href="https://getpelican.com/">Pelican</a>,
                which takes great advantage of <a href="https://www.python.org/">Python</a>.
                </address><!-- /#about -->
        </footer><!-- /#contentinfo -->
<div>
</body>
</html>