hexo+github 搭建个人主页

1.配置git

PS C:\Users\44660\Desktop> git config --global user.name "wenjie-astro" # user_name 填入 GitHub 用户名
PS C:\Users\44660\Desktop> git config --global user.email "446601097@qq.com" # user_email 填入 GitHub 注册的邮箱

2.安装Node.js

安装 Node.js 会包含环境变量以及 npm 的安装，安装后，可以在命令行输入如下命令检测 Node.js 是否安装成功：

第一个命令：

node -v

这个命令，在 nodejs 安装成功的情况下会显示 nodejs 的版本号。

第二个命令：

npm -v

这个命令，在 nodejs 安装成功的情况下会显示 npm 的版本号。

注意：这里可能会有错误

PS C:\Users\44660\Desktop> npm -v
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsof
t.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置行:1 字符: 1

npm -v

CategoryInfo : SecurityError: (:) []，PSSecurityException

FullyQualifiedErrorId : UnauthorizedAccess

解决方法：

这个错误是由于 PowerShell 的执行策略限制导致的。在某些系统上，默认情况下，PowerShell 禁止运行脚本。您可以尝试以下解决方案：

以管理员身份运行 PowerShell：右键单击 PowerShell 图标，并选择”以管理员身份运行”。

修改 PowerShell 执行策略：在管理员身份的 PowerShell 窗口中执行以下命令：
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
我的这样就可以解决了

修复：npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息-CSDN博客

3.配置github ssh

打开 Git Bash，输入命令：

ssh-keygen -t rsa -b 4096 -C "446601097@qq.com"

然后直接三个回车即可，默认不需要设置密码。查看是否已经有 ssh 密钥。打开用户主目录 C:\Users\username\.ssh，.ssh文件夹一定存放在C:，至于后面的路径lenovo这个不一定每台电脑都相同。找到.ssh文件夹，打开如下：

然后找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥，将内容全部复制。其中 id_rsa 是私钥不能泄露，id_rsa.pub 是公钥可以放心告诉他人。

打开 GitHub SSH and GPG keys 页面，新建一个 ssh key：

Title 为标题，任意填即可，将刚刚复制的 id_rsa.pub 内容粘贴进去，最后点击 Add SSH key。在 Git Bash 中检测 GitHub 公钥设置是否成功，输入如下命令：

ssh -T git@github.com

验证是否连接成功，连接成功的话，显示如下：

4.安装与初始化

在 Git Bash 中输入以下命令：

npm install -g hexo-cli # 此命令完成对 hexo 的安装

安装完成后，在电脑的某个地方新建一个文件夹（名字可以随便取）专门用于存放博客代码，比如我的是 D:\Blogs，由于这个文件夹将来存放博客的所有内容和素材，以及所有的博客操作都会在其中完成，所以最好不要随便放。

进入新建的博客目录，输入如下命令：

hexo init # 该命令完成 hexo 在本地博客目录的初始化

5.安装butterfly主题之后报错

extends includes/layout.pug block content include ./includes/mixins/indexPostUI.pug +indexPostUI

需要安装
再运行 hexo server启动服务，访问 http://localhost:4000/ ，页面显示 extends includes/layout.pug block content include ./includes/mixins/indexPostUI.pug +indexPostUI 。需要安装运行 npm install hexo-renderer-pug hexo-renderer-stylus --save （这一个操作会很慢）。

6.hexo 操作指南

生成静态文件

在 Git Bash 中输入以下命令：

hexo g # 生成静态文件

执行以上命令后，Hexo 就会在 public 文件夹中生成相关的 html 文件，这些文件将来都是要提交到 GitHub 上的 username.github.io 的仓库中去的。

本地预览

在 Git Bash 输入以下命令：

hexo s # 开启本地预览

hexo s 是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容，Ctrl+C 停止本地预览。本地预览可以实时查看博客的编辑情况，待博客写完后一起部署到 GitHub 上。

第一次初始化的时候 hexo 已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑

推送到GitHub

配置站点配置文件

hexo 有 2 种 _config.yml 文件，一个是根目录下的全局的 _config.yml，一个是各个主体 theme 下的 _config.yml。将前者称为站点配置文件，后者称为主题配置文件。

打开根目录下站点配置文件 _config.yml，配置有关 deploy 的部分：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:fanlumaster/你的用户名.github.io.git
  branch: main

安装插件

在 Git Bash 中输入以下命令：

npm install hexo-deployer-git --save # 安装部署插件

如果不进行上述操作，直接使用 hexo d 部署到 GitHub，将会报错。

修改配置

git config --global core.safecrlf false

参考：stackoverflow

这个必须执行不然使用推送必报错

部署到 GitHub

在 Git Bash 中输入以下命令：

hexo d

部署成功后，打开对应的网址 https://username.github.io，如果出现了和本地预览一样的效果，那么，表明部署成功。

对了并不需要自己手动开启 GitHub Pages

如果你推送成功就可以直接打开啦

## hexo 需要下载的组件

搜索插件

npm install hexo-generator-search --save

字数统计组件

npm install hexo-wordcount --save or yarn add hexo-wordcount

评论区组件

npm install hexo-next-giscus --save

搜索组件

npm install hexo-generator-search --save

官方教程

Find Icons with the Perfect Look & Feel | Font Awesome

支持的图标网站

【Hexo】Hexo搭建Butterfly主题并快速美化_hexo butterfly-CSDN博客

美化教程

免费4K高清壁纸-电脑背景图片-Mac壁纸网站「哲风壁纸」

一些好看的壁纸

基于Hexo和GitHub搭建博客 - Master Blog

最基础的搭建及使用

hexo添加看板娘 | 摸鱼的Llunch

[butterfly主题添加看板娘 | “永不言弃”](https://www.hastur45.cn/2025/03/08/hexo butterfly 博客添加看板娘/)

右下角的看板娘

【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题搭建完全教程【整理】_51CTO博客_github hexo 搭建博客

访客地图
- Clustrmaps - Free People Search Engine
底部小红心

hexo博客添加评论系统 | Jachin's Blog

hexo-next & giscus 评论测试 | 初来乍到，一无所知

评论系统

基于 Hexo 键入搜索功能 | 唐志远

搜索功能也没加进去，之后再说

hexo页脚添加鱼塘 | LinBlog

想着要有一个🐟游动的效果，但是没有实现，之后再说吧

Hexo博客开启夜间模式时的星空效果 | JZephyrの小窝

星空效果

【hexo】关于butterfly主题的文章标题及其相关信息布局的修改位置_hexo-theme-butterfly文章标题-CSDN博客

标题居中

[Butterfly主题美化-页面毛玻璃效果_毛玻璃搜索页-CSDN博客](https://blog.csdn.net/qq_38870718/article/details/122555421#:~:text=本文介绍了一种使用自定义CSS文件来美化Hexo博客的方法，包括实现毛玻璃效果、搜索框美化、滚动条及背景渐变动画等，适用于提高个人网站的视觉体验。摘要生成于 C知道，由 DeepSeek-R1 满血版支持，,前往体验 > 创建一个 mycss.css文件移动到 themes[%26but%26]terflysourcecss 目录下。)

毛玻璃效果

hexo+github 搭建个人主页

1.配置git

2.安装Node.js

3.配置github ssh

4.安装与初始化

5.安装butterfly主题之后报错

6.hexo 操作指南

生成静态文件

本地预览

推送到GitHub

配置站点配置文件

安装插件

修改配置

部署到 GitHub

## hexo 需要下载的组件

## 相关网页