[[oktatas:web:nodejs|< NodeJS]]

====== Hexo ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu


===== Bevezetés =====

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

Dokumentáció:

  * https://hexo.io/docs/ (2022)

===== Telepítés =====

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

<code>
npm install hexo-cli -g
</code>

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.

<code>
mkdir app01
cd app01
hexo init
</code>

===== Fejlesztői szerver futtatása =====

<code>
hexo server
</code>



===== 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:

<code markdown>
---
title: Valami
date: 2024-03-29 06:37:42
tags:
---

## Leírás
</code>

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:
  * http://localhost:4000/mas/


===== 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:
<code yaml>
default_layout: post
</code>


A hexo new szintaktikája:

<code>
hexo new [layout] <title>
</code>

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 <nowiki>---</nowiki> 3 darab kötőjel közzé írjuk:


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

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.

<code markdown scaffolds/draft.md>
---
title: {{ title }}
tags:
author: Nagy János
---

Alapértelmezett tartalom.

</code>

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


<code markdown scaffolds/akarmi.md>
---
title: {{ title }}
tags:
author: Nagy János
---

Alapértelmezett tartalom.

</code>

Használat:
  hexo new akarmi ujpost

===== Tagek és kategóriák =====

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

<code>
---
title: valami
date: 2024-03-29 06:28:14
tags: [tag1]
---
</code>

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

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

Alkategória:
<code yaml valmai.md>
---
title: bali
date: 2024-03-29 06:28:14
tags: [tag1, tag2]
categories:
- [kat1, kat1.1]
- [kat2]
---
</code>


===== Téma (kinézet) =====

Válasszunk témát:
  * https://hexo.io/themes/index.html

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:

<code>
npm install hexo-renderer-less --save
npm install hexo-renderer-pug --save
</code>


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.


<code>
app01/
  |-public/
  `-source/
</code>

===== 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:
<code yaml _config.yml>
url: https://valaki.github.io/valami/
</code>


<code yaml _config.yml>
# ...

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

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:

<code>
npm run clean
npm run deploy
</code>

Hivatalos dokumentum:
  * https://hexo.io/docs/one-command-deployment (2024)

==== 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.