WordPress'ten Hugo'ya Geçiş

WordPress 5 piyasaya sürüldüğünde, özel bloklar oluşturmak için Gutenberg düzenleyicisini kullanmaktan heyecan duydum, çünkü kişisel blogumdaki gönderilerin bir bloğa dönüştürebileceğim ve içeriğimi ayarlamayı kolaylaştıran birkaç özelliği vardı. Kesinlikle sahip olmak harika bir şeydi, ancak yine de oldukça şişkin hissettirdi.

Aynı zamanda, statik site oluşturucular ve JAMstack hakkında giderek daha fazla okumaya başladım (Chris Ferdinandi'nin bu makalesi beni ikna etti). Kişisel yan projelerle, çok çeşitli sorunları görmezden gelebilirsiniz, ancak bir profesyonel olarak, mümkün olan en iyi kalitede çıktı aldığınızdan emin olmalısınız. Performans, güvenlik ve erişilebilirlik ilk düşünülmesi gereken şeyler haline gelir. WordPress'i kesinlikle oldukça hızlı olacak şekilde optimize edebilirsiniz, ancak bir CDN'deki veritabanını sorgulaması veya her seferinde sayfanızı oluşturması gerekmeyen statik bir siteden daha hızlı mı? Çok kolay değil.

Bunu öğrenmek için kişisel bir projemle uygulamaya koyabileceğimi ve daha sonra bunu profesyonel projeler için kullanabileceğimi düşündüm ve belki bazılarınız da nasıl olduğunu bilmek ister. Bu yazıda, WordPress'ten Hugo adlı belirli bir statik site oluşturucuya nasıl geçiş yaptığımı gözden geçireceğim.

Hugo, açıklayacağım sözdizimine alıştığınızda oldukça hızlı ve kullanımı kolay bir dil olan Go'da yerleşiktir. Hepsi yerel olarak derlenir, böylece sitenizi doğrudan bilgisayarınızda önizleyebilirsiniz. Proje daha sonra özel bir havuza kaydedilecektir. Ek olarak, onu Netlify'da nasıl barındıracağınız ve resimlerinizi bir Git LFS'ye (Büyük Dosya Depolama) nasıl kaydedeceğiniz konusunda size yol göstereceğim. Son olarak, Netlify CMS ile gönderiler ve resimler (WordPress arka ucuna benzer) eklemek için bir içerik yönetim sistemini nasıl kurabileceğimize bir göz atacağız.

Tüm bunların tamamen ücretsiz olduğunu unutmayın, bana sorarsanız oldukça şaşırtıcı (ancak tüm LFS depolama alanınızı kullanırsanız veya site trafiğiniz yoğunsa fazladan ödeme yapmanız gerekir). Ayrıca, bunu Mac üzerinde çalışan bir Bitbucket kullanıcısının bakış açısından yazıyorum. Bazı adımlar biraz farklı olabilir, ancak hangi kurulumu kullanırsanız kullanın takip edebilmeniz gerekir.

HTML, CSS, JS, Git ve komut terminali konusunda biraz rahat olmanız gerekecek. Liquid gibi şablonlama dilleriyle ilgili birkaç nosyona sahip olmak da yararlı olabilir, ancak başlamanız için Hugo'nun şablonlarını inceleyeceğiz. Yine de, mümkün olduğunca çok ayrıntı vereceğim!

Kulağa çok gibi geldiğini biliyorum ve buna bakmaya başlamadan önce benim için de öyleydi. Adımları parçalayarak bu geçişi sizin için olabildiğince sorunsuz hale getirmeye çalışacağım. Tüm kaynakları bulmak çok zor değil, ancak benim tarafımdan bir belgeden diğerine geçerken biraz tahminde bulundum.

1. İçeriği WordPress'ten Dışa Aktarma
2. Blog Tasarımınızı Hazırlama
3. Yeni Bir Depo Ayarlama
4. Git LFS'yi Etkinleştirme (Opsiyonel)
5. Netlify'da Site Oluşturma
6. Netlify Büyük Medya İçin Hazırlama (Opsiyonel)
7. Bilgisayarınızda Hugo Kurulumu
8. Özel Temanızı Oluşturma
9. Hugo Sözdizimi Üzerine Notlar
10. İçerik ve Veri
11. Netlify'da Dağıtım
12. Özel Bir Etki Alanı Ayarlama
13. Netlify CMS'de İçerik Düzenleme

Not : Bunlardan bazılarıyla ilgili sorun yaşarsanız, lütfen yorumlarda bana bildirin, yardımcı olmaya çalışacağım, ancak bunun bir düzine widget'ı veya yorumlar (bunu daha sonra ayarlayabilirsiniz) ve bir şirket sitesi veya kişisel portföy değil. Şüphesiz yapabilirsin, ama basitlik adına, basit, statik bir bloga bağlı kalacağım.

Önkoşullar

Herhangi bir şey yapmadan önce, araçlarımızdan yerel depomuza kadar her şeyin bulunacağı bir proje klasörü oluşturalım. Ben buna “WP2Hugo” diyeceğim (istediğiniz herhangi bir şey olarak adlandırmaktan çekinmeyin).

Bu eğitimde npm ve Git gibi birkaç komut satırı aracı kullanılacaktır. Henüz sahip değilseniz, bunları makinenize yükleyin:

• Git'i yükleyin
• Node.js ve npm'yi yükleyin (Node.js, npm'yi içerir)
• Homebrew'i yükleyin (macOS/Linux kullanıcıları için önerilir)

Bunları yükledikten sonra başlayalım!

1. İçeriği WordPress'ten Dışa Aktarma

Öncelikle, içeriğinizi WordPress'ten dışa aktarmamız gerekecek: gönderiler, sayfalar ve yüklemeler. Hugo'nun bahsettiği birkaç araç var ama kişisel olarak bunlardan sadece biri işe yaradı: blog2md. Bu, komut terminalinizde Node.js ile bir JavaScript dosyası çalıştırarak çalışır. WordPress tarafından dışa aktarılan XML dosyalarını alır ve doğru yapıya sahip Markdown dosyalarını çıkarır, HTML'nizi Markdown'a dönüştürür ve her dosyanın başlangıcında meta verileri biçimlendirmenin bir yolu olan Ön Madde adı verilen şeyi ekler.

WordPress yöneticinize gidin ve Araçlar menüsü, Dışa Aktar alt menüsünü açın. Oradan istediğinizi dışa aktarabilirsiniz. Dışa aktarılan dosyaya YOUR-WP-EXPORT.xml olarak değineceğim.

WordPress blogunuzdan tam olarak hangi verileri dışa aktarmak istediğinizi seçebilirsiniz.

WP2Hugo klasörümüzün içinde, blog2md aracındaki dosyaları ve ayrıca WordPress'ten XML dışa aktarmanızı ( YOUR-WP-EXPORT.xml ) yerleştireceğiniz blog2md adlı yeni bir klasör oluşturmanızı öneririm. Ayrıca, Markdown out nereye gideceğini belirten yeni bir klasör oluşturun. Ardından komut terminalinizi açın ve cd komutuyla yeni oluşturduğunuz “blog2md” klasörünüze gidin (veya boşlukla cd yazın ve klasörü terminale sürükleyin).

Artık gönderilerinizi almak için aşağıdaki komutları çalıştırabilirsiniz:

 npm install node index.js w YOUR-WP-EXPORT.xml out

Tüm gönderilerinizin (ve potansiyel sayfalarınızın) orada olup olmadığını kontrol etmek için /WP2Hugo/blog2md/out dizinine bakın. Eğer öyleyse, belgelerde yorumlarla ilgili bir şeyler olduğunu fark edebilirsiniz: Yorumsuz bir blogum vardı, bu yüzden bunları aktarmaya ihtiyacım yoktu ama Hugo yorumlar için birkaç seçenek sunuyor. WordPress hakkında herhangi bir yorumunuz varsa, bunları Disqus gibi özel bir hizmetle daha sonra yeniden uygulamak üzere dışa aktarabilirsiniz.

JS'ye yeterince aşinaysanız, wordpressImport işlevini düzenleyerek gönderi dosyalarınızın nasıl çıkacağını değiştirmek için index.js dosyasında ince ayar yapabilirsiniz. Öne çıkan görseli yakalamak, kalıcı bağlantıyı kaldırmak, tarih biçimini değiştirmek veya türü ayarlamak (gönderileriniz ve sayfalarınız varsa) isteyebilirsiniz. Bunu ihtiyaçlarınıza göre uyarlamanız gerekecek, ancak ( posts.forEach(function(post){ ... }) ) döngüsünün dışa aktarmadaki tüm gönderilerden geçtiğini bilin, böylece XML içeriğini kontrol edebilirsiniz. bu döngüdeki her gönderiyi ve Ön Konuyu özelleştirin.

Ek olarak, gönderilerinizde bulunan URL'leri (benim durumumda, resim bağlantılarını mutlak yerine göreceli yapmak istedim) veya tarih biçimlendirmesini güncellemeniz gerekiyorsa, bunu yapmak için iyi bir zaman, ancak bunun için uykunuzu kaybetmeyin. . Birçok metin düzenleyici, toplu düzenleme sunar, böylece normal bir ifade ekleyebilir ve dosyalarınızda istediğiniz değişiklikleri yapabilirsiniz. Ayrıca, çıktı klasöründe önceden var olan dosyaların üzerine yazacağı için blog2md komut dosyasını gerektiği kadar çalıştırabilirsiniz.

Dışa aktarılan Markdown dosyalarınızı aldıktan sonra içeriğiniz hazırdır. Bir sonraki adım, WordPress temanızı Hugo'da çalışmaya hazır hale getirmektir.

2. Blog Tasarımınızı Hazırlama

Blogumun üstbilgi, gezinme çubuğu, içerik ve kenar çubuğu ve altbilgiden oluşan tipik bir düzeni vardı - kurulumu oldukça basit. WordPress temamın parçalarını kopyalamak yerine, gereksiz stiller veya gereksiz işaretlemeler olmadığından emin olmak için hepsini sıfırdan yeniden oluşturdum. Bu, yeni CSS tekniklerini ( pssst… Grid oldukça harika! ) uygulamak ve daha tutarlı bir adlandırma stratejisi (CSS Wizardry'nin yönergeleri gibi) oluşturmak için iyi bir zamandır. İstediğinizi yapabilirsiniz, ancak blogumuzu optimize etmeye çalıştığımızı unutmayın, bu nedenle elinizdekileri gözden geçirmek ve hala tutmaya değer olup olmadığına karar vermek iyidir.

Neyin nereye gittiğini açıkça görebilmeniz için blogunuzu parçalara ayırarak başlayın. Bu, işaretlemenizi ve stillerinizi yapılandırmanıza yardımcı olacaktır. Bu arada, Hugo, Sass'ı CSS'ye derlemek için yerleşik bir yeteneğe sahiptir, bu yüzden bu stilleri istediğiniz kadar daha küçük dosyalara bölmekten çekinmeyin!

Basit derken, gerçekten basit demek istiyorum.

Alternatif olarak, şimdilik bu adımı tamamen atlayabilir ve Hugo siteniz kurulduğunda blogunuzu istediğiniz gibi şekillendirebilirsiniz. Temel işaretlemeyi yaptım ve stillere yinelemeli bir yaklaşımı tercih ettim. Ayrıca neyin işe yarayıp neyin yaramadığını görmenin de iyi bir yolu.

3. Yeni Bir Depo Oluşturma

Artık bu yoldan çıktığına göre, bir depo kurmamız gerekiyor. Bunun için Git LFS'yi (Büyük Dosya Sistemi) kullanmak için harika bir fırsat olacak yeni bir havuz oluşturmak isteyeceğinizi varsayacağım. Bunu şimdi yapmanızı önermemin nedeni, zaten yüzlerce görüntünüz varken Git LFS'yi uygulamanın o kadar düzgün olmamasıdır. Yaptım, ama muhtemelen kaçınmak isteyeceğiniz bir baş ağrısıydı. Bu aynı zamanda Netlify ile yolda başka faydalar da sağlayacaktır.

Tüm bunları Bitbucket ve tescilli Git GUI'si Sourcetree aracılığıyla yapıyor olsam da, bunu kesinlikle GitHub ve GitLab ve kendi masaüstü araçlarıyla yapabilirsiniz. Bunu doğrudan komut terminalinden de yapabilirsiniz, ancak süreci olabildiğince otomatikleştirmeyi ve basitleştirmeyi seviyorum, aptalca hatalar yapma riskini azaltıyorum.

Seçtiğiniz Git platformunda yeni deponuzu oluşturduğunuzda, yerel proje klasörünüzün (WP2Hugo) içinde boş bir klasör oluşturun, örneğin hugorepo , ardından komut terminalinizi veya Git GUI aracınızı açın ve yerel Git deponuzu başlatın; ardından, onu uzak havuza bağlayın (genelde yeni oluşturulan uzak havuzda kullanılacak tam komutu bulabilirsiniz).

Ana dalınızın kesinlikle üretim dağıtımları için kullanılması için bir dev (veya stage ) dalı oluşturmanızı tavsiye ederim. Ayrıca, yalnızca olası bir dizi değişiklikle işiniz bittiğinde oluşturulacak yeni yapıları da sınırlayacaktır. Şube oluşturma yerel olarak veya deponuzun uzak web sayfasında yapılabilir.

GitHub, dal değiştiriciye tıklayıp yeni bir ad yazarak dal oluşturmayı kolaylaştırır. GitLab'da, seçeneğe erişmek için "Artı" açılır menüsünü açmanız gerekir. Bitbucket, açılır menüyü açmak için soldaki "Artı" menüsünü açmanızı ve "Çalışmaya başlayın" bölümünde "Bir şube oluştur"u tıklamanızı gerektirir.

4. Git LFS'yi Etkinleştirme (Opsiyonel)

Git Büyük Dosya Sistemi, Photoshop belgeleri, ZIP arşivleri ve bizim durumumuzda resimler gibi büyük dosyaları daha verimli bir şekilde kaydetmenizi sağlayan bir Git özelliğidir. Görüntülerin sürüm oluşturma gerektirebileceği ancak tam olarak kod olmadığı için, bunları normal metin dosyalarından farklı bir şekilde saklamak mantıklıdır. Çalışma şekli, görüntüyü uzak bir sunucuda depolamaktır ve havuzunuzdaki dosya, o uzak kaynağa bir işaretçi içeren bir metin dosyası olacaktır.

Ne yazık ki, etkinleştirmek için tıkladığınız bir seçenek değil. LFS'yi etkinleştirmek için deponuzu kurmalısınız ve bu, yerel olarak biraz çalışma gerektirir. Git yüklüyken bir Git-LFS uzantısı yüklemeniz gerekir:

 git lfs install

Benim gibi, bu komut sizin için işe yaramadıysa, Homebrew alternatifini deneyin (macOS veya Linux için):

 brew install git-lfs

Bu yapıldıktan sonra, deponuzda hangi dosyaların izleneceğini belirtmeniz gerekir. WordPress'in /upload klasörüne yüklediğim tüm resimleri Hugo kurulumumda aynı adlı bir klasörde barındıracağım, ancak bu klasörün bir /static klasörünün içinde olması (derlendikten sonra köke dönüşecektir). Klasör yapınıza karar verin ve içindeki dosyaları izleyin:

 git lfs track "static/uploads/*"

Bu, /static/uploads klasörü içindeki herhangi bir dosyayı izleyecektir. Aşağıdakileri de kullanabilirsiniz:

 git lfs track "*.jpg"

Bu, deponuzdaki tüm JPG dosyalarını izleyecektir. Örneğin, yalnızca belirli bir klasördeki JPG'leri izlemek için karıştırabilir ve eşleştirebilirsiniz.

Bu durumda, LFS yapılandırma dosyalarınızı deponuza bağlayabilir ve bunu uzak deponuza gönderebilirsiniz. LFS izleme yapılandırmasıyla eşleşen bir dosyayı yerel olarak bir sonraki taahhüdünüzde, bir LFS kaynağına "dönüştürülür". Bir geliştirme dalı üzerinde çalışıyorsanız, bu taahhüdü ana dalınızla birleştirin.

Şimdi Netlify'a bir göz atalım.

5. Netlify'da Site Oluşturma

Bu noktada, deponuz kurulur, böylece devam edip Netlify'da bir hesap oluşturabilirsiniz. İsterseniz GitHub, GitLab veya Bitbucket hesabınızla bile giriş yapabilirsiniz. Kontrol panelinde bir kez, sağ üst köşedeki "Git'ten yeni site" düğmesini tıklayın ve yeni Netlify sitenizi oluşturun.

Not : Şimdilik tüm seçenekleri varsayılan değerlerinde bırakabilirsiniz.

Git sağlayıcınızı seçin: bu, kimliğinizi doğrulamak için bir açılır pencere açacaktır. Bu yapıldığında, pencere kapanacak ve erişiminiz olan Git sağlayıcısındaki depoların bir listesini göreceksiniz. Yeni oluşturduğunuz repoyu seçin ve devam edin. Tüm seçenekler daha sonra düzenlenebilir olduğundan, çoğunu varsayılan olarak bırakabileceğiniz birkaç şey sorulacak.

Şimdilik, Site Ayarlarında, "Site adını değiştir"i tıklayın ve sitenize istediğiniz herhangi bir ad verin — ben chris-smashing-hugo-blog ile gideceğim. Artık siteye chris-smashing-hugo-blog.netlify.com üzerinden erişebileceğiz: güzel bir 404 sayfası!

6. Netlify Büyük Medya İçin Hazırlama (Opsiyonel)

Git LFS'yi kurduysanız ve Netlify'ı kullanmayı planlıyorsanız, bu adımları takip etmek isteyeceksiniz. Biraz daha karmaşık ama kesinlikle buna değer: otomatik olarak dönüştürülecek resim URL'lerinde sorgu dizeleri ayarlamanıza olanak tanır.

Diyelim ki 900×1600 piksellik bir resim olan portrait.jpg'ye bir bağlantınız var. Netlify Large Media ile, portre.jpg ?nf_resize=fit&w=420 dosyasını orantılı olarak ölçeklendirecek şekilde çağırabilirsiniz. Hem w hem de h tanımlarsanız ve nf_resize=smartcrop olarak ayarlarsanız, görüntünün ilgi alanına odaklanmak için kırparak yeniden boyutlandırılır (fantezi bir algoritma tarafından belirlendiği gibi, yani robot beyin büyüsü! ). Bunu, havuzumdaki bir görüntü için birkaç dosyaya ihtiyaç duymadan WordPress'in oluşturduğu gibi küçük resimlere sahip olmanın harika bir yolu olarak görüyorum.

Bu size çekici geliyorsa, hadi ayarlayalım!

İlk adım, Netlify'ın komut satırı arayüzünü (CLI) npm aracılığıyla kurmaktır:

 npm install netlify-cli -g

İşe yaradıysa, netlify komutunu çalıştırmak, araç hakkında bilgi sağlamalıdır.

Daha sonra yerel depo klasörünüzde (daha önce “hugorepo” adını verdiğim) bulunduğunuzdan emin olmanız ve şunları çalıştırmanız gerekir:

 netlify login

Belirteci yetkilendirin. Ardından, Netlify Large Media eklentisini kurmamız gerekecek. Koşmak:

 netlify plugins:install netlify-lm-plugin netlify lm:install

Ortaya çıkan mesajın sonunda, kopyalamanız gereken (Mac'te /Users/YOURNAME/.netlify/helper/path.bash.inc gibi görünmelidir) bir komut satırı gösterilmelidir - çalıştırın. Keychain'in macOS'ta makinenizin yönetici parolasını isteyebileceğini unutmayın.

Bir sonraki adım Netlify'ı bağlamaktır:

 netlify link

Sitenizin adını buradan verebilirsiniz (daha önce verdiğim chris-smashing-hugo-blog adını verdim). Bu yerindeyken, aşağıdakileri yürüterek Büyük Medya özelliğini ayarlamanız yeterlidir:

 netlify lm:setup

Bu yeni değişiklikleri yerel deponuza uygulayın ve bunları uzak geliştirme şubesine gönderin. Sourcetree ve Keychain ile git "credential-netlify" is not a git command satırları boyunca birkaç hatam oldu. Durumunuz buysa, şu komutları manuel olarak göndermeyi deneyin:

 git add -A git commit -m "Set up Netlify Large media" git push

Bu işe yaramadıysa, Netlify kimlik bilgisi Yardımcısı'nı yüklemeniz gerekebilir. Homebrew ile bunu nasıl yapacağınız aşağıda açıklanmıştır:

 brew tap netlify/git-credential-netlify brew install git-credential-netlify

Taahhüdünüzü şimdi zorlamayı deneyin (GUI'niz veya komut terminalinizle): çalışması gerekir!

Not : Netlify şifrenizi değiştirirseniz, netlify logout'u çalıştırın netlify logout netlify netlify login tekrar çalıştırın.

Şunu sorabilirsiniz: "Bütün bunlar ve biz hala Hugo yapımızı başlatmadık mı?" Evet biliyorum biraz uzun sürdü ama geçiş için tüm hazırlıklar tamamlandı. Artık Hugo blogumuzu kurabiliriz!

7. Bilgisayarınızda Hugo Kurulumu

Öncelikle, sağlanan seçeneklerden herhangi biriyle bilgisayarınıza Hugo'yu yüklemeniz gerekir. Homebrew kullanacağım ancak Windows kullanıcıları Scoop veya Chocolatey kullanabilir veya doğrudan bir paket indirebilir.

 brew install hugo

Daha sonra yeni bir Hugo sitesi oluşturmanız gerekecek, ancak bu site onu boş olmayan bir klasöre kurmaktan hoşlanmayacaktır. İlk seçenek: onu yeni bir klasörde oluşturabilir ve içeriğini yerel depo klasörüne taşıyabilirsiniz:

 hugo new site your_temporary_folder

İkinci seçenek: yerel deponuza bir bayrakla yüklemeye zorlayabilirsiniz, bunu doğru klasörde çalıştırdığınızdan emin olun:

 hugo new site . --force

Artık şu komutla başlatabileceğiniz bir Hugo siteniz var:

 hugo server

localhost üzerinde yerel bir önizleme alacaksınız. Ne yazık ki, kendi içeriğiniz ve temanız yok. Endişelenme, bunu çok yakında kuracağız!

Önce yapılandırma dosyasına bir göz atalım (benim durumumda config.toml ): hadi blogun adını ve temel URL'sini ayarlayalım (bu, Netlify kontrol panelinizdeki URL ile eşleşmelidir):

 title = "Chris' Smashing Hugo Blog" baseURL = "https://chris-smashing-hugo-blog.netlify.com"

Yerel olarak geliştirme yaparken bu bağlantının üzerine yazılacaktır, bu nedenle 404 hatasıyla karşılaşmamalısınız.

Hugo'ya dışa aktardığımız makalelerimizi Markdown formatında verelim. İlk adımdan itibaren /WP2Hugo/blog2md/out klasöründe oturuyor olmaları gerekir. Hugo klasöründe (diğer adıyla yerel depo dizini), content klasörüne erişin ve posts adında bir alt klasör oluşturun. Markdown dosyalarınızı oraya yerleştirin ve ardından bir tema ayarlayalım.

8. Özel Temanızı Oluşturma

Bu adım için, başlamak için ihtiyaç duyacağınız tüm bölümleri içeren (ve stil içermeyen) bir tema olan Saito kazan plakasını indirmenizi tavsiye ederim - çok faydalı bir başlangıç ​​noktası. Sürecin bu bölümünü atlamak istiyorsanız, elbette, Hugo için bu hazır tema koleksiyonuna bakabilirsiniz. Her şey sana bağlı!

Yerel depo klasöründen temayı theme themes/saito içine kopyalayın:

 git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito

Bu klasörü, cool-theme gibi istediğiniz herhangi bir adla yeniden adlandırabilirsiniz. config.toml/yaml/json dosyanızı düzenleyerek Hugo yapılandırmanıza hangi temayı kullanmak istediğinizi söylemeniz gerekir. Tema değerini saito veya cool-theme olarak veya temanızın klasör adı ne olursa olsun düzenleyin. Önizlemeniz artık blogunuzun başlığını bir telif hakkı satırıyla birlikte göstermelidir. Bu bir başlangıç, değil mi?

Temanın layout/partials/home.html dosyasını açın ve içeriğinizi görüntülemek için düzenleyin, posts türündeki ilk beş öğeyle ( content/posts/ klasörünün içinde), range , first ve where ile sınırlandırın:

 <div class="container"> {{ range first 5 (where .Paginator.Pages "Type" "posts") }} <article class="post post--{{ .Params.class }}"> <h2 class="post__title">{{ .Title }}</h2> <section class="post__content"> {{ .Content }} </section> </article> {{ end }} </div>

İçeriğiniz artık en basit şekilde görünür durumda. Bunu sizin yapma zamanı - hadi dalalım!

Hugo ile Şablon Oluşturma

İsterseniz önce Hugo'ya Giriş şablonunu okuyabilirsiniz, ancak ben temelleri anlamanıza yardımcı olacak birkaç temel noktayı gözden geçirmeye çalışacağım.

Hugo'daki tüm işlemler sınırlayıcılar içinde tanımlanır: daha önce biraz şablonlama yaptıysanız tanıdık gelen çift küme parantezleri (örneğin {{ .Title }} ). Bunu yapmadıysanız, işaretlemenizin belirli bir noktasında işlemleri yürütmenin veya değerleri enjekte etmenin bir yolu olarak düşünün. Bloklar için, kısa kodlar dışındaki tüm işlemler için {{ end }} etiketi ile biterler.

Temaların, düzenin parçalarını içeren bir layout klasörü vardır. _default klasörü, Hugo'nun başlangıç ​​noktası olacak, baseof.html ( tahmin ettiniz! ) mizanpajınızın temeli olacak. WordPress temanızda görmüş olabileceğiniz PHP'de include nasıl kullanacağınıza benzer şekilde, "kısmiler" olarak adlandırılan her bir bileşeni çağıracaktır (bu konuda Hugo'nun Kısmi Şablonla ilgili belgelerinde daha fazlası). Kısmiler diğer kısmileri arayabilir - sadece onu sonsuz bir döngü haline getirmeyin.

{{ partial "file.html" . }} {{ partial "file.html" . }} sözdizimi. partial bölüm oldukça basittir, ancak diğer ikisinin açıklanması gerekebilir. Parsiyels/file.html yazmanız gerekebilir, ancak tüm kısmiler kısmiler” klasöründe olacağından, Hugo bu klasörü gayet iyi bulabilir. Elbette daha fazla organizasyona ihtiyacınız varsa “partials” klasörü içinde alt klasörler oluşturabilirsiniz.

Başıboş bir nokta fark etmiş olabilirsiniz: bu, kısmi durumunuza ilettiğiniz bağlamdır. Kısmi bir menünüz ve bir bağlantı ve etiket listeniz varsa, bu listeyi kısmi listeye geçirebilir, böylece yalnızca o listeye erişebilir, başka hiçbir şeye erişemez. Bir sonraki bölümde bu anlaşılması güç nokta hakkında daha fazla konuşacağım.

baseof.html dosyanız, blog düzeninizi oluşturmak için gereken tüm çeşitli bölümleri çağıran bir kabuktur. Minimum HTML'ye ve çok sayıda bölüme sahip olmalıdır:

 <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> <head> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head.html" . }} </head> <body> {{ partial "header.html" . }} {{ partial "nav.html" . }} <main> {{ block "main" . }}{{ end }} </main> <aside> {{ partial "sidebar.html" . }} </aside> {{ partial "footer.html" . }} </body> </html>

{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }} satırı farklıdır, çünkü mevcut sayfanın (ana sayfa, tek gönderi sayfası vb.) içeriğine göre bir şablonla {{ define "main" }} ile tanımlanan bir bloktur.

Stil sayfaları

Temanızda, içine bir css klasörü yerleştireceğimiz assets adında bir klasör oluşturun. SCSS dosyalarımızı veya güvenilir bir eski CSS dosyasını içerecektir. Şimdi, partials klasöründe ( head.html tarafından çağrılan) bir css.html dosyası olmalıdır. Sass/SCSS'yi CSS'ye dönüştürmek ve stil sayfasını küçültmek için bu işlev dizisini kullanırdık (işlevleri birbirinin etrafına sarmak yerine Hugo Pipes sözdizimini kullanarak):

 {{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

Bonus olarak - düz bir cevap bulmakta zorlandığım için - Otomatik Ön Düzeltici kullanmak istiyorsanız, Hugo PostCSS'yi de uygular. İlk satırda toCSS ile minify arasına fazladan bir boru işlevi ekleyebilirsiniz, şöyle:

 {{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

Hugo blogunuzun kökünde bir "postcss.config.js" dosyası oluşturun ve aşağıdaki gibi seçenekleri iletin:

 module.exports = { plugins: { autoprefixer: { browsers: [ "> 1%", "last 2 versions" ] } }, }

Ve presto! Sass'tan ön ekli, küçültülmüş CSS'ye. "Parmak izi" boru işlevi, dosya adının style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css gibi benzersiz olduğundan emin olmaktır. Stil sayfasını değiştirirseniz parmak izi değişir, bu nedenle dosya adı farklıdır ve böylece etkili bir önbellek bozma çözümü elde edersiniz.

9. Hugo Sözdizimi Üzerine Notlar

Hugo'nun şablonlarınızda kullanacağınız değişkenleri (veya kendi sözlerimle bağlamsal bir referans sağlar) kapsamını bu şekilde anladığınızdan emin olmak istiyorum.

Nokta ve Kapsam

Nokta, herhangi bir şablonda veya kısa kodda kullanabileceğiniz üst düzey bir değişken gibidir, ancak değeri bağlamına göre belirlenir. Dot'un baseof.html gibi üst düzey bir şablondaki değeri with döngü blokları veya bloklar içindeki değerden farklıdır.

Diyelim ki bu, şablonumuzda head.html kısmi bölümümüzde:

 {{ with .Site.Title }} {{ son }}

Bunu ana kapsamda çalıştırmamıza rağmen, Nokta'nın değeri bu durumda .Site.Title olan bağlama göre değişir. Bu nedenle, değeri yazdırmak için yalnızca yazmanız gerekir . değişken adını tekrar yazmak yerine. Bu ilk başta kafamı karıştırdı ama buna çok çabuk alışıyorsunuz ve değişkeni yalnızca bir kez adlandırdığınız için fazlalığı azaltmaya yardımcı oluyor. Bir şey işe yaramazsa, bunun nedeni genellikle kapsamlı bir blok içinde bir üst düzey değişkeni çağırmaya çalışıyor olmanızdır.

Peki, kapsamlı bir blok içinde üst düzey kapsamı nasıl kullanırsınız? Diyelim ki bir değeri kontrol etmek istiyorsunuz ama diğerini kullanmak istiyorsunuz. Her zaman en üst düzey kapsam olacak olan $ öğesini kullanabilirsiniz:

 {{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

Koşulumuzun içinde, kapsam .Site.Params.InfoEnglish , ancak bunun dışındaki değerlere $ ile erişmeye devam edebiliriz, burada .Site.Params.DescriptionEnglish sezgisel olarak kullanmak işe yaramaz çünkü .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish çözmeye çalışır. .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish , hata veriyor.

Özel Değişkenler

Aşağıdaki sözdizimini kullanarak değişkenleri atayabilirsiniz:

 {{ $customvar := "custom value" }}

Değişken adı $ ile başlamalıdır ve atama operatörü ilk kez atanıyorsa = := olmalıdır, aksi takdirde şöyle:

 {{ $customvar = "updated value" }}

Karşılaşabileceğiniz sorun, bunun kapsam dışına çıkmamasıdır, bu da beni bir sonraki noktaya getiriyor.

Kaşımak

Scratch işlevi, tüm bağlamlarda kullanılabilen değerleri atamanıza olanak tanır. Bir movie.json dosyasında bir film listeniz olduğunu varsayalım:

 [ { "name": "The Room", "rating": 4 }, { "name": "Back to the Future", "rating": 10 }, { "name": "The Artist", "rating": 7 } ]

Şimdi, dosyanın içeriğini yinelemek ve daha sonra kullanmak üzere en sevdiğinizi saklamak istiyorsunuz. İşte burada Scratch devreye giriyor:

 {{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }} {{ range .Site.Data.movies }} {{ if ge .rating 10 }} {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }} {{ $.Scratch.Set "favouriteMovie" .name }} {{ end }} {{ end }} [...] My favourite movie is {{ .Scratch.Get "favouriteMovie" }} <!-- Expected output => My favourite movie is Back to the Future -->

Scratch ile döngünün içinden bir değer çıkartabilir ve onu her yerde kullanabiliriz. Temanız giderek daha karmaşık hale geldikçe, muhtemelen kendinizi Scratch'e ulaşırken bulacaksınız.

Not : Bu sadece bir örnektir çünkü bu döngü Scratch olmadan bu sonucu verecek şekilde optimize edilebilir, ancak bu size nasıl çalıştığını daha iyi anlamanızı sağlayacaktır.

Şartlılar

Şartların sözdizimi, JavaScript veya PHP perspektifinden beklediğinizden biraz farklıdır. Özünde, iki argüman alan işlevler vardır (değerleri doğrudan çağırırsanız parantez isteğe bağlıdır):

 {{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

Bu işlevlerden birkaçı vardır:

• eq eşitliği kontrol eder
• ne eşitsizliği kontrol eder
• gt daha büyük olup olmadığını kontrol edin
• büyük veya eşit olup ge kontrol edin
• Daha lt kontrol eder
• le , daha küçük veya eşit olup olmadığını kontrol eder

Not : Hugo İşlevleri Hızlı Başvurusu'nda Hugo'nun sunduğu işlevler hakkında her şeyi öğrenebilirsiniz.

Beyaz boşluk

Çıktı konusunda benim kadar seçiciyseniz, bazı istenmeyen boş satırlar görebilirsiniz. Bunun nedeni, Hugo'nun işaretlemenizi olduğu gibi ayrıştırması ve örneğin karşılanmayan koşulların etrafında boş satırlar bırakmasıdır.

Diyelim ki bu varsayımsal kısmi var:

 {{ if eq .Site.LanguageCode "en-us" }} <p>Welcome to my blog!</p> {{ end }} <img src="/uploads/portrait.jpg" alt="Blog Author">

Sitenin dil kodu en-us değilse, bu HTML çıktısı olacaktır (resim etiketinden önceki üç boş satıra dikkat edin):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

Hugo, sınırlayıcının içindeki küme parantezlerinin yanında bir kısa çizgi ile bunu ele almak için bir sözdizimi sağlar. {{- parantezlerden önceki boşlukları keser ve -}} parantezlerden sonraki boşlukları keser. İkisinden birini veya her ikisini aynı anda kullanabilirsiniz, ancak kısa çizgi ile sınırlayıcının içindeki işlem arasında bir boşluk olduğundan emin olun.

Bu nedenle, şablonunuz aşağıdakileri içeriyorsa:

 {{- if eq .Site.LanguageCode "en-us" -}} <p>Welcome to my blog!</p> {{- end -}} <img src="/uploads/portrait.jpg" alt="Blog Author">

…o zaman işaretleme bununla sonuçlanır (boş satır olmadan):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

Bu, aralarında boşluk olmaması gereken display: inline-block öğeler gibi diğer durumlar için yararlı olabilir. Tersine, işaretlemede her öğenin kendi satırında olduğundan emin olmak istiyorsanız (örneğin bir {{ range }} döngüsünde), "açgözlü" boşluk budamasını önlemek için tirelerinizi dikkatli bir şekilde yerleştirmeniz gerekir.

Sitenin dil kodu “ en-us ” ile eşleşirse yukarıdaki örnek aşağıdaki çıktıyı verir ( p ve img etiketleri arasında artık satır sonu yok):

 <p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. İçerik ve Veri

İçeriğiniz Markdown dosyaları olarak saklanır, ancak HTML'yi de kullanabilirsiniz. Hugo, sitenizi oluştururken onu düzgün bir şekilde oluşturacaktır.

Ana sayfanız _default/list.html düzenini çağıracak ve şöyle görünebilir:

 {{ define "main" }} {{ partial "list.html" . }} {{ end }}

Ana blok, list.html bağlamıyla kısmi olarak çağırır . , yani en üst seviye. list.html kısmi şöyle görünebilir:

 {{ define "main" }} <ol class="articles"> {{ range .Paginator.Pages }} <li> <article> <a href="{{ .URL }}"> <h2>{{ .Title }}</h2> <img src="{{ .Params.featuredimage }}" alt=""> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2 2006" }} </time> </a> </article> </li> {{ end }} </ol> {{ partial "pagination.html" . }} {{ end }}

Şimdi, istediğiniz gibi şekillendirebileceğiniz makalelerimizin temel bir listesine sahibiz! Sayfa başına makale sayısı, yapılandırma dosyasında paginate = 5 (TOML'de) ile tanımlanır.

Hugo'daki tarih biçimlendirmesine göre kafanız tamamen karışmış olabilir. Ünitenin bir sayıya (birinci ay, ikinci gün, üçüncü saat, vb.) eşlendiği her sefer, Go dili belgelerinin sağladığı aşağıdaki görsel açıklamayı gördüğümde bana çok daha anlamlı geldi - ki bu biraz garip, ama biraz da akıllı!

 Jan 2 15:04:05 2006 MST => 1 2 3 4 5 6 -7

Artık tek yapmanız gereken gönderinizi tek bir sayfada görüntülemek. Makalenizin düzenini özelleştirmek için post.html kısmını düzenleyebilirsiniz:

 <article> <header> <h1>{{ .Title }}</h1> <p> Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time> </p> </header> <section> {{ .Content }} </section> </article>

Ve içeriğinizi böyle gösterirsiniz!

URL'yi özelleştirmek istiyorsanız, bu durumda URL'lerin my-blog.com/post-slug/ gibi görünmesini sağlayacak bir [permalinks] seçeneği (TOML) ekleyerek yapılandırma dosyanızı güncelleyin:

 [permalinks] posts = ":filename/"

İçeriğinizin bir RSS beslemesini oluşturmak istiyorsanız (çünkü RSS harikadır), site yapılandırma dosyanıza aşağıdakini ekleyin (bu seçenekler algılanırsa Saito'nun varsayılan şablonu uygun etiketleri head.html'de görüntüler):

 rssLimit = 10 [outputFormats] [outputFormats.RSS] mediatype = "application/rss" baseName = "feed"

Peki ya bir gönderi dışında bir tür içeriğiniz varsa? İşte burada veri şablonları devreye girer: Menünüzü veya kenar çubuğunuzdaki bir öğeyi oluşturmak için JSON dosyaları oluşturabilir ve verilerini çıkarabilirsiniz. YAML ve TOML da seçeneklerdir ancak karmaşık verilerle (ör. iç içe nesneler) daha az okunabilir. Elbette bunu sitenizin yapılandırma dosyasında ayarlayabilirsiniz, ancak - bana göre - gezinmesi biraz daha kolay ve daha az bağışlayıcı.

Kenar çubuğunuzda göstermek isteyebileceğiniz "harika sitelerin" bir listesini oluşturalım - JSON'da bir dizi olarak her site için bir bağlantı ve bir etiketle:

 { "coolsites": [ { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" }, { "link": "https://gohugo.io/", "label": "Hugo" }, { "link": "https://netlify.com", "label": "Netlify" } ] }

Bu dosyayı, /data/coolsites.json gibi bir data klasörü içindeki havuz kökünüze veya tema /data/coolsites.json . Ardından, sidebar.html kısmi dosyanızda, .Site.Data.coolsites kullanarak bunu range yineleyebilirsiniz:

 <h3>Cool Sites:</h3> <ul> {{ range .Site.Data.coolsites.coolsites }} <li><a href="{{ .link }}">{{ .label }}</a></li> {{ end }} </ul>

Bu, üzerinde yinelemek istediğiniz her türlü özel veri için çok kullanışlıdır. Bunu temam için, gönderilerin hangi kategorilerde olabileceği, yazarlar (biyografi, avatar ve ana sayfa bağlantısı ile), hangi menülerin ve hangi sırayla gösterileceği için bir Google Fonts listesi oluşturmak için kullandım. Bununla gerçekten çok şey yapabilirsiniz ve oldukça basittir.

Veriler ve benzeri hakkında son bir düşünce: Hugo /static klasörünüze koyduğunuz her şey, canlı derlemede kökte ( / ) bulunacaktır. Aynı şey tema klasörü için de geçerlidir.

11. Netlify'da Dağıtım

İşiniz bitti mi, yoksa Netlify'ın ne tür bir sihir işlediğini görmek mi istiyorsunuz? Yerel Hugo sunucunuz bir hata döndürmediği sürece kulağa hoş geliyor.

Değişikliklerinizi kabul edin ve bunları uzaktan geliştirme şubenize ( dev ) gönderin. Sıradaki Netlify'a gidin ve sitenizin ayarlarına erişin. “Oluştur ve dağıt” için bir seçenek göreceksiniz. Burada birkaç şeyi değiştirmemiz gerekecek.

1. İlk olarak, "Derleme ayarları" bölümünde, "Derleme komutu"nun hugo olarak ve "Yayınlama dizini"nin public olarak ayarlandığından emin olun (Varsayılan olarak Hugo yapılandırma dosyanızda tutmanız önerilir);
2. Ardından, "Dağıtım bağlamları" bölümünde, "Üretim şubesini" deponuzdaki ana şubeniz olarak ayarlayın. Ayrıca “Şube dağıtımlarınızın” “Yalnızca üretim dalını dağıt” olarak ayarlanmasını öneririm;
3. Son olarak, “Ortam değişkenleri” bölümünde değişkenleri düzenleyin ve “Yeni değişken”e tıklayın. Hugo ortamını şu çiftle 0,53'e ayarlayacağız: anahtarı HUGO_VERSION ve değeri 0.53 olarak ayarlayın.

Şimdi uzak deponuza gidin ve geliştirme şubenizi ana şubenizle birleştirin: bu, güncellenmiş blogunuzu dağıtacak kanca olacaktır (bu özelleştirilebilir, ancak varsayılan benim için makul).

Netlify kontrol panelinize geri dönersek, sitenizin “Üretim dağıtımları”nda bazı yeni etkinlikler olmalıdır. Her şey yolunda giderse, bu işlenmeli ve bir "Yayınlandı" etiketine çözümlenmelidir. Dağıtım öğesine tıklamak, operasyonların bir günlüğünü içeren bir genel bakış açacaktır. Yukarıda, "Önizleme dağıtımı" göreceksiniz. Devam et, tıkla - hak ediyorsun. Yaşıyor!

12. Özel Bir Etki Alanı Ayarlama

URL'yi benim-süper- my-super-site.netlify.com olarak kullanmak sizin zevkinize göre değil ve zaten my-super-site.com mu var? Anladım. Bunu değiştirelim!

Alan adı kayıt sitenize gidin ve alanınızın DNS ayarlarına gidin. Burada yeni bir giriş oluşturmanız gerekecek: ya my-super- my-super-site.netlify.com işaret eden bir ALIAS/CNAME kaydı ayarlayabilir veya etki alanınızı Netlify'ın yük dengeleyicisine yönlendiren bir A kaydı ayarlayabilirsiniz. 104.198.14.52 yazı yazılırken.

En son bilgileri Netlify'ın özel alan adlarıyla ilgili belgelerinde bulabilirsiniz. Yük dengeleyici IP'si, "Kök ve www özel etki alanları için manuel DNS yapılandırması" altındaki DNS ayarları bölümünde olacaktır.

Bu bittiğinde, sitenizin Netlify'daki kontrol paneline gidin ve "Alan adı ayarları"nı tıklayın, burada "Özel alan ekle"yi göreceksiniz. Doğrulamak için alan adınızı girin.

Alan adlarınızı, Alan Adları sekmesindeki kontrol panelinizden de yönetebilirsiniz. Arayüz bu sayfada daha az kafa karıştırıcı geliyor, ancak belki benim için olduğu gibi DNS ayarlarınızı daha fazla anlamanıza yardımcı olabilir.

Not : Onlar aracılığıyla bir alan satın almak istiyorsanız Netlify sizin için her şeyi halledebilir. Daha kolay ama ekstra bir maliyet.

Özel alan adınızı kurduktan sonra, "Alan adı ayarları"nda "HTTPS" bölümüne gidin ve SSL/TLS sertifikasını etkinleştirin. Birkaç dakika sürebilir ancak size ücretsiz bir sertifika verecektir: alan adınız artık HTTPS üzerinde çalışır.

13. Netlify CMS'de İçerik Düzenleme

Makalelerinizi düzenlemek, resim yüklemek ve WordPress'in arka uç arayüzünde yaptığınız gibi blog ayarlarınızı değiştirmek istiyorsanız, oldukça iyi bir öğreticiye sahip olan Netlify CMS'yi kullanabilirsiniz. Sizin için her şeyi halledecek tek bir dosyadır (ve jeneratörden bağımsızdır: Jekyll, Eleventy vb. ile çalışır).

Bir klasöre iki dosya yüklemeniz yeterlidir:

• CMS (tek bir HTML dosyası);
• bir yapılandırma dosyası (bir YAML dosyası).

İkincisi, belirli sitenizin tüm ayarlarını tutacaktır.

Hugo kökünüzün /static klasörüne gidin ve my-super-site.com/FOLDER_NAME (benimkine admin diyeceğim) aracılığıyla erişeceğiniz yeni bir klasör oluşturun. Bu admin klasörünün içinde, Netlify CMS tarafından sağlanan işaretlemeyi kopyalayarak bir index.html dosyası oluşturun:

 <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>

Oluşturmanız gereken diğer dosya, yapılandırma dosyasıdır: config.yml . Sitenizin ayarlarını (ad, URL, vb.) tanımlamanıza olanak tanır, böylece gönderilerinizin ön maddesinin ne içermesi gerektiğini ve ayrıca veri dosyalarınızın (varsa) nasıl düzenlenebilir olması gerektiğini ayarlayabilirsiniz. Kurulumu biraz daha karmaşıktır, ancak bu kolay olmadığı anlamına gelmez.

GitHub veya GitLab kullanıyorsanız, config.yml dosyanızı şununla başlatın:

 backend: name: git-gateway branch: dev # Branch to update (optional; defaults to master)

Bitbucket kullanıyorsanız, biraz farklıdır:

 backend: name: bitbucket repo: your-username/your-hugorepo branch: dev # Branch to update (optional; defaults to master)

Ardından, yüklemelerimiz için CMS'ye bunları nerede depolayacağını söylemeliyiz:

 media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

Yeni bir gönderi oluşturduğunuzda, CMS, üç seçenekle özelleştirebileceğiniz dosya adı için bilgi bilgisi oluşturur:

slug: encoding: "ascii" # You can also use "unicode" for non-Latin clean_accents: true # Removes diacritics from characters like e or a sanitize_replacement: "-" # Replace unsafe characters with this string

Son olarak, gönderilerinizdeki verilerin nasıl yapılandırıldığını tanımlamanız gerekecek. Ayrıca, listeye başka bir site eklemek istersem, veri dosyası coolsites'in nasıl yapılandırıldığını da tanımlayacağım. Bunlar, kesinlikle en ayrıntılı olanı olacak olan collections nesnesi ve burada hakkında daha fazlasını okuyabileceğiniz güzel bir avuç seçenek ile ayarlanmıştır.

 collections: - name: "articles" # Used in routes, eg, /admin/collections/blog label: "Articles" # Used in the Netlify CMS user interface folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo create: true # Allow users to create new documents in this collection slug: "{{slug}}" # Filename template, eg, post-title.md fields: # The fields for each document, usually in front matter - {label: "Title", name: "title", widget: "string", required: true} - {label: "Draft", name: "draft", widget: "boolean", default: true } - {label: "Type", name: "type", widget: "hidden", default: "post" } - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"} - {label: "Featured Image", name: "featuredimage", widget: "image"} - {label: "Author", name: "author", widget: "string"} - {label: "Body", name: "body", widget: "markdown"} - name: 'coolsites' label: 'Cool Sites' file: 'data/coolsites.json' description: 'Website to check out' fields: - name: coolsites label: Sites label_singular: 'Site' widget: list fields: - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' } - { label: 'Site Name', name: 'label', widget: 'string' }

Not : Netlify CMS Widgets belgelerinde, her bir pencere öğesi türünü ve bunların nasıl kullanılacağını - özellikle tarih biçimleri için yararlı olan - ayrı ayrı alanların nasıl yapılandırılacağı hakkında daha fazla bilgi edinebilirsiniz.

kimlik doğrulama

Yapmamız gereken son şey, yalnızca yetkili kullanıcıların arka uca erişebilmesini sağlamaktır! Git sağlayıcınızın kimlik doğrulamasını kullanmak, bunu yapmanın kolay bir yoludur.

Netlify sitenize gidin ve “Ayarlar” sekmesine tıklayın. Ardından sol taraftaki menüde son bağlantı olan “Erişim kontrolü”ne gidin. Burada, kullanıcı hesabınız için (depoda değil) tanımlanmış bir anahtar ve gizli bir değer sağlayarak OAuth'u GitHub, GitLab veya Bitbucket aracılığıyla çalışacak şekilde yapılandırabilirsiniz. Deponuzun kaydedildiği ile aynı Git sağlayıcısını kullanmak isteyeceksiniz.

GitHub

GitHub'daki "Ayarlar" sayfanıza gidin (menüyü ortaya çıkarmak için avatarınızı tıklayın) ve "Geliştirici Ayarları"na erişin. "Yeni bir uygulama kaydet"e tıklayın ve gerekli değerleri sağlayın:

• “Süper blogum için Netlify CMS” gibi bir isim;
• bir ana sayfa URL'si, Netlify sitenizin bağlantısı;
• eğer istersen bir açıklama;
• " https://api.netlify.com/auth/done " olması gereken uygulama geri arama URL'si.

Kaydedin ve Müşteri Kimliğinizi ve Müşteri Sırrınızı göreceksiniz. Bunları Netlify'ın Erişim Kontrolüne sağlayın.

GitLab

Ayarlar sayfasına erişmek için avatarınıza tıklayın ve soldaki "Kullanıcı Ayarları" menüsünden "Uygulamalar"a tıklayın. Yeni bir uygulama eklemek için bir form göreceksiniz. Aşağıdaki bilgileri sağlayın:

• “Süper blogum için Netlify CMS” gibi bir isim;
• " https://api.netlify.com/auth/done " olması gereken bir yönlendirme URI'si;
• kontrol edilmesi gereken kapsamlar şunlardır:
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

Başvurunuzu kaydetmek size, artık Netlify'ın Erişim Kontrolüne girebileceğiniz Uygulama Kimliğinizi ve Sırrınızı verecektir.

bitbucket

Kullanıcı hesabı ayarlarınıza gidin (avatarınızı ve ardından “Bitbucket ayarları”nı tıklayın). “Erişim Yönetimi” altında, “OAth” e tıklayın. "OAuth tüketicileri" bölümünde, "Tüketici ekle"yi tıklayın. Bunlar dışında çoğu şeyi varsayılan değerlerinde bırakabilirsiniz:

• “Süper blogum için Netlify CMS” gibi bir isim;
• " https://api.netlify.com/auth/done " olması gereken bir geri arama URL'si;
• kontrol edilmesi gereken izinler şunlardır:
  • Hesap: E-posta, Okuma, Yazma
  • Depolar: Oku, Yaz, Yönetici
  • Çekme İstekleri: Oku, Yaz
  • Web kancaları: Okuma ve yazma

Kaydettikten sonra, Netlify'ın Erişim Kontrolünde geri sağlayabileceğiniz anahtarınıza ve sırrınıza erişebilirsiniz.

Belirteçleri sağladıktan sonra Netlify'a gidin ve Site Ayarlarını bulun. “Kimlik”e gidin ve özelliği etkinleştirin. Artık bir Harici Sağlayıcı ekleyebilirsiniz: Git sağlayıcınızı seçin ve "Etkinleştir"e tıklayın.

Ek ayrıntılara ihtiyaç duymanız durumunda, Netlify CMS'nin okuyabileceğiniz bir kimlik doğrulama kılavuzu vardır.

Artık Netlify sitenizin arka ucuna erişebilir ve içeriği düzenleyebilirsiniz. Her düzenleme, yapılandırma dosyanızda belirtilen dalda deponuzdaki bir taahhüttür. main şubenizi Netlify CMS için hedef olarak tuttuysanız, her kaydettiğinizde yeni bir derleme çalıştıracaktır. Daha uygun, ancak "aradaki durumlar" kadar temiz değil.

Bir geliştirme dev kaydetmeniz, yeni bir yapı çalıştırmak istediğinizde daha iyi kontrol sahibi olmanızı sağlar. Bu, özellikle blogunuz çok fazla içeriğe sahipse ve daha uzun bir oluşturma süresi gerektiriyorsa önemlidir. Her iki şekilde de işe yarayacaktır; bu sadece blogunuzu nasıl çalıştırmak istediğinizle ilgili .

Ayrıca Git LFS'nin yerel olarak yüklediğiniz bir şey olduğunu lütfen unutmayın, bu nedenle Netlify CMS aracılığıyla yüklenen resimler "normal" olacaktır. Uzak şubenizi yerel olarak çekerseniz, görüntüler LFS'ye dönüştürülmelidir; bu, daha sonra taahhüt edip uzak şubenize gönderebilirsiniz. Ayrıca, Netlify CMS şu anda LFS'yi desteklememektedir, bu nedenle görüntü CMS'de görüntülenmeyecektir, ancak son derlemenizde görünecektir.

Önerilen okuma : Statik Site Üreticileri İncelendi: Jekyll, Middleman, Roots, Hugo

Çözüm

Ne yolculuk! Bu eğitimde, WordPress yayınınızı Markdown dosyalarına nasıl aktaracağınızı, yeni bir havuz oluşturacağınızı, Git LFS'yi nasıl kuracağınızı, Netlify'da bir siteyi nasıl barındıracağınızı, bir Hugo sitesi oluşturmayı, kendi temanızı oluşturmayı ve içeriği Netlify CMS ile nasıl düzenleyeceğinizi öğrendiniz. . Fena değil!

Sıradaki ne? Pekala, Hugo kurulumunuzu deneyebilir ve Hugo'nun sunduğu çeşitli araçlar hakkında daha fazla bilgi edinebilirsiniz - kısa olsun diye anlatmadığım pek çok araç var.

Keşfetmek! İyi eğlenceler! Blog!

Diğer Kaynaklar

• Hugo Belgeleri
  • Kurulum
  • Hızlı başlangıç
  • Yapılandırma
  • şablonlama
  • taksonomiler
  • Kısa kodlar
  • Netlify'da Hugo
• Netlify Belgeleri
  • Özel Alan Adları
  • Yönetilen DNS
  • netlify.toml Komut Dosyalarını Dağıt
• Netlify CMS Dokümantasyonu
  • Widget'lar
• Git LFS'si