Lag din egen nettside med Astro: Gratis tema, eget design og CMS

En god nettside trenger ikke begynne med et stort budsjett. For en liten bedrift kan første steg være en tydelig forside, en enkel presentasjon av tjenestene og en lett synlig måte å ta kontakt på.

Astro er en av teknologiene jeg liker aller best å jobbe med. Jeg liker å kunne starte enkelt, ha kontroll på designet og bygge videre når behovene blir større. Her viser jeg hvordan du kan bruke et gratis tema som utgangspunkt for din egen merkevare, og hva du bør tenke på før du legger til et publiseringssystem.

Hva er Astro?

Astro er et rammeverk for å bygge nettsteder, særlig sider der innhold står sentralt. Det kan levere ferdig HTML og legge til interaktivitet der den trengs. For en presentasjonsside, blogg eller tjenesteside kan det gi et godt utgangspunkt for en lett og rask løsning. Bilder, integrasjoner og egne kodevalg påvirker likevel sluttresultatet.

Astro er ikke en ferdig visuell nettsidebygger. Du må kunne åpne et prosjekt, bruke noen terminalkommandoer og redigere tekst og kode. Det er overkommelig å lære stegvis, men vi skal ikke late som at en mal gjør hele jobben.

Start med et gratis tema

Astros temakatalog inneholder gratis alternativer for ulike typer nettsteder. Velg ut fra strukturen du trenger: Har temaet plass til tjenester, prosjekter, kontaktinformasjon og eventuelt artikler? En passende struktur sparer ofte mer arbeid enn flotte animasjoner.

Til den planlagte demonstrasjonen vil vi bruke AstroWind. Før opptak velger vi én konkret versjon av temaet og følger README-filen som hører til den. Filnavn og installasjonskrav kan endre seg. Les også lisensen, behold påkrevde merknader i prosjektet og kontroller bruksrettighetene til bilder og andre mediefiler.

Å klone et tema betyr her å hente en kopi av prosjektets kode. Vi kopierer ikke en annen bedrifts nettsted, bilder eller kundehistorier. Den planlagte demoen bruker en oppdiktet byggbedrift, slik at vi kan vise hele prosessen uten å presentere fiktive prosjekter som ekte referanser.

Fra nedlasting til lokal forhåndsvisning

Du trenger Git, en kodeeditor og en Node.js-versjon som temaet støtter. Last ned prosjektet fra temaets repository, installer avhengighetene slik README beskriver, og start utviklingsserveren. Siden kjører da lokalt på maskinen din. Den er ikke publisert på nettet.

I den planlagte videoen vil vi vise både kommandoene og resultatet i nettleseren. Installeringsmeldinger får gjerne gå raskere i redigeringen, men selve handlingene skal være synlige. Vi tar også vare på versjonen vi brukte, slik at veiledningen blir lettere å følge senere.

Gjør temaet til din egen merkevare

Begynn med budskapet. Besøkeren skal forstå hva du tilbyr, hvem du hjelper og hva de bør gjøre videre. «Vi bygger fremtiden» sier lite alene. «Oppussing og rehabilitering for boligeiere i Oslo» gir et mer konkret utgangspunkt dersom det faktisk beskriver virksomheten.

Bytt deretter navn, logo og favicon. Velg én hovedfarge og en tydelig kontrastfarge til knapper. Bruk et lite antall skrifttyper, og sjekk at teksten er lett å lese på mobil. Logoen trenger ikke dominere for at siden skal føles som din.

Erstatt demoinnholdet med egne tjenester og bilder du har rett til å bruke. Fjern seksjoner du ikke trenger. Ikke behold oppdiktede kundeuttalelser, prosjekttall eller sertifiseringer bare fordi de følger med malen. En kort, ærlig side er et bedre utgangspunkt enn en stor side fylt med lånt troverdighet.

Avslutt med navigasjon, kontaktopplysninger, sidetitler og delingsbilde. Test at knappene faktisk leder riktig. Et kontaktskjema trenger en løsning som mottar og håndterer innsendingene; et pent skjema i en mal er ikke bevis på at meldinger blir levert.

Trenger du Sanity, EmDash eller ingen CMS?

Et CMS er et system for å administrere innhold. Hvis du sjelden endrer fem enkle sider og er komfortabel med prosjektfilene, kan du starte uten. Innholdet kan ligge i Astro-filer eller tekstfiler i prosjektet.

Sanity gir deg et separat innholdssystem med et tilpassbart redigeringsmiljø. Astro henter innholdet gjennom integrasjonen. Dette kan passe når flere skal redigere tjenester, prosjekter eller artikler, eller når samme innhold skal brukes flere steder. Felter og sidemaler må kobles sammen; et eksisterende tema blir ikke automatisk redigerbar.

EmDash er et åpent CMS som kjører som del av Astro-applikasjonen, med administrasjon, databasebasert innhold og mediebibliotek. Det har egne startmaler. Her må også database, medielagring og servermiljø inngå i løsningen. En ren statisk opplasting av filer er derfor ikke hele oppsettet.

Et godt valg begynner med hvem som skal oppdatere siden. Vil du redigere noen få tekster selv i kodeeditoren, eller trenger du et administrasjonspanel? Velg én løsning som dekker behovet. I den første planlagte videoen vil vi tilpasse temaet uten CMS; Sanity og EmDash viser vi som mulige neste steg.

Gratis tema betyr ikke at alt er gratis

Du slipper å kjøpe selve temaet når du velger et gratis alternativ. Det kan fortsatt komme kostnader til domene, hosting, e-post, skjematjeneste, innhold og vedlikehold. Med et CMS må du også vurdere brukskvoter og driften av løsningen. Sammenlign helheten fremfor å basere deg på ordet «gratis».

Den største innsatsen i starten er ofte din egen tid. Du skal lære verktøyene, skrive innhold og kontrollere at alt fungerer. Det kan være en fornuftig investering når budsjettet er lite og behovet er oversiktlig.

Dette sjekker vi før publisering

Åpne siden på mobil og datamaskin. Kontroller meny, knapper, lesbarhet og bilder. Gå gjennom kontaktflyten fra innsending til mottak. Fjern demolenker og sjekk at sidetitler og beskrivelsestekster passer innholdet. Kjør prosjektets kontroller og produksjonsbygg, og gjennomgå resultatet før du kobler på domenet.

Når det er fornuftig å få hjelp

En egeninnsats kan være nok for en enkel presentasjonsside. Når du trenger booking, betaling, søknader med CV, kundedata eller integrasjoner, blir oppgaven større. Da handler arbeidet også om dataflyt, tilgang og drift.

Du trenger ikke velge mellom å gjøre absolutt alt selv og å bestille en komplett løsning fra første dag. Du kan starte med et tema og få hjelp med en avgrenset del: designgjennomgang, CMS-oppsett, kontaktskjema eller publisering.

Mitt råd er å begynne med en liten side du klarer å holde oppdatert. Bruk Astro til å lære, teste ideen din og bygge et godt grunnlag.

Kodemagisk: spesialister på Astro, Sanity og EmDash

Hos Kodemagisk er vi spesialister på Astro, Sanity og EmDash. Vi hjelper bedrifter med webdesign, tilpasning til merkevaren, innholdsmodeller og CMS-integrasjon. Enten du starter med et gratis tema eller ønsker en skreddersydd nettside, hjelper vi deg å velge en løsning som passer virksomheten og budsjettet.

Fortell oss hva du ønsker å bygge. Vi kan hjelpe med en avgrenset del av prosjektet eller planlegge hele nettsiden sammen med deg.