Как установить и создать блог с помощью Hexo в Ubuntu 20.04
На этой странице
- Предпосылки
- Настройка брандмауэра
- Установите Node.js
- Установить Hexo
- Настроить Hexo
- Установка темы
- Создание и публикация сообщения
- Установка подключаемого модуля
- Тестовый сервер
- Создание шестнадцатеричных статических файлов
- Установка и настройка Nginx
- Установить SSL
- Обновить шестнадцатеричный
- Развертывание Hexo
- Заключение
Hexo — это статическая платформа для ведения блогов, построенная на Node.js. Hexo позволяет писать сообщения в формате Markdown. Эти сообщения в блогах обрабатываются и преобразуются в статические HTML-файлы с использованием предварительно определенных тем.
Он отличается от обычного программного обеспечения для ведения блогов, такого как WordPress, тем, что генерирует статические файлы. WordPress загружает блог динамически, запуская код PHP каждый раз, когда вы перезагружаете сайт, что делает его подверженным уязвимостям.
В этом руководстве вы узнаете, как установить Hexo и использовать его для создания блога на сервере на базе Ubuntu 20.04.
Предпосылки
-
Ubuntu 20.04 based server with a non-root user with sudo privileges.
-
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 ""
-
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.htm
l в конце каждой страницы, вы можете изменить обе опции 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. Если у вас есть какие-либо вопросы, задайте их в комментариях ниже.