Hvordan raskt Bygge en enkel Blogg i Laravel med Canvas

Thomas B. Westerheim Feb. 09, 2021 — 7 min å lese

Hva er Canvas?

Hvem kan være bedre til å fortelle hva Canvas er enn utvikleren selv:

Canvas is a fully open source package to extend your existing Laravel application and get you up-and-running with a blog in just a few minutes. In addition to a distraction-free writing experience, you can view monthly trends on your content, get insights into reader traffic and more!

Link til Austinntoddj/Canvas på Github

Gjøre det selv eller bruke pakker?

Kort fortalt er den en enkel måte å starte en blogg i Laravel. Kanskje du er som meg i begynnelsen og tenker, "men det kan jeg jo lage selv". Det kan du nok. Spørsmålet er, hvor lang tid tar deg deg, og hvilke funksjoner har du planer om å inkludere?

Det er utrolig fort gjort at man begynner å utvikle noe uten å ha en omfattende plan om hva som skal være inkludert i produktet.

Så du kan lage et enkelt redigeringsverktøy, kanskje med en textarea og inputs her og der. Tro meg, det er ikke nok. Du innser kanskje at du skulle gjerne sett hvor mange som så posten, eller ha muligheten til å publisere på en spesifik dato (som er veldig vanlig).

Plutselig har dette endt opp med å bli et helt prosjekt i seg selv, og hvis du ikke har tenkt framover har du heller ikke gjort at du kan gjenbruke dette i ditt neste prosjekt.

Det betyr jo selvfølgelig ikke at det er bortkastet. Spesielt hvis du er i starten skal det også være noen argumenter for å bare lage ting. Få øvelsen igjennom å repetere om og om igjen.

Det er derimot ikke spesielt effektivt, uansett, nok om det.



Funksjoner

Canvas kommer med en rekke enkle funksjoner, men ikke noe skikkelig stort. Canvas er ikke ment å være et komplett bloggverktøy. Isteden så gir den deg alt du trenger for å komme i gang raskt og enkelt.

Selve tekst-skrivingen eller redigeringen om du vil kan minne om en enklere versjon av Notion. Hvis du er kjent med det, hvis ikke så er det et fantastisk program der du kan ta notater og lagre dem i et system. Game-changer for min del.

Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

Uansett, her er hovedfunksjonene samt noe ekstra smått og godt:


Back-End

Backend så gjør den alt for deg helt automatisk i Vue.js og Ajax requests (så vidt jeg vet i hvertfall). Du trenger egentlig bare å skrive posten din å publisere den.


Brukerprofil

Samt vanlige funksjoner som er slitsom å lage selv. Som å bytte navn på profilen din.. bytte passord, epost, avatar, en liten beskrivelse om deg selv. Disse kan du også bruke senere til å lage en brukerprofil der besøkende kan komme å lese om deg og se alle postene dine. Eller Canvas kan lage front-end for deg, men det kommer vi tilbake til (siden det er en valgfri del av Canvas).


Skriving

Ellers har den enkle funksjoner som du ville funnet hvor som helst pluss litt ekstra. Sånn som å lage overskrifter (h2, h3), det er jo et minstekrav, samt linker og lignende.

Sammen med muligheten til å lage lister enkelt, embeds (typ YouTube o.l).

Det skal sies at jeg elsker ikke brukergrensesnittetet her og bruker heller andre verktøy til selve skrivingen. Siden den er litt clunky kan det ofte forstyrre konsentrasjonen min, så skrivingen blir choppy.

Uansett, den er ikke ubrukelig. Heller ganske midt på tre.



Statistikk

Canvas tar også vare på en rekke med forskjellige statistikker som er veldig grei å ha i starten. Igjen, dette er ikke noe utrolig omfattende. Så, man bør kanskje spørre seg selv, "vil jeg ha et program som har alt, eller vil jeg kommer kjapt i gang?". Vil du komme kjapt i gang er Canvas perfekt.

Den holder kontroll på blant annet:

  • Hvilken tid på døgnet det er mest populært å lese bloggposten din.
  • Hvor mange unike som har sett posten
  • Hvor besøkende kommer fra (Google, Facebook eller link et annet sted)

Roller

Man får 3 roller innebygd:

  • Contributor
  • kan skrive, men ikke publisere
  • Editor
  • Kan publisere og skrive
  • Samt redigere andre brukeres poster
  • Admin
  • En som kan gjøre alt og se alt

Er vel ikke så mye mer å si om det.


Tags og Topics

Disse er så typisk at man ikke føler man trenger i starten. Også når man kommer skikkelig i gang så må man tilbake og sette tags og topics på alle postene sine for at de skal bli funnet.

Hva er tags og topics? De gjør det lettere for besøkende å finne fram til det de ønsker. Spesielt hvis du begynner å få en respektabel mengde med poster.

Si noen har lyst å lese om design, da kan de trykke på "Tags" og finne alle poster om webdesign. Veldig greit å ha.


Ekstra Funksjoner

Lese Tid

Pakken har også en egen metode for å finne hvor lang tid det tar å lese blogginnlegget ditt. La oss si at du er i .blade.php og har hentet $posts i Controlleren din.

@foreach($posts as $post)

	<span>{{ $post->getReadTimeAttribute() }}</span>

@endforeach

Søk

Man kan søke i egne poster i publiseringsverktøyet som kommer godt med på lang sikt.

Dark Mode

Det er jo så populært i disse dager. Selv om jeg ikke bruker det så setter jeg pris på om kvelden i hvert fall, men det er nå bare meg.


Weekly Digest

Få tilsendt de ukentlige statistikkene dine. Dette er helt valgfritt selvfølgelig, men et nice touch.

Frontend

Du kan også få en helt ferdig front-end som viser bloggpostene dine. Dette krever nesten ingen oppsett. Man må bare bytte logoer og litt sånn smått. Designet er inspirert av Medium.com, og ser ganske bra ut.

Det skal sies at jeg bruker ikke denne, det ser litt merkelig ut med to forskjellige design på en nettside. Det kan jo funke noen ganger å dele designet sånn som det der, men det er gjerne når en del av nettsiden din er noe helt annet. Jeg tenker at blogg siden går i boksen med andre vanlige sider. Men det er nå meg. **


Installasjon

Så alt det er greit (hvis du leste igjennom det i det hele tatt). Hvordan installerer vi dette.


Krav

Vel, aller først så må man ha:

  • NPM
  • Composer

Disse burde du strengt tatt ha allerede hvis du bruker Laravel. Også trenger du:

  • PHP ≥ 7.3
  • Laravel ≥ 6.0

Samtidig må du ha satt opp databasen din i Laravel.

Når det er gjort kjører du 3 kommandoer i terminalen din:

composer require austintoddj/canvas
php artisan canvas:install
php artisan storage:link

Nå vil du blant annet finne konfigurasjons filen din plassert i config/canvas.php

/*
|--------------------------------------------------------------------------
| Base Domain
|--------------------------------------------------------------------------
|
| This is the subdomain where Canvas will be accessible from. If the
| domain is set to null, Canvas will reside under the defined base
| path below. Otherwise, this will be used as the subdomain.
|
*/

'domain' => env('CANVAS_DOMAIN', null),

/*
|--------------------------------------------------------------------------
| Base Path
|--------------------------------------------------------------------------
|
| This is the URI where Canvas will be accessible from. If the path
| is set to null, Canvas will reside under the same path name as 
| the application. Otherwise, this is used as the base path.
|
*/

'path' => env('CANVAS_PATH_NAME', 'canvas'),

Login-skjemaet finner du på adressen

  • www.canvas.test/canvas/login


Sette greiene opp

  1. Logg Inn med det brukernavnet og passordet du fikk i terminalen
  2. Trykk på avataret oppe i høyre hjørne og gå inn på Your Profil


Når det er gjort er du fri til å begynne å publisere. Jeg skal innrømme at jeg slet litt med å finne ut hvordan man faktisk kunne publisere innlegg i starten. Det viser set at hvis du er inne på siden Posts så kan du trykke på de 3 prikkene oppe i høyre hjørne. Der finner du New Post.


Ekstra Oppsett

Utover dette er det et par ting til du kan gjøre som er frivillig.


Canvas UI (frontend)

Har du lite tid og vil ha en frontend opp kjapt? Enklere enn dette tror jeg ikke det blir. Først kjører du

php artisan canvas:ui

Når det er gjort kjører du en av disse

# Med NPM
npm run install && npm run dev

# Med Yarn
yarn && yarn dev

Unsplash Integrasjon

Hvis du ikke har hørt om Unsplash før er det en nettside med stock bilder man kan bruke gratis. Først må du lage deg en bruker der, så kan du sette opp en ny applikasjon her https://unsplash.com/oauth/applications.

Når det er gjort må du inn i config/canvas.php og fikse

/*
|--------------------------------------------------------------------------
| Unsplash Integration
|--------------------------------------------------------------------------
|
| Visit <https://unsplash.com/oauth/applications> to create a new Unsplash
| app. Use the confidential Access Key given to you to integrate with
| the API. Note that demo apps are limited to 50 requests per hour.
|
*/

'unsplash' => [
    'access_key' => env('CANVAS_UNSPLASH_ACCESS_KEY'),
]

Lage egen frontend

Å lage den selv er ganske straight-forward, og det de fleste burde gjøre hvis de har tid til det skal jeg være ærlig. Med mindre du har tenkt å løpe med det designet i canvas-ui. Altså hvis du har tenkt å beholde det designet på resten av nettsiden også.

Hvis ikke, så syntes jeg det virker sømløst. Bloggen bør har samme navbar og lignende som resten av nettsiden.

Så da er det jo bare å designe da, du trenger en index side og en show side så har du det.