Lihtne juhend Hexo blogi loomiseks nullist (2024. aasta versioon)

#Blogi loomine

Kas olete juba ammu tüdinenud blogiplatvormide koledatest liidestest? Kas olete villand lõpututest veebisaidi teavitustest ja soovitustest? Olete ehk juba ammu tahtnud luua oma isiklikku blogi, kuid olete pidurdunud keeruliste juhendite ja peavalu tekitava koodi pärast? Siis on mul hea meel teatada, et see artikkel õpetab teile samm-sammult ja kõige lihtsamal ning arusaadavamal moel, kuidas oma blogi luua. Teil on vaja vaid veidi kannatust ja järgida juhiseid.

Hexo on kiire, lihtne ja tõhus blogiraamistik, mis on algajatele tõeline õnnistus. GitHub seevastu vabastab meid lisaserverite rentimise ja haldamise vaevast. Seepärast keskendubki käesolev juhend blogi loomisele Hexo ja GitHubi abil.

  1. aastal kirjutasin ma juba ühe lihtsa juhendi blogi loomiseks nullist. Kuna aga pistikprogrammid on vahepeal uuendatud, on vaja mõningaid detaile muuta. Seepärast ilmub nüüd see 2024. aasta uuendatud ja täpsustatud lihtjuhend.

Ettevalmistused

Hexo staatilise blogi loomine kohalikult

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

Täpselt nii, blogi põhiosa on sellega valmis! Vaatame tulemust. Käivita:

$ hexo server

Nüüd ava brauser ja sisesta localhost:4000, et näha oma blogi praegust versiooni. Tunne hetkeks väikest elevust, seejärel vajuta Ctrl + C, et jätkata järgmiste sammudega.

Esialgne isikupärastamine

Teema vahetamine

$ 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 #või hexo generate
hexo server

Saidi konfiguratsioon

# Site
title: Tundmatu maailm                // blogi nimi
subtitle:
description:  Do something cool // signatuur
author: LulalaP                 // autor
language: zh-Hans               // veebisaidi keel
timezone:

Külgriba avatari seadistamine

avatar:
    url: /uploads/avatar.jpg

Blogilehtede täiustamine

Menüü lisamine

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

Kategooriate lehe loomine

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

Sildipilve lehe loomine

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

”Minust” lehe loomine

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

Külgriba sotsiaalmeedia linkide seadistamine

# 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

Blogi ühendamine GitHubiga

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

Nüüd ava brauser ja külasta aadressi http://your-name.github.io. Õnnitlused, sinu blogi on sellega valmis!

Domeeni sidumine

Selleks hetkeks on blogi täielikult loodud ja sellele pääseb ligi ka GitHubi domeeni kaudu. Aga veelgi täiuslikum on siduda blogiga lühike, isiklik domeeninimi.

Domeeni ostmine

Domeeni lahendamine

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Pärast domeeni seadistamise lõpetamist mine oma blogi kataloogi, loo source kausta uus fail nimega CNAME (pööra tähelepanu, et see oleks suurtähtedega ja ilma laiendita). Ava see Notepadi abil ja sisesta ostetud domeeninimi, näiteks: www.philoli.com.

hexo g
hexo d

Nüüd ava brauser, sisesta domeeninimi ja vajuta sisestusklahvi. Õnnitlused, sul on nüüd oma isikliku domeeniga blogi!

Uue postituse avaldamine

title Postituse pealkiri
date Loomise kuupäev (faili loomise kuupäev)
updated Muutmise kuupäev (faili muutmise kuupäev)
comments Kas lubada kommentaarid true
tags Sildid
categories Kategooriad
permalink Nimi URL-is (faili nimi)
hexo g
hexo d

Isikupärastamise lisaseaded (edasijõudnutele)

Allpool on toodud mõned täpsemad blogi stiili seaded. Algajad võivad need esialgu vahele jätta.

RSS-i lisamine

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

Postituste katkestamine avalehel

    <!--more-->

Artiklisisese tsitaadi teksti tsentreerimine

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

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

Koodiploki stiili muutmine

codeblock:
  # Koodi esiletõstmise teema
  # Saadaval väärtused: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # Vaata: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Lisa kopeerimisnupp koodiplokile
  copy_button:
    enable: true
    # Näita teksti kopeerimise tulemust.
    show_result: true
    # Saadaval väärtused: default | flat | mac
    style:

Saidi loomise aja seadistamine

since: 2024

Artikli linkide stiili parendamine

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

Blogile taustapildi lisamine

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Kas pilt peaks korduma ja kuidas, kui see ei täida kogu ala
    background-attachment:fixed;    // Kas pilt peaks kerimisega kaasa liikuma
    background-size: cover;         // Katta
    background-position:50% 50%;    // Pildi asukoht
}

Blogi sisu tausta poolläbipaistvaks muutmine


// Blogi sisu läbipaistvus
// Artikli sisu läbipaistvuse seaded
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;
  }
}


// Külgriba läbipaistvuse seaded
.sidebar {
  opacity: 0.9;
}

// Menüüriba läbipaistvuse seaded
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Otsingukasti (local-search) läbipaistvuse seaded
.popup {
  opacity: 0.9;
}

Reasisese koodiploki stiili optimeerimine

// Koodi sildi stiili täiustamine
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Külastajate arvu lisamine veebisaidi jalusesse

# Leia sildiplokk copyright ja lisa kood sildi sisse

<div class="copyright">
# ......Siin on juba mõned seaded
# Lisa siia uus kood
</div>

# Pärast lisamist näeb see välja nii:
<div class="copyright">
  # ......Siin on juba mõned seaded
  # Lisa siia uus kood
  {%- 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
# Pärast kinnitust avalda
hexo d

README.md faili lisamine hoidlasse

Igal projektil on tavaliselt README.md fail, kuid kui Hexo on hoidlasse paigaldatud, kirjutatakse projekti README.md fail üle. Seepärast on vaja konfiguratsioonifaili seadistada, et vältida ülekirjutamist.

Lisa Hexo kataloogi source juurkausta README.md fail, muuda saidikonfiguratsioonifaili _config.yml ja määra skip_render parameetri väärtuseks:

skip_render: README.md

Salvesta ja välju. Kui järgmine kord blogi hexo d käsuga paigaldad, siis README.md faili enam ei renderdata.

Mõned levinumad pistikprogrammid

Lähtefailide varundamine

# Lisa eelnevalt seadistatud blogi hoidla aadress
git remote add https://github.com/your-name/your-name.github.io.git

# Lisa ja salvesta praegused muudatused ning lisa märkus
git add .
git commit -m "Lähtefailide uuendus"

# Loo ja vaheta uuele harule
git checkout -b source

# Lükka kohaliku source haru kogu sisu kaugserveri source haru külge
git push origin source:source

Blogi kirjutamine erinevates arvutites

npm install -g hexo-cli
# Klooni hoidla kohalikku arvutisse
git clone https://github.com/your-name/your-name.github.io.git

# Kui hoidla on juba kohalikku arvutisse kloonitud, pead iga kord enne blogi uuendamist tõmbama uusima haru sisu
git pull origin

# Vaheta vastavale harule
git checkout source

# Pärast kõigi Hexo konfiguratsioonis olevate pistikprogrammide paigaldamist saad alustada blogi sisu uuendamise ja toimetamisega
npm install

# Pärast sisu muutmist pea meeles kohe varundada
git add .
git commit -m "Blogi uuendus xxx"
git push origin source:source

# Avalda ja lükka uusim blogi sisu domeeni saidile
hexo clean
hexo g  # Genereeri staatilised failid
hexo s  # Eelvaata blogi efekti kohalikult
hexo d  # Avalda uusim blogi sisu

Mõned levinumad käsud kokkuvõttes

hexo g
# või hexo generate, genereerib lähtefailidest staatilised veebilehed
hexo d
# või hexo deploy, avaldab ja lükkab GitHub Pagesi
hexo s
# või hexo server, kohalik paigaldus ja testimine
hexo clean
# Puhasta staatiliste veebilehtede vahemälu, seejärel genereeri hexo d-ga uuesti