TOC

Как создать блог с Hexo на Ubuntu 14.04

Вступление

Hexo - это статическая платформа для ведения блогов, построенная на https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for- производство-на-убунту-14-04 [Node.js]. Используя Hexo, вы можете публиковать документы Markdown в виде постов в блоге. Сообщения и содержимое блога обрабатываются и преобразуются в HTML / CSS, который получается из стандартных или пользовательских файлов шаблонов тем (как и другие статические генераторы блогов, такие как Jekyll и Ghost). Все программное обеспечение в Hexo является модульным, поэтому вы можете установить и настроить именно то, что вам нужно.

В этом руководстве будут настроены Hexo с развертыванием, поддерживаемым GitHub и Nginx.

Предпосылки

Чтобы следовать этому уроку, вам понадобится:

  • Одна капля Ubuntu 14.04 с пользователем не-root sudo, которую вы можете настроить, следуя https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-14-04[this начальный сервер руководство по установке.

  • Git установлен на вашем сервере, что вы можете сделать, следуя разделам «Как установить Git с помощью Apt» и «Как настроить Git» на https://www.digitalocean.com/community/tutorials/how-to-install -git-on-ubuntu-14-04 [это руководство по Git].

  • Node.js установлен на вашем сервере, который вы можете настроить, следуя разделу «Как установить с помощью NVM» на https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on -an-ubuntu-14-04-server # how-to-install-using-nvm [это руководство по Node.js].

  • Nginx установлен на вашем сервере, который вы можете настроить, следуя this учебник Nginx.

  • Аккаунт на GitHub, который является хостом хранилища Git ,

Шаг 1 - Установка и инициализация Hexo

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

Во-первых, убедитесь, что системные пакеты обновлены.

sudo apt-get update && sudo apt-get upgrade

Несколько пакетов программного обеспечения и компонентов составляют основу ведения блогов Hexo. Здесь мы рассмотрим два наиболее важных из них, используя + npm +, менеджер пакетов Node.js.

Первый, + hexo-cli +, является наиболее важным и предоставляет основные команды Hexo.

npm install hexo-cli -g

Второй, + hexo-server +, является встроенным сервером, который можно использовать для предварительного просмотра и тестирования вашего блога перед его развертыванием.

npm install hexo-server -g

Есть еще много доступных пакетов; это просто самое необходимое для запуска и запуска блога Hexo. Вы можете просмотреть другие пакеты, доступные в рамках Hexo Framework, на npm search.

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

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

hexo init ~/hexo_blog

Через секунду или две вы получите некоторый результат:

Output. . .

INFO  Copying data to ~/hexo_blog
INFO  You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

. . .

Затем перейдите в каталог с вашими файлами конфигурации.

cd ~/hexo_blog

Затем запустите вышеупомянутую команду установки.

npm install

Вы можете игнорировать любые необязательные предупреждения о зависимости от + npm +. После нескольких секунд обработки у нас будут наши базовые конфигурационные файлы.

Шаг 2 - Настройка основного файла конфигурации Hexo

Давайте посмотрим на базовые конфигурационные файлы в нашем каталоге Hexo.

ls -l
Output-rw-rw-r--   1 sammy sammy 1483 Jan 11 12:30 _config.yml
drwxrwxr-x 191 sammy sammy 4096 Jan 11 12:31 node_modules
-rw-rw-r--   1 sammy sammy  442 Jan 11 12:30 package.json
drwxrwxr-x   2 sammy sammy 4096 Jan 11 12:30 scaffolds
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 source
drwxrwxr-x   3 sammy sammy 4096 Jan 11 12:30 themes

Из всех имеющихся файлов файл + _config.yml + является, пожалуй, самым важным. Все основные настройки хранятся здесь, и это занимает центральное место в блоге. Если вам нужно что-то настроить в будущем, скорее всего, это будет в этом файле.

Далее мы настроим некоторую базовую настройку, пройдя + _config.yml + по частям. Откройте + _config.yml + с помощью + nano + или предпочитаемого вами текстового редактора.

nano _config.yml

В верхней части файла вы должны увидеть раздел, помеченный * Site *:

Оригинал ~ / hexo_blog / _config.yml

. . .

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

. . .

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

Следующие два варианта - это язык и часовой пояс. Опция языка принимает только 2-letter коды ISO-639-1. Часовой пояс по умолчанию установлен на часовой пояс вашего сервера и использует форматирование Userstz database ”. Если вы решили, что хотите изменить любой из них, убедитесь, что они в этих форматах.

Вот несколько примеров значений:

Пример ~ / hexo_blog / _config.yml

. . .

#Site
title:
subtitle:
description:
author:
language:
timezone:

. . .

Следующий раздел - это раздел * URL *. Здесь мы хотим изменить параметр URL. Поскольку в настоящее время у нас нет доменного имени для нашего сервера, мы можем вместо этого ввести IP-адрес для настройки + url: + здесь.

~ / Hexo_blog / _config.yml

. . .

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

. . .

Последний параметр, который мы хотим изменить, это + default_layout: + в разделе * Writing * чуть дальше. Это создает новые сообщения в виде черновиков, поэтому они должны быть опубликованы, прежде чем их можно будет увидеть на сайте блога.

Установите его в + draft + сейчас, как мы делали ниже:

~ / Hexo_blog / _config.yml

. . .

# Writing
new_post_name: :title.md # File name of new posts
default_layout:
titlecase: false # Transform title into titlecase

. . .

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

Шаг 3 - Создание и публикация новой публикации

Процесс создания сообщения (или черновика, как мы настраивали ранее) начинается с выполнения следующей команды, где * first-post * - это имя сообщения, которое вы хотите создать.

hexo new

Вы должны увидеть следующий вывод:

OutputINFO  Created: ~/hexo_blog/source/_drafts/first-post.md

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

nano ~/hexo_blog/source/_drafts/first-post.md
В каждом сообщении должен быть настроен front-matter. Front-material - это короткий блок JSON или YAML, в котором настраиваются такие параметры, как заголовок вашего сообщения, дата публикации, теги и т. Д. Конец фронт-материя обозначается первым маркером + --- + или `+ ;

+`. После начала работы вы можете написать сообщение в блоге с синтаксисом Markdown.

Замените содержимое по умолчанию в + first-post.md + приведенными ниже примерами параметров в файле, чтобы начать публикацию. Вы можете настроить их, если хотите.

Пример ~ / hexo_blog / source / _drafts / first-post.md

title: DigitalOcean's First Post
tags:
 - Test
 - Blog
categories:
 - Hexo
comments: true
date: 2015-12-31 00:00:00
---

## Markdown goes here.

**This is our first post!**

Сохраните и выйдите из файла.

Файл Markdown, который мы только что создали, будет храниться в + ~ / hexo_blog / source / _drafts +, пока мы не опубликуем его. Любые сообщения внутри папки + _drafts + не будут видны посетителям сайта.

Затем опубликуйте пост, чтобы он вилл был доступен посетителям.

hexo publish first-post

Это приводит к:

OutputINFO  Published: ~/hexo_blog/source/_posts/first-post.md

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

Шаг 4 - Запуск тестового сервера

Теперь предыдущие файлы конфигурации завершены, и у нас есть пример готового поста. Далее мы запустим тестовый сервер.

hexo server

Можно заставить тестовый сервер отображать сообщения в папке + _drafts +. Для этого включите опцию + -d + при выдаче последней команды.

Теперь, когда у нас запущен тестовый сервер, вы можете просмотреть свой блог, посетив + http: //: 4000 / + в вашем любимом браузере. Вы увидите предварительно определенный тестовый пост Hexo «Hello World» и тестовый пост, который мы только что создали.

изображение: https: //assets.digitalocean.com/articles/hexo/07hIfZs.png [Изображение в блоге DigitalOcean Hexo]

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

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

Шаг 5 - Настройка Git Deployment

Существует несколько различных способов развертывания того, что мы уже сделали с Hexo. Подход в этом руководстве состоит в том, чтобы использовать Git для хранения статических файлов, ловушки для их пересылки и затем Nginx для их размещения. Тем не менее, предоставляется поддержка Heroku, Git, Rsync, OpenShift, FTPSync и других с дополнительными пакетами фреймворка.

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

Создайте новый репозиторий на GitHub с именем * hexo_static *, выполнив их действия по созданию repository. Убедитесь, что вы выбрали опцию «Public» и отметили флажок * Initialize the репозиторий README *.

После того, как вы создали хранилище, откройте основной файл конфигурации Hexo для редактирования.

nano _config.yml

В нижней части файла есть раздел, помеченный как * Deployment *:

Оригинал ~ / hexo_blog / _config.yml

. . .

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
 type:

Заполните параметры для + deploy: +, как показано ниже. Обратите внимание, что строка + repo + должна содержать URL-адрес только что созданного репозитория Git, поэтому обязательно замените ++ на свое имя пользователя учетной записи GitHub.

~ / Hexo_blog / _config.yml

deploy:
 type:

Сохраните и выйдите из файла.

Поскольку мы решили использовать Git для развертывания, нам нужен пакет Hexo, который отправляет нашу статическую разметку в репозиторий Git.

Используйте + npm + для его установки.

npm install hexo-deployer-git --save

Теперь вы можете протестировать развертывание в репозитории + hexo_static + и дать ему свой первый Hexo автоматический коммит с помощью:

hexo generate && hexo deploy

Введите ваши данные аутентификации GitHub, когда будет предложено.

Вот как выглядит (или похож) успешный вывод после использования этих команд. Минус поколения файлов и вставки Git:

OutputTo username
* [new branch]      master -> master
Branch master set up to track remote branch master from username
INFO  Deploy done: git

Шаг 6 - Настройка Nginx

Мы будем использовать базовую настройку веб-сервера Nginx для обслуживания блога Hexo, поскольку Nginx очень хорошо обслуживает статический контент, а наш блог будет содержать только статические файлы. Есть и другие жизнеспособные варианты, которые также отлично работают, такие как страницы GitHub или веб-серверы, такие как Apache, но этот выбор, в частности, обеспечивает некоторую эффективность и личный контроль над хостингом.

Сначала создайте системные каталоги, которые мы сообщим Nginx использовать для хостинга.

sudo mkdir -p /var/www/hexo

Затем передайте текущему пользователю Ubuntu права собственности на эти системные каталоги веб-сервера.

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

Обновите permissions в соответствии с собственностью.

sudo chmod -R 755 /var/www/hexo

Откройте для редактирования + default + Nginx серверный блок.

sudo nano /etc/nginx/sites-available/default

Игнорируя закомментированные области и строки файла, внесите изменения в активную часть кода конфигурации, чтобы директива + root + указывала на каталог + / var / www / hexo +.

/ И т.д. / Nginx / сайты-отсутствуют / по умолчанию

. . .

server {
   listen 80 default_server;
   listen [::]:80 default_server ipv6only=on;

   root ;
   index index.html index.htm;

. . .

Сохраните и выйдите из файла. Если в будущем вы настроите доменное имя для этого сервера, вернитесь к этому файлу и замените запись + server_name + в том же блоке новым доменным именем.

Наконец, перезапустите службу Nginx, чтобы изменения вступили в силу.

sudo service nginx restart

Шаг 7 - Создание Git Hooks

На этом шаге мы свяжем репозиторий * hexo_static * с другим репозиторием Git, чтобы мы могли отправлять статические HTML-файлы в каталог веб-сервера (при запуске).

Сначала инициализируйте новый пустой Git-репозиторий (не на GitHub). Единственной целью этого репозитория будет пересылка содержимого нашего репозитория + hexo_static + в каталог веб-сервера.

git init --bare ~/hexo_bare

Создайте новый файл ловушек в сгенерированном Git каталоге + hooks +:

nano ~/hexo_bare/hooks/post-receive

Добавьте две строки кода ниже в файл. Это указывает рабочее дерево Git (с исходным кодом) и каталог Git (с настройками конфигурации, историей и т. Д.).

~ / Hexo_bare / Крючки / после приема

#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/home/$USER/hexo_bare checkout -f

Сохраните и закройте файл после завершения.

Сделайте этот файл + post-receive + исполняемым.

chmod +x ~/hexo_bare/hooks/post-receive

Теперь мы должны клонировать репозиторий развертывания + hexo_static +, который мы создали на шаге 5, на наш сервер. Убедитесь, что вы заменили ++ в этой следующей команде своим именем пользователя GitHub.

git clone https://github.com//hexo_static.git ~/hexo_static

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

cd ~/hexo_static

Наконец, добавьте наш пустой репозиторий из более ранних версий как Git remote с именем * live *.

git remote add live ~/hexo_bare

Шаг 8 - Создание сценария развертывания

Короткий сценарий оболочки может использоваться для запуска и запуска всего процесса развертывания, который мы здесь настроили. Это означает, что нам не нужно будет запускать несколько команд Hexo по отдельности или запускать ловушку Git несколькими командами.

Вернитесь в наш исходный каталог блогов Hexo и создайте файл для сценария развертывания.

cd ~/hexo_blog
nano hexo_git_deploy.sh

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

hexo_blog / hexo_git_deploy.sh

#!/bin/bash

hexo clean
hexo generate
hexo deploy

( cd ~/hexo_static ; git pull ; git push live master )

Сохраните и выйдите из файла.

Скрипт содержит три команды + hexo +:

  • + clean + удаляет все ранее созданные статические файлы в общей папке.

  • + generate + создает статические HTML-файлы из нашей уценки в общей папке.

  • + deploy + отправляет вновь сгенерированные статические файлы в виде коммита в «живой» Git-репозиторий, который мы определили в + _config.yml + ранее.

Последняя строка, + (cd ~ / hexo_static; git pull; git push live master) +, запускает ловушку Git и обновляет каталог размещения веб-сервера нашими статическими файлами HTML.

Обязательно сохраните и закройте файл, как только он будет заполнен.

Сделайте новый исполняемый скрипт для выполнения этого шага.

chmod +x hexo_git_deploy.sh

Шаг 9 - Запуск сценария развертывания

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

./hexo_git_deploy.sh

Дождитесь завершения команд и обработки, введя в процесс любые данные аутентификации GitHub. Затем посмотрите на файлы в каталоге + / var / www / hexo +.

ls /var/www/hexo
Output2015  2016  archives  categories  css  fancybox  index.html  js  tags

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

Посетите + http: /// + в своем любимом браузере, чтобы увидеть ваш блог в реальном времени (без использования тестового сервера).

Чтобы развернуть новые изменения в блоге в будущем, все, что вам нужно сделать, - это повторно запустить скрипт + hexo_git_deploy.sh +. Не забудьте проверить новые сообщения на наличие ошибок с помощью команд + hexo server + или + hexo server -d + перед развертыванием.

Шаг 10 - Проверка файловой системы Hexo (необязательно)

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

Расположение файлов и каталогов выглядит следующим образом:

Hexo files and directories├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

node_modules

В этом каталоге Hexo хранит модули, которые вы загружаете через + npm + для использования с вашим блогом. В конце этого урока будут только те пакеты, которые мы скачали на шаге 1.

Outputhexo  hexo-generator-archive  hexo-generator-category  hexo-generator-index  hexo-generator-tag  hexo-renderer-ejs  hexo-renderer-marked  hexo-renderer-stylus  hexo-server

Некоторые из этих незнакомых модулей входят в состав базовых пакетов. Обычно здесь нет реальной необходимости изменять или удалять файлы.

package.json

Этот файл JSON содержит конфигурации и версии наших пакетов Hexo, которые Hexo будет использовать для вашего блога.

Если вам когда-либо потребуется обновить, понизить или удалить пакет * вручную *, это можно сделать, изменив значения, приведенные здесь. Как правило, вам нужно будет сделать это только в случае возникновения конфликта в Hexo, что является относительно редким явлением.

строительные леса

При создании новых сообщений Hexo может основывать их на файлах шаблонов в папке + scaffolds +.

Сначала вы должны создать файлы шаблонов и разместить их здесь, чтобы использовать их. Эта функция является необязательной и необходима только в том случае, если вам нужны повторные макеты для ваших будущих сообщений Hexo.

источник

Публикации, которые вы публикуете и хотите видеть публичными, хранятся в + _posts +, и после того, как они сгенерированы, папка + _drafts + и любые другие созданные пользователем страницы также живут здесь.

Подавляющее большинство содержимого Markdown вашего блога размещено внутри Hexo в одной из этих подпапок.

темы

Пользовательские темы, после загрузки, должны быть сохранены здесь. Большинство тем имеют собственный файл + _config.yml + для хранения их эквивалентных настроек конфигурации. Мы придерживались темы по умолчанию для целей данного руководства.

Заключение

Hexo - это гораздо больше, чем то, что было описано в этом руководстве, но это хороший старт для создания вашего нового блогового сайта. Https://hexo.io/docs/[documentation for Hexo] очень лаконичен, если вы хотите узнать больше. Следующим шагом на пути к развитию вашего блога будет изучение установки одной из тем custom, доступной для Hexo.

Related