Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:nodejs:hexo [2024/07/27 19:51] – eltávolítva admin
+++ oktatas:web:nodejs:hexo [2024/07/28 11:56] (aktuális) – létrehozva admin
@@ Sor 1: / Sor 1: @@
+[[oktatas:web:nodejs|< Node.js]]
+====== Hexo ======
+  * **Szerző:** Sallai András
+  * Copyright (c) 2022, Sallai András
+  * Szerkesztve: 2024
+  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
+  * 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.