Jak zrobi膰 blog z Scully?

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.

Copyright 漏 2021 DevLuk