A Concise Guide to Building a Hexo Blog from Scratch (2024 Edition)

#Blog Setup

Are you fed up with the uninspired interfaces of many blog sites? Tired of the incessant notifications? Have you long wanted to create your own blog but felt intimidated by complex tutorials and a daunting array of code? If so, congratulations! This article is designed to guide you step-by-step through building your very own blog, using the simplest and most accessible methods. All you need is a little patience, and to follow along.

Hexo, a fast, clean, and efficient blog framework, is truly a godsend for beginners. Coupled with GitHub, which saves us the hassle of renting and deploying separate servers, it makes for an ideal setup. This guide will walk you through building your blog using Hexo and GitHub.

I previously published “A Concise Guide to Building a Blog from Scratch” in 2018. However, due to various plugin updates, some details now require revision. That’s why I’m excited to re-introduce this updated 2024 edition of the concise tutorial.

Preparation

Setting Up Your Hexo Static Blog Locally

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

That’s it! The core of your blog is now complete. Let’s take a look. Run:

$ hexo server

Now, open your web browser and navigate to localhost:4000. You’ll see your blog in its current state. Enjoy this exciting moment, then press Ctrl + C in your terminal to proceed with the following steps.

Initial Personalization

Changing Themes

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

Site Configuration

# Site
title: Unknown World                // Blog name
subtitle:
description:  Do something cool // A tagline
author: LulalaP                 // Author
language: en               // Website language
timezone:

Setting Up Your Sidebar Avatar

avatar:
    url: /uploads/avatar.jpg

Enhancing Blog Pages

Adding Menu Items

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

Creating a Categories Page

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

Creating a Tag Cloud Page

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

Creating an “About Me” Page

$ 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

Connecting Your Blog with 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

At this point, open your browser and navigate to http://your-name.github.io. Congratulations, your blog is now live and fully set up!

Binding a Custom Domain

Your blog is now fully set up and accessible via its GitHub domain. To truly perfect it, let’s bind a custom, shorter domain name to it.

Domain Purchase

Domain Resolution

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

hexo g
hexo d

Now, open your browser, type in your domain name, and hit Enter. Congratulations, you now own a blog with its very own custom domain!

Publishing New Articles

title The title of the article
date Creation date (file creation date)
updated Modification date (file modification date)
comments Whether to enable comments true
tags Tags
categories Categories
permalink Name in URL (filename)
hexo g
hexo d

Advanced Personalization

Below, you’ll find some advanced settings to further personalize your blog’s style. Beginners may choose to skip this section for now.

Adding RSS

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

Truncating Articles on the Homepage

    <!--more-->

Centering Quoted Text in Articles

{% centerquote %}
Quoted text
{% endcenterquote %}

{% centerquote %} Quoted text {% endcenterquote %}

Modifying Code Block Style

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:

Setting Site Creation Time

since: 2024

Improving Article Link Style

// 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;
  }
}

Adding a Background Image to Your Blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Whether to repeat and how if the image doesn't fill the space
    background-attachment:fixed;    // Whether the image scrolls with the content
    background-size: cover;         // Cover the entire area
    background-position:50% 50%;    // Image position
}

Setting Blog Content Background to Semi-Transparent


// Blog content transparency
// Settings for article content opacity
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;
  }
}


// Settings for sidebar opacity
.sidebar {
  opacity: 0.9;
}

// Settings for menu bar opacity
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Settings for search box (local-search) opacity
.popup {
  opacity: 0.9;
}

Optimizing Inline Code Block Style

// Styling for inline code tags
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}
# Locate the copyright tag and add the code inside it

<div class="copyright">
# ......some configurations are already here
# Add new code here
</div>

# After adding, it will look like this:
<div class="copyright">
  # ......some configurations are already here
  # Add new code here
  {%- 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
# Publish after confirming everything is okay
hexo d

Adding a README.md File to the Repository

skip_render: README.md

Save and exit. The next time you deploy your blog with the hexo d command, the README.md file will not be rendered.

Several Useful Plugins

Source File Backup

# Add the blog repository address you configured earlier
git remote add origin https://github.com/your-name/your-name.github.io.git

# Add and save current changes, then record a commit message
git add .
git commit -m "Source files updated"

# Create and switch to a new branch
git checkout -b source

# Push all content from the local 'source' branch to the remote 'source' branch
git push origin source:source

Writing Blog Posts from Different Computers

npm install -g hexo-cli
# Clone the repository to your local machine
git clone https://github.com/your-name/your-name.github.io.git

# If you've already cloned it locally, always pull the latest branch content before updating your blog
git pull origin

# Switch to the correct branch
git checkout source

# After installing all plugins configured for Hexo, you can start updating and editing your blog content
npm install

# After modifying content, remember to perform a full backup promptly
git add .
git commit -m "Blog update: xxx"
git push origin source:source

# Publish and push the latest blog content to your domain site
hexo clean
hexo g  # Generate static files
hexo s  # Preview blog locally
hexo d  # Publish latest blog content

Summary of Common Commands

hexo g
# or hexo generate, generates static pages from source files
hexo d
# or hexo deploy, publishes and pushes to GitHub Pages
hexo s
# or hexo server, deploys locally for testing
hexo clean
# Clears the static page cache, then hexo d regenerates