У цьому посібнику ми опублікуємо вебсайт з анонсом "Coming Soon" за допомогою теми Coming Soon Hugo і опублікуємо його на спільному хостингу Hostinger. Ми будемо виконувати наші команди в Linux Lite, що працює в VirtualBox. Ми встановимо Hugo та Visual Studio Code (VSCode) для створення нашого вебсайту з анонсом та його публікації. [Demo сторінка Coming Soon]
Попередні вимоги
Я почав з нової інсталяції Linux Lite в Oracle VM VirtualBox.
Встановлення VSCode
Відкрийте термінал і завантажте пакет deb для VSCode з code.visualstudio.com; перейдіть до директорії завантажень, клацніть правою кнопкою миші і виберіть Open Terminal Here, а потім виконайте наступну команду.
sudo apt install ./[filename].deb
VSCode
Введіть code в термінал або знайдіть VSCode в меню додатків. Потім натисніть File > Open Folder > створіть нову папку GOHUGO > Відкрити. Якщо з'явиться спливаюче повідомлення з запитом Do you trust the authors of the files in this folder? виберіть Yes, I trust the authors.
Встановлення git
Виконайте наступну команду для встановлення git.
sudo apt install git
Встановлення Hugo
До кінця цього розділу ми повинні мати локальний сервер Hugo, який показує нашу вебсторінку з анонсом. Ми будемо використовувати VSCode для запуску терміналів і керування створенням файлів. У VSCode натисніть на вкладку Terminal > New Terminal. Встановіть Hugo за допомогою наступної команди:
sudo apt update && sudo apt install hugo
Створення нового вебсайту
У терміналі введіть наступну команду.
hugo new site my-blog
Ви побачите нову папку в секції Explorer, my-blog.
Нова папка Hugo для сайту my-blog
Тема Coming Soon Hugo
У терміналі переконайтеся, що ви знаходитеся в директорії my-blog. Мій термінал показує SpicySecurityNinja > gohugo > my-blog>. Ви можете _cd до папки my-blog або клацнути правою кнопкою миші на папку в Explorer і вибрати Open in Integrated Terminal.
Тепер ви можете завантажити тему до папки my-blog.
cd my-blog
cd themes
git clone https://github.com/mansoorbarri/coming-soon.git
У папці Explorer перейдіть до /my-blog > themes > coming-soon > examplesite і відкрийте config.toml.
Скопіюйте текст і вставте його у файл config.toml в папці my-blog.
config.toml
До
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
Після
baseURL = "https://cshugo.mansoorbarri.com"
languageCode = 'en-us'
theme = "coming-soon"
[params]
title = "Coming Soon Hugo"
description = "A simple countdown"
favicon = ""
message = "COMING SOON!"
release = "June 30, 2024"
background = ""
socialIcons = [
{name = "email", url = "[email protected]"},
{name = "twitter", url = "https://twitter.com/"},
{name = "facebook", url = "https://facebook.com/"},
{name = "github", url = "https://github.com/"},
{name = "instagram", url = "https://instagram.com/"},
{name = "tiktok", url = "https://tiktok.com/"},
]
[params.twitter]
enable = true
username = "mansoorbarri"
Змініть baseURL на ваш домен і дотримуйтесь інструкцій в розділі Mansoor Barri, щоб здійснити потрібні налаштування, редагуючи текстові рядки, видаляючи непотрібні рядки та зберігаючи файл config.toml за допомогою Ctrl+S.
Порада: Змініть іконки, завантаживши вибраний дизайн в /my-blog/themes/coming-soon/static/svg/icons/ та favicon, розташований у /my-blog/themes/coming-soon/static/.
Тестування вашого Hugo сайту
Щоб протестувати наш новий Hugo сайт в середовищі розробки, виконайте наступну команду в терміналі.
hugo server
Після виконання команди натисніть на посилання http://localhost:1313, натиснувши Ctrl+клік миші або відкрийте сайт, ввівши URL в браузері.
Порада: Іноді необхідно перезапустити сервер, зупинивши його. Для зупинки сервера перейдіть в термінал і натисніть Ctrl+C, потім знову запустіть його за допомогою hugo server для перегляду змін.
Перехід в онлайн
Після того як ми протестуємо наш Hugo сайт з анонсом локально, ми можемо створити нашу публічну папку і завантажити її на хостинг. Наступні кроки стосуються хостингу Hostinger, але інші хостинг-провайдери мають подібний процес для завантаження файлів на ваш сайт. Також ви можете хостити ваш Hugo сайт через GitHub Pages, як згадано в How to Build a Blog — A Complete Beginner’s Guide to Hugo.
Створення сайту
У терміналі VSCode введіть наступну команду
hugo --minify
Команда створить нову папку public. Папка public є нашим сайтом. Ми повинні виконувати команду для оновлення папки public щоразу, коли вносимо зміни.
Завантаження сайту
На Hostinger завантажте файли в public_html вашого домену за допомогою FTP, SFTP або File Manager.
Ресурси
[
Запуск Visual Studio Code на Linux
Налаштуйте Visual Studio Code на Linux.
code.visualstudio.com
](https://code.visualstudio.com/docs/setup/linux?source=post_page-----6ba6592fa9e7---------------------------------------)
[
Хостинг на GitHub Pages
Хостіть ваш сайт на GitHub Pages з безперервним деплоєм за допомогою сторінок проектів, користувачів або організацій.
gohugo.io
](https://gohugo.io/hosting-and-deployment/hosting-on-github/?source=post_page-----6ba6592fa9e7---------------------------------------)
[
Як побудувати блог — Повний посібник для початківців по Hugo
Цей посібник пояснює всі кроки, які необхідно пройти, щоб створити блог і опублікувати його онлайн за допомогою інструменту Hugo.
theibbster.medium.com
](https://theibbster.medium.com/how-to-build-a-blog-a-complete-beginners-guide-to-hugo-9f831b50aad?source=post_page-----6ba6592fa9e7---------------------------------------)
Перекладено з: Your Coming Soon Hugo website on Hostinger Web Hosting