Isang Simpleng Gabay sa Paggawa ng Hexo Blog Mula sa Simula (2024 Edition)

#Pagbuo ng Blog

Hindi ka ba napapagod na sa mga walang kadesign-design na interface ng mga blog website? Sawa ka na ba sa walang katapusang notipikasyon mula sa mga website? Matagal mo nang gustong gumawa ng sarili mong blog, pero napatigil ka dahil sa kumplikadong mga gabay at nakakapanakit-ulong mga code? Kung ganoon, binabati kita! Ang artikulong ito ang magtuturo sa’yo nang hakbang-hakbang, sa pinakamadali at pinakamalinaw na paraan, kung paano itayo ang sarili mong blog. Kailangan mo lang ng kaunting pasensya at sundan ang bawat hakbang.

Ang Hexo, bilang isang mabilis, malinis, at mahusay na framework para sa blog, ay talagang isang biyaya para sa mga baguhan. Dagdag pa rito, tinatanggal ng GitHub ang abala ng pagrenta at pag-deploy ng server. Kaya naman, gagamitin ng gabay na ito ang Hexo at GitHub para itayo ang iyong blog.

Noong 2018, nakapagsulat ako ng isang Simpleng Gabay sa Pagbuo ng Blog Mula sa Simula. Dahil sa pag-update ng mga plugin, may ilang detalye na kailangang baguhin, kaya muli kong inilabas ang 2024 na bersyon ng simpleng gabay na ito.

Mga Kailangan sa Paghahanda

Lokal na Pagtatayo ng Hexo Static Blog

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

Tama, kumpleto na ang pangunahing bahagi ng iyong blog! Tingnan natin ang resulta. Patakbuhin:

$ hexo server

Sa puntong ito, buksan ang iyong browser, i-type ang localhost:4000 at makikita mo na ang kasalukuyang itsura ng iyong blog. Konting kilig muna, pagkatapos ay pindutin ang Ctrl + C para ipagpatuloy ang susunod na hakbang.

Paunang Pag-customize

Pagpapalit ng Tema

$ 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 #o hexo generate
hexo server

Konpigurasyon ng Site

# Site
title: Di-kilalang Mundo                //Pangalan ng Blog
subtitle:
description:  Do something cool //Isang Slogan
author: LulalaP                 //May-akda
language: zh-Hans               //Wika ng Website
timezone:

Pagtatakda ng Avatar sa Sidebar

avatar: 
    url: /uploads/avatar.jpg

Pagkumpleto ng Pahina ng Blog

Pagdaragdag ng Menu

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

Paglikha ng Pahina ng Kategorya

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

Paglikha ng Tag Cloud Interface

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

Paglikha ng “Tungkol sa Akin” na Pahina

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---
# 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

Pag-ugnay ng Blog sa GitHub

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

Sa puntong ito, buksan ang iyong browser at bisitahin ang http://your-name.github.io. Binabati kita, tapos na ang pagtatayo ng iyong blog!

Pag-ugnay ng Domain

Sa ngayon, kumpleto na ang pagtatayo ng blog at maaari na itong i-access sa pamamagitan ng domain ng GitHub. Ngayon, mas magiging perpekto ito kung mag-uugnay ka ng isang mas maikling domain sa blog na ito.

Pagbili ng Domain

Pag-resolve ng Domain

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Pagkatapos ma-configure ang domain resolution, pumunta sa directory ng blog. Sa loob ng source directory, gumawa ng bagong file na pinangalanang CNAME (tandaan na dapat malalaking titik at walang extension). Buksan ito gamit ang Notepad at isulat ang binili mong domain, halimbawa: www.philoli.com

hexo g
hexo d

Ngayon, buksan ang iyong browser, i-type ang domain, at pindutin ang Enter. Binabati kita, mayroon ka nang sarili mong blog na may independent domain!

Pag-publish ng Bagong Artikulo

title Pamagat ng Artikulo
date Petsa ng Paglikha (Petsa ng paggawa ng file)
updated Petsa ng Pagbabago (Petsa ng pagbabago ng file)
comments I-enable ang Komento true
tags Mga Tag
categories Mga Kategorya
permalink Pangalan sa URL (Filename)
hexo g
hexo d

Advanced na Pag-customize

Narito ang ilang advanced na setting para sa pag-customize ng estilo ng blog. Maaaring laktawan muna ito ng mga baguhan.

Pagdaragdag ng RSS

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

Pagputol ng Artikulo sa Homepage

    <!--more-->

Pag-sentro ng Naka-quote na Teksto sa Artikulo

{% centerquote %}
Naka-quote na Teksto
{% endcenterquote %}

{% centerquote %} Naka-quote na Teksto {% endcenterquote %}

Pagbabago ng Estilo ng Code Block

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:

Pagtatakda ng Petsa ng Paglikha ng Site

since: 2024
// 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;
  }
}

Pagdaragdag ng Background Image sa Blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //kung hindi mapuno ang larawan, ulitin o hindi
    background-attachment:fixed;    //sumusunod ba ang larawan sa pag-scroll
    background-size: cover;         //sakop
    background-position:50% 50%;    //posisyon ng larawan
}

Pagtatakda ng Semi-Transparent na Background para sa Nilalaman ng Blog


// Pagiging transparent ng nilalaman ng blog
// Pagtatakda ng transparency ng nilalaman ng artikulo
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;
  }
}


// Pagtatakda ng transparency ng sidebar
.sidebar {
  opacity: 0.9;
}

// Pagtatakda ng transparency ng menu bar
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Pagtatakda ng transparency ng search box (local-search)
.popup {
  opacity: 0.9;
}

Pag-optimize ng Estilo ng Inline Code Block

// Para sa pagpapaganda ng Code tag
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Pagdaragdag ng Bilang ng Bisita sa Ibaba ng Website

# Hanapin ang tag ng copyright, at pagkatapos ay idagdag ang code sa loob ng tag.

<div class="copyright">
# ......Mayroon na itong ilang configuration.
# Idagdag ang bagong code dito.
</div>

# Ganito ang magiging itsura pagkatapos idinagdag:
<div class="copyright">
  # ......Mayroon na itong ilang configuration.
  # Idagdag ang bagong code dito.
  {%- 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
# Kung walang problema, i-publish.
hexo d

Pagdaragdag ng README.md File sa Repository

Karaniwan, bawat proyekto ay may README.md file, ngunit kapag ginamit ang Hexo para i-deploy sa repository, mabubura ang README.md file sa ilalim ng proyekto. Kaya, kailangang i-configure ang settings para maiwasan ito.

Sa root directory ng source sa ilalim ng Hexo directory, magdagdag ng README.md file. Baguhin ang site configuration file na _config.yml, at itakda ang halaga ng parameter na skip_render sa:

skip_render: README.md

I-save at lumabas. Sa susunod na i-deploy mo ang blog gamit ang hexo d command, hindi na ire-render ang README.md file na ito.

Ilang Madalas Gamiting Plugin

Backup ng Source Files

# Idagdag ang address ng repository ng blog na na-set up na kanina.
git remote add https://github.com/your-name/your-name.github.io.git

# Idagdag at i-save ang kasalukuyang mga pagbabago, at maglagay ng mensahe.
git add .
git commit -m "源文件更新"

# Gumawa at lumipat sa bagong branch.
git checkout -b source

# I-push ang lahat ng nilalaman ng local source branch sa source branch ng remote repository.
git push origin source:source

Pagsusulat ng Blog Gamit ang Iba’t Ibang Kompyuter

npm install -g hexo-cli
# I-clone ang repository sa local.
git clone https://github.com/your-name/your-name.github.io.git

# Kung na-clone na sa local, kailangan mong i-pull ang pinakabagong nilalaman ng branch bago mag-update ng blog.
git pull origin

# Lumipat sa kaukulang branch.
git checkout source

# Pagkatapos i-install ang lahat ng plugin sa ilalim ng Hexo configuration, maaari nang simulan ang pag-update at pag-edit ng nilalaman ng blog.
npm install

# Pagkatapos baguhin ang nilalaman, tandaan na kaagad i-backup ang lahat ng kailangan.
git add .
git commit -m "博客更新xxx"
git push origin source:source

# I-publish at i-push ang pinakabagong nilalaman ng blog sa domain site.
hexo clean
hexo g  # I-generate ang mga static file
hexo s  # Lokal na i-preview ang epekto ng blog
hexo d  # I-publish ang pinakabagong nilalaman ng blog

Buod ng Ilang Madalas Gamiting Command

hexo g
#o hexo generate, para makagawa ng static webpages mula sa source files.
hexo d
#o hexo deploy, para i-publish at i-push sa GitHub Pages.
hexo s
#o hexo server, para sa lokal na deployment testing.
hexo clean
# I-clear ang cache ng static webpages, pagkatapos ay i-hexo d para muling i-generate.