Polski frontend

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ć!

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:

$ 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: cezarytworzewski.github.io/blog/