Jakiś czas temu pisałem o architekturze JAMSTACK. Jest to świetne rozwiązanie dla kogoś, kto chciałbym zacząć temat z blogowaniem. Dla ludzi, którzy programują w Angular jednym z narzędzi do tworzenia statycznych stron jest Scully.

W tym artykule opiszę jak stworzyć i skompilować blog, który będzie posiadał stronę główną home z listą ostatnich postów oraz stronę o mnie about. No i oczywiście stronę dla każdego postu.

Jak działa Scully?

Scully potrafi przeanalizować projekt Angular i znaleźć listę routingu, na jej podstawie tworzy własną listę routingu. Jest też możliwość dodania ręcznie route. Gdy już ma gotową listę, to generuje index.html dla każdego z route.

W praktyce wygląda to tak, że w domyślnym folderze dist posiadamy dwa katalogi. Jeden z aplikacją wygenerowana przez Angular, a drugi folder wygenerowany przez Scully.

Tworzymy projekt i dodajemy moduły

Na początek stwórzmy projekt za pomocą Angular CLI

ng new scully-example

Następnie dodajmy Scully

ng add @scullyio/init

W celu stworzenia strony home i about, dla każdej z nich wygenerujemy moduł.

ng generate module home --route home --module app

ng generate module about --route about --module app

Dodajmy w głównym komponencie aplikacji odnośniki do każdej ze stron i router-outlet do umieszczenia widoku dla route. W tym celu edytujmy plik app.component.html

<a href="/home">Home</a>
<a href="/about">About</a>

<router-outlet></router-outlet>

Kompilacja projektu

Spróbujmy skompilować naszą aplikację. Na pierwszy ogień skompilujemy nasz projekt za pomocą Angular CLI. Dodajmy flagę produkcyjną.

ng build --prod

Teraz możemy stworzyć projekt za pomocą Scully.

npm run scully -- --scanRoutes

Nie zapominajmy dodać flagi scanRoutes. Analizuje ona na nowo listę routingu. Bez jej dodania, gdyby zmienił się jakiś route, aplikacja skompilowałaby się ze starym routingiem.

Tak jak wspomniałem wyżej w folderze dist mamy 2 foldery:

• Folder scully-example, w którym znajdują się pliki skompilowane przez Angular CLI
• Folder static, w którym znajduje się strona wygenerowana przez Scully

Możemy teraz przetestować stronę. W tym celu należy uruchomić lokalny serwer w folderze dist/static. Osobiście korzystam z live-server.

Widzimy, że przechodząc pomiędzy stronami home i about odwołujemy się do nowych plików index.html.

Dodajemy moduł do blogowania

Scully posiada prostą komendę, dzięki której możemy w prosty sposób dodać moduł do blogowania.

ng generate @scullyio/init:blog

W tym momencie stały się 2 rzeczy

• Wygenerowaliśmy folder blog z plikami md. To właśnie tutaj będzie zawarty cały content do postów.
• Wygenerowaliśmy moduł blog, który umożliwi nam renderowania postów.

Aby połączyć folder i moduł blog potrzebna jest konfiguracja. Znajduje się ona w pliku scully.scully-example.config.ts.

import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "scully-example",
  outDir: './dist/static',
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: "./blog"
      }
    },
  }
};

Pozostało nam dodać na stronie home listę postów. Korzystamy z gotowego serwisu ScullyRoutesService. Posiada on stream, który zwraca nam listę dostępnych route. Należy go odpowiednio przefiltrować przez route z postami.

import { Component, OnInit } from '@angular/core';
import { ScullyRoute, ScullyRoutesService } from '@scullyio/ng-lib';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({...})
export class HomeComponent implements OnInit {
  links$: Observable<ScullyRoute[]> = this.scully.available$.pipe(map(arr => {
    return arr.filter(x => x.published).sort((a, b) => a.date < b.date ? 1 : -1);
  }));

  constructor(private scully: ScullyRoutesService) { }

  ngOnInit(): void {}

}

<div *ngFor="let post of links$ | async">
  <a [href]="post.route">{{ post.title }}</a>
</div>

W tym momencie na stronie mamy już dodane 2 statyczne strony oraz strony wygenerowane przez moduł blog. Pozostaje nam tylko zarządzać postami.

Dodawanie/edycja postów - CMS

Gotowe systemy dostępne w internecie do zarządzania treścią pozwolą nam edytować i dodawać posty na stronę. Należy dokonać wyboru, który nas najbardziej interesuje. Rozróżniamy 2 rodzaje CMS:

• Oparte na API. Nasze posty są przechowywane na zewnętrznych bazach danych.
• Oparte na Git. Nasze posty są przechowywane na repozytorium.

Polecam CMS oparte na Git ze względu na podejście JAMSTACK. Możemy sobie zapewnić CI/CD i mamy wgląd w historię.

Jeśli zainteresuje was przechowywanie postów na Git, to skorzystałbym z systemu Netlify lub Forestry.

Podsumowanie

Możemy tworzyć statyczne strony za pomocą Angular Universal, lecz Scully przyśpiesza i ułatwia taka prace. Dla ludzi programujących w Angular i zainteresowanych SSG jest to świetne rozwiązanie.

A jak tam wasze doświadczenia ze statycznymi stronami? Dajcie znać w komentarzu.

📕 DARMOWY EBOOK 📕

📕 Odkryj 7 tajemnic przez, które Angular stanie się łatwiejszy 📕