Sıfırdan Hexo Blog Kurulumu: Basit Rehber (2024 Sürümü)

#Blog Kurulumu

O çirkin blog sitelerinin arayüzlerinden sıkılmadınız mı? Bitmek bilmeyen bildirimlerden gına mı geldi? Kendi blogunuzu kurmayı çoktan düşündünüz ama karmaşık rehberler ve baş ağrıtan kodlarla karşılaşınca vazgeçtiniz mi? O zaman tebrikler! Bu yazı, kendi blogunuzu adım adım, en basit ve anlaşılır şekilde kurmanız için size rehberlik edecek. Tek yapmanız gereken biraz sabırlı olmak ve adımları dikkatle takip etmek.

Hızlı, sade ve verimli bir blog çatısı olan Hexo, yeni başlayanlar için tam bir nimet. GitHub ise bizi ek sunucu kiralama ve dağıtma zahmetinden kurtarıyor. Bu nedenle, bu yazıda Hexo ve GitHub kullanarak bir blog kuracağız.

2018 yılında Sıfırdan Blog Kurulumu: Basit Rehber başlıklı bir yazı yazmıştım. Ancak eklentilerin güncellenmesi nedeniyle bazı detayların değiştirilmesi gerekti. Bu yüzden 2024 sürümü olarak bu basit rehberi yeniden sunuyorum.

Hazırlıklar

Hexo Statik Blogu Yerel Olarak Kurma

$ npm install -g hexo-cli
$ hexo init
$ npm install

Evet, blogun ana kısmı tamamlandı! Şimdi bir göz atalım. Şunu çalıştırın:

$ hexo server

Şimdi tarayıcınızı açın ve localhost:4000 adresini yazarak blogunuzun mevcut halini görebilirsiniz. Kısa bir heyecan yaşadıktan sonra, Ctrl + C tuşlarına basarak sonraki işlemlere devam edebilirsiniz.

Kişiselleştirme Ayarları (Başlangıç)

Tema Değiştirme

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g #veya hexo generate
hexo server

Site Ayarları

# Site
title: Bilinmeyen Dünya               // Blog adı
subtitle:
description:  Do something cool // Bir imza cümlesi
author: LulalaP                 // Yazar
language: tr               // Web sitesi dili
timezone:

Kenar Çubuğu Avatarı Ayarlama

avatar: 
    url: /uploads/avatar.jpg

Blog Sayfalarını Tamamlama

Menü Ekleme

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Kategoriler Sayfası Oluşturma

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Etiket Bulutu Sayfası Oluşturma

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

”Hakkımda” Sayfası Oluşturma

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Kenar Çubuğu Sosyal Medya Bağlantılarını Ayarlama

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Blogu GitHub ile Bağlama

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

Şimdi tarayıcınızı açın ve http://your-name.github.io adresini ziyaret edin. Tebrikler, blogunuz artık kurulmuş durumda!

Alan Adı Yönlendirme

Şu ana kadar blog kurulumu tamamen bitti ve GitHub alan adıyla erişilebilir durumda. Şimdi bu bloga kısa bir alan adı bağlamak her şeyi daha da mükemmel hale getirecektir.

Alan Adı Satın Alma

Alan Adı Çözümlemesi

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Alan adı çözümlemesini yapılandırdıktan sonra, blog dizinine gidin, source klasörü altında CNAME adında yeni bir dosya oluşturun (büyük harf olmasına ve uzantısı olmamasına dikkat edin), Not Defteri ile açıp satın aldığınız alan adını yazın, örneğin: www.philoli.com

hexo g
hexo d

Şimdi tarayıcınızı açın, alan adınızı yazın ve Enter tuşuna basın. Tebrikler, artık kendi bağımsız alan adına sahip bir blogunuz var.

Yeni Yazı Yayımlama

title Yazının başlığı
date Oluşturma tarihi (dosyanın oluşturulma tarihi)
updated Güncelleme tarihi (dosyanın değiştirilme tarihi)
comments Yorumları etkinleştirilsin mi? true
tags Etiketler
categories Kategoriler
permalink URL'deki ad (dosya adı)
hexo g
hexo d

Kişiselleştirme Ayarları (Gelişmiş)

Aşağıda bazı gelişmiş kişiselleştirme blog stil ayarları sunulmuştur. Yeni başlayanlar şimdilik bu bölümü atlayabilirler.

RSS Ekleme

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
rss: /atom.xml || fa fa-rss

Ana Sayfada Yazı Kısaltma

    <!--more-->

Yazılardaki Alıntı Metnini Ortala

{% centerquote %}
Alıntı metni
{% endcenterquote %}

{% centerquote %} Alıntı metni {% endcenterquote %}

Kod Bloğu Stilini Değiştirme

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Site Kurulum Tarihini Ayarlama

since: 2024

Yazı Bağlantı Stillerini İyileştirme

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Bloga Arka Plan Resmi Ekleme

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //Resim tam kaplamadığında tekrar edip etmeyeceği ve nasıl tekrar edeceği
    background-attachment:fixed;    //Resmin kaydırma ile birlikte hareket edip etmeyeceği
    background-size: cover;         //Kapsama
    background-position:50% 50%;    //Resim konumu
}

Blog İçerik Arka Planını Yarı Saydam Yapma


//Blog içeriğinin şeffaflık ayarı
//Yazı içeriğinin şeffaflık ayarı
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


//Kenar çubuğunun şeffaflık ayarı
.sidebar {
  opacity: 0.9;
}

//Menü çubuğunun şeffaflık ayarı
.header-inner {
  background: rgba(255,255,255,0.9);
}

//Arama kutusunun (local-search) şeffaflık ayarı
.popup {
  opacity: 0.9;
}

Satır İçi Kod Bloğu Stilini Optimize Etme

// Kod etiketi için güzelleştirme
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Web Sitesi Alt Bilgisine Ziyaretçi Sayısı Ekleme

# copyright etiketini bulun ve etiketin içine kodu ekleyin

<div class="copyright">
# ......Burada zaten bazı yapılandırmalar var
# Buraya yeni kodu ekleyin
</div>

# Eklendikten sonra şöyle görünür:
<div class="copyright">
  # ......Burada zaten bazı yapılandırmalar var
  # Buraya yeni kodu ekleyin
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Sorun yoksa yayımla
hexo d

Depoya README.md Dosyası Ekleme

Her projenin genellikle bir README.md dosyası bulunur, ancak Hexo ile depoya dağıtım yapıldığında, projedeki README.md dosyası üzerine yazılır. Bu nedenle, üzerine yazılmasını önlemek için yapılandırma dosyasını ayarlamak gerekir.

Hexo dizininin source kök dizini altına bir README.md dosyası ekleyin, site yapılandırma dosyası _config.yml’yi düzenleyin ve skip_render parametresinin değerini şöyle ayarlayın:

skip_render: README.md

Kaydedip çıkın. hexo d komutunu kullanarak blogu bir sonraki dağıttığınızda README.md dosyası işlenmeyecektir.

Bazı Sık Kullanılan Eklentiler

Kaynak Dosya Yedekleme

# Daha önce ayarladığınız blog deposu adresini ekleyin
git remote add https://github.com/your-name/your-name.github.io.git

# Mevcut değişiklikleri ekleyin ve kaydedin, bir not düşerek
git add .
git commit -m "Kaynak dosyaları güncellendi"

# Yeni bir dal oluşturun ve ona geçin
git checkout -b source

# Yerel source dalındaki tüm içeriği uzak depodaki source dalına gönderin
git push origin source:source

Farklı Bilgisayarlarda Blog Yazma

npm install -g hexo-cli
# Depoyu yerel olarak klonlayın
git clone https://github.com/your-name/your-name.github.io.git

# Eğer yerel olarak klonlandıysa, blogu her güncellemeden önce en son dal içeriğini çekmeniz gerekir
git pull origin

# İlgili dala geçin
git checkout source

# Hexo yapılandırması altındaki tüm eklentileri kurduktan sonra blog içeriğini güncellemeye ve düzenlemeye başlayabilirsiniz
npm install

# İçeriği değiştirdikten sonra hemen yedeklemeyi unutmayın (tek seferlik)
git add .
git commit -m "Blog güncellemesi xxx"
git push origin source:source

# En son blog içeriğini alan adı sitesine yayımlayın
hexo clean
hexo g  # Statik dosyaları oluştur
hexo s  # Blog efektini yerel olarak önizle
hexo d  # En son blog içeriğini yayımla

Sık Kullanılan Komutların Özeti

hexo g
# veya hexo generate, kaynak dosyalardan statik web sayfaları oluşturur
hexo d
# veya hexo deploy, GitHub Pages'e yayımlar
hexo s
# veya hexo server, yerel dağıtım testi yapar
hexo clean
# Statik web sayfası önbelleğini temizler, ardından hexo d ile yeniden oluşturur