Hugo'ya Başlarken: Basit Bir Web Sitesi Nasıl Oluşturulur

Hugo, çok az veya hiç kodlama deneyimi olmayan bir web sitesi oluşturmanıza olanak tanıyan bir Statik Site Oluşturucudur. Web sitenizin tasarımı için önceden oluşturulmuş temaları temel olarak kullanabilirsiniz. Bu, siteyi içeriğinizle doldurmaya daha fazla odaklanmanıza olanak tanır.

Hugo çoğunlukla statik web siteleri için kullanıldığından, bloglar, portföyler veya belge siteleri oluşturmak için mükemmeldir.

Önceden oluşturulmuş bir Hugo temasını kullanarak kolayca bir Hugo web sitesi kurabilir ve oluşturabilirsiniz. Sadece birkaç kısa adımla, Markdown'ı kullanarak web sitenize içerik ve sayfa ekleyebilirsiniz.

Hugo Nasıl Kurulur

yüklemeniz gerekiyor Hugo statik site oluşturucu bir Hugo web sitesi oluşturmak, çalıştırmak ve test etmek için. Göre Hugo belgeleri, kurmanın birçok yolu vardır. Aşağıda seçeneklerden bazıları verilmiştir.

Mac

Hugo'yu Homebrew kullanarak yükleyebilirsiniz.

1. macOS terminalinizi açın.
2. Homebrew paket yöneticisini kurun.

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

3. Hugo'yu yükleyin.

   demlemek Yüklemek sarılmak

pencereler

Windows için eşdeğer bir paket yöneticisine ihtiyacınız olacak. Örneğin, Kepçe paket yöneticisi.

1. Halihazırda Windows İşletim Sisteminizin bir parçası olması gereken Windows PowerShell'i açın.
2. Scoop'u ilk kez kuruyorsanız, Yürütme Politikanızı ayarlamanız gerekebilir.

   Ayarlamak-ExecutionPolicy RemoteSigned -kapsam Şu anki kullanıcı

3. Scoop'u yükleyin:

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

4. Hugo'yu yükleyin:

   kepçe Yüklemek sarılmak

Hugo Projesi Nasıl Oluşturulur

Yeni bir Hugo projesi oluşturmak için yerleşik hugo yeni site emretmek.

1. Terminalinizi veya komut isteminizi açın. Projenizi oluşturmak istediğiniz klasöre gidin.
2. Yürüt hugo yeni site emretmek:

   sarılmak yeni alan yeni-hugo-web sitesi

3. Dosya gezgininizde Hugo projenizin konumuna gidin.
4. Proje klasörünü açın. Yeni Hugo web sitenizin, web sitenizin çalışması için gereken dosya ve klasör yapısına sahip olduğunu göreceksiniz.

Tema Nasıl Eklenir

Şu anda projeniz yalnızca Hugo projesinin ana temel klasörlerini içeriyor. Bu noktada web sitenizi yerel olarak çalıştırmak yalnızca boş bir ekran gösterecektir. Henüz web siteniz için ayarlanmış herhangi bir HTML, CSS veya UI tasarımınız olmadığı için bunları eklemeniz gerekecek.

Hugo zaten yerleşik bir kitaplık sağlıyor Hugo Temaları geliştiriciler tarafından oluşturuldu.

1. Beğendiğiniz bir tema seçin. Her temanın ilgili önizleme sayfasında gösterilen biraz farklı kurulum talimatları olabilir. Bu eğitimde kullanılacak masal teması Örnek olarak.
2. Bir terminalde veya komut satırında projenizin kök klasörüne gidin.

   CD yeni-hugo-web sitesi

3. Masal temasını eklemek için komutu çalıştırın. Temayı, adında yeni bir klasör oluşturacak bir alt modül olarak ekleyebilirsiniz. masal içinde tema dosya.

   git init
   git alt modülü https ekleyin://github.com/EmielH/tale-hugo.git theme/tale

   Alternatif olarak, GitHub masal deposunu projenizin temalar klasörüne kopyalayabilirsiniz.

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

4. Proje klasörünüze gidin. Tıkla temalar açmak için klasör. Hangi komutu kullandığınızdan bağımsız olarak, yeni bir masal yeni indirilen temayı saklayan klasör.
5. İçinde config.toml dosyasında, yapılandırmanın bir parçası olarak masal temasını ekleyin. Bu, Hugo'ya Tale temasının içerdiği HTML, CSS ve diğer stilleri kullanmasını söyleyecektir.

   tema = "masal"

Web Sitenize Nasıl Sayfa Eklenir?

İçeriğinizi Hugo'nun kabul ettiği herhangi bir biçimde yazabilirsiniz. Ardından Hugo, dosyalarınızı kullanıcıya sunarken otomatik olarak HTML dosyalarına dönüştürür. Bu, hem oluşturmayı hem de dağıtmayı hızlandırır. Bu örnek kullanacak Markdown, basit bir düz metin dili, içeriğinizin biçimi olarak.

Herhangi bir biçimlendirmeyi belirtmek için Markdown'ı çoğunlukla düz İngilizce olarak birkaç ek sembolle yazabilirsiniz. Bu, başlıkları, hangi kelimelerin kalın olduğunu veya ihtiyaç duyabileceğiniz diğer herhangi bir temel biçimlendirmeyi temsil etmek için semboller eklemeyi içerir.

Web sitenize yeni bir alt sayfa veya gönderi eklemek için, sitenize yeni bir Markdown dosyası eklemeniz gerekir. içerik dosya. Her gönderi veya sayfa, kendisiyle ilişkilendirilmiş kendi Markdown dosyasına sahip olacaktır.

1. Aç içerik Hugo projenizin içindeki klasör. adlı yeni bir Markdown dosyası oluşturun. myFirstPost.md.
2. Dosyayı Notepad++ veya Visual Studio Code gibi herhangi bir metin düzenleyicide açın.
3. Dosyanın en üstüne bazı meta veriler ekleyin. Bu, gönderiyle ilgili önemli bilgileri içerecektir. Kullanmakta olduğunuz tema bu bilgiyi sayfada belirli bir şekilde biçimlendirecektir.

   
   yazar: "Adınız"
   Başlık: "İlk Gönderim"
   tarih: "2022-05-17"
   

4. Meta verileri ekledikten sonra, Markdown'ı kullanarak içeriğinizi eklemeye başlayabilirsiniz.

   Bu dır-dir Hugo web sitemdeki ilk gönderim!
   Hugo teması kullanılıyor içinBugün nasılsın? sitenin adı Tale.
   O dır-dir kurulumu çok basit ve yapılandır.
   # Alt başlık
   Bu dır-dir biraz içerik.
   # Başka Bir Alt Başlık
   Bu dır-dir daha fazla içerik.

5. Web sitenize daha fazla sayfa eklemek için daha fazla işaretleme dosyası eklemekten çekinmeyin.

Hugo Web Sitenizi Yerel Olarak Çalıştırma ve Test Etme

Web sitenizi çalıştırmak için şunu kullanın: kucaklamak emretmek.

1. Bir terminal veya komut satırı açın.
2. Hugo projenizin kök klasörüne gidin.
3. Çalıştır kucaklamak emretmek:

   kucaklamak

4. Web sitesinin başlatma işlemini tamamlamasını bekleyin. Bu tamamlandığında, terminal, web sitesine hangi yerel adresten erişebileceğinizi söyleyen bir mesaj yazdıracaktır. Genellikle, bu http://localhost: 1313/.
5. Bir web tarayıcısı açın ve girin http://localhost: 1313/veya terminalin size verdiği adres hangisiyse. Hugo web sitenizin ana sayfasını göreceksiniz.
6. Sayfada, sahip olduğunuz her markdown dosyası için bir gönderi listesi olacaktır. Bu durumda, içerikle doldurulmuş iki markdown dosyası vardır. Buna daha önce yaptığınız myFirstPost.md sayfası da dahildir. Ayrıca bananaCakeRecipe.md adlı yeni bir gönderi içerir.
7. Önizlemelerden birindeki başlık bağlantısına tıklayın. Sizi söz konusu gönderi için tam sayfaya götürecektir.

Hugo Web Sitenizi Barındırma

Statik bir web sitesini kurmak ve çalıştırmak Hugo ile basit ve hızlıdır. Önceden oluşturulmuş temaları kullanabilir ve yapılandırabilir ve Hugo web sitenizi test için yerel olarak çalıştırabilirsiniz. Markdown'ı kullanarak web sitenize içerik sayfaları da ekleyebilirsiniz.

Hugo web sitenizi oluşturduktan sonra, onu nasıl barındıracağınız hakkında daha fazla bilgi edinmeye başlayabilirsiniz. Dropbox, Google Drive veya OneDrive gibi seçebileceğiniz birçok ücretsiz web sitesi barındırma seçeneği vardır.

Dropbox, Google Drive veya OneDrive ile Ücretsiz Web Sitesi Barındırma Nasıl Alınır?

Sonrakini Oku