← Blog

hexo建站教学(1)

Wei Li约 3 分钟阅读
GitHub建站教学hexo
文章目录

从零开始：使用 Hexo 搭建并部署个人博客到 GitHub

本篇博客将详细介绍如何使用 Hexo 搭建个人博客，并将其部署到 GitHub 上，实现免费且高效的个人网站托管。我们将从环境准备开始，逐步介绍 Hexo 的安装、配置、内容创作以及最终的部署过程。

1. 环境准备

在开始之前，请确保你的系统已经安装了以下工具：

  • Node.js 和 npm：Hexo 是基于 Node.js 的静态网站生成器，因此需要先安装 Node.js 和 npm（Node.js 自带 npm）。你可以通过以下命令检查是否已安装：

    1
    2
    node -v
    npm -v

如果未安装，可以从 Node.js 官方网站 下载并安装。

  • Git：用于将代码推送到 GitHub。你可以从 Git 官方网站 下载并安装。

2. 安装 Hexo

安装 Hexo 非常简单，只需使用 npm 全局安装即可：

1
npm install -g hexo-cli

安装完成后，可以通过以下命令验证是否安装成功：

1
hexo -v

注意：如果无法运行，可以在所有涉及到 ” hexo“ 的命令之前加上 ”npx“ ，例如：

1
npx hexo -v

3. 创建 Hexo 项目

在你希望存放博客的目录下，运行以下命令创建一个新的 Hexo 项目：

1
2
hexo init myblog
cd myblog

Hexo 会自动安装项目所需的依赖包：

1
npm install

4. 配置 Hexo

Hexo 的配置文件位于项目根目录下的 _config.yml 文件中。我们需要对其进行一些基本配置，例如站点名称、作者、描述等：

1
2
3
4
5
6
title: My Blog
subtitle: A Personal Blog Powered by Hexo
description: This is my personal blog where I share my thoughts and experiences.
author: Your Name
language: en
timezone: Asia/Shanghai

5. 选择主题

Hexo 支持多种主题，你可以根据自己的喜好选择。这里我们以官方推荐的 NexT 主题为例：

  1. 安装主题：

    1
    git clone https://github.com/theme-next/hexo-theme-next.git themes/next

  2. 在 _config.yml 中设置主题：

    1
    theme: next

  3. 安装主题依赖：

    1
    2
    3
    cd themes/next
    npm install
    cd ../..

6. 创建内容

Hexo 使用 Markdown 编写内容。你可以通过以下命令创建一篇新文章：

1
hexo new post "My First Post"

这将在 source/_posts 目录下生成一篇名为 my-first-post.md 的文章。编辑该文件，添加你的内容：

1
2
3
4
5
6
7
8
9
---
title: My First Post
date: 2025-02-16 23:16:13
tags: [Hexo, Blog]
---

# Welcome to My Blog

This is my first post using Hexo. I'm excited to start sharing my thoughts and experiences here.

7. 本地预览

在推送代码到 GitHub 之前，可以使用 Hexo 的服务器功能进行本地预览：

1
hexo server

打开浏览器，访问 http://localhost:4000，即可看到你的博客。

8. 部署到 GitHub

  1. 创建 GitHub 仓库：登录你的 GitHub 账号，创建一个新的仓库，例如 yourusername.github.io。

  2. 配置部署：在 _config.yml 中添加部署配置：

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/yourusername/yourusername.github.io.git
      branch: main

  3. 生成静态文件并部署：

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

    如果一切顺利，Hexo 会将生成的静态文件推送到你的 GitHub 仓库。

9. 访问博客

部署完成后，你的博客将可以通过 https://yourusername.github.io 访问。

10. 后续操作

  • 更新内容：每次更新文章或修改配置后，运行 hexo clean、hexo generate 和 hexo deploy 即可更新博客。
  • 自定义主题：你可以根据 NexT 主题的文档，进一步自定义博客的外观和功能。

总结

通过 Hexo 和 GitHub，你可以轻松搭建一个属于自己的个人博客，展示你的技术文章或个人作品。希望这篇博客对你有所帮助，祝你建站愉快！

附录