Jedrnat vodič: Postavitev Hexo bloga od začetka (izdaja 2024)

#Postavitev bloga

Ste že siti neestetskih vmesnikov blogov, imate dovolj neskončnih spletnih obvestil in si že dolgo želite ustvariti lasten blog, pa vas je ustavila kompleksnost navodil in kopica zoprnih kod? Potem pa čestitam! Ta članek vas bo korak za korakom naučil, kako si postaviti lasten blog, in to na najpreprostejši in najbolj razumljiv način. Potrebujete le malo potrpljenja in sledite navodilom korak za korakom.

Hexo je hiter, čist in učinkovit ogrodje za bloge, kar je resnična blagodejnost za začetnike. GitHub pa nam prihrani težave z najemom in postavitvijo lastnega strežnika. Zato bomo v tem članku blog postavili s pomočjo Hexo-ja in GitHub-a.

Nekoč, leta 2018, sem že napisal jedrnat vodič za postavitev bloga od začetka, a ker so se v vmesnem času posodobili vtičniki, je bilo treba nekatere podrobnosti spremeniti. Zato ponovno predstavljam posodobljeno izdajo 2024 tega jedrnatega vodiča.

Priprava

Lokalna postavitev statičnega bloga Hexo

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

Tako je, glavni del bloga je zdaj končan! Poglejmo si rezultat. Zaženite:

$ hexo server

V tem trenutku odprite brskalnik, vnesite localhost:4000 in že boste videli trenutni videz bloga. Malo se poveselite, nato pa pritisnite Ctrl + C za nadaljevanje.

Prilagoditev (začetna)

Sprememba 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 #ali hexo generate
hexo server

Konfiguracija spletnega mesta

# Site
title: Neznani svet                // Ime bloga
subtitle:
description:  Do something cool // Kratki moto/podpis
author: LulalaP                 // Avtor
language: zh-Hans               // Jezik spletnega mesta
timezone:

Nastavitev avatarja v stranski vrstici

avatar: 
    url: /uploads/avatar.jpg

Izboljšanje strani bloga

Dodajanje 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

Ustvarjanje strani za kategorije

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

Ustvarjanje strani z oblakom oznak

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

Ustvarjanje strani »O meni«

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

Nastavitev povezav do socialnih omrežij v stranski vrstici

# 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

Povezava bloga z 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

Zdaj odprite brskalnik, obiščite http://your-name.github.io in čestitam! Vaš blog je uspešno postavljen.

Povezava domene

Blog je do sedaj v celoti postavljen in dostopen preko GitHub domene. Za popolnost pa ga je idealno povezati še s krajšo, lastno domeno.

Nakup domene

DNS nastavitev domene

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Ko so nastavitve DNS končane, pojdite v imenik bloga. V mapi source ustvarite novo datoteko z imenom CNAME (pazite na velike črke in brez pripone). Odprite jo z Beležnico in vanjo vpišite kupljeno domeno, npr. www.philoli.com.

hexo g
hexo d

Zdaj odprite brskalnik, vnesite domeno, pritisnite Enter in čestitam! Imate svoj blog z lastno domeno.

Objava novega članka

title Naslov članka
date Datum ustvarjanja (datum ustvarjanja datoteke)
updated Datum posodobitve (datum spremembe datoteke)
comments Ali so komentarji omogočeni true
tags Oznake
categories Kategorije
permalink Ime v URL-ju (ime datoteke)
hexo g
hexo d

Prilagoditev (napredna)

Spodaj so na voljo nekatere napredne nastavitve za prilagoditev sloga bloga. Začetniki lahko ta del preskočite.

Dodajanje RSS-vira

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

Skrajšanje člankov na domači strani

    <!--more-->

Centriranje citiranega besedila v člankih

{% centerquote %}
Citirano besedilo
{% endcenterquote %}

{% centerquote %} Citirano besedilo {% endcenterquote %}

Sprememba sloga blokov kode

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:

Nastavitev datuma ustanovitve spletnega mesta

since: 2024

Izboljšanje sloga povezav v člankih

// 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;
  }
}

Dodajanje ozadja blogu

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Sliko ponovi, če ne pokrije celotnega ozadja
    background-attachment:fixed;    //Ali se slika premika s pomikanjem
    background-size: cover;         //Pokrije celotno površino
    background-position:50% 50%;    //Položaj slike
}

Nastavitev prosojnosti ozadja vsebine bloga


//Prosojnost vsebine bloga
//Nastavitev prosojnosti vsebine č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;
  }
}


//Nastavitev prosojnosti stranske vrstice
.sidebar {
  opacity: 0.9;
}

//Nastavitev prosojnosti menijske vrstice
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Nastavitev prosojnosti iskalnega polja (local-search)
.popup {
  opacity: 0.9;
}

Optimizacija sloga vgrajenih blokov kode

// Polepšanje oznake za kodo
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Dodajanje števila obiskovalcev na dno spletnega mesta

# Poiščite oznako `copyright` in dodajte kodo znotraj nje

<div class="copyright">
# ......Tukaj so že nekatere nastavitve
# Tukaj dodajte novo kodo
</div>

# Po dodajanju izgleda takole:
<div class="copyright">
  # ......Tukaj so že nekatere nastavitve
  # Tukaj dodajte novo kodo
  {%- 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
# Ko potrdite, da je vse v redu, objavite
hexo d

Dodajanje datoteke README.md v repozitorij

Vsak projekt običajno vsebuje datoteko README.md. Vendar pa bo ta datoteka v repozitoriju prepisana, ko jo Hexo objavi. Zato je treba nastaviti konfiguracijsko datoteko, da preprečite prepisovanje.

V korenskem imeniku source znotraj imenika Hexo dodajte datoteko README.md. Spremenite konfiguracijsko datoteko spletnega mesta _config.yml in nastavite vrednost parametra skip_render na:

skip_render: README.md

Shranite in zaprite. Ko boste naslednjič uporabili ukaz hexo d za objavo bloga, datoteka README.md ne bo upodobljena.

Nekaj pogosto uporabljenih vtičnikov

Varnostno kopiranje izvornih datotek

# Dodajte predhodno nastavljen naslov repozitorija bloga
git remote add https://github.com/your-name/your-name.github.io.git

# Dodajte in shranite trenutne spremembe ter dodajte opombo
git add .
git commit -m "Posodobitev izvornih datotek"

# Ustvarite in preklopite na novo vejo
git checkout -b source

# Potisnite celotno vsebino lokalne veje `source` na vejo `source` oddaljenega repozitorija
git push origin source:source

Pisanje bloga z različnih računalnikov

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

# Če je repozitorij že kloniran, morate pred vsako posodobitvijo bloga potegniti najnovejšo vsebino veje
git pull origin

# Preklopite na ustrezno vejo
git checkout source

# Ko so vsi vtičniki iz konfiguracije Hexo nameščeni, lahko začnete posodabljati in urejati vsebino bloga
npm install

# Po spremembi vsebine ne pozabite takoj varnostno kopirati
git add .
git commit -m "Posodobitev bloga xxx"
git push origin source:source

# Objavite in potisnite najnovejšo vsebino bloga na spletno mesto z domeno
hexo clean
hexo g  # Ustvarite statične datoteke
hexo s  # Lokalni predogled bloga
hexo d  # Objavite najnovejšo vsebino bloga

Povzetek pogosto uporabljenih ukazov

hexo g
# ali hexo generate, ustvari statične spletne strani iz izvornih datotek
hexo d
# ali hexo deploy, objavi in potisne na GitHub Pages
hexo s
# ali hexo server, lokalna postavitev za testiranje
hexo clean
# Počisti predpomnilnik statičnih spletnih strani, nato pa hexo d ponovno ustvari