Rýchle a ľahké SSG s hostingom s custom doménou

Aktualizované: Hexo už nepoužívam ako svoj statický generátor stránok, medzitým som prešiel na Hugo, ale tento sprievodca je stále relevantný.

… a to všetko .. zadarmo? Áno ! (Okrem samotnej domény :))

Ako bonus je to celkom ľahké a hlavne, ak ste trochu ako ja, je to aj celkom zábavné.

Poďme teda na to, moje nastavenie je už hotové, takže táto príručka sa robí retrospektívne. Takto by malo byť nastavenie najmenej bolestivé.

Naposledy som skúsil generátory statických stránok dosť dávno.. pred niekoľkými rokmi, bol to vtedy strašný zážitok, ak mám byť úprimný .. tie časy sú už ale dávno preč.

Hľadal som ľahký, rýchly a ľahko pochopiteľný SSG, rozhodol som sa pre Hexo

Táto príručka je napísaná spôsobom, ktorý od vás očakáva, že budete oboznámení aspoň so základmi git, npm a linuxom všeobecne.

Predpoklady: Link to heading

• Bezplatné účty na GitHub aj Netlify (a áno, môžete sa zaregistrovať do služby Netlify pomocou svojho účtu GitHub :)
• Systém Linux alebo Windows 10 WSL / 2
• Nainštalované git, nodejs + npm

Poďme začať ! Link to heading

1. Vytvorte nové repo na GitHube pomocou tohto odkazu

   • Môžete si zvoliť súkromné úložisko

2. Teraz poďme nainštalovať a nakonfigurovať hexo.

   # Install prerequisite packages
   sudo apt install libtool automake autoconf nasm
   # Install hexo npm package globally (-g)
   sudo npm install -g hexo-cli
   

   Teraz vytvorme nový adresár a inicializujme ho

   mkdir -p your/repo/dir
   hexo init your/repo/dir
   cd your/repo/dir
   # Install hexo packages
   npm install
   # Install additional hexo plugins, --save ensures that these plugins are
   # saved to package.json file, so netlify can install them too !
   npm install --save hexo-all-minifier
   npm install --save hexo-asset-link
   

   Ukážem vám, ako vyzerá základná adresárová štruktúra a ktoré konfiguračné súbory existujú:

   pd@pd:~/repos/hexo-web$ tree . -L 3
   .
   ├── README.md
   ├── _config.yml  # <= "Hlavný" hexo config
   ├── content
   │   └── contact.md
   ├── scaffolds
   │   ├── draft.md
   │   ├── page.md
   │   └── post.md
   ├── source
   │   ├── _posts
   │   └── images
   └── themes
       └── minima
           ├── LICENSE
           ├── README.md
           ├── _config.yml   # <= Hexo config "témy"
           ├── layout
           └── source
   

3. Teraz je čas upraviť súbor _config umiestnený vo vašom novo inicializovanom adresári, nakonfigurovať základné informácie, ako napríklad adresa URL, nadpis, popis, kľúčové slová atď.

   potom pridajte tieto riadky na koniec, aby vyššie nainštalované doplnky mohli fungovať.

   # hexo-all-minifier
   all_minifier: true
   image_minifier:
     optimizationLevel: 2
     progressive: true
   

4. Voliteľne môžete nainštalovať vlastnú tému z rôznych dostupných tu alebo rovno pokračovať v nastavovaní súboru _config.yml predvolenej témy tu: themes/landscape/_config.yml, kde je potrebné upraviť aj niektoré polia, ako napríklad title, owner, info, description atď. (v závislosti od témy).

5. Nové príspevky pridáte vykonaním hexo new post <názov príspevku> a vygeneruje sa nový príspevok v adresári source/_posts, kde ich môžete upravovať. Spočiatku sa tam nachádza súbor hello-world.md. aby ste sa s tým mohli oboznámiť.

6. Po nastavení hlavných konfiguračných aj konfiguračných súborov hexa a taktiež témy na základe vašich preferencií môžete svoju stránku otestovať lokálne spustením hexo miestneho servera.

   hexo server
   

   Keď budete so svojou stránkou barebone spokojní, môžeme pokračovať k časti deploymentu.

Deployment Link to heading

1. Najskôr pridajte svoj kľúč ssh do svojho účtu github tu

2. Z vášho koreňového adresára hexo (alebo takzvaného adresára projektu git) budete vykonávať počiatočné (a následné) deploymenty do repa GitHub týmto spôsobom:

   # Choďte do svojho adresára, kde ste inicializovali hexo
   cd your/repo/dir
   # Inicializujte git
   git init
   # teraz sa pripojte k vzdialenému úložisku git
   git remote add origin [email protected]:username/repo_name.git
   # Pridajte všetky zmeny
   git add .
   # Potvrďte všetky zmeny
   git commit -a
   # Odošlite svoje zmeny
   git push
   

   Pre ľahšiu správu, som vytvoril funkciu ako ‘alias’, môžete tento kúsok kódu pridať do svojho .bashrc alebo .bash_aliases do domovského adresára (~/).

   push () {
       read -p "Popis zmien:" desc
       git add . && git add . && git commit -a --allow-empty-message -m "$desc" && git push
   }
   # 'git add .' je tam dvakrát, takže tiež zachytáva premenované súbory
   

   Potom vykonajte exec $SHELL, aby sa načítali zmeny, odteraz bude príkaz push pracovať a bude vykonávať automaticky kroky vyššie naraz so správou alebo bez správy (pre repo vo vašom aktuálnom adresári).

3. Po zverejnení kódu v službe github môžeme nastaviť stránku netlify :) prejdite na app.netlify.com a kliknite na ‘new site from git’ a postupujte podľa pokynov na obrazovke, netlify zistí, že používate hexo a pripraví za vás príkazy / adresár repa, takže môžete pokračovať v ‘deploy site’.

4. V časti site settings nastavte nasledujúce možnosti na netlify, aby ste optimalizovali build a prostredie:

   General -> Site details -> Change site name -> Vyberte si vlastný názov;)

   Build & deploy -> Post Processing -> Asset Optimization -> Edit settings -> Zvoľte si len Bundle CSS.

   • Ostatné možnosti nie sú také účinné ako doplnok, ktorý sme nainštalovali pre hexo (hexo-all-minifier)

   Domain Management: Voliteľne si môžete nastaviť vlastnú doménu a určite nastavte https certifikát, ktorý je samozrejme vďaka ÚŽASNÉMU Let’s encrypt zadarmo!

5. Teraz.. zakaždým, keď „tlačíte“ zmeny do vášho repa, program netlify automaticky magicky vytvorí stránku pomocou hexa a zverejní ju.

• Let me note that using netlify is in in my opinion currently better choice than github pages, you may use github pages if you set up deployment to public repo (you can create new repo where hexo will deploy using hexo-deployer-git, but it gets little bit more complicated)..
  • To je veľká výhoda Netlify v porovnaní s GitHub Pages, okrem iného .. ako napríklad, že github posiela iba v HTML hlavičke len 10 minútový Cache-Control, čo je ďaleko od ideálu..

Voliteľné veci Link to heading

Ja osobne používam nasledujúce dva ďalšie pluginy:

npm install --save hexo-generator-sitemap
npm install --save hexo-helper-obfuscate

1. hexo-generator-sitemap

   • Najjednoduchším spôsobom je použitie funkcie vkladania kódu Netlify.. v nastaveniach stránky netlify vyberte Build & Deploy -> Post processing -> Snippet injection -> Add snippet

     • Vyberte Insert before head

     • Pomenujte skript, ako chcete

       • A potom vložte nasledujúci kód:

       <% if (config.sitemap.rel) { %>
       <link rel="sitemap" href="<%-config.url + config.sitemap.path %>" />
       <% } %>
       

     Takto zaistíte, že po deploymente bude váš web poskytovať kanonické odkazy (pre lepšie SEO), ako aj odkaz na vygenerovaný súbor Sitemap. K dispozícii je tiež možnosť upraviť súbor layout.ejs vašej témy a umiestniť kód pred koniec hlavičky.

     • Ale ešte sme neskončili.. toto musí byť vložené do vášho hexo configu:

     # hexo-generator-sitemap
     sitemap:
       path: /sitemap.xml
       template: ./sitemap_template.xml
       rel: true
       tags: true
       categories: true
     

   • Vytvorte tiež tento súbor sitemap_template.xml v koreňovom adresári projektu:

   <?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     {% for post in posts %}
     <url>
       <loc>{{ post.permalink | uriencode }}</loc>
       {% if post.updated %}
       <lastmod>{{ post.updated | formatDate }}</lastmod>
       {% elif post.date %}
       <lastmod>{{ post.date | formatDate }}</lastmod>
       {% endif %}
     </url>
     {% endfor %}
   
     <url>
       <loc>{{ config.url | uriencode }}</loc>
       <lastmod>{{ sNow | formatDate }}</lastmod>
       <changefreq>daily</changefreq>
       <priority>1.0</priority>
     </url>
   
     {% for tag in tags %}
     <url>
       <loc>{{ tag.permalink | uriencode }}</loc>
       <lastmod>{{ sNow | formatDate }}</lastmod>
       <changefreq>daily</changefreq>
       <priority>0.6</priority>
     </url>
     {% endfor %}
   
     {% for cat in categories %}
     <url>
       <loc>{{ cat.permalink | uriencode }}</loc>
       <lastmod>{{ sNow | formatDate }}</lastmod>
       <changefreq>daily</changefreq>
       <priority>0.6</priority>
     </url>
     {% endfor %}
   </urlset>
   

   • Môžete tiež povoliť voliteľný doplnok „Submit Sitemap“ od autora cdeleeuwe v Plugins sekcii Netlify, ktorý po každom builde automaticky odosiela náš súbor Sitemap do služieb Google, Bing a Yandex.

2. hexo-helper-obfuscate

   • Pokiaľ ide o doplnok hexo obfuscation, môžete tento html kód použiť vo svojich príspevkoch alebo súboroch s motívmi na ‘zahmlievanie’ e-mailových adries. To by malo poskytovať aspoň minimálnu ochranu.

   <a href="mailto:<%- obfuscate([email protected]) %>" target="_blank">email me</a>
   

   Osobne som to vložil do svojeho menu (súbor „header.ejs“ mojej témy) a zabezpečil, aby to bralo e-mailovú adresu z novo definovanej premennej „email“, ktorú som vložil do svojej konfigurácie témy.

   <% if (theme.email) { %>
   <a href="mailto:<%- obfuscate(theme.email) %>" target="_blank" class="ml">email</a>
   <% } %>