Hexo-blogin perustaminen alusta alkaen: Yksinkertainen opas (2024-versio)

#Blogin rakentaminen

Oletko kyllästynyt blogisivustojen tylsiin käyttöliittymiin, saanut tarpeeksesi loputtomista ilmoituksista ja mainoksista? Oletko jo pitkään halunnut perustaa oman blogin, mutta monimutkaiset ohjeet ja päänvaivaa aiheuttavat koodirivit ovat saaneet sinut luovuttamaan? Onneksi olkoon, tämä artikkeli opastaa sinua askel askeleelta, miten voit pystyttää oman blogisi mahdollisimman yksinkertaisesti. Tarvitset vain hieman kärsivällisyyttä ja seurata ohjeita tarkasti.

Hexo on nopea, selkeä ja tehokas blogialusta, joka on kuin taivaan lahja aloittelijoille. GitHub puolestaan säästää meidät palvelimen vuokraamisen ja käyttöönoton vaivalta. Tässä oppaassa rakennammekin blogin juuri Hexon ja GitHubin avulla.

Kirjoitin aiemmin vuonna 2018 yksinkertaisen oppaan blogin perustamisesta alusta alkaen. Lisäosien päivitysten vuoksi joitakin yksityiskohtia on kuitenkin muutettava, joten julkaisen nyt päivitetyn 2024-version tästä pikaoppaasta.

Valmistelut

Hexo-staattisen blogin pystyttäminen paikallisesti

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

Aivan oikein, blogin pääosa on nyt valmis! Katsotaanpa lopputulosta. Suorita:

$ hexo server

Avaa nyt selain ja kirjoita osoitteeksi localhost:4000. Näet blogisi nykyisen ulkoasun. Jännityksen jälkeen voit jatkaa seuraaviin vaiheisiin painamalla Ctrl + C.

Mukauttaminen (alustava)

Teeman vaihtaminen

$ 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 #tai hexo generate
hexo server

Sivuston asetukset

# Site
title: Tuntematon maailma         // Blogin nimi
subtitle:
description:  Tee jotain siistiä // Tunnuslause
author: LulalaP                 // Kirjoittaja
language: zh-Hans               // Sivuston kieli
timezone:

Sivupalkin profiilikuvan asettaminen

avatar:
    url: /uploads/avatar.jpg

Blogisivujen viimeistely

Valikon lisääminen

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

Kategoriat-sivun luominen

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

Tunnistepilvi-sivun luominen

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

”Tietoja minusta” -sivun luominen

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

Sosiaalisen median linkkien lisääminen sivupalkkiin

# 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

Blogin yhdistäminen GitHubiin

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

Avaa nyt selain ja mene osoitteeseen http://your-name.github.io. Onneksi olkoon, blogisi on nyt valmis!

Verkkotunnuksen liittäminen

Toistaiseksi blogi on täysin pystytetty ja siihen pääsee GitHubin verkkotunnuksen kautta. Olisi kuitenkin vielä parempaa liittää blogiin oma lyhyempi verkkotunnus.

Verkkotunnuksen ostaminen

Verkkotunnuksen DNS-asetukset

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Kun verkkotunnuksen DNS-asetukset on tehty, siirry blogikansioon ja luo source-hakemistoon uusi tiedosto nimeltä CNAME (huomaa isot kirjaimet, ei tiedostopäätettä). Avaa se Muistiolla ja kirjoita ostamasi verkkotunnus, esim. www.philoli.com.

hexo g
hexo d

Avaa nyt selain, kirjoita verkkotunnus ja paina Enter. Onneksi olkoon, sinulla on nyt oma blogi omalla verkkotunnuksella!

Uuden artikkelin julkaiseminen

title Artikkelin otsikko
date Luontipäivämäärä (tiedoston luontipäivämäärä)
updated Muokkauspäivämäärä (tiedoston muokkauspäivämäärä)
comments Kommenttien salliminen true
tags Tunnisteet
categories Kategoriat
permalink Nimi URL-osoitteessa (tiedoston nimi)
hexo g
hexo d

Mukauttaminen (edistyneempiä asetuksia)

Seuraavaksi esitellään edistyneempiä blogin ulkoasun mukautusasetuksia, jotka aloittelijat voivat ohittaa tässä vaiheessa.

RSS-syötteen lisääminen

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

Artikkelien katkaiseminen etusivulla

    <!--more-->

Lainaustekstin keskittäminen artikkeleissa

{% centerquote %}
Lainattu teksti
{% endcenterquote %}

{% centerquote %} Lainattu teksti {% endcenterquote %}

Koodilohkon tyylin muokkaaminen

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:

Sivuston perustamisajan asettaminen

since: 2024

Artikkelilinkkien tyylin parantaminen

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

Taustakuvan lisääminen blogiin

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Kuva ei toistu, jos se ei täytä koko aluetta
    background-attachment:fixed;    // Kuva pysyy paikallaan vieritettäessä
    background-size: cover;         // Peittää koko alueen
    background-position:50% 50%;    // Kuvan sijainti
}

Blogin sisällön taustan asettaminen läpikuultavaksi


// Blogin sisällön läpinäkyvyys
// Artikkelin sisällön läpinäkyvyysasetukset
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;
  }
}


// Sivupalkin läpinäkyvyysasetukset
.sidebar {
  opacity: 0.9;
}

// Valikkopalkin läpinäkyvyysasetukset
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Hakukentän (local-search) läpinäkyvyysasetukset
.popup {
  opacity: 0.9;
}

Rivinsisäisten koodilohkojen tyylin optimointi

// Koodi-tagien ulkoasun parantaminen
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Kävijämäärän lisääminen sivuston alatunnisteeseen

# Etsi copyright-tagi ja lisää koodi tagin sisään

<div class="copyright">
# ......Tässä on jo joitakin asetuksia
# Lisää uusi koodi tähän
</div>

# Lisäyksen jälkeen se näyttää tältä:
<div class="copyright">
  # ......Tässä on jo joitakin asetuksia
  # Lisää uusi koodi tähän
  {%- 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
# Julkaise, kun olet varmistanut, että kaikki on kunnossa
hexo d

README.md-tiedoston lisääminen arkistoon

Jokaisessa projektissa on yleensä README.md-tiedosto, mutta kun Hexo otetaan käyttöön arkistossa, projektin README.md-tiedosto ylikirjoitetaan. Siksi asetustiedostoa on muokattava ylikirjoituksen estämiseksi.

Lisää README.md-tiedosto Hexo-hakemiston source-pääkansioon. Muokkaa sivuston asetustiedostoa _config.yml ja aseta skip_render-parametrin arvoksi:

skip_render: README.md

Tallenna ja poistu. Kun seuraavan kerran käytät hexo d-komentoa blogin käyttöönottoon, README.md-tiedostoa ei renderöidä.

Muutama hyödyllinen lisäosa

Lähdetiedostojen varmuuskopiointi

# Lisää aiemmin asetettu blogiarkiston osoite
git remote add https://github.com/your-name/your-name.github.io.git

# Lisää ja tallenna nykyiset muutokset sekä kirjaa kommentti
git add .
git commit -m "Lähdetiedostojen päivitys"

# Luo ja vaihda uuteen haaraan
git checkout -b source

# Työnnä paikallisen source-haaran koko sisältö etäarkiston source-haaraan
git push origin source:source

Blogin kirjoittaminen eri tietokoneilla

npm install -g hexo-cli
# Kloonaa arkisto paikallisesti
git clone https://github.com/your-name/your-name.github.io.git

# Jos arkisto on jo kloonattu paikallisesti, hae uusin haaran sisältö ennen jokaista blogipäivitystä
git pull origin

# Vaihda vastaavaan haaraan
git checkout source

# Kun kaikki Hexo-asetusten mukaiset lisäosat on asennettu, voit aloittaa blogisisällön päivittämisen ja muokkaamisen
npm install

# Muista varmuuskopioida muutosten jälkeen välittömästi
git add .
git commit -m "Blogin päivitys xxx"
git push origin source:source

# Julkaise ja työnnä uusin blogisisältö verkkotunnussivustolle
hexo clean
hexo g  # Luo staattiset tiedostot
hexo s  # Esikatsele blogia paikallisesti
hexo d  # Julkaise uusin blogisisältö

Yhteenveto yleisimmistä komennoista

hexo g
# tai hexo generate, luo staattiset verkkosivut lähdetiedostojen perusteella
hexo d
# tai hexo deploy, julkaisee ja työntää GitHub Pagesiin
hexo s
# tai hexo server, paikallinen testauskäyttöönotto
hexo clean
# Tyhjentää staattisten verkkosivujen välimuistin, sitten hexo d luo uudelleen