Jednostavan vodič za postavljanje Hexo bloga od nule (Izdanje 2024)

#Izgradnja bloga

Jeste li već umorni od neprivlačnih interfejsa blogerskih sajtova? Da li vam je dosta beskonačnih obaveštenja sa veb-sajtova? Da li ste oduvek želeli da napravite sopstveni blog, ali vas je zaustavio lavirint složenih uputstava i gomila koda od kojeg boli glava? Onda vam čestitam! Ovaj članak je tu da vas, korak po korak, na najjednostavniji mogući način nauči kako da postavite svoj blog. Potrebno je samo malo strpljenja i da pratite uputstva.

Hexo, kao brz, jednostavan i efikasan blogerski okvir (framework), pravi je spas za početnike, dok nas GitHub istovremeno oslobađa muke oko dodatnog iznajmljivanja i postavljanja servera. Zato ćemo u ovom tekstu koristiti Hexo i GitHub za postavljanje bloga.

Već sam 2018. godine napisao jednostavan vodič za postavljanje bloga od nule, ali zbog ažuriranja dodataka (plugina), neki detalji su se promenili, pa sam zato ponovo objavio ovo izdanje kratkog vodiča za 2024. godinu.

Priprema

Lokalno postavljanje Hexo statičnog bloga

$ npm install -g hexo-cli
$ hexo init
$ npm install

Tako je, glavni deo bloga je ovim završen! Hajde da vidimo rezultate. Pokrenite:

$ hexo server

Sada otvorite pretraživač i unesite localhost:4000 da biste videli kako vaš blog trenutno izgleda. Uz malo uzbuđenja, pritisnite Ctrl + C da biste nastavili sa sledećim koracima.

Prilagođavanje (početno)

Promena teme

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #ili hexo generate
hexo server

Konfiguracija sajta

# Site
title: Nepoznati svet             //Naziv bloga
subtitle:
description:  Do something cool //Kratak opis/moto
author: LulalaP                 //Autor
language: zh-Hans               //Jezik sajta
timezone:

Podešavanje avatara na bočnoj traci

avatar:
    url: /uploads/avatar.jpg

Unapređivanje stranica bloga

Dodavanje menija

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Kreiranje stranice sa kategorijama

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Kreiranje interfejsa oblaka tagova

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Kreiranje stranice „O meni“

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Podešavanje društvenih linkova na bočnoj traci

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Povezivanje bloga sa GitHub-om

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Sada otvorite pretraživač i posetite http://your-name.github.io. Čestitamo, vaš blog je do sada potpuno postavljen.

Povezivanje domena

Do sada je blog u potpunosti postavljen i može mu se pristupiti putem GitHub domena. Bilo bi savršeno da ga povežete sa kratkim domenom.

Kupovina domena

DNS rezolucija domena

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Nakon konfigurisanja DNS rezolucije domena, uđite u direktorijum bloga, u fascikli source kreirajte novi fajl pod nazivom CNAME (obratite pažnju na velika slova, bez ekstenzije), otvorite ga Notepadom i unesite kupljeni domen, na primer: www.philoli.com

hexo g
hexo d

Sada otvorite pretraživač, unesite domen, pritisnite Enter, i čestitamo – sada imate blog sa sopstvenim domenom.

Objavljivanje novih članaka

title Naslov članka
date Datum kreiranja (datum kreiranja fajla)
updated Datum izmene (datum izmene fajla)
comments Da li omogućiti komentare true
tags Tagovi
categories Kategorije
permalink Ime u URL-u (ime fajla)
hexo g
hexo d

Prilagođavanje (napredno)

U nastavku su navedena neka napredna podešavanja stila bloga; početnici mogu preskočiti ovaj deo.

Dodavanje RSS-a

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Skraćivanje članaka na početnoj strani

    <!--more-->

na mestu gde želite da se članak skrati u .md fajlu.

Centriranje citiranog teksta unutar članaka

{% centerquote %}
Tekst citata
{% endcenterquote %}

{% centerquote %} Tekst citata {% endcenterquote %}

Izmena stila blokova koda

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Podešavanje vremena osnivanja sajta

since: 2024

Poboljšanje stila linkova u člancima

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Dodavanje pozadinske slike blogu

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Da li se slika ponavlja i kako, ako ne može da popuni prostor
    background-attachment:fixed;    //Da li se slika pomera sa skrolovanjem
    background-size: cover;         //Pokriva
    background-position:50% 50%;    //Pozicija slike
}

Podešavanje poluprovidne pozadine sadržaja bloga


//Providnost sadržaja bloga
//Podešavanje providnosti sadržaja članka
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


//Podešavanje providnosti bočne trake
.sidebar {
  opacity: 0.9;
}

//Podešavanje providnosti menija
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Podešavanje providnosti polja za pretragu (local-search)
.popup {
  opacity: 0.9;
}

Optimizacija stila inline blokova koda

// Ulepšavanje Code tagova
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Dodavanje broja posetilaca na dno sajta

# Pronađite labelu copyright, a zatim unutar nje dodajte kod

<div class="copyright">
# ......ovde već postoji neka konfiguracija
# Ovde dodajte novi kod
</div>

# Nakon dodavanja izgleda ovako:
<div class="copyright">
  # ......ovde već postoji neka konfiguracija
  # Ovde dodajte novi kod
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Kada potvrdite da je sve u redu, objavite
hexo d

Dodavanje README.md fajla u repozitorijum

Svaki projekat obično ima README.md fajl, ali kada se Hexo postavi u repozitorijum, README.md fajl u projektu će biti prebrisan. Stoga je potrebno podesiti konfiguracioni fajl kako bi se izbeglo prepisivanje.

U osnovnom direktorijumu source unutar Hexo direktorijuma dodajte README.md fajl, izmenite konfiguracioni fajl sajta _config.yml i postavite vrednost parametra skip_render na:

skip_render: README.md

Sačuvajte i izađite. Kada sledeći put koristite hexo d komandu za postavljanje bloga, README.md fajl neće biti renderovan.

Nekoliko korisnih dodataka (plugina)

Bekapovanje izvornih fajlova

# Dodajte prethodno podešenu adresu repozitorijuma bloga
git remote add https://github.com/your-name/your-name.github.io.git

# Dodajte i sačuvajte trenutne izmene, uz komentar
git add .
git commit -m "Ažuriranje izvornih fajlova"

# Kreirajte i pređite na novu granu
git checkout -b source

# Postavite sav sadržaj lokalne source grane na source granu udaljenog repozitorijuma
git push origin source:source

Pisanje bloga sa različitih računara

npm install -g hexo-cli
# Klonirajte repozitorijum lokalno
git clone https://github.com/your-name/your-name.github.io.git

# Ako je repozitorijum već kloniran lokalno, pre svakog ažuriranja bloga povucite najnoviji sadržaj grane
git pull origin

# Prebacite se na odgovarajuću granu
git checkout source

# Nakon instalacije svih Hexo dodataka, možete početi da ažurirate i uređujete sadržaj bloga
npm install

# Nakon izmena, ne zaboravite da odmah bekapujete (jedan dugi korak)
git add .
git commit -m "Ažuriranje bloga xxx"
git push origin source:source

# Objavite najnoviji sadržaj bloga na domenu
hexo clean
hexo g  # Generišite statičke fajlove
hexo s  # Pregledajte blog lokalno
hexo d  # Objavite najnoviji sadržaj bloga

Pregled često korišćenih komandi

hexo g
#ili hexo generate, generiše statičke veb-stranice iz izvornih fajlova
hexo d
#ili hexo deploy, objavljuje i postavlja na GitHub Pages
hexo s
#ili hexo server, lokalno postavljanje za testiranje
hexo clean
# Briše keš statičkih veb-stranica, zatim hexo d ponovo generiše