2025-03-18发表2025-03-18更新博客教程 / 网站建设8 分钟读完 (大约1173个字)

用hexo+icarus搭建个人博客

如何用Hexo+Icarus建立一个个人网站

前置准备

在开始建立个人网站前，需要安装以下工具：

Node.js 和 npm
- 下载地址：Node.js官网
- 安装后，在终端运行以下命令验证安装成功：
  1
  2
  node -v
  npm -v
Git
- 下载地址：Git官网
- 安装后，在终端运行以下命令验证安装成功：
  1
  git --version
GitHub账号
- 如果你打算部署到GitHub Pages，需要一个GitHub账号
- 注册地址：GitHub

安装Hexo

全局安装Hexo-CLI
1
npm install -g hexo-cli

创建Hexo项目

1
2
3

hexo init my-blog
cd my-blog
npm install

安装必要的插件

1 2	npm install hexo-renderer-inferno --save npm install hexo-deployer-git --save

安装Icarus主题

安装Icarus主题
1
npm install hexo-theme-icarus --save
启用Icarus主题
- 在根目录下的 _config.yml中修改主题设置：
  1
  theme: icarus
- 或者使用以下命令自动创建主题配置文件：
  1
  hexo config theme icarus

个性化配置

基本配置

修改 _config.yml文件

站点名称、作者、URL等基本信息

title: 你的网站标题
subtitle: '副标题'
description: '网站描述'
keywords: 关键词
author: 你的名字
language: zh-CN
timezone: 'Asia/Shanghai'

配置部署信息

==注意，这里的repo必须为github仓库中以github.io结尾的仓库名字==

deploy:
  type: git
  repo: git@github.com:用户名/用户名.github.io.git
  branch: master

Icarus主题配置

修改 _config.icarus.yml文件

==注意，在publish文件下的内容全部是自动生成的内容，对这个文件下的内容做的所有修改都是无效的。以及所有_config.icarus.yml中的相对寻址路径都是在public下去寻找的。如果要添加自己的图片，请在source下新建img文件，放入图片，你会在publish对应的文件夹下面看见你放入的文件。更多详情请见icarus和hexo的官方文档==

配置网站logo和图标

1
2
3

logo: /img/logo.svg
head:
  favicon: /img/favicon.svg #在public下的img文件夹中去寻找图标

配置导航菜单

navbar:
  menu:
    首页: /
    归档: /archives
    分类: /categories
    标签: /tags
    关于: /about

配置侧边栏

sidebar:
  left:
    sticky: true
  right:
    sticky: true
widgets:
  -
    position: left
    type: profile
    author: 你的名字
    author_title: 你的职位
    location: 你的位置
    avatar: /img/avatar.jpg
  -
    position: left
    type: toc
  -
    position: left
    type: categories
  -
    position: left
    type: recent_posts
  -
    position: left
    type: archives
  -
    position: left
    type: tags

调整主栏宽度
- 如果想让主栏更宽，可以将所有widget放在同一侧（如左侧）。可以参考常见问题 - Icarus (ppoffice.github.io)

配置Gitalk评论系统

如果你没有有自己的OAuth应用：注册GitHub OAuth应用
- 访问 https://github.com/settings/applications/new
- 填写应用名称（如”博客评论”）
- 主页URL：你的博客地址
- 回调URL：与主页URL相同
- 点击”Register application”
如果你已经有自己的OAuth应用：查看已创建的OAuth应用
- GitHub头像 -> Settings -> Developer settings -> OAuth Apps

配置Gitalk

在 _config.icarus.yml中添加：

comment:
  type: gitalk
  client_id: 你的client_id
  client_secret: 你的client_secret
  repo: 用户名.github.io
  owner: GitHub用户名
  admin:
    - GitHub用户名

初始化评论
- 部署网站后，以管理员身份登录并访问每篇文章，初始化对应的GitHub Issue

创建内容

创建新文章
1
hexo new "文章标题"

文章格式

---
title: 文章标题
date: 2023-03-18
categories:
  - 分类1
  - 分类2
tags:
  - 标签1
  - 标签2
excerpt: 这是文章摘要，会显示在首页。
---

<!-- more -->

这里是文章正文内容...

本地预览

启动本地服务器
1
hexo server
访问本地预览
- 浏览器打开 http://localhost:4000

部署网站

生成静态文件

1 2	hexo clean hexo generate #或者直接 hexo g

部署到GitHub Pages
1
hexo deploy #或者直接 hexo d
自定义域名（可选）
- 在 source目录下创建 CNAME文件，内容为你的域名
- 在域名提供商处设置DNS解析到GitHub Pages

常见问题解决

主题配置问题
- 确保YAML格式正确，注意缩进
- 使用在线YAML验证工具检查格式
图片显示问题
- 将图片放在 source/img/目录下
- 路径使用 /img/图片名.jpg
Gitalk初始化问题
- 确保client_id和client_secret正确
- 检查repo名称是否正确
- 需要管理员登录GitHub并访问文章页面初始化评论

参考资源

用hexo+icarus搭建个人博客

https://kosa-as.github.io/2025/03/18/用hexo+icarus搭建个人博客/

作者

kosa-as

发布于

2025-03-18

更新于

2025-03-18

许可协议

用hexo+icarus搭建个人博客

如何用Hexo+Icarus建立一个个人网站

前置准备

安装Hexo

安装Icarus主题

个性化配置

基本配置

Icarus主题配置

配置Gitalk评论系统

创建内容

本地预览

部署网站

常见问题解决

参考资源

作者

发布于

更新于

许可协议

评论

分类

最新文章

归档

标签