Используйте Hugo: Легкое руководство (часть 1)
Vuoi creare un sito web semplice e super veloce? Давайте начнем с практического случая: Независимый журналист, который хочет представить свои статьи на своем сайте. Отличная идея! Мы используем Гюго, инструмент, который облегчает все. Представьте себе сайт, где Более важные новости это здорово на первой странице, Ниже есть Три другие новости с небольшим резюме, на стороне Меню с очевидными новостями и в основном я Контакты журналиста, плюс ссылки на страницы, такие как “Авторские права” е “Конфиденциальность”. Давайте посмотрим, как, на практике, Без слишком много технических деталей.
Il “мозг” вашего сайта: структура и содержание
Хьюго генератор “Статические сайты”. Это означает, что, Вместо того, чтобы создавать страницы каждый раз, когда кто -то посещает ваш сайт (Как делают самые сложные сайты), Хьюго готовит все страницы заранее, раз и навсегда. Это делает ваш сайт быстрый и многое безопасный.
Для Хьюго, Сердце всего - это текстовые файлы. Вы пишете свои статьи в простом формате под названием Отметка (файлы, которые заканчиваются .md), и Хьюго превращает их в реальные веб -страницы.
Вот как вы могли бы организовать “папка” (каталог) е я “простыни” (файл) вашего сайта:
.
├── content/ # Qui metti tutti i tuoi articoli e le pagine statiche
│ ├── posts/ # La cartella per tutti gli articoli del giornalista
│ │ ├── la-crisi-idrica-globale.md # Il tuo articolo principale (la "notizia in grande")
│ │ ├── innovazione-agricola.md # Un altro articolo (secondario)
│ │ └── come-funziona-hugo.md # Un terzo articolo (secondario)
│ ├── chi-sono.md # La pagina "Chi sono" del giornalista
│ ├── contatti.md # La pagina "Contatti"
│ ├── copyright.md # La pagina "Copyright"
│ └── privacy.md # La pagina "Privacy Policy"
├── layouts/ # Qui ci sono le "istruzioni" su come far vedere le tue pagine
│ ├── _default/ # Le istruzioni base
│ │ ├── baseof.html # Il modello fondamentale per ogni pagina
│ │ └── single.html # Come far vedere un singolo articolo
│ ├── index.html # Le istruzioni speciali per la pagina iniziale (homepage)
│ └── partials/ # Pezzetti di istruzioni che puoi riusare
│ ├── footer.html # Le istruzioni per il "piè di pagina" (contatti, copyright)
│ └── sidebar.html # Le istruzioni per il "menu laterale" (notizie in evidenza)
├── static/ # Qui metti foto, fogli di stile (CSS) e script (JS)
│ ├── images/
│ │ ├── crisi-idrica.jpg # Foto per l'articolo principale
│ │ └── droni-agricoltura.jpg # Foto per un articolo secondario
├── public/ # Questa cartella è il tuo sito web pronto!
└── config.toml # Il file con tutte le impostazioni del tuo sito
Напишите статью в Markdown: просто и быстро
Мы открываем один из файлов .md Чтобы понять, как написать статью. Мы возьмем наш в качестве примера “Большие новости”: content/posts/la-crisi-idrica-globale.md
---
title: "La Crisi Idrica Globale: Un'Analisi Approfondita" # Il titolo che vedrai sul sito
date: 2023-10-26T10:00:00+02:00 # La data di pubblicazione
draft: false # Metti 'false' per pubblicarlo, 'true' per lasciarlo in bozza
description: "Un'indagine dettagliata sulle cause e le possibili soluzioni alla crescente scarsità d'acqua a livello mondiale." # Un piccolo riassunto
image: "/images/crisi-idrica.jpg" # La foto principale dell'articolo
featured: true # UN'IMPOSTAZIONE SPECIALE: dice a Hugo che questo articolo è importante e va in evidenza!
categories:
- Ambiente
tags:
- acqua
- sostenibilità
author: "Nome Cognome Giornalista" # Chi ha scritto l'articolo
---
## La Crisi Idrica Globale: Un'Emergenza Silenziosa
La disponibilità di acqua dolce è una risorsa sempre più critica a livello globale. Mentre molte aree del mondo soffrono già di siccità estreme...
### Le Cause Profonde della Scarsità
Il cambiamento climatico gioca un ruolo preponderante, alterando i cicli delle precipitazioni...
### Soluzioni e Strategie per il Futuro
Per affrontare questa crisi, è necessario un approccio multilivello che includa:
* **Tecnologie innovative:** Desalinizzazione, riutilizzo delle acque reflue...
* **Politiche di gestione sostenibile:** Regolamentazione dell'uso dell'acqua...
Что означает каждая часть?
- Часть между тремя секциями (
---): Это самая важная часть для Хьюго и называется Фронт. Это похоже на серию лейблов, которые вы атакуете на свою статью. Вы говорите Hugo, что такое название, то данные, Если статья одна лампа или готовы, короткий описание (который может появиться в списке новостей), L’картина Связано и если это статья в качестве доказательства (featured: true). Вы также можете добавить категории е тег Чтобы лучше организовать ваш контент, и имя автора. - Часть под тремя секциями: Это Настоящий текст вашей статьи. Напишите это с помощью простого форматирования Отметка:
- Un
#О##В начале ряда это создает название (более#, меньше название). - Звездочки (
*) они привыкли делать списки. - Нормальный текст просто абзац.
- Un
Как Хьюго “рисунок” Ваш сайт
Как только вы написали свои статьи в обменке, Хьюго использует Le “инструкции” найдено в папке layouts/ Чтобы преобразовать их в веб -сайт.
- На начальной странице (
index.htmlнижеlayouts/), Хьюго прочтет ваш файлla-crisi-idrica-globale.mdе, видетьfeatured: true, Он покажет ему великолепно и в качестве доказательства. Тогда он будет искать еще три статьи (приехатьinnovazione-agricola.md) и покажет только их название иdescriptionВы вставили. - Il менее боковой (
sidebar.htmlнижеlayouts/partials/) сможет показать ссылки на все статьи, которые вы отметилиfeatured: true. - Il нижний колонтитул (
footer.htmlнижеlayouts/partials/) будет содержать личную информацию журналиста и ссылки на страницы “Авторские права” (copyright.md) е “политика конфиденциальности” (privacy.md), кто простые файлы разметки со своим текстом.
Выводы
С этой настройкой, Даже не будучи экспертом по программированию, Вы можете создать чистый сайт, Быстрый и функциональный для независимого журналиста, Сосредоточение только на написании контента. Хьюго позаботится о самой сложной части, Преобразование ваших слов в навидимый веб -сайт.



0 Комментарии