Pierwsze kroki z Hugo: jak stworzyć prostą stronę internetową

Hugo to generator stron statycznych, który pozwala na stworzenie strony internetowej z niewielkim lub zerowym doświadczeniem w kodowaniu. Możesz użyć gotowych motywów jako podstawy projektu swojej witryny. Dzięki temu możesz bardziej skoncentrować się na wypełnianiu witryny treścią.

Ponieważ Hugo jest używany głównie do statycznych stron internetowych, doskonale nadaje się do tworzenia blogów, portfolio lub witryn z dokumentacją.

Możesz łatwo skonfigurować i stworzyć witrynę Hugo, korzystając z gotowego motywu Hugo. Wystarczy kilka krótkich kroków, aby dodać zawartość i strony do swojej witryny za pomocą Markdown.

Jak zainstalować Hugo

Musisz zainstalować generator stron statycznych Hugo do tworzenia, uruchamiania i testowania witryny internetowej Hugo. Według Dokumentacja Hugo, można go zainstalować na wiele sposobów. Poniżej znajdują się niektóre opcje.

Prochowiec

Możesz zainstalować Hugo za pomocą Homebrew.

1. Otwórz terminal macOS.
2. Zainstaluj menedżera pakietów Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

instagram viewer
3. Zainstaluj Hugo.

   napar zainstalować Hugo

Okna

Będziesz potrzebował równoważnego menedżera pakietów dla Windows. Na przykład możesz użyć Menedżer pakietów Scoop.

1. Otwórz Windows PowerShell, który powinien już być częścią systemu operacyjnego Windows.
2. Jeśli instalujesz Scoop po raz pierwszy, może być konieczne ustawienie zasad wykonywania.

   Ustawić-ExecutionPolicy RemoteSigned -zakres Aktualny użytkownik

3. Zainstaluj miarka:

   iex (Nowy-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Zainstaluj Hugo:

   szufelka zainstalować Hugo

Jak stworzyć projekt Hugo

Aby utworzyć nowy projekt Hugo, musisz użyć wbudowanego Hugo nowa strona Komenda.

1. Otwórz terminal lub wiersz poleceń. Przejdź do folderu, w którym chcesz utworzyć swój projekt.
2. Wykonaj Hugo nowa strona Komenda:

   Hugo Nowy strona Nowy-hugo-strona internetowa

3. Przejdź do lokalizacji swojego projektu Hugo w eksploratorze plików.
4. Otwórz folder projektu. Zobaczysz, że Twoja nowa witryna Hugo ma strukturę plików i folderów wymaganą do działania Twojej witryny.

Jak dodać motyw

W tej chwili Twój projekt zawiera tylko główne foldery podstawowe projektu Hugo. Uruchamianie witryny lokalnie w tym momencie spowoduje wyświetlenie tylko pustego ekranu. Ponieważ nie masz jeszcze skonfigurowanych projektów HTML, CSS ani interfejsu użytkownika dla swojej witryny, musisz je dodać.

Hugo zapewnia już bibliotekę wbudowanych Motywy Hugo stworzony przez programistów.

1. Wybierz motyw, który Ci się podoba. Każdy motyw może mieć nieco inne instrukcje konfiguracji, pokazane na odpowiedniej stronie podglądu. W tym samouczku wykorzystamy Motyw opowieści jako przykład.
2. Przejdź do folderu głównego projektu w terminalu lub wierszu poleceń.

   płyta CD Nowy-hugo-strona internetowa

3. Uruchom polecenie, aby dodać motyw Tale. Możesz dodać motyw jako podmoduł, który utworzy nowy folder o nazwie opowieść w środku temat teczka.

   git init
   git submoduł add https://github.com/EmielH/tale-hugo.git themes/tale

   Alternatywnie możesz sklonować repozytorium opowieści GitHub do folderu motywów swojego projektu.

   git klon https://github.com/EmielH/tale-hugo.git themes/tale

4. Przejdź do folderu projektu. Kliknij na motywy folder, aby go otworzyć. Bez względu na to, jakiego polecenia użyłeś, pojawi się nowe opowieść folder, w którym przechowywany jest nowo pobrany motyw.
5. w config.toml pliku, dodaj motyw opowieści jako część konfiguracji. To powie Hugo, aby używał HTML, CSS i innych stylów zawartych w motywie Tale.

   motyw = "opowieść"

Jak dodać strony do swojej witryny?

Możesz pisać swoje treści w dowolnym formacie, który akceptuje Hugo. Hugo automatycznie przekonwertuje Twoje pliki na pliki HTML podczas udostępniania ich użytkownikowi. To przyspiesza zarówno budowanie, jak i wdrażanie. Ten przykład użyje Markdown, prosty język tekstowy, jako format treści.

Możesz pisać Markdown głównie w prostym języku angielskim z kilkoma dodanymi symbolami, aby określić dowolne formatowanie. Obejmuje to dodawanie symboli reprezentujących nagłówki, pogrubionych słów lub innego podstawowego formatowania, którego możesz potrzebować.

Aby dodać nową podstronę lub post do swojej witryny, musisz dodać nowy plik Markdown do zawartość teczka. Z każdym postem lub stroną będzie skojarzony własny plik Markdown.

1. Otworzyć zawartość folder wewnątrz twojego projektu Hugo. Utwórz nowy plik Markdown o nazwie mójPierwszyPost.md.
2. Otwórz plik w dowolnym edytorze tekstu, takim jak Notepad++ lub Visual Studio Code.
3. U góry pliku dodaj metadane. Będzie to zawierać ważne informacje o poście. Motyw, którego używasz, sformatuje te informacje w określony sposób na stronie.

   
   autor: "Twoje imię"
   tytuł: "Mój pierwszy post"
   data: "2022-05-17"
   

4. Po dodaniu metadanych możesz rozpocząć dodawanie treści za pomocą Markdown.

   Ten jest mój pierwszy post na mojej stronie Hugo!
   Wykorzystywany motyw Hugo dlaten strona nazywa się Tale.
   Ono jest bardzo prosty w instalacji oraz skonfigurować.
   # Podtytuł
   Ten jest trochę treści.
   # Kolejny podtytuł
   Ten jest więcej treści.

5. Możesz dodać więcej plików przecen, aby dodać więcej stron do swojej witryny.

Jak uruchomić i przetestować swoją witrynę Hugo lokalnie?

Aby uruchomić swoją witrynę, użyj Hugo służyć Komenda.

1. Otwórz terminal lub wiersz poleceń.
2. Przejdź do folderu głównego swojego projektu Hugo.
3. Uruchom Hugo służyć Komenda:

   Hugo służyć

4. Poczekaj, aż witryna zakończy proces uruchamiania. Po zakończeniu terminal wydrukuje komunikat informujący, z którego lokalnego adresu można uzyskać dostęp do witryny. Zwykle jest to http://localhost: 1313/.
5. Otwórz przeglądarkę internetową i wejdź http://localhost: 1313/lub dowolny adres podany przez terminal. Zobaczysz stronę główną swojej witryny Hugo.
6. Na stronie pojawi się lista postów dla każdego pliku przeceny, który posiadasz. W tym przypadku istnieją dwa pliki przeceny wypełnione treścią. Obejmuje to stronę myFirstPost.md, którą utworzyłeś wcześniej. Zawiera również nowy post o nazwie bananaCakeRecipe.md.
7. Kliknij łącze nagłówka w jednym z podglądów. Przeniesie Cię do pełnej strony tego konkretnego posta.

Hosting Twojej witryny Hugo

Dzięki Hugo uruchomienie i uruchomienie statycznej strony internetowej jest proste i szybkie. Możesz używać i konfigurować gotowe motywy oraz uruchamiać lokalnie swoją witrynę Hugo w celu przetestowania. Możesz także dodawać strony z treścią do swojej witryny za pomocą Markdown.

Po utworzeniu witryny Hugo możesz zacząć uczyć się więcej o tym, jak ją hostować. Do wyboru jest wiele bezpłatnych opcji hostingu witryn internetowych, takich jak Dropbox, Dysk Google lub OneDrive.

Jak uzyskać bezpłatny hosting witryn internetowych za pomocą Dropbox, Dysku Google lub OneDrive?

Czytaj dalej