Кратко ръководство за създаване на Hexo блог от нулата (издание 2024)

#Изграждане на блог

Писнало ли ти е от безвкусните интерфейси на повечето блог платформи? Дотегна ли ти от безкрайните известия и реклами? Отдавна ли искаш да си направиш собствен блог, но сложните ръководства и купищата главоболящи кодове те спират? Ако е така, поздравления – тази статия ще ти покаже стъпка по стъпка, по най-простия и разбираем начин, как да създадеш свой собствен блог. Нужна ти е само малко търпение да следваш инструкциите.

Hexo е бърза, изчистена и ефективна блог платформа, истинска благословия за начинаещите. А GitHub ни спестява главоболията с допълнително наемане и настройка на сървър. Затова в тази статия ще използваме Hexo и GitHub, за да изградим блог.

През 2018 г. написах Кратко ръководство за създаване на блог от нулата. Но поради актуализации на плъгини, някои детайли се нуждаят от промяна. Затова представям обновената версия за 2024 г.

Подготовка

Създаване на статичен блог с Hexo локално

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

Точно така, основната част от блога вече е готова! Нека да видим резултата. Изпълни:

$ hexo server

Сега отвори браузъра си и въведи localhost:4000, за да видиш как изглежда блогът ти в момента. Малко вълнение, нали? След това натисни Ctrl + C, за да продължиш с останалите стъпки.

Персонализация (първоначална)

Смяна на тема

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

Настройки на сайта

# Site
title: 未知的世界                //Име на блога
subtitle:
description:  Do something cool //Кратко послание
author: LulalaP                 //Автор
language: zh-Hans               //Език на сайта
timezone:

Настройка на аватар в страничната лента

avatar:
    url: /uploads/avatar.jpg

Допълване на страниците на блога

Добавяне на меню

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

Създаване на страница за категории

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

Създаване на страница с облак от тагове

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

Създаване на страница „За мен“

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

Настройка на социални връзки в страничната лента

# 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

Свързване на блога с GitHub

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

Сега отвори браузъра си и посети http://your-name.github.io. Поздравления, твоят блог вече е изграден!

Свързване на домейн

До момента блогът е напълно изграден и достъпен чрез домейна на GitHub. Би било още по-добре, ако свържем по-кратък домейн към него.

Купуване на домейн

DNS настройки за домейна

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

След като конфигурираш DNS настройките за домейна, влез в директорията на блога, създай нов файл с име CNAME (внимавай да е с главни букви и без разширение) в директорията source. Отвори го с текстов редактор и въведи закупения домейн, например: www.philoli.com

hexo g
hexo d

Сега отвори браузъра си, въведи домейна и натисни Enter. Поздравления, вече имаш блог със собствен независим домейн!

Публикуване на нова статия

title Заглавие на статията
date Дата на създаване (датата на създаване на файла)
updated Дата на промяна (датата на промяна на файла)
comments Дали да се разрешават коментари true
tags Тагове
categories Категории
permalink Име в URL (име на файла)
hexo g
hexo d

Персонализация (разширена)

По-долу са дадени някои разширени настройки за персонализация на стила на блога. Начинаещите могат да ги пропуснат засега.

Добавяне на RSS

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

Прекъсване на статиите на началната страница

    <!--more-->

на мястото, където искаш статията да бъде прекъсната във файла .md.

Центриране на цитиран текст в статиите

{% centerquote %}
Цитиран текст
{% endcenterquote %}

{% centerquote %} Цитиран текст {% endcenterquote %}

Промяна на стила на кодовите блокове

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:

Задаване на година на създаване на сайта

since: 2024

Подобрен стил на връзките в статиите

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

Добавяне на фоново изображение към блога

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Дали да се повтаря изображението, ако не покрива цялата площ
    background-attachment:fixed;    //Дали изображението да се превърта със съдържанието
    background-size: cover;         //Покриване
    background-position:50% 50%;    //Позиция на изображението
}

Задаване на полупрозрачен фон за съдържанието на блога


//Прозрачност на съдържанието на блога
//Настройки за прозрачност на съдържанието на статията
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;
  }
}


//Настройки за прозрачност на страничната лента
.sidebar {
  opacity: 0.9;
}

//Настройки за прозрачност на лентата с менюто
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Настройки за прозрачност на полето за търсене (local-search)
.popup {
  opacity: 0.9;
}

Оптимизиране на стила на инлайн кодовите блокове

// Разкрасяване на тагове за код
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Добавяне на брой посетители в долния колонтитул на сайта

# Намери тага copyright и добави кода вътре в тага

<div class="copyright">
# ......Тук вече има някои настройки
# Добави новия код тук
</div>

# След добавянето изглежда така:
<div class="copyright">
  # ......Тук вече има някои настройки
  # Добави новия код тук
  {%- 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
# Публикувай, след като си сигурен, че всичко е наред
hexo d

Добавяне на README.md файл към хранилището

Обикновено всеки проект има README.md файл, но след разгръщане с Hexo в хранилището, README.md файлът в проекта ще бъде презаписан. Затова трябва да настроим конфигурационния файл, за да избегнем презаписване.

В основната директория source на Hexo проекта добави README.md файл и промени стойността на параметъра skip_render във файла _config.yml на сайта на:

skip_render: README.md

Запази и излез. Следващия път, когато разгърнеш блога с командата hexo d, файлът README.md няма да бъде рендиран.

Няколко полезни плъгина

Архивиране на изходни файлове

# Добави адреса на хранилището на блога, което си настроил преди това
git remote add https://github.com/your-name/your-name.github.io.git

# Добави и запази текущите промени, и запиши коментар
git add .
git commit -m "Актуализация на изходния файл"

# Създай и превключи към нов клон
git checkout -b source

# Изпрати цялото съдържание на локалния клон "source" към клона "source" в отдалеченото хранилище
git push origin source:source

Писане на блог от различни компютри

npm install -g hexo-cli
# Клонирай хранилището локално
git clone https://github.com/your-name/your-name.github.io.git

# Ако вече е клонирано локално, трябва да изтегляш най-новия клон преди всяка актуализация на блога
git pull origin

# Превключи към съответния клон
git checkout source

# Инсталирай всички Hexo плъгини, след което можеш да започнеш да актуализираш и редактираш съдържанието на блога
npm install

# След промяна на съдържанието, не забравяй да архивираш незабавно
git add .
git commit -m "Актуализация на блога xxx"
git push origin source:source

# Публикувай най-новото съдържание на блога на домейн сайта
hexo clean
hexo g  # Генериране на статични файлове
hexo s  # Локален преглед на блога
hexo d  # Публикуване на най-новото съдържание на блога

Обобщение на няколко често използвани команди

hexo g
# или hexo generate, генерира статични уеб страници от изходни файлове
hexo d
# или hexo deploy, публикува и изпраща към GitHub Pages
hexo s
# или hexo server, локално разгръщане за тестване
hexo clean
# Изчиства кеша на статичните уеб страници, след което hexo d генерира отново