Jak postawić stronę z CV na hostingu przy użyciu JSON Resume

przez

Jeśli kiedykolwiek próbowałeś stworzyć swoje CV w Wordzie, to wiesz, że to droga przez mękę. Formatowanie żyje własnym życiem, coś się przesuwa, coś się rozjeżdża, a eksport do PDF potrafi zepsuć cały efekt. Dlatego coraz więcej osób przenosi swoje CV do świata webowego – i robi to w sposób nowoczesny, automatyzowalny i elegancki.

Jednym z najlepszych narzędzi do tego jest JSON Resume. To otwartoźródłowy standard, który pozwala opisać swoje CV w formacie JSON, a następnie wygenerować z niego stronę internetową, PDF, a nawet własny motyw graficzny. Brzmi jak magia? Trochę tak, ale to magia, którą możesz opanować w jeden wieczór.

W tym artykule pokażę Ci:

  • czym jest JSON Resume i dlaczego warto go używać,
  • jak stworzyć swoje CV w formacie JSON,
  • jak wybrać motyw i wygenerować stronę,
  • jak postawić gotowe CV na hostingu (GitHub Pages, Netlify, Vercel),
  • jak zautomatyzować aktualizacje,
  • oraz jak dodać własne elementy, jeśli lubisz dłubać w kodzie.

Zaczynajmy.

Co to jest JSON Resume i dlaczego warto?

JSON Resume to projekt, który powstał z bardzo prostego powodu: ludzie mieli dość walki z formatowaniem CV. Twórcy uznali, że CV to po prostu dane – a dane najlepiej przechowywać w formacie JSON. Dzięki temu:

  • możesz łatwo edytować swoje CV w dowolnym edytorze tekstu,
  • możesz generować różne wersje CV z jednego pliku,
  • możesz używać gotowych motywów graficznych,
  • możesz hostować CV jako stronę internetową,
  • możesz zautomatyzować aktualizacje i publikację.

Najważniejsze jest jednak to, że oddzielasz treść od wyglądu. To dokładnie tak, jak w nowoczesnych aplikacjach – dane są w jednym miejscu, a sposób ich prezentacji w drugim.

Krok 1: Instalacja JSON Resume

Zacznijmy od podstaw. JSON Resume działa na Node.js, więc jeśli jeszcze go nie masz, pobierz go z oficjalnej strony.

Gdy Node jest gotowy, instalujesz CLI:

npm install -g resume-cli

To narzędzie pozwoli Ci generować CV, testować je lokalnie i publikować.

Krok 2: Utwórz swoje CV w formacie JSON

Najprościej zacząć od wygenerowania szablonu:

resume init

Powstanie plik resume.json, który jest sercem całego projektu. Otwórz go w ulubionym edytorze i zacznij uzupełniać.

Przykładowy fragment:

{
  "basics": {
    "name": "Krzysztof Kowalski",
    "label": "Full Stack Developer",
    "email": "krzysztof@example.com",
    "website": "https://twojastrona.pl",
    "summary": "Programista z pasją do tworzenia nowoczesnych aplikacji webowych."
  },
  "work": [
    {
      "company": "TechCorp",
      "position": "Software Engineer",
      "startDate": "2021-01-01",
      "summary": "Tworzenie aplikacji w Node.js i React."
    }
  ]
}

Format jest prosty i intuicyjny. Możesz dodać sekcje takie jak:

  • edukacja,
  • projekty,
  • umiejętności,
  • certyfikaty,
  • języki,
  • zainteresowania.

Krok 3: Wybór motywu (theme)

JSON Resume ma mnóstwo gotowych motywów. Najpopularniejszy to jsonresume-theme-flat.

Instalujesz go tak:

npm install -g jsonresume-theme-flat

A potem generujesz stronę:

resume export index.html --theme flat

W tym momencie masz już gotową stronę HTML z Twoim CV. Możesz ją otworzyć w przeglądarce i zobaczyć efekt.

Krok 4: Podgląd CV lokalnie

Jeśli chcesz zobaczyć CV w trybie live, użyj:

resume serve --theme flat

Strona będzie dostępna pod adresem:

http://localhost:4000

Za każdym razem, gdy zmienisz plik resume.json, odśwież stronę i zobaczysz aktualizacje.

Krok 5: Przygotowanie plików do hostingu

Najprostszy sposób to wygenerowanie statycznej strony:

resume export index.html --theme flat

Możesz też wygenerować PDF:

resume export cv.pdf --theme flat

W folderze projektu powinieneś mieć:

/resume.json
/index.html
/cv.pdf (opcjonalnie)

Teraz czas wrzucić to na hosting.

Jak wdrożyć stronę z CV (JSON Resume) w Seohost.pl z DirectAdmin

Poniżej przykładowe wdrożenie JSON Resume na polskim hostingu w Seohost.pl, który posiada przyjemny i intuicyjny panel administracyjny DirectAdmin.

1. Przygotowanie plików lokalnie

Zacznij od wygenerowania gotowego pliku HTML z JSON Resume.

1.1. Instalacja resume-cli

npm install -g resume-cli

1.2. Utworzenie pliku CV

resume init

Edytujesz resume.json według potrzeb.

1.3. Wygenerowanie strony HTML

Załóżmy, że używasz motywu „flat”:

npm install -g jsonresume-theme-flat
resume export index.html --theme flat

Po tej operacji masz gotowy plik:

index.html

To właśnie ten plik wrzucisz na hosting.

2. Logowanie do DirectAdmin na seohost.pl

Wejdź na adres panelu, który dostałeś od seohost.pl, np.:

https://twojadomena.pl:2222

Zaloguj się danymi z maila powitalnego.

3. Wgranie plików na serwer

Masz dwie opcje:

  • przez File Manager w DirectAdmin,
  • przez FTP (np. FileZilla).

Obie działają tak samo, ale File Manager jest szybszy, jeśli wrzucasz tylko jeden plik.

Opcja A: Wgrywanie przez File Manager

  1. W DirectAdmin przejdź do: Files → domains → twojadomena.pl → public_html
  2. Kliknij Upload files.
  3. Wybierz index.html.
  4. Zatwierdź.

Gotowe – strona powinna działać od razu.

Opcja B: Wgrywanie przez FTP (np. FileZilla)

  1. Otwórz FileZillę.
  2. Wpisz dane FTP z seohost.pl:
    • Host: adres serwera (np. serwer123.seohost.pl)
    • Login: nazwa użytkownika
    • Hasło: hasło z panelu
    • Port: 21
  3. Po połączeniu przejdź do:Koddomains/twojadomena.pl/public_html
  4. Przeciągnij index.html do tego folderu.

I to wszystko.

4. Konfiguracja domeny (jeśli chcesz mieć własny adres)

Jeśli masz domenę w seohost.pl, to:

  1. W DirectAdmin przejdź do Account Manager → Domain Setup.
  2. Dodaj domenę, jeśli jeszcze jej nie ma.
  3. Upewnij się, że katalog public_html jest aktywny.
  4. Jeśli domena jest zewnętrzna, ustaw DNS na:
ns1.seohost.pl
ns2.seohost.pl

Po propagacji (zwykle 10–60 minut) strona będzie działać.

5. Dodanie dodatkowych plików (np. PDF z CV)

Jeśli wygenerowałeś PDF:

resume export cv.pdf --theme flat

Wgraj go do public_html.

Możesz go potem linkować np.:

<a href="cv.pdf">Pobierz CV w PDF</a>

6. Automatyczne aktualizacje (opcjonalnie)

Jeśli chcesz, aby Twoje CV aktualizowało się automatycznie po każdej zmianie w repozytorium GitHub, możesz:

  • generować HTML lokalnie i wrzucać go ręcznie,
  • albo użyć GitHub Actions i FTP deploy.

Poniżej masz gotowy workflow, który po każdej zmianie w repo:

  1. generuje nowe index.html,
  2. wrzuca je na serwer seohost.pl przez FTP.

Plik .github/workflows/deploy.yml:

name: Deploy Resume to SEOHost

on:
  push:
    branches: [ "main" ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Install Node
      uses: actions/setup-node@v3
      with:
        node-version: 18

    - name: Install resume-cli
      run: npm install -g resume-cli jsonresume-theme-flat

    - name: Generate HTML
      run: resume export index.html --theme flat

    - name: FTP Deploy
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: ${{ secrets.FTP_SERVER }}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        local-dir: ./
        server-dir: /domains/twojadomena.pl/public_html/

W sekcji Secrets w GitHubie dodajesz:

  • FTP_SERVER
  • FTP_USERNAME
  • FTP_PASSWORD

I masz pełną automatyzację.

7. Co jeśli chcesz mieć więcej niż jeden plik?

Możesz wrzucić:

  • własny CSS,
  • favicon,
  • zdjęcia,
  • dodatkowe podstrony.

DirectAdmin nie ma żadnych ograniczeń – to normalny hosting.

8. Czy JSON Resume działa dobrze na seohost.pl??

Tak, bo:

  • generuje statyczne pliki,
  • nie wymaga PHP, Node, baz danych,
  • działa na każdym hostingu, który obsługuje HTML.

SEOHost + DirectAdmin to idealne środowisko dla takich projektów.

9. Jak sprawdzić, czy strona działa?

Po wgraniu plików wejdź w przeglądarce na:

https://twojadomena.pl

Jeśli widzisz swoje CV – wszystko działa.

Jak stworzyć własny motyw JSON Resume?

Jeśli lubisz mieć pełną kontrolę nad wyglądem, możesz stworzyć własny motyw.

1. Utwórz folder motywu

mkdir my-theme
cd my-theme
npm init -y

2, Dodaj plik index.js

const fs = require("fs");
const Handlebars = require("handlebars");

module.exports.render = function (resume) {
  const template = fs.readFileSync(__dirname + "/template.hbs", "utf-8");
  return Handlebars.compile(template)(resume);
};

3. Dodaj szablon HTML

template.hbs:

<html>
<head>
  <title>{{basics.name}} - CV</title>
</head>
<body>
  <h1>{{basics.name}}</h1>
  <h2>{{basics.label}}</h2>
  <p>{{basics.summary}}</p>

  <h3>Doświadczenie</h3>
  {{#each work}}
    <div>
      <strong>{{company}}</strong> - {{position}}
      <p>{{summary}}</p>
    </div>
  {{/each}}
</body>
</html>

4. Testowanie motywu

resume serve --theme .

I masz własny motyw.

Dlaczego warto mieć CV jako stronę internetową?

To nie tylko kwestia estetyki. Strona z CV daje Ci:

  • profesjonalny wizerunek – rekruterzy to uwielbiają,
  • łatwą aktualizację – zmieniasz JSON i gotowe,
  • SEO – Twoje imię i nazwisko zaczyna pojawiać się w Google,
  • możliwość rozbudowy – portfolio, blog, projekty,
  • automatyzację – możesz generować PDF jednym kliknięciem.

To inwestycja, która zwraca się bardzo szybko.

Postawienie strony z CV przy użyciu JSON Resume to świetny sposób na stworzenie nowoczesnego, eleganckiego i łatwego w utrzymaniu życiorysu.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl