Pokaż światu swoje portfolio w 10 minut z Notion

Photo by S O C I A L . C U T on Unsplash

Pokaż światu swoje portfolio w 10 minut z Notion

Agnieszka's photo
Agnieszka
·Aug 22, 2022·

3 min read

Subscribe to our newsletter and never miss any upcoming articles

Table of contents

  • Co będzie ci potrzebne?
  • Darmowe portfolio krok po kroku
  • Strona pod własnym adresem internetowym
  • Edycja i wygląd strony

Ostatnio zachwyciło mnie Midjourney AI.

To sztuczna inteligencja, tworząca niesamowite obrazy i grafiki na podstawie twoich instrukcji. Spójrzcie sami na jedną z moich prac:

nomadbynature-yurt-1.png

Od razu chciałam podzielić się najlepszymi obrazami z przyjaciółmi! Ale wysyłać im zdjęcie po zdjęciu...to nie ma sensu. Przyszedł mi na myśl Instagram, ale nie chcę tworzyć nowego konta.

Wtedy przypomniałam sobie, że mogę skorzystać z Notion! Błyskawicznie zbudować i opublikować prostą stronę internetową pokazującą moje prace.

Darmowe portfolio, które mogę przygotować i pokazać światu w 10 minut!

Już wcześniej pisałam jak zrobić darmową stronę internetową z Notion, ale ostatnio pojawiło się nowe, łatwiejsze i zupełnie darmowe rozwiązanie na stronę ze schludnym adresem internetowym.

Autorem rozwiązania jest Jotzilla, a darmową subdomenę (twój-adres.vercel.app) lub darmowe przekierowanie strony Notion pod domenę, którą już masz, oferuje Vercel.

Zaprezentuję więc jak stworzyć stronę internetową, portfolio z Notion tym nowym sposobem.

Co będzie ci potrzebne?

Zanim opublikujesz swoją darmową stronę internetową, potrzebne ci będzie:

  • konto GitHub (darmowe)
  • konto Vercel (darmowe, możesz zalogować się przez konto GitHub)
  • konto Notion (darmowe)
  • publiczna strona Notion (z twoim portfolio)
  • własny adres internetowy (opcjonalnie)

10 minut start!

Darmowe portfolio krok po kroku

Skopiuj repozytorium

Będąc zalogowanym na GitHub, skopiuj repozytorium (tzw. fork) minimal-notion-blog.

notion_blog_1.png

Zmień site.config.js

Skopiuj numer swojej wcześniej przygotowanej, upublicznionej strony Notion (aby to zrobić, w Notion przejdź do opcji 'Share' w prawym górnym rogu strony, a następnie 'Copy web link'):

publiczna-strona-notion.png

Wróć do skopiowanego repozytorium w GitHub i podmień dane w pliku site.config.js:

notion_strona_darmowa.png Zmień 'rootNotionPageId' na numer widoczny na końcu skopiowanego przez ciebie w Notion adresu strony.

Następnie możesz również zmienić 'social usernames'.

Przejdź do Vercel

Po wprowadzeniu zmian, przejdź do strony https://vercel.com/new zaloguj się i zaimportuj swoje nowe repozytorium (minimal-notion-blog).

notion_blog_3.png Po zaimportowaniu, nadaj projektowi nazwę i naciśnij 'Deploy'.

Poczekaj parę minut i gotowe, twoja strona jest już online!

Pretty URL

Ale to jeszcze nie koniec, na razie twoja strona jest dostępna pod przypadkowo wygenerowanym, trudnym do zapamiętania adresem. Tego nie chcemy!

Aby to zmienić, przejdź do 'Dashboard' projektu, przejdż do ustawień 'Settings', a następnie zakładki domeny 'Domains':

notion_darmowa_strona.png

Zmień nazwę subdomeny, na taką która ci odpowiada. Dla siebie wybrałam nomadbynature.vercel.app. Miałam szczęście, że subdomena była jeszcze dostępna :)

Dziel się swoim portfolio ze światem!

Strona pod własnym adresem internetowym

Proste portfolio, czy CV możesz z powodzeniem wyświetlać z subdomeną Vercel, ale jeśli zależy ci na prowadzeniu strony pod własnym adresem, również masz taką możliwość.

W sekcji 'Domains' możesz dodać własny adres internetowy, a Vercel poda ci dane A record i CNAME, DNS Record, które musisz następnie wprowadzić (zmienić), u swojego dostawcy domeny (np. NameSilo).

Edycja i wygląd strony

Elementy i treści na swojej stronie edytujesz, dodajesz, czy odejmujesz na poziomie Notion. Także, aby dodać zdjęcie, czy tekst do strony zaloguj się do Notion i tam modyfikuj swoje portfolio. Zmiany będą widoczne dla odwiedzających stronę praktycznie od razu.

Jeśli natomiast chcesz zmodyfikować elementy takie jak favicon, footer, czy CSS musisz to zrobić w twoim 'minimal-notion-blog' repozytorium na GitHub (modyfikacja plików).


Przydały ci się informacje zawarte w artykule? Chcesz wspomóc mojego bloga? Możesz to zrobić stawiając mi kawę.

 
Share this