Vodič za postavljanje Hexo bloga od nule (izdanje 2024.)

#Izrada bloga

Jeste li se već odavno zasitili neatraktivnih sučelja blogova? Dosta vam je beskrajnih obavijesti i nametljivog sadržaja? Oduvijek ste željeli pokrenuti vlastiti blog, ali vas je zaustavila složenost tutorijala i gomila koda od koje vas boli glava? Ako je odgovor da, čestitamo! Ovaj članak će vas korak po korak, na najjednostavniji mogući način, naučiti kako postaviti vlastiti blog. Trebate samo malo strpljenja i slijediti upute.

Hexo, kao brz, jednostavan i učinkovit okvir za blogove, pravi je blagoslov za početnike. S druge strane, GitHub nas oslobađa muke s dodatnim iznajmljivanjem i postavljanjem servera. Zato ćemo u ovom članku koristiti upravo Hexo i GitHub za postavljanje bloga.

Već sam 2018. godine napisao jednostavan vodič za postavljanje bloga od nule. Međutim, zbog ažuriranja dodataka, neke su se stvari promijenile i bilo je potrebno prilagoditi detalje. Stoga ponovno objavljujem ovo, sada izdanje za 2024. godinu.

Priprema

Lokalno postavljanje Hexo statičnog bloga

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

Tako je, glavni dio bloga je završen! Idemo vidjeti kako izgleda. Pokrenite:

$ hexo server

Sada otvorite preglednik, upišite localhost:4000 i vidjet ćete kako vaš blog trenutno izgleda. Malo se uzbudite, a zatim pritisnite Ctrl + C da biste nastavili s daljnjim koracima.

Prilagodba (početna)

Promjena 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 stranice

# Site
title: Nepoznati svijet                // Naziv bloga
subtitle:
description:  Do something cool // Kratki opis / potpis
author: LulalaP                 // Autor
language: zh-Hans               // Jezik stranice
timezone:

Postavljanje avatara u bočnoj traci

avatar: 
    url: /uploads/avatar.jpg

Dovršavanje stranica bloga

Dodavanje izbornika

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

Stvaranje stranice s kategorijama

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

Stvaranje sučelja oblaka oznaka (tagova)

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

Stvaranje stranice “O meni”

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

Postavljanje društvenih poveznica u 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 s GitHubom

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 preglednik i posjetite http://your-name.github.io. Čestitamo, vaš blog je uspješno postavljen!

Povezivanje domene

Do sada je blog u potpunosti postavljen i dostupan putem GitHub domene. Sada će biti savršeno ako na njega povežete vlastitu, kraću domenu.

Kupnja domene

DNS postavke domene

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Nakon konfiguracije DNS zapisa, uđite u direktorij bloga, unutar mape source kreirajte datoteku naziva CNAME (pazite, mora biti napisana velikim slovima i bez ekstenzije). Otvorite je pomoću bilježnice ili drugog uređivača teksta i u nju upišite svoju kupljenu domenu, npr.: www.philoli.com.

hexo g
hexo d

Sada otvorite preglednik, unesite svoju domenu i pritisnite Enter. Čestitamo, sada imate blog s vlastitom domenom!

Objavljivanje novog članka

title Naslov članka
date Datum kreiranja (datum kreiranja datoteke)
updated Datum izmjene (datum izmjene datoteke)
comments Je li komentiranje omogućeno true
tags Oznake
categories Kategorije
permalink Ime u URL-u (ime datoteke)
hexo g
hexo d

Prilagodba (napredno)

U nastavku su navedene neke napredne postavke za stiliziranje bloga. Početnici mogu slobodno preskočiti ovaj dio.

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 naslovnici

    <!--more-->

Centriranje citiranog teksta unutar članaka

{% centerquote %}
引用正文
{% endcenterquote %}

{% centerquote %} 引用正文 {% endcenterquote %}

Izmjena stila blokova koda

codeblock:
  # Tema za isticanje koda
  # Dostupne vrijednosti: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # Vidi: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Dodajte gumb za kopiranje na blok koda
  copy_button:
    enable: true
    # Prikaži rezultat kopiranja teksta.
    show_result: true
    # Dostupne vrijednosti: default | flat | mac
    style:

Postavljanje datuma osnivanja stranice

since: 2024

Poboljšanje stila poveznica u člancima

// stil poveznica
.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;   // Ponavlja li se slika i na koji način, ako se ne može cijela prikazati
    background-attachment:fixed;    // Prati li slika pomicanje stranice
    background-size: cover;         // Pokrij
    background-position:50% 50%;    // Položaj slike
}

Postavljanje prozirnosti pozadine sadržaja bloga


// Prozirnost sadržaja bloga
// Postavke prozirnosti 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;
  }
}


// Postavke prozirnosti bočne trake
.sidebar {
  opacity: 0.9;
}

// Postavke prozirnosti trake izbornika
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Postavke prozirnosti trake za pretraživanje (local-search)
.popup {
  opacity: 0.9;
}

Optimizacija stila inline blokova koda

// Uljepšavanje HTML 'code' oznake
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Dodavanje broja posjetitelja u podnožje web stranice

# Pronađite karticu 'copyright' i dodajte kod unutar te oznake

<div class="copyright">
# ......ovdje već postoje neke konfiguracije
# Ovdje dodajte novi kod
</div>

# Nakon dodavanja izgleda ovako:
<div class="copyright">
  # ......ovdje već postoje neke konfiguracije
  # Ovdje 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
# Objavite nakon potvrde da je sve u redu
hexo d

Dodavanje README.md datoteke u repozitorij

Svaki projekt obično ima datoteku README.md, ali kada se Hexo primijeni na repozitorij, README.md datoteka u projektu se prebriše. Zato je potrebno postaviti konfiguraciju kako bi se izbjeglo prebrisavanje.

U korijensku mapu source unutar Hexo direktorija dodajte README.md datoteku. Zatim izmijenite konfiguracijsku datoteku stranice _config.yml i postavite vrijednost parametra skip_render na:

skip_render: README.md

Spremite i izađite. Sljedeći put kada koristite naredbu hexo d za primjenu bloga, datoteka README.md neće biti renderirana.

Nekoliko korisnih dodataka

Sigurnosna kopija izvornih datoteka

# Dodajte adresu repozitorija bloga koju ste prethodno postavili
git remote add https://github.com/your-name/your-name.github.io.git

# Dodajte i spremite trenutne promjene te zabilježite bilješku
git add .
git commit -m "Ažuriranje izvornih datoteka"

# Kreirajte i prebacite se na novu granu
git checkout -b source

# Gurnite cijeli sadržaj lokalne 'source' grane u 'source' granu udaljenog repozitorija
git push origin source:source

Pisanje bloga na različitim računalima

npm install -g hexo-cli
# Klonirajte repozitorij na lokalno računalo
git clone https://github.com/your-name/your-name.github.io.git

# Ako je repozitorij već kloniran lokalno, prije svakog ažuriranja bloga trebate povući najnoviji sadržaj grane
git pull origin

# Prebacite se na odgovarajuću granu
git checkout source

# Nakon instalacije svih dodataka iz Hexo konfiguracije, možete početi ažurirati i uređivati sadržaj bloga
npm install

# Nakon izmjene sadržaja, ne zaboravite odmah napraviti potpunu sigurnosnu kopiju
git add .
git commit -m "Ažuriranje bloga xxx"
git push origin source:source

# Objavite i gurnite najnoviji sadržaj bloga na domenu
hexo clean
hexo g  # Generira statične datoteke
hexo s  # Lokalni pregled bloga
hexo d  # Objavljuje najnoviji sadržaj bloga

Pregled nekoliko često korištenih naredbi

hexo g
# ili hexo generate, generira statične web stranice iz izvornih datoteka
hexo d
# ili hexo deploy, objavljuje i gura na GitHub Pages
hexo s
# ili hexo server, lokalno postavlja za testiranje
hexo clean
# Briše cache statičnih web stranica, a zatim hexo d ponovno generira