İçerik
- 01. Kurulum
- 02. Yerel olarak servis yapın veya inşa edin
- 03. Başlangıç dosyalarını alın
- 04. Yapılandırma
- 05. Ön mesele
- 06. Sıvı etiketleri
- 07. Navigasyonunuzu oluşturun
- 08. Ana sayfayı oluşturun
- 09. Blog listesi
- 10. Blog ayrıntı sayfası
- 11. Oluşturun ve yayınlayın
Bu eğitim, statik site oluşturucuları duymuş ve bir site kullanarak kendi sitelerini oluşturmaya karar vermiş kişiler içindir. İşte size Jekyll kullanarak bir bloga nasıl başlayacağınızı göstereceğiz.
Temel Terminal bilgisi iyidir, ancak komutların tümü oldukça basit olduğu için takip edebilmelisiniz. GitHub Sayfalarındaki siteler, perde arkasında Jekyll tarafından desteklenmektedir, bu nedenle GitHub Sayfaları ile birlikte kullanıldığında, web sitenizi ücretsiz olarak barındırmak ve yönetmek için bir yol oluşturur (diğer seçenekler için en iyi web barındırma hizmetleri listemize bakın veya listemize bakın) farklı türde bir web sitesi oluşturucu istiyorsanız).
Bu eğitim, bir Mac'te olduğunuzu varsayar; Jekyll bir Ruby programı olduğundan, onu Windows üzerinde çalıştırmak mümkündür ancak resmi olarak desteklenmemektedir. Windows üzerinde takip ediyorsanız, Ruby kurulumuna yardım için buraya gelin.
Bu öğreticiyi tamamladıktan sonra, bir Jekyll blogu oluşturmuş olacaksınız ve özelliklerinin ve şablon dilinin kişisel bir blog oluşturabileceğini öğrenmiş olacaksınız. Bu, kendi sitenizi geliştirmek için harika bir başlangıç noktasıdır. Ve unutmayın, çok sayıda tasarım fikriniz veya medya dosyanız varsa, bunları en iyi bulut depolamada güvenli bir şekilde sakladığınızdan emin olun.
Bu eğitici için dosyaları bulun İşte.
- En iyi 10 statik site üreticisi
01. Kurulum
Bir Mac'te varsayılan olarak Ruby'nin yüklü olması gerekir, ancak yazarak kontrol edelim yakut-v Terminalinizde.
Artık sitede Jekyll'i çalıştırabiliriz, sitenizi oluşturmak istediğiniz dizinde olduğunuzdan emin olun ve basitçe şunu yazın: gem jekyll paketleyici yüklemek; Bilgisayarınız daha sonra gidip bir siteyi çalıştırmak için gereken tüm bağımlılıkları alacaktır.
02. Yerel olarak servis yapın veya inşa edin
Jekyll ile kullanacağınız iki ana komut vardır - servis ve inşa etmek. Sitenizi yerel olarak çalıştırmak için yazın jekyll servis komut satırınızda. Bu, http://127.0.0.1:4000 üzerinde değişikliklerinizi önizleyebileceğiniz bir sürümü çalıştıracaktır. Makinenizde gem ve diğer bağımlılıklar zaten kuruluysa, bağımlılık sürümlerindeki uyumsuzluk nedeniyle bu komut başarısız olabilir; bu durumda dene bundle exec jekyll hizmeti yerine. Aynı koşuyor ama kelime ile inşa etmek sadece siteyi derler.
03. Başlangıç dosyalarını alın
Size çalışmanız için bir temel sağlamak için bu noktada bu eğitimle birlikte verilen dosyaları kopyalayın. Bu bize bir ana sayfa, blog listesi, ayrıntı sayfası ve sitenin varlık yapısını verecektir.Sayfanızı http://127.0.0.1:4000 adresinde yenileyin ve şimdi oluşturabileceğimiz bazı temel sayfaların olduğunu göreceksiniz. Bir Jekyll sitesinin nasıl çalıştığına hızlı bir şekilde bakalım.
Bir Jekyll sitesi, takip etmesi kolay bir şekilde yapılandırılmıştır. Tüm koleksiyonlar (gönderi türleri), düzenler ve içerikler gibi kendi klasörlerinde tutulur. Bir '_site' klasörü fark edeceksiniz - bu, Jekyll'in bir jekyll inşa komut.
04. Yapılandırma
Metin düzenleyicinizde _config.yml dosyasını açın ve kendi ayrıntılarınızı ekleyin; Kontrol edilecek önemli bir alan, temel URL'nizi belirlemektir. Bu, sitenizin yüklediği klasördür. Yapılandırma dosyası, bir WordPress teması oluşturuyorsanız, wp-config dosyanızla birlikte Genel Seçenekleri kullanmaya benzer.
Başlıklar ve meta açıklamalar, e-postanız ve sosyal hesaplarınız gibi temel bilgileri ve ardından koleksiyonlar ve kullanılan eklentiler gibi sitenin derlemesi gereken tüm bilgileri kontrol edebilirsiniz. Neye ulaşmak istediğinize bağlı olarak, sayfalar için HTML ve Markdown karışımını kullanabilirsiniz. Ancak, ana sayfanız ve liste sayfalarınız gibi özel sayfalar genellikle HTML olurken, bir set şablonu kullanan gönderiler ve diğer genel sayfalar Markdown olacaktır.
05. Ön mesele
Ön konu, bir dosyanın üstündeki bir YAML pasajıdır. Jekyll, değişkenleri tutmak için kullanır. About.md dosyasına bakın ve başlığı, hangi düzeni kullanacağımızı, yazarı ve ilgili görselleri belirlediğimizi görebilirsiniz.
06. Sıvı etiketleri
Jekyll, nesneleri, etiketleri ve filtreleri kullanan bir şablon dili olan Liquid'i kullanır. Kullanıyoruz nesne çift parantez ile çevrili etiket {{ }} ön madde değişkenlerini ve mantık için bir küme ayracı ve yüzde işareti çıkarmak için {% %}.
07. Navigasyonunuzu oluşturun
Statik bir gezinme yerine, içeriği şablondan ayırmak için yapılandırma dosyalarının gücünü kullanıyoruz. "Data" klasöründeki gezinme öğelerini bir yapılandırma dosyası olarak tutacağız ve sonra bunların arasında navigation.html'de döngü yapacağız. Şablona geri dönmeden ileriye gitmek istediğimiz sayfaları ve bağlantıları girebiliriz. Bir gönderinin başlangıcında navigation.yml veya front material gibi yapılandırma dosyalarınızı düzenlerken boşluklara gerçekten dikkat ettiğinizden emin olun çünkü başıboş bir boşluk bir hataya neden olur.
Yapılandırma dosyası zaten ayarlanmış olduğundan, 'navigation.html' içerme dosyanıza aşağıdaki kodu girin:
{% site.data.navigation%} a href = "{{site.baseurl}} / {{item.link}}" {% if page.url == item.link%} {% endif%} içindeki öğe için > {{item.name}} / a> {% endfor%}
Gezinme yapılandırma dosyasına bakmak ve her giriş için bir bağlantı ve ad, temelde sadece bir for döngüsü oluşturmak için Liquid mantık etiketleri kullanıyoruz.
08. Ana sayfayı oluşturun
Ana sayfamızda en son blog gönderimizi bir kahraman olarak listeleyeceğiz ve ardından hakkında sayfamızdan bir bağlantıyla birlikte bir pasaj alacağız. Kahraman bloğuyla başlayalım. İndex.html dosyasını açın ve ardından aşağıdaki kodu ekleyin:
{% assign post = site.posts.first%} div style = "background: url ({post.thumbnail_image.large}) bottom center / cover no-repeat;"> h1> {{post.title}} / h1> {post.intro} a href = "{{post.url}}"> Gönderinin tamamını okuyun / a> / div>
İlk olarak en son gönderiyi atadığımızı ve ardından gönderinin ön kısmında ayarlanan küçük resme referans verdiğimizi göreceksiniz. Gönderi tanıtımı bir Sıvı filtresi kullanıyor Markdownify Markdown'u HTML'ye dönüştürmek için.
Bunu yerine getirerek, hakkında sayfasından da bir bilgi ekleyelim. Aşağıdakileri ekleyin:
div> {% site.pages sayfasındaki sayfa için%} {% if page.url == '/about.html'%} img src = "{{page.profile_image.small}}" alt = "Profie Picture" /> div> h2> a href = "{{page.url}}"> {{page.title}} / a> / h2> p> {{page.intro}} / p> / div> {% endif%} {% endfor%} / div>
Bu sefer bir kullanıyoruz için sitedeki sayfaları kontrol etmek için döngü yapın. Kullanıyoruz page.url hakkında sayfasını filtrelemek için ve ardından sayfaların bilgilerini çıkarmak için kahramana benzer bir şablonlama stili kullanırız.
09. Blog listesi
Oluşturulan ana sayfa ile blog listesi sayfasına geçebiliriz. Liste sayfasını oluşturmak için, bize "gönderiler" klasöründeki tüm dosyalar arasında döngü mantığını vermek için yine Liquid etiketleri kullanıyoruz.
Kahraman, ana sayfayla aynı süreci izlediği için sizin için yapılır. "Blog.html" deki kahramanın altına aşağıdakileri ekleyin:
div> h1> Geri kalanın en iyisi / h1> section> {site.posts ofset için% gönderimi: 1%} div> img src = "{{post.thumbnail_image.small}}" /> div> h3> { post.date} - {{post.title}} / h3> a href = "{{post.url}}"> Devamını Okuyun / a> / div> / div> {% endfor%} / section> / div>
Yine a kullanıyoruz için gönderi koleksiyonuna gitmek için döngü yapın. Ancak, kahramanın en son halini çoktan çıkardığımız için, bu döngüyü ikinci noktadan başlamak üzere dengeledik. Tarihi, seçtiğimiz bir biçime dönüştürmek için bir Sıvı filtresi kullanılır.
10. Blog ayrıntı sayfası
Artık gidecek kadar değil: neredeyse tüm temel unsurlara sahibiz. Ele alınması gereken önemli bir husus navigasyondur. Bir blog gönderisini okurken, gezinmek ve daha fazlasını okumak için bir yola ihtiyacınız var. Bir sayfa değişkeni kullanarak sitemize güzel bir sayfalandırma ekleyebiliriz. Layouts klasöründe post.html'yi açın ve aşağıdakileri ekleyin:
div> {% if page.previous%} div> h3> Önceki / h3> p> {{page.previous.title}} / p> p> a href = "{{site.baseurl}} {{page.previous .url}} "> Gönderiyi Oku / a> / p> / div> {% endif%} {% if page.next%} div> h3> Sıradaki / h3> p> {{page.next.title}} / p> p> a href = "{{site.baseurl}} {{page.next.url}}"> Yazıyı Oku / a> / p> / div> {% endif%} / div>
Kullanıyoruz page.previous ve page.next Tıklanacak bir gönderi olup olmadığını kontrol etmek için değişkenler. Varsa, bir blok çıkarabilir ve gönderinin başlığını ve bağlantısını ekleyebiliriz.
11. Oluşturun ve yayınlayın
GitHub Sayfaları, Sass dosyalarını bizim için oluşturur, yani çalıştırdığınızda jekyll inşa derlenen dosyalar _site klasöründe oluşturulur. Burada yudum dosyaları veya web paketi yok, sadece güzel yalın stiller! Hatta sitenin ana config.yml dosyasında bir ayar olarak Sass çıktısını küçültebilirsiniz. Bu dizinin içeriği, seçtiğiniz hosting'e aktarılabilir. Dikkat edilmesi gereken bir şey, GitHub Pages'ın aslında Jekyll'i desteklediğidir, böylece kaynak olarak ana şubenizi kullanarak bir site oluşturabilir ve barındırabilirsiniz. Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz.
Bu makale ilk olarak derginin 320. sayısında yayınlanmıştır. ağ, web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi. 320 numaralı sorunu buradan satın alın veya abone olun.
