:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

Jak założyć bloga korzystając z Hexo?


Mam kolegę Czarka, który uczy się programowania. Spotykamy się czasami na Hangout, aby pogadać o kodzie. Poleciłem Czarkowi, aby pisał daily raporty z przebiegu swojej nauki. Ważne jest, aby on sam widział po miesiącu (kiedy przyjdą PIERWSZE chwile zwątpienia) ile już się nauczył i że nie może się poddać!

Baner reklamujący artykuł

Najlepszą formą jest tworzenie notatek i publikacja ich na łamach swojego bloga. Łączy się wtedy dwie rzeczy:

  • przyjemne - pisanie własnego bloga
  • pożyteczne - archiwizacja stanu nauki, np. dla potomnych / pracodawcy

Teraz rodzi się pytanie: Jak szybko postawić bloga?
Wordpress?

O jej…

  • Wordpress to kobyła.
  • Wordpress wymaga bazy danych.
  • Wordpress to nie wersjonuje (np. za pomocą Gita) stanu artykułów.
  • Wordpress posiada panel administracyjny.

Alternatywa?
Jest ich mnóstwo: Jekyll, Gatsby, Hugo, Hexo.

Jekylla używam od 2-3 lat i jestem z niego bardzo zadowolony.
Ten blog, który właśnie czytasz, jest oparty właśnie na Jekyllu.

Napisałem kiedyś bliźniaczy artykuł pt. “Jak założyć bloga korzystając z Jekyll?” o tym jak zbudować bloga w oparciu o inny silnik - Jekyll.
Post pochodzi sprzed 3 lat. Zobacz jak przez ten czas rozwinąłem się pod kątem literackim - budowanie zdań itp. Zmieniłem się w ogóle?

Cel :key:

W tym artykule chciałbym przedstawić Ci jak szybko - praktycznie od zera - postawić projekt z systemem blogowym (blogiem) oraz go opublikować via GitHub Pages.

:arrow_forward: Kod źródłowy powinien być dostępny pod adresem:
github.com/piecioshka/moj-blog/

:arrow_forward: Strona powinna działać pod adresem:
piecioshka.github.io/moj-blog/

1/6 Zbudowanie projektu (w oparciu o Hexo)

Copy + Paste

npm install -g hexo-cli
hexo init moj-blog
cd moj-blog
npm install

Warto przerobić ten projekt na repozytorium Git poprzez wykonanie następujących poleceń:

Copy + Paste

git init
git add .
git commit -am "Initial import"

2/6 Dodanie posta

Dodaj jakiś plik (albo edytuj plik hello-world.md) w formacie Markdown do katalogu source/_posts.

WAŻNE

Nie zapomnij wpisać na górze nowo-stworzonego pliku preambuły:

---
title: To jest tytuł mojego artykułu
---

3/6 Konfiguracja projektu

Należy zmienić w pliku _config.yml:

  • title, np. Blog programistyczny
  • author, np. Piotr Kowalski
  • url, np. https://piecioshka.github.io/
  • root, np. /moj-blog/

Wypadało by później utworzyć rewizję z tymi zmianami. Prawda?

Copy + Paste

git commit -am "Setup settings"

4/6 GitHub: Konfiguracja repozytorium

  • Stworzenie repozytorium o nazwie np. moj-blog odwiedzając stronę github.com/new

    Ważne!

    Nie wybieraj żadnego pliku z formatem pliku .gitignore ani z licencją.

  • “Wypchanie” kodu aplikacji na serwer:

    Copy + Paste

      git remote add origin [email protected]:piecioshka/moj-blog.git
      git push -u origin master
    

5/6 Przygotowanie projektu do publikacji

  • Instalacja paczki, która wrzuci katalog public/ do brancha gh-pages:

    Copy + paste

      npm i gh-pages --save-dev
    
  • Dodanie zadania do deploymentu do pliku package.json:

      "scripts": {
          "deploy": "gh-pages -d public/"
      }
    
  • Stworzenie rewizji w Git (po dodaniu zadania do deploymentu):

    Copy + Paste

      git commit -am "Add deploy task"
    

6/6 Publikacja projektu (via GitHub Pages)

  • “Wypchanie” wszystkich zmian na serwer:

    Copy + Paste

      git push
    
  • Zbudowanie STATYCZNEJ wersji bloga w katalogu public/:

    Uwaga

    Aby wyeliminować wcześniejsze budowania należy uruchomić: Copy + Paste

    hexo clean
    

    Teraz można przejść do meritum, czyli do zbudowania statyczne struktury plików HTML, CSS, JavaScript wraz z obrazkami.

    Copy + Paste

      hexo deploy
      npm run deploy
    

:tada: Demo :tada:

Otwórz stronę piecioshka.github.io/moj-blog/
Twoim oczom powinien ukazać się PUSTY blog wraz z listą artykułów.

JEST TAK? Napisz o tym w komentarzu.
NIE JEST TAK? Napisz tym bardziej!

Inne podejście do deploymentu

Dodane: 2018-06-03

W sieci znalazłem blog autora jednego z moich ulubionych tematów do Hexo - Jonathan Klughertz, który w jednym swoim wpisie pokazał inne podejście do publikacji bloga via GitHub Pages.

Zapraszam do zapoznania się z artykułem pt. Hexo deploy your blog to github pages in one command.

Post dedykuję Czarkowi. Powodzenia w blogowaniu!

PS. Zamieszczam link do bloga Cezarego: ctworzewski.github.io/blog/

Artykuły, dzięki którym stworzysz bloga: