从零开始搭建 Hexo 博客简明教程（2024版）

#博客搭建

你是不是早就厌倦了那些博客网站毫无美感的界面，是不是受够了无休无止的网站推送，是不是早就想建立一个属于自己的博客，却止步于复杂的教程以及一系列令人头疼的代码？那么恭喜你，这篇文章就是想以最浅显易懂的方式手把手教你搭建属于自己的博客，你只需要一点耐心，一步步跟着做。

Hexo 作为一个快速、简洁且高效的博客框架，简直是小白们的福音，而 GitHub 又免去了我们额外租用并部署服务器的麻烦。因此本文将利用 Hexo 及 GitHub 搭建博客。

曾经我在 2018 年写过一篇 从零开始搭建博客简明教程,因为插件的更新，有一些细节需要改动，因此重新推出 2024 版的简明教程。

准备工作

本地搭建 hexo 静态博客

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

没错，博客的主体部分到此已经完成了，来看看效果吧。运行：

$ hexo server

这时候打开浏览器，输入 localhost:4000 就可以看到博客目前的样子了。小小激动一下，然后按 Ctrl + C 就可以继续下面的操作了。

个性化设置（初步）

更换主题

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

站点配置

# Site
title: 未知的世界                //博客名称
subtitle:
description:  Do something cool //一句签名
author: LulalaP                 //作者
language: zh-Hans               //网站语言
timezone:

设置侧边栏头像

avatar: 
    url: /uploads/avatar.jpg

完善博客页面

添加菜单

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

创建分类页面

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

创建标签云界面

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

创建”关于我”页面

$ 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:yourname@gmail.com || 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

将博客与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

此时，打开浏览器，访问 http://your-name.github.io ，恭喜你，到此为止你的博客已经建设完毕了。

绑定域名

到目前为止博客已经全部搭建完成，也能通过 GitHub 的域名访问，这时候再用一个短域名绑定到这个博客上就更完美了。

域名购买

域名解析

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

配置完域名解析后，进入博客目录，在 source 目录下新建一个命名为 CNAME 的文件(注意要大写，没有后缀)，用记事本打开编辑，写入购买好的域名，如：www.philoli.com

hexo g
hexo d

现在打开浏览器，输入域名，回车，恭喜你已经拥有了一个属于自己独立域名的博客。

发布新文章

title 文章的标题
date 创建日期 （文件的创建日期 ）
updated 修改日期 （ 文件的修改日期）
comments 是否开启评论 true
tags 标签
categories 分类
permalink url中的名字（文件名）
hexo g
hexo d

个性化设置（进阶）

下面提供一些进阶的个性化博客样式设置，新手可先跳过。

添加 RSS

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

首页文章截断

    <!--more-->

文章内的引用文字居中

{% centerquote %}
引用正文
{% endcenterquote %}

{% centerquote %} 引用正文 {% endcenterquote %}

修改代码块样式

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:

设定站点建立时间

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

给博客增加背景图

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   //图片无法铺满时，是否重复以及重复方式
    background-attachment:fixed;    //图片是否跟随滚动
    background-size: cover;         //覆盖
    background-position:50% 50%;    //图片位置
}

博客内容背景设置半透明


//博客内容透明化
//文章内容的透明度设置
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;
  }
}


//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

优化行内代码块的样式

// 针对Code代码标签的美化
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

给网站底部增加访问者数量

# 找到 copyright 这一标签栏，然后在标签内部添加代码

<div class="copyright">
# ......这里已经有了一些配置
# 在这里添加新的代码
</div>

# 添加后是这样：
<div class="copyright">
  # ......这里已经有了一些配置
  # 在这里添加新的代码
  {%- 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
# 确认没问题后发布
hexo d

给仓库添加 README.md 文件

每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下的 README.md 文件会被覆盖，所以需要设置配置文件避免覆盖。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为

skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的时候就不会渲染 README.md 这个文件了。

几个常用插件

源文件备份

# 添加前面设置好的博客仓库地址
git remote add https://github.com/your-name/your-name.github.io.git

# 添加并保存当前改动，并记录备注
git add .
git commit -m "源文件更新"

# 建立并切换到新的分支
git checkout -b source

# 将本地 source 分支的全部内容推送到远端仓库的 source 分支
git push origin source:source

用不同的电脑写博客

npm install -g hexo-cli
# 克隆仓库到本地
git clone https://github.com/your-name/your-name.github.io.git

# 如果本地已经克隆，每次更新博客前都需要拉取最新分支内容
git pull origin

# 切换到对应分支
git checkout source

# 安装 hexo 配置下的全部插件后可以开始更新编辑博客内容
npm install

# 修改内容后记得及时备份一条龙
git add .
git commit -m "博客更新xxx"
git push origin source:source

# 发布推送最新博客内容到域名站点
hexo clean
hexo g  # 生成静态文件
hexo s  # 本地预览博客效果
hexo d  # 发布最新博客内容

几个常用命令汇总

hexo g
#或 hexo generate，根据源文件生成静态网页
hexo d
#或 hexo deploy，发布推送到 GitHub Pages
hexo s
#或 hexo server，本地部署测试
hexo clean
# 清空静态网页 cache，然后 hexo d 重新生成