Jak stworzyć półstatyczną stronę WWW na Bootstrap i Markdown
Półstatyczna strona WWW to świetne rozwiązanie, gdy chcemy łatwo zarządzać treścią bez potrzeby wdrażania dynamicznych systemów zarządzania treścią (CMS). W tym artykule pokażę Ci, jak stworzyć taką stronę z użyciem HTML, JavaScript i biblioteki Marked.js, która umożliwia przetwarzanie Markdown na HTML.
Kroki do stworzenia półstatycznej strony WWW
- Przygotowanie pliku HTML jako szkieletu strony.
- Dodanie skryptu JavaScript, który wczyta plik Markdown.
- Przetworzenie treści Markdown na HTML przy pomocy Marked.js.
- Wyświetlenie przetworzonej treści na stronie.
Przykładowy kod HTML
Oto prosty szkielet strony HTML, który wczytuje treść Markdown z pliku content.md i wyświetla ją w przeglądarce.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page z Markdown</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Skip link -->
<a href="#main-content" class="visually-hidden-focusable">Przejdź do głównej treści</a>
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container px-5">
<a class="navbar-brand" href="#">Firma XXX</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#nasze-us-ugi" target="_self">Nasze usługi</a></li>
<li class="nav-item"><a class="nav-link" href="#dlaczego-my-" target="_self">Dlaczego my?</a></li>
<li class="nav-item"><a class="nav-link" href="#opinie-naszych-klient-w" target="_self">Opinie klientów</a></li>
<li class="nav-item"><a class="nav-link" href="#skontaktuj-si-z-nami" target="_self">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
<main id="main-content" class="container my-5" tabindex="-1">
<div id="content" class="p-4">
<p>Ładowanie treści...</p>
</div>
</main>
<footer class="text-center py-4 bg-dark text-white">
<p>© 2025 Moja firma.</p>
</footer>
<!-- Marked.js Library -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Override function
const renderer = {
heading({ tokens, depth }) {
const text = this.parser.parseInline(tokens);
const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
return `
<h${depth}>
<a name="${escapedText}" class="anchor" href="#${escapedText}" aria-label="${text}">
<span class="header-link"></span>
</a>
${text}
</h${depth}>`;
}
};
marked.use({ renderer });
const markdownFile = 'content.md';
fetch(markdownFile)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(markdown => {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = marked.parse(markdown);
})
.catch(error => {
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = `<div class="alert alert-danger">Błąd ładowania treści: ${error.message}</div>`;
});
</script>
</body>
</html>Przykładowy plik Markdown
Poniżej znajduje się przykład treści zapisanej w formacie Markdown pod nazwą content.md. Ten plik może być łatwo edytowany, a zmiany będą automatycznie widoczne na stronie po jej odświeżeniu.
# Profesjonalne Strony Internetowe
Czy potrzebujesz nowoczesnej, responsywnej i zoptymalizowanej strony internetowej? **Firma XXX** to zespół ekspertów, którzy pomogą Ci stworzyć stronę dopasowaną do Twojego biznesu!
## Nasze usługi
- Tworzenie stron wizytówek
- Sklepy internetowe
- Strony na WordPress i dedykowane rozwiązania
- Optymalizacja SEO i szybkości działania
- Hosting i utrzymanie stron
## Dlaczego my?
- **Doświadczenie** – Ponad 15 lat na rynku web developmentu
- **Indywidualne podejście** – Każdy projekt dopasowany do Twoich potrzeb
- **Wsparcie i doradztwo** – Pomagamy na każdym etapie realizacji
- **Atrakcyjne ceny** – Konkurencyjne oferty i elastyczne pakiety
## Opinie naszych klientów
> "Firma XXX stworzyło dla mnie niesamowitą stronę internetową! Dziękuję za profesjonalizm i szybkie działanie." – *Anna Kowalska*
> "Dzięki nowej stronie, nasza firma zyskała więcej klientów. Polecam!" – *Jan Nowak*
## Skontaktuj się z nami
- **Telefon:** +48 123 456 789
- **E-mail:** kontakt@firmaxxx.pl
- **Strona:** [www.firmaxxx.pl](https://www.firmaxxx.pl)
- **Siedziba:** ul. Przykładowa 10, 00-000 Warszawa
---
**Zamów swoją stronę już dziś i zacznij budować swoją markę online!**
Gotowy przykład
Oto jak wygląda ta strona:
Chcesz wiedzieć więcej? Przejdź do strony.
23 stycznia 2025
20