Hugo ve Firebase Kullanarak Ücretsiz Geliştirici Blogunuzu Oluşturun

Bu eğitimde, Hugo kullanarak kendi blogunuzu nasıl oluşturacağınızı ve bunu Firebase'de ücretsiz olarak nasıl dağıtacağınızı göstereceğim. Hugo, açık kaynaklı bir statik site oluşturucudur ve Firebase, web ve mobil geliştirmeyi artırmak için kullanılan kaynaklar ve hizmetler sunan bir Google platformudur. Henüz bir blog'u olmayan ancak bir bloga ev sahipliği yapmakla ilgilenen bir geliştiriciyseniz, bu makale bir blog oluşturmanıza yardımcı olacaktır. Bu adımları takip etmek için Git'i ve terminalinizi nasıl kullanacağınızı bilmeniz gerekir.

Kendi teknik blogunuza sahip olmak, bir geliştirici olarak kariyerinize tonlarca fayda sağlayabilir. Birincisi, teknik konular hakkında blog yazmak, birincil geliştirici işinizde başka türlü anlamayabileceğiniz şeyleri öğrenmenizi sağlar. Parçalarınızı araştırırken veya yeni şeyler denedikçe, yeni teknolojilerle nasıl çalışacağınız ve uç vaka problemlerini nasıl çözeceğiniz gibi bir sürü şeyi öğrenirsiniz. Buna ek olarak, okuyucunuzun yorumlarıyla meşgul olduğunuzda, iletişim ve eleştiri ve geri bildirimle başa çıkma gibi yumuşak becerilerin pratiğini yaparsınız.

Ek olarak, kavramları göstermek için blogunuz için örnek projeler oluştururken çok fazla kod yazdığınız için yazılım geliştirme becerilerinizde kendinize daha fazla güvenirsiniz. Teknik bir blog, size becerilerinizi ve uzmanlığınızı sergilemek için bir platform sağladığından, bir geliştirici olarak markanızı güçlendirir. Bu, sizi işler, konuşma ve konferans katılımları, kitap anlaşmaları, yan işler, diğer geliştiricilerle ilişkiler vb. gibi her türlü fırsata açar.

SmashingMag'de Önerilen Okuma :

• WordPress'ten Hugo'ya Geçiş
• JAMstack'te Başsız Bir WordPress Sitesi Nasıl Oluşturulur
• jQuery'yi Vue.js ile Değiştirmek: Oluşturma Adımına Gerek Yok
• Uzak Bir Ekip İçinde Otantik İnsan Bağlantıları Oluşturma

Örneğin Chris Sevilleja, daha sonra Digital Ocean'a katılan bir işletmeye dönüşen scotch.io adlı blogunda öğreticiler yazmaya 2014 yılında başladı. Teknik bir bloga sahip olmanın bir diğer önemli yararı, sizi yazılım tasarımı ve teknik özellikler belgeleri yazarken işinizde bir varlık olabilecek daha iyi bir yazar yapmasıdır. Ayrıca, sizi olağanüstü bir öğretmen ve akıl hocası yapar. Örneğin, Go dili hakkında blog yazan ve aynı zamanda onu oluşturan Google Go ekibinde çalışan Russ Cox'un blogu olan search.swtch.com'u sık sık okurum. Ondan, ana işimden almamış olabileceğim dilin nasıl çalıştığı hakkında bir ton şey öğrendim.

Okumaktan ve çok şey öğrenmekten keyif aldığım bir başka harika blog da, bir zamanlar blog yazarlığının gerçekten harika bir parçası olduğunu yazan Ali Spittel'in welearncode.com'u:

"Diğer insanların kod yazmayı öğrenmelerine yardımcı olmak ve benden sonra gelenlerin işini kolaylaştırmak."

Blogunuzu çalışır duruma getirmenin oldukça kolay ve zahmetsiz bir yolu, bir blog almak için yalnızca bir hesap oluşturmanız gereken Medium gibi bir üçüncü taraf platformu kullanmaktır. Bu platformlar başlangıçta çoğu blog ihtiyacına uygun olsa da, uzun vadede bazı dezavantajları vardır.

Bazı platformlar, önemsiz şeyler için sürekli olarak dikkat dağıtıcı bildirimler göndermek, uygulama yüklemelerini istemek vb. gibi kötü kullanıcı deneyimleri sunar. Okuyucunuz, blogunuzun barındırıldığı bir platformda kötü bir deneyime sahipse, içeriğinizle etkileşime girme olasılıkları daha düşüktür. Bunun yanı sıra, okuyucunuzun blogunuzla etkileşimini ve blogunuzdaki zamanı geliştirmek için ihtiyaç duyabileceğiniz araçlar desteklenmeyebilir. RSS beslemeleri, kod parçacıkları için sözdizimi vurgulama gibi şeyler, diğer şeylerin yanı sıra platformda desteklenmeyebilir. En kötü senaryoda, blogunuzun barındırıldığı platform kapanabilir ve yaptığınız tüm çalışmaları kaybedebilirsiniz.

Kendi blogunuzu barındırmak ve kullanıcılarınızı ona yönlendirmek, yayınladığınız gönderilerle daha fazla ilgilenme şanslarını artırır. Bir platformda sadece siz olacağınız için okuyucunuzun dikkatini diğer yazarlarla rekabet etmek zorunda kalmayacaksınız. Okuyucular, ilettiğiniz şeye daha fazla odaklandıklarından, yazılarınızın çoğunu okumaları veya bülteninize kaydolmaları muhtemeldir. Kendi blogunuzu barındırmanın bir başka artısı da, genellikle üçüncü taraf platformlarda mümkün olmayan, onu kendi zevkinize göre sayısız şekilde özelleştirebilme yeteneğidir.

Hugo'yu Kurma

macOS veya Linux üzerinde çalışıyorsanız Hugo'yu kurmanın en kolay yolu Homebrew kullanmaktır. Terminalinizde çalıştırmanız gereken tek şey:

 brew install hugo

Windows üzerinde çalışıyorsanız, Hugo, kepçe yükleyici veya çikolatalı paket yöneticisi kullanılarak yüklenebilir. Kepçe için:

 scoop install hugo

Çikolatalı için:

 choco install hugo -confirm

Bu seçeneklerden hiçbiri sizin için geçerli değilse, kurulum için bu seçeneklere göz atın.

Firebase Araçlarını Ayarlama

Firebase araçlarını kurmak için, npm'ye erişmek için Node.js'nin kurulu olması gerekir. Firebase araçlarını yüklemek için şunu çalıştırın:

 npm install -g firebase-tools

Bu bağlantıdan ücretsiz olarak bir Firebase hesabı oluşturun. Bunun için bir Google hesabına ihtiyacınız olacak. Ardından, Firebase araçlarını kullanarak giriş yapın. Google hesabınızı kullanarak giriş yapabileceğiniz bir tarayıcı sekmesine yönlendirileceksiniz.

 firebase login

Blogunuzu Oluşturun

Blogunuzun kaynak kodunun bulunmasını istediğiniz bir dizin seçin. Terminalinizdeki bu dizine konumu değiştirin. Blogunuz için bir ad seçin. Bu öğreticinin amaçları için, bloga sm-blog adını verelim.

 hugo new site sm-blog

Bir şeyler ters giderse diye sitenizin kaynak kodunu yedeklemeniz önerilir. Bunun için Github'ı kullanacağım, ancak herhangi bir sürüm kontrol hizmetini kullanabilirsiniz - eğer aynısını yapmayı seçerseniz. Bir depo başlatacağım.

 cd sm-blog git init

Siteyi yerel olarak çalıştırabilmemiz ve tarayıcıda gerçekten görebilmemiz için bir tema eklememiz gerekiyor, aksi takdirde tek göreceğiniz boş bir sayfa olacaktır.

Blogunuz İçin Bir Tema Seçme ve Yükleme

Hugo hakkında sevdiğim bir şey, arkasındaki topluluk ve topluluğun kullanması için temalar gönderen tüm geliştiriciler. Küçük işletme web sitelerinden portföylere, bloglardan seçim yapabileceğiniz çok çeşitli temalar var. Bir blog teması seçmek için theme.gohugo.io'nun blog bölümüne gidin. Sadeliği ve minimalizmi nedeniyle Cactus Plus adlı bir tema seçtim. Bu temayı yüklemek için, onu havuzumun bir alt modülü olarak eklemem gerekecek. Birçok tema, kullanıcılarına yüklemeler için alt modülleri kullanma talimatı verir, ancak durum böyle değilse, açıklamada sağlanan tema üreticisi tarafından verilen talimatları izlemeniz yeterlidir. Temayı /themes klasörüne ekleyeceğim.

 git submodule add -b master https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus

Blog klasörünün kökünde, oluşturulan bir dosya vardır, config.toml . Burası siteniz için ayarları belirlediğiniz yerdir. Oradaki temayı değiştirmemiz gerekecek. Tema adı, /themes klasöründe seçilen temanın klasör adına karşılık gelir. Bunlar şimdi config.toml dosyasının içeriğidir. Blogun başlığını da değiştirebilirsiniz.

 baseURL = "https://example.org/" languageCode = "en-us" title = "SM Blog" theme="hugo-theme-cactus-plus"

Artık blogu çalıştırabiliriz. İsim değişikliği dışında tam olarak tema gibi görünecek. Sunucuyu çalıştırdıktan sonra tarayıcınızda https://localhost:1313 adresine gidin.

 hugo server -D

Blogunuzu Kişiselleştirme

Kendi blogunuzu kurmanın bir yararı, onu her türlü şekilde beğeninize göre kişiselleştirmektir. Bunu Hugo ile yapmanın birincil yolu, seçtiğiniz temayı değiştirmektir. Birçok tema, config.tol aracılığıyla özelleştirme seçenekleri sunar. Tema oluşturucu genellikle bir seçenekler listesi ve bunların hepsinin ne anlama geldiğini tema sayfasındaki açıklamada sunar. Değilse, temanın /exampleSite klasörüne bakın ve bu klasördeki config.toml içeriğini config.toml dosyanıza kopyalayın. Örneğin:

 cp themes/hugo-theme-cactus-plus/exampleSite/config.toml .

Tüm temalar farklı olduğu için burada yaptığım değişiklikler temanız için geçerli olmayabilir, ancak umarım blogunuzla ne yapacağınız hakkında bir fikir edinebilirsiniz.

1. Avatar resmini ve blogun favicon'unu değiştireceğim. Resimler dahil tüm statik dosyalar /static klasörüne eklenmelidir. static içinde bir /images klasörü oluşturdum ve resimleri oraya ekledim.
2. Bloguma gelen trafiği izleyebilmek için Google Analytics ekleyeceğim.
3. Okuyucularımın gönderilerime yorum bırakabilmesi için Disqus'u etkinleştireceğim.
4. RSS'yi etkinleştireceğim.
5. Sosyal bağlantılarımı Twitter ve Github'a koyacağım.
6. Twitter kartını etkinleştireceğim.
7. Ana sayfadaki yazı başlıklarının altında özetleri etkinleştireceğim.

Yani benim config.toml'm şöyle görünecek:

 ### Site settings baseurl = "your_firebase_address" languageCode = "en" title = "SM Blog" theme = "hugo-theme-cactus-plus" googleAnalytics = "your_google_analytics_id" [params] # My information author = "Cat Lense" description = "blog about cats" bio = "cat photographer" twitter = "cats" copyright = "Cat Photographer" # Tools enableRSS = true enableDisqus = true disqusShortname = "your_disqus_short_name" enableSummary = true enableGoogleAnalytics = true enableTwitterCard = true [social] twitter = "https://twitter.com/cats" github = "https://github.com/cats"

İlk Gönderinizi Oluşturma

Hugo gönderileri indirimli olarak yazılır. Bu yüzden aşina olmanız gerekecek. Bir gönderi oluştururken, aslında Hugo'nun daha sonra HTML'ye dönüştüreceği bir işaretleme dosyası oluşturuyorsunuz. Gönderinizin başlığını alın, küçük harf yapın, boşlukları kısa çizgi ile değiştirin. Yazınızın adı bu olacak. Hugo dosya adını alır, kısa çizgileri boşluklarla değiştirir, büyük/küçük harfe dönüştürür ve ardından başlık olarak ayarlar. Dosyamı my-first-post.md olarak adlandıracağım . İlk gönderinizi oluşturmak için şunu çalıştırın:

 hugo new posts/my-first-post.md

Gönderi /content klasöründe oluşturulur. Bunlar dosyanın içeriğidir.

 --- title: "My First Post" date: 2020-03-18T15:59:53+03:00 draft: true ---

Bir gönderi, gönderinizi tanımlayan meta veriler olan ön konuyu içerir. Gönderilerinizi yazarken taslak olarak tutmak istiyorsanız, draft: true bırakın. Yazmayı bitirdikten sonra draft: false değiştirin, böylece gönderiler ana sayfada gösterilebilir. Ana sayfadaki gönderiyi özetlemek için ön konuya bir özet satırı ekleyeceğim.

Gönderinize Kaynak Ekleme

Gönderilerinize resim, video, ses dosyası vb. kaynaklar eklemek için /content/posts klasöründe, uzantı hariç, gönderinizle aynı ada sahip bir klasör oluşturun.

Örneğin, bu klasörü oluştururdum:

 mkdir content/posts/my-first-post

Ardından, tüm gönderi kaynaklarımı bu klasöre ekler ve kaynaklara uzun bir URL belirtmek zorunda kalmadan yalnızca dosya adıyla bağlantı kurardım. Örneğin, şöyle bir resim eklerdim:

 ![A cute cat](cute-cat.png)

Blogunuzun Kaynak Kodunu Barındırma

İlk gönderinizi yazmayı bitirdikten sonra, onu dağıtmadan önce yedeklemeniz önemlidir. Bundan önce, bir .gitignore dosyanız olduğundan emin olun ve buna /public klasörünü ekleyin. Ortak klasör, yeniden oluşturulabileceğinden yoksayılmalıdır.

Blogunuzun kaynak kodunu barındırmak için Github'da bir havuz oluşturun. Ardından uzak depoyu yerel olarak ayarlayın.

 git remote add origin [remote repository URL]

Son olarak, tüm değişikliklerinizi gerçekleştirin ve gerçekleştirin, ardından bunları uzak depoya itin.

 git add * git commit -m "Add my first post" git push origin master

Blogunuzu Firebase'e Dağıtma

Blogunuzu Firebase'e dağıtmadan önce Firebase'de bir proje oluşturmanız gerekir. Firebase Konsoluna gidin. Proje Ekle'ye tıklayın.

Projenizin adını girin.

Blogunuzda kullanmak istiyorsanız Google Analytics'i etkinleştirin.

Projeyi oluşturmayı bitirdikten sonra blogunuzun köküne dönün ve blogda bir Firebase projesi başlatın.

 firebase init

Bu komut çalıştığında sizden bazı bilgileri girmeniz istenecektir.

Ardından, blogu oluşturacağız. Bir /public klasörü oluşturulacak ve oluşturulan blogunuzu içerecektir.

 hugo

Bundan sonra, tek yapmamız gereken blogu dağıtmak.

 firebase deploy

Şimdi blog dağıtıldı. Çıktıda sağlanan barındırma URL'sinde kontrol edin.

Sonraki adımlar

Firebase'de barındırmanın tek dezavantajı, barındırılan projeniz için kullandığı URL'dir. Göze hoş görünmeyebilir ve hatırlaması zor olabilir. Bu yüzden bir alan adı satın almanızı ve blogunuz için ayarlamanızı öneririm.

Üçüncü taraf platformların hepsi kötü değildir. Yazınızla ilgilenebilecek ancak henüz blogunuzla karşılaşmamış tonlarca okuyucuları var. Çalışmanızı geniş bir kitlenin önüne çıkarmak için bu sitelere çapraz posta gönderebilirsiniz, ancak kendi blogunuza geri bağlantı vermeyi unutmayın. Bir arama motoru tarafından yinelenen içerik olarak görülmemesi ve sitenizin SEO'suna zarar vermemesi için, blogunuzdaki makalenizin bağlantısını standart bir URL olarak hangi platforma yayınlarsanız ekleyin. Medium, dev.to ve Hashnode gibi siteler standart URL'leri destekler.

Çözüm

Kendi teknik blogunuzda yazmak, bir yazılım geliştiricisi olarak kariyerinize çok büyük faydalar sağlayabilir ve becerilerinizi ve uzmanlığınızı geliştirmenize yardımcı olabilir. Bu eğitimin sizi bu yolculuğa başlattığını veya en azından kendi blogunuzu oluşturmaya teşvik ettiğini umuyorum.