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

Как установить Hugo Site Generator на Ubuntu 18.04 LTS

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

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

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

В этом руководстве мы узнаем, как установить Hugo на сервер Ubuntu 18.04 LTS.

Требования

  • Сервер под управлением Ubuntu 18.04.
  • На вашем сервере настроен статический IP-адрес 136.243.240.39.
  • Для вашего сервера установлен пароль root.

Начиная

Перед запуском вам нужно будет обновить вашу систему до последней версии. Вы можете сделать это, выполнив следующую команду:

apt-get update -y
 apt-get upgrade -y

После обновления сервера перезапустите его, чтобы изменения вступили в силу.

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

По умолчанию последняя версия Hugo недоступна в стандартном репозитории Ubuntu 18.04. Итак, вам нужно будет загрузить его из репозитория Git. Вы можете скачать его с помощью следующей команды:

wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb

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

dpkg -i hugo_0.58.2_Linux-64bit.deb

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

apt-get install -f

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

hugo version

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

Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z

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

hugo --help

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

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
      --ignoreVendor           ignores any _vendor directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

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

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

Теперь Hugo установлен, пришло время создать веб-сайт и контент с помощью Hugo.

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

hugo new site test.example.com

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

Congratulations! Your new Hugo site is created in /root/test.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.

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

ls test.example.com/

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

archetypes  config.toml  content  data  layouts  static  themes

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

Теперь измените каталог на свой веб-сайт и создайте страницу about.md с помощью следующей команды:

cd test.example.com
 hugo new about.md

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

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

Затем откройте файл about.md и добавьте содержимое:

nano content/about.md

Внесите следующие изменения:

---
title: "About"
date: 2019-09-10T06:57:08Z
draft: false
---

I am hitesh jethva working as a technical writer.

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

hugo new post/first.md

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

/root/test.example.com/content/post/first.md created

Затем откройте файл first.md и добавьте некоторый контент:

nano content/post/first.md

Внесите следующие изменения:

---
title: "First"
date: 2019-09-10T06:58:51Z
draft: false
---

## This is my first blog post

Hi How are you!

Настройте свою первую тему

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

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

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

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

unzip master.zip

Затем переименуйте извлеченную тему, как показано ниже:

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

Затем вам нужно будет скопировать содержимое примера файла config.toml из themes/hugo-strata-theme в файл config.toml вашего сайта, расположенный в /root/test.example.com/config.toml.

Вы можете сделать это с помощью следующей команды:

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

Затем обновите переменную baseurl, а также включите новую страницу «О нас» в эту навигацию по темам в файле config.toml, как показано ниже:

nano ../config.toml

Обновите базовый URL, как показано ниже:

baseurl = "/"

Также добавьте следующие строки, чтобы включить новую страницу «О нас»:

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

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

Затем вам также потребуется обновить макет целевой страницы с помощью макета шаблона тем, расположенного по адресу themes/hugo-strata-theme/layouts/index.html, до test.example.com/layouts/index.html:

nano /root/test.example.com/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 }}

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

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

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

Теперь ваша тема настроена для вашего сайта. Пришло время создать свой сайт. Для этого измените каталог на свой веб-сайт и создайте сайт с помощью следующей команды:

cd /root/test.example.com
 hugo

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

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

Total in 18 ms

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

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

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

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

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

После этого вы можете приступить к доступу к веб-интерфейсу Hugo.

Доступ к серверу Hugo

Теперь ваш сервер Hugo запущен и прослушивает порт 1313. Затем откройте веб-браузер и введите URL-адрес http://136.243.240.39:1313. Вы будете перенаправлены на панель управления сервером Hugo, как показано ниже:

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

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

Заключение

В приведенном выше руководстве мы узнали, как установить сервер Hugo на сервер Ubuntu 18.04. Мы также узнали, как создать сайт со страницей и темой с Hugo. Для получения дополнительной информации о Hugo вы можете посетить официальную документацию Hugo в Hugo Doc. Не стесняйтесь спрашивать меня, если у вас есть какие-либо вопросы.