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

Как создать веб-сайт с помощью Hugo в Debian 11


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

  1. Предпосылки
  2. Установите Hugo в Debian 11
  3. Создайте веб-сайт с Hugo
  4. Создайте страницу «О нас» и образец публикации
  5. Установите темы на свой веб-сайт
  6. Создайте и запустите свой веб-сайт
  7. Доступ к веб-сайту Hugo
  8. Заключение

Hugo — это бесплатный фреймворк для веб-сайтов с открытым исходным кодом, написанный на языке Go. Hugo предоставляет надежный и современный генератор статических сайтов, который позволяет легко и быстро создавать простые и быстрые веб-сайты. Он поставляется с готовыми шаблонами и другими функциями, включая SEO, комментарии, аналитику и другие функции. Сайты Hugo могут работать без какого-либо дорогостоящего времени выполнения, такого как PHP, Python, Ruby, и не нуждаются в какой-либо базе данных.

В этом посте мы покажем вам, как установить и использовать генератор сайтов Hugo в Debian 11.

Предпосылки

  • Сервер под управлением Debian 11.
  • На сервере настроен пароль root.

Установите Хьюго на Debian 11

По умолчанию пакет Hugo включен в стандартный репозиторий Debian 11. Вы можете установить его с помощью следующей команды:

apt-get install hugo -y

После установки Hugo вы можете проверить версию Hugo с помощью следующей команды:

hugo version

Вы должны получить следующий результат:

Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)

Создайте сайт с Хьюго

В этом разделе мы создадим новый веб-сайт с именем Hugo.example.com.

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

hugo new site hugo.example.com

После создания веб-сайта вы должны получить следующий результат:

Congratulations! Your new Hugo site is created in /root/hugo.example.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Вы можете просмотреть список всех файлов, созданных Hugo, с помощью следующей команды:

ls -l hugo.example.com

Вы получите следующий вывод:

drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes
-rw-r--r-- 1 root root   82 Nov 13 09:27 config.toml
drwxr-xr-x 2 root root 4096 Nov 13 09:27 content
drwxr-xr-x 2 root root 4096 Nov 13 09:27 data
drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts
drwxr-xr-x 2 root root 4096 Nov 13 09:27 static
drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes

Создайте страницу «О нас» и образец публикации

Сначала измените каталог на свой веб-сайт, используя следующую команду:

cd hugo.example.com

Затем создайте страницу about с помощью следующей команды:

hugo new about.md

Вы получите следующий вывод:

/root/hugo.example.com/content/about.md created

Затем отредактируйте страницу about.md с помощью следующей команды:

nano content/about.md

Измените файл, как показано ниже:

---
title: "About Us"
date: 2021-11-13T09:28:18Z
draft: false
---

This is About Us page for this website.

Затем создайте образец сообщения с помощью следующей команды:

hugo new post/page.md

Вы получите следующий вывод:

/root/hugo.example.com/content/post/page.md created

Затем отредактируйте образец страницы сообщения с помощью следующей команды:

nano content/post/page.md

Измените файл, как показано ниже:

---
title: "Page"
date: 2021-11-13T09:29:29Z
draft: true
---

# Hugo Page

This is my first hugo website page!

Сохраните и закройте файл, когда закончите.

Установите темы на свой сайт

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

Сначала измените каталог на темы с помощью следующей команды:

cd themes

Затем загрузите тему Hugo с помощью следующей команды:

wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Затем разархивируйте загруженную тему с помощью следующей команды:

unzip master.zip

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

mv hugo-strata-theme-master hugo-strata-theme

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

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

Затем отредактируйте файл config.toml с помощью следующей команды:

nano ../config.toml

Добавьте/измените следующие строки:

baseurl = "/"

[[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

Сохраните и закройте файл, затем создайте файл index.html для своего веб-сайта:

cd ../
nano layouts/index.html

Добавьте следующие строки:

{{ define "main" }}
        {{ if not .Site.Params.about.hide }}
                {{ partial "about" . }}
        {{ end }}

        {{ if not .Site.Params.portfolio.hide }}
                {{ partial "portfolio" . }}
        {{ end }}

        {{ if not .Site.Params.recentposts.hide }}
                {{ partial "recent-posts" . }}
        {{ end }}

        {{ if not .Site.Params.contact.hide }}
                {{ partial "contact" . }}
        {{ end }}
{{ end }}

Сохраните и закройте файл.

Создайте и запустите свой веб-сайт

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

hugo

Вы получите следующий вывод:

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | EN  
-------------------+-----
  Pages            |  8  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  2  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 48 ms

Затем запустите сервер Hugo и свяжите его с IP-адресом вашего сервера, используя следующую команду:

hugo server --bind=0.0.0.0 --baseUrl=http://104.245.34.233 -D -F

Вы получите следующий вывод:

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

                   | EN  
-------------------+-----
  Pages            | 11  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  3  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 42 ms
Watching for changes in /root/hugo.example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/hugo.example.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://104.245.34.233:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

В этот момент сервер Hugo запущен и прослушивает порт 1313.

Доступ к веб-сайту Хьюго

Теперь откройте веб-браузер и зайдите на свой веб-сайт, используя URL-адрес http://your-server-ip:1313. Вы должны увидеть стандартную страницу Hugo:

Нажмите «О программе» на левой панели. Вы должны увидеть страницу «О нас» на следующем экране:

Заключение

Поздравляем! вы успешно установили Hugo и создали веб-сайт на Debian 11. Теперь вы можете легко создать безопасный и быстрый веб-сайт с помощью Hugo.