BYGG WEBB MED HU­GO

Datormagazin - - MJUKVARA | WEBBUTVECK­LING - AV PATRIK HER­MANS­SON

Det be­hö­ver in­te hand­la om att knac­ka kod från grun­den, ut­an det …nns många verk­tyg som un­der­lät­tar. Här hjäl­per vi dig igång med ett av dem, ba­se­rat på öp­pen käll­kod.

Ram­ver­ket Hu­go (https://go­hu­go. io) be­skrivs av ut­veck­lar­na som ”värl­dens snabbaste ram­verk för att byg­ga webb­si­dor”. Det be­skrivs även som en ge­ne­ra­tor för sta­tis­ka si­dor, byggt på öp­pen käll­kod.

Det förs­ta vi be­hö­ver gö­ra är att installera ram­ver­ket på den da­tor som ska an­vän­das för ut­veck­ling­en. Hu­go är skri­vet i pro­gram­me­rings­språ­ket Go och kan så­le­des kö­ras på samt­li­ga platt­for­mar som han­te­rar Go. Det­ta in­klu­de­rar in­te ba­ra Win­dows, OS X och Li­nux­ba­se­ra­de sy­stem, ut­an även till ex­em­pel Fre­eBSD.

Du be­hö­ver in­te installera själ­va Go, ut­an det finns fär­di­ga bi­när­fi­ler för Hu­go att lad­da ned från pro­jek­tets webbplats. Den bi­när­fil som lad­das ned kan spa­ras var som helst, den be­hö­ver in­te in­stal­le­ras och fun­ge­rar där­för bra även på sy­stem där man in­te har rät­tig­he­ter att installera pro­gram.

På https://git­hub.com/go­hu­go­io/hu­go/re­le­a­ses finns en lång rad ver­sio­ner för oli­ka ope­ra­tiv­sy­stem. Där finns ock­så ett an­tal ver­sio­ner för ARM-platt­for­men, även 64-bi­tars, så det bör gå ut­märkt att kö­ra Hu­go även på en en­korts­da­tor som till ex­em­pel Rasp­ber­ry Pi.

För vår del väl­jer vi att an­vän­da ett Li­nux­sy­stem i form av Fedora 27. Det finns ing­en ver­sion spe­ci­fikt för det­ta sy­stem, så vi väl­jer att lad­da ned fi­len av­sedd för Linux-64bit i tar.gz-for­mat. I det arkiv som lad­das ned finns tre fi­ler. En är en li­censtext, den and­ra en Re­ad­me-fil. Den tred­je i sin tur är den bi­när­fil som an­vänds för att ska­pa webb­si­dan. Den­na pac­kas upp i en lämp­lig ka­ta­log, en ka­ta­log där vi se­dan ska kö­ra den från kom­man­do­ra­den. Då vi an­vän­der ett Li­nux­sy­stem ko­pi­e­rar vi bi­när­fi­len till ka­ta­lo­gen /usr/local/bin:

su­do cp Hämt­ning­ar/hu­go_0.38.2_Li­nux-64bit/hu­go /usr/local/bin

För att kon­trol­le­ra att vi fått rätt ver­sion och att den fun­ge­rar kan Hu­go kö­ras med pa­ra­me­tern ”ver­sion”:

hu­go ver­sion Hu­go Sta­tic Si­te Ge­ne­ra­tor v0.38.2 linux/amd64 BuildDa­te: 2018-04-09T08:17:17Z

Hu­go sva­rar med sin ver­sions­in­for­ma­tion, allt ser bra ut! För att vi ska kun­na an­vän­da Hu­go be­hövs dock yt­ter­li­ga­re ett pro­gram, näm­li­gen Git. Hur det­ta in­stal­le­ras be­ror på ope­ra­tiv­sy­ste­met. I Li­nux­ba­se­ra­de sy­stem finns det i pa­ket­för­rå­det, för Win­dows och and­ra sy­stem finns det in­stal­la­tions­fi­ler att lad­da ned från pro­jek­tets webbplats (https://git-scm.com).

BYGG EN TESTSIDA

Vi ska nu tit­ta på hur Hu­go an­vänds i prak­ti­ken ge­nom att ska­pa en en­kel testsida. Det­ta görs med ett en­kelt kom­man­do:

hu­go new si­te dmz­news Con­gra­tu­la­tions! Your new Hu­go si­te is cre­a­ted in /ho­me/patrik/hu­go/ dmz­news.

Så, allt klart, dags att ta helg? Nja, rik­tigt så en­kelt är det in­te. Det vik­ti­gas­te med en webb­si­da är ju trots allt bra in­ne­håll. Li­te de­sign ska­dar hel­ler in­te, så låt oss bör­ja med det.

Det går att ska­pa eg­na te­man för si­dan, men det finns även ett an­tal fär­di­ga. Då vi tes­tar lös­ning­en är det vet­tigt att bör­ja med ett fär­digt te­ma. Läng­re fram kan vi tit­ta när­ma­re på hur det går till att ska­pa eg­na te­man.

De te­man som finns fritt till­gäng­li­ga pre­sen­te­ras på https://the­mes.go­hu­go.io. På den­na si­da finns någ­ra hund­ra oli­ka te­man att väl­ja bland, upp­de­la­de i oli­ka ka­te­go­ri­er. De­sig­nen hand­lar in­te en­bart om färg­sätt­ning ut­an även om hur si­dan är upp­lagd. Det­ta på­min­ner myc­ket om hur det fun­ge­rar i Word­press.

Någ­ra av des­sa te­man är an­pas­sa­de för att man ska lä­ra sig hur sy­ste­met fun­ge­rar. Ett av dem har det lo­gis­ka nam­net ”Hu­got­he­me-learn”. Te­mat finns att lad­da ned från Git­hub och det är enklast att an­vän­da kom­man­dot ”git” för att installera:

cd the­mes git clo­ne https://git­hub.com/ matcor­nic/hu­go-the­me-learn.git

För att ak­ti­ve­ra det­ta te­ma läggs det till i webb­si­dans kon­fi­gu­ra­tions­fil con­fig.toml. Föl­jan­de rad läggs till: the­me = ”hu­go-the­me-learn”

När vi har kon­fi­gu­ra­tions­fi­len öp­pen, pas­sar vi även på att änd­ra si­dans ti­tel. Den är som stan­dard ”My New Hu­go Si­te” och de­fi­nie­ras av pa­ra­me­tern ”tit­le”. När det­ta är klart och fi­len spa­rad kan vi star­ta test­ser­vern för att se hur si­dan ser ut: hu­go ser­ve

Hu­go vi­sar nu en del in­for­ma­tion om si­dan, bland an­nat vil­ka ka­ta­lo­ger och fi­ler som över­va­kas. Upp­da­te­ring­ar är näm­li­gen dy­na­mis­ka, Hu­go kän­ner av om nå­gon fil änd­ras och upp­da­te­rar då webb­si­dan au­to­ma­tiskt. Det vi­sas även en web­ba­dress, http://local­host:1313. På den­na adress kan si­dan nås, så tes­ta nu att öpp­na adres­sen i en webb­lä­sa­re. Fun­ge­rar allt som det ska kom­mer en de­mo­si­da ba­se­rad på det in­stal­le­ra­de te­mat att vi­sas. Den­na si­da är re­la­tivt tom, det som finns är i stort en in­for­ma­tions­text om hur webb­si­dan kan an­pas­sas. Det är ock­så det vi ska gö­ra nu.

Det finns tre al­ter­na­tiv för hur det­ta kan gö­ras. Ett är att ska­pa en fil i con­tent-ka­ta­lo­gen som fylls med Mark­down-kod. Det and­ra al­ter­na­ti­vet är att ska­pa en in­dex. html i sta­tic-ka­ta­lo­gen; den­na ska i så fall an­vän­da HTML. Det tred­je och sista al­ter­na­ti­vet är att ska­pa en van­lig in­ne­hålls­si­da och lå­ta ser­vern sty­ra om till den­na när första­si­dan ska vi­sas. Vi väl­jer här det först­nämn­da, vi får då ock­så en möj­lig­het att kän­na li­te på det smi­di­ga Mark­down­språ­ket.

DEN FÖRS­TA SI­DAN

Det te­ma som an­vänds här är tänkt för en upp­bygg­nad med ka­pi­tel och un­der­si­dor. Ka­pit­len kan ses som av­del­ning­ar på si­dan och i des­sa ka­pi­tel kan oli­ka si­dor med in­for­ma­tion pla­ce­ras. För att ska­pa ett förs­ta ka­pi­tel ska­pas en ”för­sätts­si­da”, en si­da av ty­pen ”chap­ter”: hu­go new --kind chap­ter histo­ria/_in­dex.md /ho­me/patrik/hu­go/dmz­news/con­tent/ histo­ria/_in­dex.md cre­a­ted

Den si­da som ska­pas är i prak­ti­ken tom, men fi­len är in­te ut­an in­ne­håll. Där finns näm­li­gen grund­läg­gan­de in­ställ­ning­ar för den ak­tu­el­la si­dan. Vi re­di­ge­rar och änd­rar ”draft: true” till ”draft: fal­se”. Det­ta gör att si­dan får status som fär­dig si­da. Mis­sar du det­ta kom­mer si­dan in­te att sy­nas vid prov­kör­ning­en läng­re fram.

Vi läg­ger även till föl­jan­de ra­der: chap­ter: true weight: 0

Pa­ra­me­tern ”chap­ter” anger att det­ta är en hu­vudsi­da i ett ka­pi­tel, ”weight” kan i sin tur an­vän­das för att sty­ra pla­ce­ring­en i den av Hu­go au­to­ma­tiskt ska­pa­de me­nyn. Des­sa di­rek­tiv läggs till i ko­dens öv­re del, ett av­snitt som av­grän­sas av tre spe­ci­el­la tec­ken. Det­ta av­snitt finns i al­la in­ne­hålls­fi­ler och kal­las Front Mat­ter. En­kelt be­skri­vet är Front Mat­ter da­ta om en in­ne­hålls­fil som au­to­ma­tiskt läggs till när en fil ska­pas. Som stan­dard läggs in­for­ma­tion in om si­dans ti­tel (tit­le), da­tum när den ska­pa­des (da­te) och om det är ett ut­kast (draft). Front Mat­ter skrivs i an­ting­en Yaml, Toml el­ler Json, Yaml är för­val. Des­sa vär­den kan ock­så an­vän­das av te­man, till ex­em­pel för att au­to­ma­tiskt vi­sa när si­dan ska­pa­des.

Nu fort­sät­ter vi med att ska­pa en un­der­si­da: hu­go new histo­ria/dmz­histo­ry.md /ho­me/patrik/hu­go/dmz­news/con­tent/ histo­ria/dmz­histo­ry.md cre­a­ted

Front Mat­ter re­di­ge­ras och får här föl­jan­de in­ne­håll:

--tit­le: ”Dator­ma­ga­zins histo­ria” da­te: 2018-04-12T12:07:25+02:00 draft: fal­se

---

Un­der de tec­ken som av­slu­tar Front Mat­ter kan vi se­dan ska­pa själ­va in­ne­hål­let, upp­märkt med Mark­down. Vi bör­jar med en ru­brik:

# Dator­ma­ga­zins histo­ria

Där­ef­ter föl­jer bröd­tex­ten:

År 2000 ska­pa­des tid­ning­en Datormagaz­in på Med­ströms Da­ta­för­lag i Väx­jö. Tid­ning­en var ett re­sul­tat…

Inga kons­tig­he­ter så långt, el­ler? De som är va­na vid att ska­pa webb­si­dor på tra­di­tio­nellt sätt kan kans­ke sak­na tag­gar. Dä­re­mot finns en bräd­gård, #. Den­na är en del av det Mark­down-språk som an­vänds. Låt oss tit­ta li­te när­ma­re på det­ta in­nan vi går vi­da­re.

MARK­DOWN, ETT ENKLA­RE SPRÅK

Med Hu­go an­vänds of­tast in­te tra­di­tio­nell HTML, ut­an istäl­let Mark­down. Det­ta i an­ting­en den ver­sion som ska­pats av Black­fri­day Pro­ject el­ler dess klon Mmark. Det­ta språk gör det en­kelt att for­ma­te­ra si­dor­na med hjälp av oli­ka styr­tec­ken. För att ska­pa en stor ru­brik, mot­sva­ran­de <H1> i HTML, an­vänds till ex­em­pel ett bräd­gårds­tec­ken:

# Histo­ria

No­te­ra att det är vik­tigt med ett mel­lanslag mel­lan styr­teck­net och tex­ten. Det går att ha fler bräd­gårds­tec­ken och an­ta­let mot­sva­rar ru­brikstor­le­ken i HTML. Det går till ex­em­pel att skri­va ”###” för att få mot­sva­ran­de en H3-ru­brik, som är mind­re än H1. Det går även att ska­pa ord­na­de lis­tor (1., 2. och så vi­da­re) och oord­na­de lis­tor där pos­ter­na fö­re­gås av en as­te­risk (*).

För att in­fo­ga bil­der finns två möj­lig­he­ter, dels en som kal­las ”in­li­ne” och dels en som kal­las ”re­fe­rence”. När den först­nämn­da an­vänds anges sök­vä­gen till bil­den di­rekt i kom­man­dot:

![alt text](bild.png ”Bild­ti­tel”)

Tex­ten ”Bild­ti­tel” är en (fri­vil­lig) text som vi­sas när mu­spe­ka­ren hålls över bil­den, ”alt text” är det som vi­sas in­nan bil­den har lad­dats el­ler om den in­te kan vi­sas.

Den and­ra va­ri­an­ten att an­vän­da bil­der ser ut som föl­jer:

![alt text][lo­go]

[lo­go]: bild.png ”Bild­ti­tel”

När vi an­vän­der Mark­down kan vi sär­skil­ja kodstyc­ken från an­nan text. Det­ta görs ge­nom så kal­la­de ”back­ticks”, gra­va ac­cen­ter. För att in­fo­ga kod i lö­pan­de text an­vänds en ac­cent:

Här är li­te `kod i lö­pan­de text`.

För att istäl­let ska­pa kodstyc­ken an­vänds tre ac­cen­ter:

``` Ett li­tet kodstyc­ke ```

Slut­li­gen kan vi även näm­na möj­lig­he­ten att ska­pa ho­ri­son­tel­la lin­jer (Ho­ri­zon­tal Ru­le), ett vågrätt streck som kan an­vän­das för att de­la upp text­styc­ken med me­ra. Det­ta ska­pas i Mark­down ge­nom tre el­ler fler bin­de­streck, as­te­ris­ker el­ler un­der­streck.

Det ur­sprung­li­ga Mark­down har in­te Syn­tax High­ligh­ting, färg­märk­ning av ko­den, som stan­dard. Det finns dock i vissa im­ple­men­ta­tio­ner, vil­ket gör kod­list­ning­ar­na än­nu tyd­li­ga­re. Du kan lä­sa mer om Mark­down på https://git­hub.com/adam-p/mark­down-he­re/wi­ki/Mark­downC­heats­he­et.

LÄG­GA IN BILD

Ef­ter den­na lil­la ut­vik­ning fort­sät­ter vi med det prak­tis­ka ar­be­tet.

För att läg­ga till en bild bör­jar du med att ko­pi­e­ra den till ka­ta­lo­gen ”sta­tic”, där sta­tiskt in­ne­håll ska lag­ras. No­te­ra att det kan va­ra en bra idé att or­ga­ni­se­ra in­ne­hål­let i ka­ta­lo­gen, bil­der kan till ex­em­pel läg­gas i en un­der­ka­ta­log med nam­net ”img”. En del gång­er kan det även va­ra prak­tiskt att läg­ga bil­der­na i sam­ma ka­ta­log som den si­da de hör till. Det­ta ska till ex­em­pel gö­ras om man vill an­vän­da nå­gon av de au­to­ma­tis­ka bild­be­hand­lings­funk­tio­ner­na som finns i Hu­go.

För vår del la­de vi till en bild med nam­net ”DMZ-nr-1.jpeg”. Då Hu­go fix­ar sök­vä­gar­na själv be­hö­ver vi in­te ange nå­gon sök­väg till bil­den. För att läg­ga till den på si­dan räc­ker det med föl­jan­de enk­la Mark­down-kod:

![Bild på Datormagaz­in #1](/DMZnr-1.jpeg)

Bil­den kom­mer nu att vi­sas rakt upp och ned på si­dan di­rekt när si­dan spa­ras. De fi­nes­ser som finns för att änd­ra stor­lek, ro­te­ra och an­nat får vi tit­ta på en an­nan gång.

PUB­LI­CE­RA DIN SI­DA

När vi nu har ska­pat en webb­si­da med li­te in­ne­håll finns det någ­ra oli­ka möj­lig­he­ter att lå­ta om­värl­den ta del av den. En in­tres­sant så­dan är att an­vän­da tjäns­ten Net­li­fy, då vi där­med kan au­to­ma­ti­se­ra pub­li­ce­ring­en. Det går till ex­em­pel att lå­ta tjäns­ten upp­da­te­ra webb­si­dan au­to­ma­tiskt när änd­rad kod pub­li­ce­ras på Git­hub. Hur det­ta går till be­skrivs i Hu­gos do­ku­men­ta­tion, det finns ty­värr in­te ut­rym­me här att gå ige­nom den pro­ces­sen. De som vill tes­ta re­kom­men­de­ras istäl­let att föl­ja gui­den som finns på https://go­hu­go.io/hos­ting­and-deployment/hos­ting-on-net­li­fy/.

SIMPELT MED MÖJ­LIG­HE­TER

Hu­go är ett myc­ket smart sy­stem för att byg­ga sta­tis­ka webb­si­dor. Det kan tyc­kas en­kelt vid en förs­ta an­blick, och det är det egent­li­gen ock­så, men det finns än­då en viss in­lär­ningströs­kel. När du bör­jar grä­va i sy­ste­met kom­mer du näm­li­gen att upp­täc­ka att det finns många mer el­ler mind­re avan­ce­ra­de funk­tio­ner för att ska­pa den op­ti­ma­la webb­si­dan, en som in­te ba­ra är snygg och an­vän­dar­vän­lig ut­an som ock­så är smi­dig att hands­kas med som ut­veck­la­re. Den­na ar­ti­kel skul­le lätt ha kun­nat bli dub­belt så lång, men vi nö­jer oss här för den­na gång. Nu är det upp till dig att ut­fors­ka vi­da­re.

Grund­ste­nen i Hu­go är kom­man­dot med sam­ma namn.

Det finns myc­ket kvar att gö­ra, men vi kan i al­la fall kon­sta­te­ra att vi har fått myc­ket hjälp på vägen av Hu­go.

Hu­go körs som en lo­kal ser­ver un­der ut­veck­lings­ar­be­tet. Den kän­ner av om nå­gon fil änd­ras, och om så sker upp­da­te­ras si­dan un­der ut­veck­ling au­to­ma­tiskt i webb­lä­sa­ren.

Newspapers in Swedish

Newspapers from Sweden

© PressReader. All rights reserved.