• 1. 引言
  • 2. 购买服务器
  • 3. 选购域名
  • 4. 安装 nodejs
  • 5. 持久化服务
  • 6. nginx 配置
  • 7. 免费 HTTPS
  • 8. 免费 CDN
  • 9. 安装 Mongodb
  • 10. 安装redis
  • 11. 搭建 hexo 博客

    • 手把手教你搭建 Hexo 博客

    2025-01-13
    JavaScript
    318

    简介

    Hexo 是一个基于 Node.js 的静态博客框架，以其快速、简洁和高效著称。它支持 Markdown 语法，拥有丰富的主题和插件，非常适合开发者快速搭建个人博客。本文将介绍如何从零开始搭建 Hexo 博客，及相关的配置。

    hexo.png

    本地搭建

    1. 本地搭建 Hexo 博客

    • 全局安装 hexo 脚手架
    npm install -g hexo-cli
    • 新建文件夹 blog，利用脚手架生成博客工程
    mkdir blog
cd blog
hexo init
    • 安装依赖，运行项目
    npm i
hexo server

    之后，访问 localhost:4000 就能看到我们的博客。

    到目前为止，我们的简易博客就搭建完成了，但是整个博客功能比较简单，我们再来了解一下其他的个性化配置。

    2. 个性化配置

    2.1 更换主题

    Hexo 主题列表可以在官方查找 https://hexo.io/themes/

    也可以在 github 上查找 https://github.com/search?q=hexo-theme

    推荐几个优秀主题

    主题 github地址 简介 github star（25.1）
    NexT https://github.com/theme-next/hexo-theme-next NexT 是 Hexo 最受欢迎的主题之一，设计简洁且功能强大 8.2k
    Butterfly https://github.com/jerryc127/hexo-theme-butterfly Butterfly 是一个优雅且高度可定制的主题，适合个人博客 7.4k
    Matery https://github.com/blinkfox/hexo-theme-matery Matery 是一个 Material Design 风格的主题，适合技术博客 5.3k
    Yilia https://github.com/litten/hexo-theme-yilia Yilia 是一个简洁且响应式的主题，适合写作和阅读 8.4k
    Icarus https://github.com/ppoffice/hexo-theme-icarus Icarus 是一个现代化的主题，支持多种插件和自定义配置 6.4k

    安装主题

    以 NexT 主题为例，安装步骤如下：

    1. 下载主题：

    在博客根目录下运行：

    git clone https://github.com/theme-next/hexo-theme-next themes/next
    1. 启用主题：

    编辑博客根目录下的 _config.yml 文件，修改 theme 字段：

    theme: next
    1. 配置主题：

    根据需要编辑主题配置文件（通常是 themes/next/_config.yml）。NexT提供了三种不同的外观，可以挑选一个自己喜欢的，然后去掉其中一个的 # 号

    # Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
    1. 重新生成并部署：
    # 清除缓存
hexo clean
# 生成主题静态文件
hexo generate
# 启动服务
hexo server

    2.2 更新博客基础信息

    博客基础信息可以在根目录的 _config.yml 文件配置，以本博客为例，更改如下

    # Site
title: webfem
subtitle: ''
description: 做有价值的博客
keywords: 前端
author: space
language: zh-Hans
timezone: ''

    2.3 首页文章截断

    1. 每次写文章正文时，只需要在文章 .md 中需要截断的地方增加：
    <!--more-->
    1. 打开 /themes/next/_config.yml，修改 scroll_to_more 这个选项设置为 false 。

    替换hexo的next主题.png

    2.4 修改博客 icon

    浏览器左上角icon修改

    1. 在 /source 目录下新建一个名为 uploads 的文件夹，将头像图片（如 favicon.png）放入该文件夹中。

    2. 打开主题的配置文件（通常是 /themes/next/_config.yml），找到 favicon 相关字段，修改为你的图标文件路径。例如：

    favicon:
  small: /uploads/favicon.png  # 小图标（16x16）
  medium: /uploads/favicon.png  # 中图标（32x32）
  apple_touch_icon: /uploads/favicon.png  # Apple 设备图标
  safari_pinned_tab: /uploads/favicon.png  # Safari 固定标签页图标

    3. 修改导航

    页面的导航需要到具体的主题目录去修改，以next为例，需要到 /themes/next/_config.yml文件，将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

    修改之后，我们还没有这个页面，需要手动加几个页面

    3.1 创建分类页面

    1. 使用以下命令新建一个名为 categories 的页面：
    hexo new page categories
    1. 编辑刚创建的页面文件 /source/categories/index.md，将页面类型设置为 categories。这样，主题会自动在该页面显示所有分类。注意保留冒号后的空格。
    ---
title: Categories
date: 2024-04-10 23:40:31
type: "categories"
comments: false
---

    3.2 创建标签云页面

    1. 使用以下命令新建一个名为 tags 的页面：
    hexo new page "tags"
    1. 编辑刚创建的页面文件，将页面类型设置为 tags。这样，主题会自动在该页面显示标签云。
    ---
title: Tags
date: 2024-04-10 23:41:25
type: "tags"
comments: false
---

    3.3 创建“关于我”页面

    1. 使用以下命令新建一个名为 about 的页面：
    hexo new page "about"
    1. 编辑刚创建的页面文件，可以在正文部分使用 Markdown 格式写下你的个人信息。
    ---
title: About
date: 2024-04-10 23:41:56
comments: false
---

这是我博客的内容，欢迎阅读！

    修改之后效果如下：

    hexo-category.png

    4. 创建并编辑文章

    1. 在博客根目录下执行以下命令，创建一篇新文章：
    hexo new "我的第一篇文章"

    这会在 source/_posts 文件夹内生成一个 .md 文件。

    1. 编辑该文件，修改起始字段如下：
    ---
title: 文章的标题
date: 创建日期 （文件的创建日期）
updated: 修改日期 （文件的修改日期）
comments: true  # 是否开启评论
tags:
  - 标签1
  - 标签2
categories:
  - 分类1
permalink: url中的名字（文件名）
---
    1. 在 --- 下方编写正文内容，遵循 Markdown 语法规则。
    1. 生成静态资源
    hexo g

    将 hello-word.md 的内容复制过来，效果如下

    hexo-blog.png

    5. 设置侧边栏

    默认侧边栏非常简陋，需要再额外配置一下

    5.1 设置侧边栏头像

    1. 在 /source 目录下新建一个名为 uploads 的文件夹，将头像图片（如 avatar.jpg）放入该文件夹中。

    2. 打开主题配置文件 /themes/next/_config.yml，找到 avatar 字段，并修改为以下内容：

    avatar:
  url: /uploads/avatar.jpg  # 头像图片路径
  rounded: true  # 是否显示为圆形头像

    5.2 设置侧边栏社交链接

    1. 编辑站点的 _config.yml 文件，找到 social 字段，添加社交站点名称与链接地址。格式为 显示名称: 链接地址 || 图标类名，例如：
    # Social links
social:
  GitHub: https://github.com/your-user-name || fab fa-github
  E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  Twitter: https://x.com/your-user-name || fab fa-twitter
  # Weibo: https://weibo.com/yourname || fab fa-weibo
  # Google: https://plus.google.com/yourname || fab fa-google
    1. 打开主题配置文件 /themes/next/_config.yml，在 social_icons 字段下添加社交站点名称与对应的图标类名。enable 选项用于控制是否显示图标，设置为 false 可以隐藏图标。例如：
    social_icons:
  enable: true  # 是否显示图标
  GitHub: github  # GitHub 图标
  Twitter: twitter  # Twitter 图标

    5.3 设置侧边栏友情链接

    1. 打开站点的 _config.yml 文件，找到 links 字段，添加友情链接的名称与地址。格式为 显示名称: 链接地址，例如：
    # 友情链接
links:
  webfem: https://webfem.com  # 示例链接
  Hexo: https://hexo.io  # Hexo 官网
  GitHub: https://github.com  # GitHub 官网
    1. 打开主题配置文件 /themes/next/_config.yml，找到 links_icon 字段，设置是否显示友情链接的图标。例如：
    links_icon: true  # 是否显示友情链接图标
    1. 如果需要自定义友情链接的图标，可以在 links_settings 字段下添加对应的图标类名。例如：
    # Blog rolls
links_settings:
  icon: fa fa-link
  title: 友情链接
  # Available values: block | inline
  layout: block

    hexo-blog-total.png

    服务端部署

    1. 将本地代码发布到服务器上，推荐通过github发布

    2. 利用 PM2 执行如下代码即可

    pm2 start "hexo server" --name "hexo-blog"

    后续更新文章，需要在本地写完之后，再推送到服务器

    总结

    至此，Hexo 的搭建、配置以及部署已全部完成，后续持续更新

    原文地址：https://webfem.com/post/hexo，转载请注明出处

    相关推荐

    Copyright © 2025 | 友情链接

    CDN 存储服务由 提供