Як створити блог з Hugo

Вступ

Hugo — це генератор статичних сайтів із блискавичною швидкістю рендеринга та чудовою простотою використання. Завдяки всім його функціям, орієнтованим на вміст, ви завжди можете зосередитися на створенні контенту, а не створенні середовища:

• За допомогою Hugo ви можете створити статичний сайт, який працює в будь-якому місці за кілька хвилин, не торкаючись виснажливих залежностей або баз даних.
• Ви можете створювати свій вміст у Markdown, найзручнішому стилі письма, і миттєво бачити зміни, які ви внесли в Інтернет.
• Крім того, ви можете максимально використовувати багате сховище тем Hugo і швидко зростаючу спільноту.

У цьому підручнику я покажу вам, як встановити та використовувати Hugo для створення статичного сайту блогу на екземплярі сервера Vultr LEMP на базі CentOS.

Передумови

Увійдіть у свій екземпляр як користувач без права root з правами sudo. Як створити такого користувача дивіться в цій статті .

Крок 1: Встановіть програму Hugo

Hugo можна встановити майже на всіх основних платформах. Для CentOS вам просто потрібно завантажити останній програмний файл в .tar.gzархів і розпакувати його в зручне місце. На момент написання статті остання версія — 0.15.

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

Перевірте свою інсталяцію за допомогою такої команди:

 hugo version

Крок 2: Створіть свій сайт

За допомогою Hugo ви можете створити свій сайт з будь-якої папки на вашому сервері. Тут я створив сайт у каталозі mysite/під моїм домашнім каталогом.

cd ~
hugo new site ~/mysite

Виконайте такі команди, щоб побачити архітектуру сайту:

cd mysite
ls -lF

Як бачите, поточна архітектура сайту нагадує:

archetypes/

config.toml

content/

data/

layouts/

static/

З ще двома каталогами, які планується створити, themes/і public/вся архітектура сайту Hugo компактна, але всеосяжна.

Для початку знайте, що ваш вміст має зберігатися в каталозі content/.

Крок 3: Встановіть теми з репозиторію Hugo

Щоб встановити всі теми з репозиторію Hugo, виконайте наступні команди. Це створить каталог з іменем themes/у каталозі вашого сайту та завантажить усі теми з репозиторії тем Hugo.

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Якщо ви хочете просто встановити одну тему, відвідайте репозиторію тем Hugo, щоб визначити свою улюблену тему. Скопіюйте його URL-адресу та вставте її в git cloneкоманду нижче.

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

Крок 4: Внесіть основні зміни в конфігурацію

Файл, названий config.tomlу каталозі вашого сайту, містить глобальну конфігурацію вашого сайту Hugo. Відредагуйте файл за допомогою текстового редактора, щоб внести деякі основні зміни конфігурації, як зазначено нижче. Не забудьте замінити значення відповідно до ваших конкретних умов.

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

Крок 5. Складіть свій контент

У каталозі сайту введіть таку команду, щоб створити сторінку вмісту в каталозі ~/mysite/content/post/.

cd ~/mysite/
hugo new post/about.md

Відкрийте файл у текстовому редакторі, формат файлу має нагадувати наступний.

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

Між двома рядками +++розташована мета інформація про вашу сторінку вмісту. Тут ви можете видалити рядок draft = trueі змінити рядок заголовка за своїм бажанням.

У другому +++рядку додайте вміст, який ви хочете відобразити на веб-сторінці. Не забудьте писати свій вміст мовою Markdown.

## This is an H2 headline

Text goes here.

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

Крок 6. Налаштуйте вміст за допомогою сервера Hugo

Ви можете використовувати вбудований веб-сервер Hugo для розгортання свого сайту, який може миттєво відобразити ваші зміни на веб-сторінці, щойно ви зміните вміст у текстовому редакторі.

Відкрийте інший термінал, налаштуйте iptablesправила, щоб дозволити вам доступ до вашого сайту через порт за замовчуванням 1313 сервера Hugo:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

Запустіть сервер Hugo:

hugo server --bind="[YourServerIP]"

Відвідайте свій сайт із браузера:

http://[YourServerIP]:1313

Тепер ви можете спробувати відредагувати вміст файлу сторінки в попередньому терміналі або додати/видалити файл сторінки. Ви побачите, що будь-які зміни в content/каталозі будуть одночасно відображені на екрані вашого браузера. Це чудова функція для зайнятого блогера, оскільки ви завжди можете відразу побачити свої зміни для кращого створення композицій.

Після завершення редагування натисніть, Ctrl+Cщоб зупинити сервер Hugo.

Крок 7. Опублікуйте свій сайт

Тепер настав час опублікувати свій сайт в Інтернеті. Виконайте наступні команди, і Hugo згенерує весь статичний вміст, придатний для публікації в public/каталозі.

cd ~/mysite
hugo

Примітка : Hugo не видалятиме старі файли, які були згенеровані раніше, коли ви запускаєте команди вище. Щоб уникнути несподіваних результатів, ви завжди можете видалити public/каталог перед запуском hugoкоманди або вказати нове призначення виводу, як показано в наступній команді.

hugo --destination=public2

Оскільки веб-сервер Nginx вже запущено на сервері, все, що вам потрібно зробити, це скопіювати вміст ~/mysite/public/каталогу або інших користувацьких цільових каталогів у ваш веб-каталог /usr/share/nginx/html/.

Видаліть оригінальні файли:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

Скопіюйте ваші статичні файли сайту до веб-каталогу:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

Це воно. Тепер ви можете відвідати ваш супершвидкий статичний сайт зі свого браузера: http://[YourServerIP].

Щоб дізнатися більше, скористайтеся командою hugo helpабо відвідайте офіційний веб-сайт Hugo .