Prosta strona z linkami na własnej domenie
Komu to potrzebne?
Taka prosta strona z linkami jest potrzebna przede wszystkim osobom, które chcą mieć jedno miejsce z odnośnikami do swoich treści, ale bez zakładania kolejnych kont w zewnętrznych serwisach. Sprawdza się u twórców, freelancerów, hobbystów, muzyków czy fotografów, którzy potrzebują tylko krótkiej wizytówki podlinkowanej w bio. To rozwiązanie dla tych, którym nie zależy na rozbudowanych statystykach, integracjach i abonamentach Technicznie to banał — i właśnie dlatego idealnie nadaje się na tani hosting do testów lub małych projektów. Użycie własnej domeny np. imienazwisko.pl - pomaga budować markę osobistą, wygląda profesjonalnie i zachęca do kliknięca w link. A teraz bardziej konkretene zastosowania:
- Programiści, deweloperzy, ludzi IT - pozwala na zgromadzenie linków do portfolio, realizowanych projektów, publicznych repozytoriów itp.
- Osoby szukające pracy - cv, doświadczenie zawodowe, linki do portali społecznościowych
- Właściciele zwierząt - linki do zdjęć, filmów na YT, a może informacje zdrowotne zabiezpieczone hasłem
- Osoby sprzedające samochód - więcej zdjęć niż na portalach, linki do ogłoszeń na różnych portalach, filmów na YT, informacji technicznych o danym modelu
- Grupy szkolne i studenckie - linki do planów zajęć, ważnych informacji terminów zaliczeń, materiałów edukacyjnych
- Znajomi organizujący wydarzenia np. urodziny czy wspólne wypady - linki do tras, miejscówek, rozliczeń, prognozy pogody czy pdfa z planem podróży
- Właściwie każdy, kto chce mieć w jednym miejscu swoje linki, zaprezentowane w miłej dla oka formie :)
Zobacz demo
Krok 0: Zamów hosting Bieda15
Hosting kosztuje 15 PLN na rok i powinien wystarczyć do tego zastosowania.
Krok 1: Kup domenę
Możesz dzialać na darmowej subdomenie od biedahostingu, ale na własnej wygląda to zdecydowanie lepiej. Możesz poszukać domen w lokalnych, np. waw.pl - dzięki temu będziesz miał większy wybór ciekawych adresów. Możesz poszukać promocji u różnych dostawców - ale pamiętaj, że nawet takie super oferty są droższe przy przedłużeniu za rok.
Krok 2: Podłącz domenę do hostingu
W panelu domeny zmień ustawienia DNS na ns1.microhost.pl i ns2.microhost.pl i dodaj domenę w panelu swojego hostingu przez Zarządzenie kontami-> Zarządzanie domenami -> dodaj nową. Rozpropagowanie zmian w DNS moze zająć dłuższy czas, dlatego wynik może być widoczny nawet następnego dnia.
Krok 3: Podłącz darmowy certyfikat SSL
W panelu hostingu, który otrzymałeś po zakupie przejdż do Zarządzanie kontami -> certyfikaty SSL. Wybierz "Uzyskaj automatyczny certyfikat od dostawcy ACME". Wypełnij pola i wybierz zapisz.
Krok 4: Kod strony z linkami
Kod strony możesz wygenrować w AI, ale oczywiście polecamy wykonać samodzielnie. Mozesz kombinować z promptami, a możesz zacząć od najprostszego, czyli np. wygeneruj stronę w html i css dla grupy znajomych organizujących wspólny wyjazd, pozwalający na zamieszczenie linków do mapy trasy. miejsc noclegowych, rozliczenia i albumu ze zdjęciami na google drive. Możesz spróbować doprecyzować np. zmień kolor nagłówka, a także eksperymentować z róznymi modelami AI. Kod zapisz jaki index.html w dowolnym folderze. Mój przykład wyglada tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nasz Wspólny Wyjazd 🚗</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
header {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
color: white;
padding: 40px 30px;
text-align: center;
}
header h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
header p {
font-size: 1.1em;
opacity: 0.95;
}
.content {
padding: 40px 30px;
}
.info-section {
margin-bottom: 30px;
padding: 25px;
background: #f8f9fa;
border-radius: 15px;
border-left: 5px solid #667eea;
}
.info-section h2 {
color: #333;
margin-bottom: 15px;
font-size: 1.5em;
display: flex;
align-items: center;
gap: 10px;
}
.info-section p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.link-card {
background: white;
border-radius: 12px;
padding: 25px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
color: inherit;
display: block;
}
.link-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.link-card .icon {
font-size: 3em;
margin-bottom: 15px;
}
.link-card h3 {
color: #333;
margin-bottom: 10px;
font-size: 1.3em;
}
.link-card p {
color: #666;
font-size: 0.9em;
margin-bottom: 15px;
}
.link-card .btn {
display: inline-block;
padding: 10px 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: opacity 0.3s ease;
}
.link-card .btn:hover {
opacity: 0.9;
}
.participants {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
padding: 20px;
border-radius: 12px;
margin-top: 30px;
}
.participants h3 {
color: #333;
margin-bottom: 15px;
}
.participants ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.participants li {
background: white;
padding: 8px 15px;
border-radius: 20px;
color: #333;
font-weight: 500;
}
footer {
text-align: center;
padding: 20px;
background: #f8f9fa;
color: #666;
font-size: 0.9em;
}
@media (max-width: 768px) {
header h1 {
font-size: 2em;
}
.links-grid {
grid-template-columns: 1fr;
}
.content {
padding: 30px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🌄 Nasz Wspólny Wyjazd</h1>
<p>Wszystkie niezbędne informacje w jednym miejscu</p>
</header>
<div class="content">
<div class="info-section">
<h2>📅 Informacje o wyjeździe</h2>
<p><strong>Termin:</strong> 15-22 lipca 2026</p>
<p><strong>Destynacja:</strong> Tatry i okolice</p>
<p><strong>Liczba uczestników:</strong> 8 osób</p>
</div>
<div class="links-grid">
<a href="#" class="link-card" onclick="alert('Dodaj link do Google Maps z trasą'); return false;">
<div class="icon">🗺️</div>
<h3>Mapa Trasy</h3>
<p>Szczegółowa trasa z zaznaczonymi przystankami</p>
<span class="btn">Otwórz mapę</span>
</a>
<a href="#" class="link-card" onclick="alert('Dodaj link do dokumentu z noclegami'); return false;">
<div class="icon">🏠</div>
<h3>Noclegi</h3>
<p>Lista zarezerwowanych miejsc noclegowych</p>
<span class="btn">Zobacz noclegi</span>
</a>
<a href="#" class="link-card" onclick="alert('Dodaj link do arkusza rozliczeń'); return false;">
<div class="icon">💰</div>
<h3>Rozliczenia</h3>
<p>Wspólne wydatki i rozliczenia grupy</p>
<span class="btn">Otwórz arkusz</span>
</a>
<a href="#" class="link-card" onclick="alert('Dodaj link do albumu Google Photos/Drive'); return false;">
<div class="icon">📸</div>
<h3>Album Zdjęć</h3>
<p>Wspólny album ze zdjęciami z wyjazdu</p>
<span class="btn">Zobacz zdjęcia</span>
</a>
</div>
<div class="participants">
<h3>👥 Uczestnicy wyjazdu</h3>
<ul>
<li>Anna</li>
<li>Tomek</li>
<li>Kasia</li>
<li>Michał</li>
<li>Ola</li>
<li>Bartek</li>
<li>Magda</li>
<li>Paweł</li>
</ul>
</div>
<div class="info-section" style="margin-top: 30px;">
<h2>💡 Instrukcja</h2>
<p><strong>Jak zaktualizować linki:</strong></p>
<p>1. Otwórz plik w edytorze tekstu (np. Notatnik)</p>
<p>2. Znajdź odpowiedni link (linijki ze znacznikiem <code>href="#"</code>)</p>
<p>3. Zamień <code>#</code> na właściwy adres URL z Google Drive/Maps</p>
<p>4. Zapisz plik i otwórz ponownie w przeglądarce</p>
</div>
</div>
<footer>
<p>Życzymy udanej podróży! 🚗✨</p>
</footer>
</div>
</body>
</html>
Krok 5: Zmodyfkuj potrzebne informacje i linki
Zgodne z Waszymi planami informacje możesz modyfkować przez AI (jeżeli go używasz) podczas tworzenia szablonu strony. Możesz wpisać na przykład "zmień imiona uczestników na Zosia, Marek, Krzysztof" Takie podejcie oczywiscie zadziała, ale jeżeli masz trochę zacięcia technicznego - to polecam zmodyfikować informacje i linki ręcznie. Kod W moim szablonie mam fragmenty:
- informacje o wyjeździe - modyfikuje szczegóły terminu.
<div class="info-section">
<h2>📅 Informacje o wyjeździe</h2>
<p><strong>Termin:</strong> 15-22 lipca 2026</p>
<p><strong>Destynacja:</strong> Tatry i okolice</p>
<p><strong>Liczba uczestników:</strong> 8 osób</p>
</div>
- Linki - czyli kwintesencja strony z linkami. Uzupełnij w miejsce krzyżyka (href="x") potrzebny na przykład:
<div class="links-grid">
<a href="https://mapa-turystyczna.pl/" class="link-card" onclick="alert('Dodaj link do Google Maps z trasą'); return false;">
<div class="icon">🗺️</div>
<h3>Mapa Trasy</h3>
<p>Szczegółowa trasa z zaznaczonymi przystankami</p>
<span class="btn">Otwórz mapę</span>
</a>
W moim przykładzie mam fragment onclick="alert('Dodaj link do Google Maps z trasą'); return false; Usuń go po uzupełnieniu linków.
- A może zmienisz linki do profilów społecznościowych uczestników, szczególnie jak nie wszyscy się znają :) Jak zmienić - wymyślisz sam.
Dlaczego to działa na tanim hostingu?
Do takiego zadania nie potrzebujesz VPS-a ani chmury. Wystarczy: biedahosting, najprostsza oferta pozwlająca na utrzymnie strony w internecie. Właśnie do takich małych rzeczy powstał BiedaHosting — prosty, tani i bez umów.