Hexo‌是一个基于Node.js的静态网站生成器，主要用于快速搭建博客和个人网站。它使用Markdown语法编写文章，能够迅速生成静态页面并部署到服务器上。

配置node

  1. 使用nvm安装node(v20.9.0)后配置镜像

安装并使用node：

nvm install 20.9.0
nvm use 20.9.0

查看当前node版本：

node -v

配置镜像：

npm config set registry https://registry.npmmirror.com

可以通过以下命令查看镜像是否配置成功：

npm config get registry
  1. 配置node

下载express：

npm install express -g

安装hexo本地环境：

npm install -g hexo

配置git

生成ssh：

ssh-keygen -t rsa -C "邮箱地址"

428eb5501c4e43d398945703a3fc0462.png

所有要输入的地方都按回车，使用默认值

把密钥添加到github账户中：
0a7d0f60f6934594916624a781e96f86.png
测试ssh是否绑定成功：

ssh -T git@github.com

输入ssh -T git@github.com报错：
9fb7118c1e2c4438bf5896a80a15627c.png

  1. 说明无法通过22端口与github进行ssh连接，将ssh连接端口修改为443后测试：
>ssh -T -p 443 git@ssh.github.com

6f527c945a4f473f846164c3b55b9c5a.png

  1. 说明443端口可以访问，但是github不提供shell权限。
    在.ssh文件夹下新建config文件（没有后缀）
    d694daf978cf4b61b780191ad4500156.png
    config文件：
>Host github.com
>Hostname ssh.github.com
>Port 443
  1. 重新输入sssh -T git@github.com测试：
    519dead45be747e28d424684810728bf.png

本地创建Blog

  1. 创建Blog文件夹，初始化hexo
hexo init

b79ceafcafd14cd4bfe183f9c0d39920.png
成功后显示：
2beca5c864b848d990cb29bb28b267cf.png

  • _config.yml：站点配置文件
    node_modules：存储hexo插件的文件
  1. 生成本地的hexo页面：
hexo s

a684891485164de68a15a7279a60893f.png
在浏览器输入http://localhost:4000即可访问
46e81fbe60874ffa9f6fa824035dba8a.png

上传Blog到GitHub

  1. 新建仓库：
    bc87e499b2f54b5381138cbb2bed66f4.png

仓库格式：用户名.github.io
一定要是用户名！！不然后边会报404
这个仓库名将作为github博客的访问地址

  1. 修改_config.yml文件：
    3bf9fabbbe9e4f9cb8b45a8754db9c50.png
deploy:
  type: git
  repository: https://github.com/xiaolin0333/xiaolin0333.github.io.git
  branch: main
  1. 安装hexo-deployer-git自动部署发布工具：
npm install hexo-deployer-git --save
  1. 生成页面：
hexo g

dae7fa1696c14838a23191be161e5a8f.png

  1. 本地文件上传到Github网页：
hexo d

上传成功：
25be4b4f3f014321806513067664e8cc.png

Butterfly主题

更改主题后，可以使用hexo clean & hexo g & hexo s在本地测试
需要传到github上，可以使用hexo clean & hexo g & hexo d传到GitHub上

下载主题

  1. 在Blog根目录下下载：
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  1. 安装pug和stylus渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 修改Blog根目录下的_config.yml开启butterfly主题
theme: butterfly
  1. 在根目录新建_config.butterfly.yml，复制butterfly目录下的_config.yml文件到该文件中。

和博客网址关联度较高的设置在Blog根目录下的_config.yml文件中；
和主题样式关联度较高的设置在Blog根目录下的_config.butterfly.ym文件中。

发布博客

  1. 安装插件：
npm i hexo-deployer-git
  1. 输入命令：
hexo new post "新建博客的文章名"

设置博客个人资料

在_config.yml中设置：

# Site
title: xiaolin0333 	#标题
subtitle: '欢迎来到小林的博客'	#副标题
description: 		#个性签名
keywords:
author: 小林	#作者
language: zh-CN	#语言
timezone: Asia/Shanghai    #中国的时区

设置导航菜单

在_config.butterfly.yml中设置：

menu:
  # Home: / || fas fa-home
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  主页: / || fas fa-home
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-archive
  归档: /archives/ || fa fa-folder-open
  关于: /about/ || fas fa-heart 
  留言板: /comment/ || fa fa-paper-plane

8d8f2c20c9ad498c9857d2cbf0bd4ca2.png

创建文件夹

根据前面设置的导航菜单创建文件夹

  1. 标签
hexo new page tags
  1. 分类
hexo new page categories
  1. 归档
hexo new page archives
  1. 关于
hexo new page about
  1. 留言板
hexo new page comment

8000c67c26a441869a2eedc013750510.png
….

完成啦：
2e409fc8561d4fcf8e3e8b614efac22b.png
我的博客地址