Hugo'da Yapılan Web'inizi Netlify'da ÜCRETSİZ Barındırın

aşık olduğumu biliyorsun Hugo dinamik içerik gerektirmeyen basit web siteleri yapmak.

Ve en sevdiğim özelliklerden biri, Hugo'da yapılan web sitelerini ücretsiz olarak barındırmamızı sağlayan birçok hizmetin olmasıdır.

Bugün bu hizmetlerden biri hakkında konuşmaya geldim: netleştir

Hugo hakkında daha fazla bilgi edinmek istiyorsanız, Premium Bölgede Tam bir Kursunuz var

Bunun seni aldatmasına izin verme netleştir Hugo, web sitemizi ücretsiz barındırmamıza izin verdi.

Netlify profesyonel ve kaliteli bir hizmettir.

İçindekiler

videoda anlatıyorum

Kanalıma abone ol:

Peki neden web sitemizi ücretsiz barındırmamıza izin veriyorlar?

Çok basit: Müjdeliyorlar 🙂

Web sitelerini WordPress'te yapmayan kaç kişi tanıyorsunuz? Çok az değil mi?

Netlify, Cloudflare, DigitalOcean gibi hizmetler, pazar payı almak için statik web sitenizi ücretsiz olarak barındırmayı teklif ediyor ve aldıklarında ücretsiz olmayacağından eminim.

Gerçek şu ki, artık web sitemizi oluşturabilir ve en iyi sunucularda barındırabiliriz ve tüm bunlar ücretsiz 😉

Web sitenizi Netlify'da barındırmak için neye ihtiyacınız var?

Bu eğitimde nasıl yapılacağını açıklamayacağım hugo'yu yükle ne de daha önce açıkladığımız hiçbir şey Statik Ağlar yapmak için Hugo kursu.

Bu eğitimde iki dakikada bir web sitesi nasıl oluşturulacağını ve onu Netlify'da nasıl barındırabileceğimizi göreceğiz.

Yani şunu varsayacağım:

Sende var Hugo bilgisayarınızda yüklü
hesabın var mı Github
gibi bir kod düzenleyiciniz var mı? Visual Studio Kodu

Hugo'da web sitemi oluşturmak

Bilgisayarımın terminaline giriyorum, web sitemi oluşturacağım dizine gidiyorum ve şunu yazıyorum:

hugo new site nombre-mi-web

Ve aşağıdaki mesajı alıyorum:

Şimdi web siteme bir şablon ekleyeceğim, bunun için THEMES klasörüne giriyorum ve aşağıdaki komutla Github'dan şablonu getiriyorum:

git clone https://github.com/halogenica/beautifulhugo.git

İşte bu sürecin yakalanması:

Şimdi /themes/beautyhugo/exampleSite klasörünün içeriğini web sitemin kök dizinine kopyalıyorum.

Üzerine yazmak istersem evet diyeceğim.

Ojo

Klasörün kendisi değil, exampleSite klasörünün içeriği.

Yani, bu:

Web sitemizin kök dizinine kopyalandıktan sonra, web sitesinin çalıştığını görmek için Hugo'nun yerel sunucusunu çalıştırabiliriz.

Komutu web sitemizin kök dizininde yürütmemiz gerekiyor:

hugo server

Ve her şeyin yolunda olduğunu görmek için şöyle bir şey görmeliyiz:

Her şey yolunda gittiyse, terminalde görünen adrese gidiyoruz. Bu genellikle http://localhost:1313/ şeklindedir.

Ve şöyle bir şey görmeliyiz:

Web sitesini Github'a yükleyin

Web sitemizi Netlify'da barındırmadan önce, yerel olarak yapılmış web sitemizi Github'daki bir havuza yüklememiz gerekiyor.

Bunun için Git kullanıyoruz:

git init
git add .
git commit -m "mi primera versión"

Github'da boş bir depo oluşturuyoruz ve Github bize depomuzu yüklemek için kullanmamız gereken komutları söylüyor:

Benim özel durumumda, kullanılacak komutlar şunlardır:

git remote add origin git@github.com:tolentinomh/netlify-prueba.git
                                git branch -M main
                                git push -u origin main

Ve artık her şey hazır olduğuna göre, web sitemizi Netlify'da barındırmanın zamanı geldi.

Web sitemizi Netlify'a yükleyin

Netlify hesabınız yoksa, onu yaratma zamanı

Benim tavsiyem, GitHub ile bir hesap oluşturmanız ve böylece Github depolarınızı Netlify'a aktarırken daha kolay zaman geçirmenizdir.

Hesabımızı oluşturup githug ile bağlantı kurduktan sonra yeni bir site oluşturacağız:

Üzerine tıklıyoruz Mevcut bir projeyi içe aktar

Bir sonraki ekranda web sitemizin deposunu seçiyoruz ve her şeyi varsayılan olarak bırakıyoruz:

Şimdi Siteyi Dağıt'a tıklıyoruz ve…

BAŞARISIZ OLACAK 😭

Ama merak etmeyin, kolayca düzelteceğiz.

Aşağıdaki gibi bir hata alacaksınız:

Hata

'repo hazırlama' aşaması sırasında başarısız oldu: Alt modüller kontrol edilirken hata oluştu: ölümcül: .gitmodules içindeki 'temalar/güzelhugo' alt modül yolu için url bulunamadı

Hugo'da Yapılan Web Sitenizi Netlify 5'de ÜCRETSİZ Barındırın

İşin iyi yanı, hatanın çok açıklayıcı olması ve bize neyin yanlış olduğunu söylemesidir.

Web sitemizin kök dizinine gitmeli ve .gitmodules adında bir dosya oluşturmalıyız.

Benim durumumda bunu Visual Studio Kodundan yapıyorum

Hugo'da Yapılan Web Sitenizi Netlify 6'de ÜCRETSİZ Barındırın

İçerik aşağıdaki gibidir:

[submodule "themes/beautifulhugo"]
    path = themes/beautifulhugo
    url = https://github.com/halogenica/beautifulhugo

Değişiklikleri Github'a aktarın

Yerel olarak çalıştığımızı unutmayın. Ne zaman değişiklik yapsak, bunları Github'a yüklememiz gerekiyor.

Değişiklikler Git ile yüklendikten sonra, unutmayın, git add., git commit -m "mesajınız", git Push, Netlify'a dönüyoruz ve birkaç saniye veya dakika sonra web sitemizi tekrar oluşturmaya çalıştığını göreceğiz ve Şimdi her şey yolunda gittiyse başarısız olmayacak ve size şunu söyleyecektir: Yayınlandı:

Hugo'da Yapılan Web Sitenizi Netlify 7'de ÜCRETSİZ Barındırın

Netlify tarafından oluşturulan geçici url'ye erişmeye çalışırsanız, web sitenizi zaten görebilirsiniz, ancak küçük bir sorunla: Biçimler ve resimler iyi görünmüyor

Bunun nedeni, web sitenizin config.toml yapılandırma dosyasında URL'yi Netlify'ın bize verdiği URL'ye ve daha sonra gerçek alan adına değiştirmeniz gerekmesidir: