Tworzymy bloga w oparciu o Gatsby!

Kamil Powroźnik

2019-07-04T21:21+02:00 | 8 min

Hej! Mam nadzieje, że przeczytałeś mój ostatni post 🙂 Dzisiejszy artykuł będzie poniekąd kontynuacją poprzedniego - tym razem od strony praktycznej.

W przypadku tego projektu nie będziemy tworzyć layoutu od zera. Wykorzystamy tu generator stron statycznych Gatsby.js oraz podstawowy szablon bloga, który będzie wykorzystywał pliki markdown jako nasze posty. Na koniec opublikujemy go za pomocą GitLab Pages i jego narzędzia CI.

Stworzenie projektu

Ekosystem gatsby’ego oferuje nam wiele szablonów - my wykorzystamy ten podstawowy: gatsby-starter-blog: Gatsby Starter | GatsbyJS

Pierwszym krokiem będzie zainstalowanie zależności gatsby-cli globalnie. Oto komenda:

npm install -g gatsby-cli

Gdy to mamy już za sobą musimy stworzyć nowy projekt na podstawie wybranego szablonu:

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

Gotowe! Możemy teraz przejść do stworzonego katalogu i otworzyć go w edytorze kodu.

cd my-blog && code .

gatsby-cli

Interfejs konsolowy Gatsby’ego udostępnia nam parę komend (między innymi użytą wyżej gatbsy new), które ułatwią nam proces tworzenia. Zrzućmy na nie okiem:

* ``gatsby new`` - tworzy nowy projekt, co już mogłeś/aś zauważyć 
* ``gatsby develop`` - uruchamia nasz projekt w środowisku developerskim, dzięki czemu możemy korzystać między innymi z takich funkcji jak *hot module replacement*
* ``gatsby serve`` - uruchamia lokalnie produkcyjną wersję naszego projektu

Więcej informacji na ten temat znajdziesz tutaj: Commands (Gatsby CLI) | GatsbyJS

Konfiguracja bloga

Używając powyższego startera nie musimy konfigurować zbyt wiele, wszystko dostajemy praktycznie out of the box, jednak musimy zmienić dane o stronie i opcjonalnie kilka dodatkowych pluginów.

Przejdźmy zatem do edytora kodu i otwórzmy plik gatsby-config.js - jak widzisz cała konfiguracja opiera się na obiekcie JavaScript.

metadane

siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: `Kyle Mathews`,
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
    social: {
      twitter: `kylemathews`,
    },
  },

Wszystkie właściwości są dobrze opisane, więc zmiany nie stworzą nam większych problemów. Do dzieła:

siteMetadata: {
    title: `Programowanie w JavaScript`,
    author: `Kamil Powroźnik`,
    description: `Prosty blog, który opisuje moją naukę programowania`,
    siteUrl: `https://kpowroznik.github.io/my-blog`,
    social: {
      twitter: `kpowroznikdev`,
    },
  },

manifest.json

Brnąc dalej po pliku konfiguracyjnym, możesz dostrzec konfigurację pluginów odpowiadających między innymi za odczytywanie z systemu plików, formatowanie plików markdown między innymi z kolorowaniem składni i formatowaniem obrazów.

My przejdźmy jednak do miejsca gdzie znajduje się gatsby-plugin-manifest, tu możemy zmienić właściwości, na których podstawie będzie tworzony plik manifest.json.

Tak wygląda moja konfiguracja:

{
	resolve: `gatsby-plugin-manifest`,
	options: {
	name: `Blog o JavaScript`,
	short_name: `Blog o JavaScript`,
	start_url: `/`,
	background_color: `#ffffff`,
	theme_color: `#663399`,
	display: `minimal-ui`,
	icon: `content/assets/gatsby-icon.png`,
	},
},

Google Analytics

Jeśli jesteś zainteresowany przeglądaniem statystyk Google Analytics dotyczących odwiedzin strony (a domyślam się że jesteś 😎), możesz przejść do gatsby-plugin-google-analytics i uzupełnić go o właściwość trackingId.

Dzięki temu będziesz miał dostęp do statystyk o swoich odwiedzających -nie musisz nic więcej robić.

Piszemy pierwszy post!

Czas na śmietankę 😃 W katalogu /content/blog możesz zobaczyć przykładowe posty, napiszmy jednak swoje własne hello-world!

Do tego celu możemy wykorzystać istniejący już katalog hello-world, wykasujmy jednak jego zawartość 🙂

Utwórz teraz nowy plik index.md, jego treść zacznie się od konfiguracji meta danych posta (użyjemy tu składni YAML)

---
title: Hello World? Witaj świecie!
date: "2019-07-04T17:12:03.284Z"
description: Mój pierwszy post
---

Dalej tworzymy pierwszy wpis używając składni markdown

Witaj świecie! Piszę swój pierwszy post przy pomocy Gatsbyego!

``console.log(„witaj świecie!”)``

Jak pisać w markdownie dowiesz się tutaj: Markdown Cheatsheet · adam-p/markdown-here Wiki · GitHub

Czas na test! Odpalmy 🚀 serwer developerski za pomocą:

gatsby develop

I przechodzimy pod adres http://localhost:8000.

Analogicznie do powyższego, możesz tworzyć kolejne posty 🥰

Zmiana biografii autora

Został nam do zrobienia jeden mały szczegół. Zmiana oryginalnej biografii, która ukazuje się w postach i na stronie głównej.

W tym celu przejdź do pliku bio.js znajdującego się w katalogu /src/components i podmień znajdujący się tam tekst na taki, który Ci odpowiada.

<p>
	Autor: <strong>{author}</strong>.
	{` `}
    <a href={`https://twitter.com/${social.twitter}`}>
      Powinieneś obserwować go na twitterze.
	</a>
</p>

PS. podmień również obraz znajdujący się pod ścieżką /content/assets/profile-pic.jpg

Publikacja bloga

Wygenerowane za pomocą komendy gatsby build pliki możemy wrzucić na jakikolwiek serwer lub usługę pokroju GitHub Pages. My użyjemy jednak GitLaba z jego narzędziem CI.

Opiszę to w kilku krokach:

  • Utwórz repozytorium w serwisie GitLab oraz dodaj je do lokalnego repozytorium z projektem

  • Jeśli blog nie będzie w twoim głównym repozytorium dodaj do pliku konfiguracyjnego gatsby-config.js właściwość:

pathPrefix: `/my-blog`, // nazwa repozytorium
  • Utwórz plik .gitlab-ci.yml i wypełnij go następującą treścią:
image: node:11.10.1

cache:
  paths:
    - node_modules/

pages:
  script:
    - yarn install
    - ./node_modules/.bin/gatsby build --prefix-paths
  artifacts:
    paths:
      - public
  only:
    - master
  • Dodaj zmiany, utwórz commit i wyślij pliki do zdalnego repozytorium.

Gotowe! 🙂 Za niedługo zobaczysz swojego bloga pod adresem https://[nazwa_uzytkownika].gitlab.io/[nazwa_repozytorium]

Zaletą takiego deploy’u aplikacji jest to, że przy każdym commicie do gałęzi master nasza aplikacja zostanie automatycznie przebudowana.

Efekt mojej pracy w postaci kodu źródłowego dostępny jest tutaj: https://gitlab.com/kpowroznik/my-blog/

A działające demo pod tym adresem: https://kpowroznik.gitlab.io/my-blog

Dzięki za dziś, jeśli Ci się spodobało podaj ten post dalej 😎


Hej, ta strona wykorzysuje pliki cookies, localStorage, sessionStorage oraz dane osobowe do celów analitycznych.