Поиск по сайту:

Как установить и создать блог с помощью Hexo в Ubuntu 20.04


На этой странице

  1. Предпосылки
  2. Настройка брандмауэра
  3. Установите Node.js
  4. Установить Hexo
  5. Настроить Hexo
  6. Установка темы
  7. Создание и публикация сообщения
  8. Установка подключаемого модуля
  9. Тестовый сервер
  10. Создание шестнадцатеричных статических файлов
  11. Установка и настройка Nginx
  12. Установить SSL
  13. Обновить шестнадцатеричный
  14. Развертывание Hexo
  15. Заключение

Hexo — это статическая платформа для ведения блогов, построенная на Node.js. Hexo позволяет писать сообщения в формате Markdown. Эти сообщения в блогах обрабатываются и преобразуются в статические HTML-файлы с использованием предварительно определенных тем.

Он отличается от обычного программного обеспечения для ведения блогов, такого как WordPress, тем, что генерирует статические файлы. WordPress загружает блог динамически, запуская код PHP каждый раз, когда вы перезагружаете сайт, что делает его подверженным уязвимостям.

В этом руководстве вы узнаете, как установить Hexo и использовать его для создания блога на сервере на базе Ubuntu 20.04.

Предпосылки

  1. Ubuntu 20.04 based server with a non-root user with sudo privileges.

  2. Git should be installed. If you don't have git installed, you can do it via following commands.

    $ sudo apt install git
    $ git config --global user.name "Your Name"
    $ git config --global user.email ""
    
  3. An account on Github.

Настроить брандмауэр

Ubuntu 20.04 по умолчанию поставляется с несложным брандмауэром (UFW). Если это не так, сначала установите его.

$ sudo apt install ufw

Включить SSH-порт.

$ sudo ufw allow "OpenSSH"

Включите брандмауэр.

$ sudo ufw enable

Включите порт 4000, который используется сервером Hexo.

$ sudo ufw allow 4000

Также откройте порты HTTP и HTTPS, которые нам понадобятся позже.

$ sudo ufw allow http
$ sudo ufw allow https

Проверьте состояние брандмауэра.

$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
80/tcp                     ALLOW       Anywhere
4000                       ALLOW       Anywhere
443/tcp                    ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
80/tcp (v6)                ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)
443/tcp (v6)               ALLOW       Anywhere (v6)

Установите Node.js

Поскольку Hexo основан на Node.js, вам необходимо сначала установить его.

Выполните следующую команду, чтобы добавить репозиторий Node.js.

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Установите Node.js.

$ sudo apt-get install nodejs

Подтвердите, правильно ли он установлен.

$ node --version
v14.15.0

Установить гексо

Выполните следующую команду, чтобы установить пакет Hexo.

$ sudo npm install hexo-cli -g

Параметр -g устанавливает пакет hexo-cli глобально, что позволит вам установить блог Hexo в любой каталог по вашему выбору.

Создайте каталог для установки Hexo.

$ sudo mkdir -p /var/www/hexo

Установите необходимые разрешения и права собственности.

$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo

Далее вам нужно инициализировать и настроить необходимые файлы для блога Hexo. Для этого перейдите в только что созданный каталог.

$ cd /var/www/hexo

Инициализируйте блог Hexo.

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

Установите Хексо.

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY:  (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for : wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 5 packages from 1 contributor and audited 191 packages in 1.567s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Теперь вы можете проверить структуру каталогов.

$ ls
_config.yml  node_modules  package-lock.json  package.json  scaffolds  source  themes

Файл _config.yml содержит конфигурацию вашего блога Hexo. Отсюда можно изменить большинство настроек блога.

Каталог node_modules содержит все пакеты, которые нужны Hexo, и те, от которых он зависит.

Файл package.json содержит список всех пакетов и их номеров версий, которые нужны Hexo.

Файл package-lock.json автоматически создается npm каждый раз, когда вы выполняете установку или изменение пакета Hexo. Он содержит информацию о пакетах и версиях, которые были установлены или изменены.

Каталог scaffolds содержит шаблоны, на основе которых будут создаваться сообщения и страницы вашего блога.

Каталог source содержит фактический контент сайта в формате HTML/CSS, который затем публикуется в Интернете. Любая папка или файл с префиксом _ (подчеркивание) игнорируются Hexo, за исключением папки _posts. На данный момент каталог пуст, потому что мы ничего не писали и не публиковали.

Каталог themes содержит темы вашего блога.

Настроить шестнадцатеричный

Откройте файл _config.yml для редактирования.

$ nano _config.yml

Проверьте раздел файла под названием Site.

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

Варианты довольно понятны. Измените название вашего сайта, установите подзаголовок, если хотите. Добавьте описание своего сайта и несколько ключевых слов для его описания. Измените имя автора и часовой пояс вашего сайта.

Затем проверьте раздел URL файла.

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Измените URL вашего сайта на ваше доменное имя. Убедитесь, что вы используете HTTPS в своем URL-адресе, так как позже мы установим SSL.

Если вы не хотите, чтобы URL-адрес вашего сайта отображал index.html в конце каждой страницы, вы можете изменить обе опции trailing_index и trailing_html. на false.

Есть еще несколько настроек, которые вы должны включить.

Измените значение переменной default_layout с post на draft. Это создаст новые сообщения в виде черновиков, поэтому вам нужно будет опубликовать их до того, как они появятся в блоге.

Измените значение переменной post_asset_folder на true. Это позволит вам иметь отдельные папки с изображениями для каждого сообщения вместо одной папки с изображениями для всех сообщений.

Сохраните файл, нажав Ctrl+X и введя Y при появлении запроса.

Установка темы

Hexo поставляется с темой по умолчанию под названием «Пейзаж». Вы можете переключиться на другую тему, установив другую тему Hexo, доступную на странице «Темы».

Все темы Hexo доступны через Github, поэтому вам необходимо клонировать репозиторий тем Github.

Для нашего урока мы устанавливаем тему Next. Перейдите в каталог Hexo и клонируйте репозиторий тем Github в каталог themes.

$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

Измените файл /var/www/hexo/_config.yml, чтобы изменить тему с Пейзажная на Следующая.

$ nano _config.yml

Внесите изменения в переменную темы, чтобы переключить тему.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Вы можете изменить настройки темы, изменив файл /var/www/hexo/themes/next/_config.yml.

Создать и опубликовать сообщение

Пришло время создать наш первый пост.

$ hexo new first-post
INFO  Validating config
INFO  Created: /var/www/hexo/source/_drafts/first-post.md

Откройте новый пост для редактирования.

$ nano ./source/_drafts/first-post.md

У каждого сообщения должен быть настроен свой основной вопрос. Передняя часть — это короткий блок JSON или YAML, в котором настраиваются важные детали, такие как заголовок сообщения, дата публикации, категории, теги и т. д. Замените данные по умолчанию правильными параметрами.

title: Howtoforge's First Post
tags:
  - test
categories:
  - Hexo
comments: true
date: 2020-11-14 00:00:00
---

## Markdown goes here.

**This is our first post!**

Если вы хотите вставить изображение в свой пост, добавьте в него следующий код.

{% asset_img "example.jpg" "This is an example image" %}

После этого скопируйте файл example.jpg в каталог \source\_posts\first-post, откуда будут извлечены все изображения для вашего первого сообщения.

Сохраните файл, нажав Ctrl+X и введя Y при появлении запроса, как только вы закончите писать пост.

Далее опубликуйте пост.

$ hexo publish first-post
INFO  Validating config
INFO  Published: /var/www/hexo/source/_posts/first-post.md

Этот пост будет виден после того, как мы разместим блог.

Установка плагина

У Hexo есть несколько сотен плагинов, которые вы можете установить. Вы можете установить один или несколько плагинов в зависимости от вашего использования.

Все плагины Hexo являются пакетами Node.js и размещены на Github, где вы можете найти информацию об их установке и настройке.

В нашем руководстве мы установим плагин hexo-filter-nofollow.

Сначала убедитесь, что вы находитесь в каталоге hexo, а затем установите плагин.

$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save

Откройте файл конфигурации Hexo для редактирования.

$ sudo nano _config.yml

Вставьте следующий код в конец файла.

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

Параметр enable включает подключаемый модуль. Параметр field определяет область действия плагина, где site добавляет атрибут nofollow к внешним ссылкам на всем сайте, а post добавляет атрибут nofollow только к ссылки в постах. Параметр exclude добавляет в белый список домены, на которые не будет добавлен атрибут nofollow.

Тестовый сервер

Hexo поставляется с базовым веб-сервером. Теперь, когда наш пост опубликован, пришло время запустить тестовый сервер Hexo.

$ hexo server

Теперь вы можете запустить URL-адрес http://yourserverIP:4000 в своем браузере, и вы увидите следующую страницу.

Выйдите из сервера, нажав Ctrl + C в терминале.

Создание шестнадцатеричных статических файлов

Тестовый сервер Hexo может обслуживать блог как динамически, так и через статические файлы. Приведенная выше команда динамически обслуживала блог.

Есть несколько способов сделать блог Hexo общедоступным. В нашем руководстве мы будем обслуживать статические файлы Hexos с помощью сервера Nginx.

Выполните следующую команду, чтобы сгенерировать статические файлы.

$ hexo generate

Приведенная выше команда создает статические файлы, которые хранятся в папке /var/www/hexo/public. Мы будем использовать сервер Nginx для обслуживания файлов из этой папки.

Установить и настроить Nginx

Установите сервер Nginx.

$ sudo apt install nginx

Создайте и откройте файл конфигурации Hexo для Nginx.

$ sudo nano /etc/nginx/sites-available/hexo.conf

Вставьте в него следующий код.

server {
    server_name hexo.example.com;

    root /var/www/hexo/public;
    index index.html index.htm;

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25>             ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    
    location / {
        try_files $uri $uri/ =404;
    }
}
server {
    if ($host = hexo.example.com) {
        return 301 https://$host$request_uri;
    }
    server_name hexo.example.com;
    listen 80;
    listen [::]:80;
    return 404;
}

Сохраните файл, нажав Ctrl+X и введя Y при появлении запроса.

Активируйте конфигурацию.

$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/

Откройте файл /etc/nginx/nginx.conf для редактирования.

$ sudo nano /etc/nginx/nginx.conf	

Вставьте следующую строку перед строкой include /etc/nginx/conf.d/*.conf.

server_names_hash_bucket_size 64;

Измените значение переменной types_hash_max_size с 2048 на 4096.

types_hash_max_size 4096;

Нажмите Ctrl + X, чтобы закрыть редактор, и нажмите Y, когда будет предложено сохранить файл.

Протестируйте, чтобы убедиться в отсутствии синтаксических ошибок в вашей конфигурации.

$ sudo nginx -t

Если проблем нет, перезапустите сервер Nginx.

$ sudo systemctl restart nginx

Установить SSL

Пришло время установить SSL с помощью сервиса Lets Encrypt для нашего блога hexo.

Для этого установите Certbot.

$ sudo apt install certbot

Остановите Nginx, потому что он будет мешать процессу Certbot.

$ sudo systemctl stop nginx

Сгенерируйте сертификат. Нам также необходимо создать сертификат DHParams.

$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m  --keep-until-expiring 
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048

Нам также нужно настроить задание cron для автоматического обновления SSL. Чтобы открыть редактор crontab, выполните следующую команду.

$ sudo crontab -e
no crontab for root - using an empty one

Select an editor.  To change later, run 'select-editor'.
  1. /bin/nano        <---- easiest
  2. /usr/bin/vim.basic
  3. /usr/bin/vim.tiny
  4. /bin/ed

Choose 1-4 [1]: 1

Приведенная выше команда открывает редактор Crontab. Если вы запускаете его впервые, вам будет предложено выбрать редактор для редактирования заданий Cron. Выберите 1 для редактора Nano.

Вставьте следующую строку внизу.

25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”

Приведенное выше задание cron будет запускать certbot в 2:25 каждый день. Вы можете изменить его на что угодно.

Сохраните файл, нажав Ctrl + X и введя Y при появлении запроса.

Обновить гексо

Перейдите в папку Hexo.

$ cd /var/www/hexo

Если вы переходите на основную версию Hexo, вам необходимо обновить файл package.json. Откройте его для редактирования. Вы можете сразу перейти к команде обновления для обновления до младших версий.

$ nano package.json

Измените следующую строку в разделе dependencies.

"hexo": "^5.0.0",

Измените значение 5.0.0 на следующую версию при ее выпуске в будущем. Например, если Hexo 6.0 отсутствует, измените его на следующий.

"hexo": "^6.0.0",

Сохраните файл, нажав Ctrl + X и введя Y при появлении запроса.

Выполните следующую команду, чтобы обновить hexo.

$ npm update

Развертывание Hexo

Hexo можно не только размещать непосредственно на вашем сервере, но и развертывать непосредственно на Git, Netlify, Vercel, Heroku, OpenShift и различными другими способами.

Для большинства подключаемых модулей развертывания требуется установка подключаемого модуля. В нашем руководстве мы настроим развертывание Hexos в Netlify. Если вы хотите выполнить развертывание в Netlify, вам не нужно выполнять шаги, связанные с Nginx и SSL, поскольку Netlify поставляется с бесплатным SSL.

Сайт Netlifys обычно развертывается из репозитория Git. Но для нашей цели мы опубликуем статический сайт напрямую в Netlify с помощью его инструмента CLI.

Установите интерфейс командной строки Netlify.

$ sudo npm install netlify-cli -g

Вы можете проверить, был ли установлен инструмент CLI.

$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0

Войдите в Netlify.

$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90

You are now logged into your Netlify account!

Run netlify status for account details

To see all available commands run: netlify help

Скопируйте логин из терминала в свой браузер и войдите в свою учетную запись Netlify для аутентификации.

Вы можете проверить, вошли ли вы в систему, используя следующую команду.

$ netlify status
???????????????????????
 Current Netlify User ?
???????????????????????
Name:  Your Name
Email: 
Teams:
  Your Team's team: Collaborator

Перейдите в общедоступный каталог Hexos.

$ cd /var/www/hexo/public

Разверните сайт в Netlify.

$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? +  Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge

Site Created

Admin URL: https://app.netlify.com/sites/Howtoforge
URL:       https://Howtoforge.netlify.app
Site ID:   986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!

Logs:              https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.

Выберите с помощью клавиш со стрелками, чтобы создать новый сайт, и введите имя для вашего сайта. Введите . в качестве каталога для развертывания, который ссылается на текущий каталог.

Вам будет предоставлен черновой URL. Скопируйте URL-адрес и загрузите его в браузер. Если все выглядит нормально, выполните следующую команду, чтобы выполнить производственное развертывание.

$ netlify deploy --prod

Теперь ваш сайт должен работать. Вы можете добавить собственный домен в настройки Netlify, чтобы указать его на реальный сайт.

Каждый раз, когда вы публикуете новый пост и создаете новые файлы, запускайте следующую команду из основного каталога Hexos, чтобы развернуть изменения в Netlify.

$ netlify deploy --dir ./public --prod

Заключение

На этом мы завершаем наше руководство по установке и созданию блога с использованием фреймворка Hexo Blog на сервере под управлением Ubuntu 20.04. Если у вас есть какие-либо вопросы, задайте их в комментариях ниже.