Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:nodejs:hexo

< Node.js

Hexo

Bevezetés

A hexo egy blog keretrendszer, ahol Markdown-ban készítjük a weblapokat, a postokat.

Dokumentáció:

Telepítés

Telepítsük az npm paranccsal a hexo-cli csomagot.

npm install hexo-cli -g

Kapunk egy hexo nevű parancsot. Ellenőrizzük:

hexo --version

Projekt készítése

Készítsük el egy app01 nevű könyvtárat, lépjünk be a könyvtárba, majd készítsük elő a projektet.

mkdir app01
cd app01
hexo init

Fejlesztői szerver futtatása

hexo server

Post létrehozása

A legegyszerűbb dolog, post létrehozása. A new al-paranccsal hozhatunk létre új postot. A new után adjuk meg a milyen fájlnéven szeretnénk tárolni.

hexo new valami

Esetleg megadhatjuk a fájlnévben az aktuális dátumot vagy annak egy részét:

hexo new 2024-03-29_1_Valami

Egy ehhez hasonló tartalmú fájlt kapunk:

---
title: Valami
date: 2024-03-29 06:37:42
tags:
---
 
## Leírás

A weboldat ha frissítjük megjelenik a post.

Terv

Ha csak tervezzük a post létrehozását:

hexo new draft valami

Létrejön egy source/_drafts könyvtár, benne a valami.md fájl.

Ha szeretnénk a terveket látni a fejlesztői szerveren:

hexo server --draft

A terv publikálása:

hexo publish valami

A valami post átkerül a source/_posts könyvtárba.

Oldal létrehozása

hexo new page mas

Létrejön egy source/mas könyvtár benne egy index.md fájl.

  • source/mas/index.md

A böngészőben így érhető el:

Layout

Az előző fejezetben a new paranccsal postot hoztunk létre. De létrehozhatunk tervezett postot, másként megnevezve: draft. De létrehozható oldal is, amit page-nek nevezünk. A post, a page és a draft lehetőségeket nevezzük Layout-nak.

Három layout van:

  • post - source/_posts
  • page - source
  • draft - source/_drafts

Alapértelmezett layout a post. Ez megváltoztatható a _config.yml fájlban:

default_layout: post

A hexo new szintaktikája:

hexo new [layout] <title>

A layout megadása nem kötelező. Ha nem adjuk meg, a fenti beállítás érvényesül.

Fejrészek

A fejrészek --- 3 darab kötőjel közzé írjuk:

valami.md
---
title: JavaScript bevezetés
date: 2024-03-29 06:28:14
tags: [JavaScript, HTML]
---

Megadhatók kulcsok: cím, dátum és tagek.

Scaffolds

Minden layout-nak van egy alapértelmezett tartalma, ezt nevezzük Scaffold-nak. Ezek a scaffolds könyvtárban találhatók és átírhatók.

scaffolds/draft.md
---
title: {{ title }}
tags:
author: Nagy János
---
 
Alapértelmezett tartalom.

Készíthetünk saját vázat.

scaffolds/akarmi.md
---
title: {{ title }}
tags:
author: Nagy János
---
 
Alapértelmezett tartalom.

Használat:

hexo new akarmi ujpost

Tagek és kategóriák

A tagek létrehozása lehetővé teszi, hogy csoportosítsuk a postokat.

---
title: valami
date: 2024-03-29 06:28:14
tags: [tag1]
---

A csoportosításra használhatunk kategóriákat is:

valami.md
---
title: bali
date: 2024-03-29 06:28:14
tags: [tag1, tag2]
categories:
- [kat1]
- [kat2]
---

Alkategória:

valmai.md
---
title: bali
date: 2024-03-29 06:28:14
tags: [tag1, tag2]
categories:
- [kat1, kat1.1]
- [kat2]
---

Téma (kinézet)

Válasszunk témát:

A témák általában letölthetők a git clone paranccsal. A letöltést themes könyvtárba végezzük el.

git clone utvonal themes/valami
git clone https://github.com/lotabout/hexo-theme-noise themes/noise

Olvassuk el a téma GitHub-os oldalát, mert lehet a telepítéshez még szükséges valami. A noise számára például kell két csomag:

npm install hexo-renderer-less --save
npm install hexo-renderer-pug --save

Végül a _config.yml fájlban beállítjuk és kész.

A szervert ha fut, újra kell indítani.

Oldal generálása public könyvtárba

hexo generate

Létrejön egy public könyvtár, ami feltölthető tárhelyre.

app01/
  |-public/
  `-source/

Deploy

GitHub

Telepítsük a hexo-deployer-git csomagot:

npm install hexo-deployer-git --save

Ha tudjuk hol lesz állítsuk be a _config.yml fájlt:

_config.yml
url: https://valaki.github.io/valami/
_config.yml
# ...

deploy:
  type: git
  repo: https://github.com/valaki/valami.git
  branch: master

A GitHub webhelyen:

  • Settings
  • Pages
  • Source: Deploy from a branch
  • Branch: master /(root)

Ha le van generálva a weblap:

hexo clean && hexo deploy

Ugyanaz npm parancsokkal:

npm run clean
npm run deploy

Hivatalos dokumentum:

Netlify

A Netfliy-t külön nem támogatja a Hexo, a Netlify saját eszközeit kell használni.

Ha már volt netlify init, akkor a hexo init parancsot külön üres könyvtárban kell kiadni, majd átmásolni a projekt könyvtárába a létrehozott könyvtárakat és fájlokat.

Netlify esetén a generálás előtt szükség lehet a public törlésére:

hexo clean
hexo generate
netlify deploy --prod

A netlify deploy rákérdez, melyik könyvtárból kell feltölteni.

oktatas/web/nodejs/hexo.txt · Utolsó módosítás: 2024/07/28 11:56 szerkesztette: admin