winddows系统安装hexo博客框架并部署到github

第一部分

1、安装环境node.js

安装时注意添加路径

1
https://nodejs.org/en/

2、安装git bash

1
https://git-scm.com/download/win

在 git bash 中输入以下命令启用 Hexo镜像

1
npm config set registry https://registry.npm.taobao.org

在 git bash 中输入以下命令开始全局安装 Hexo，新建一个文件夹，在文件夹内右键打开git bash 

1
npm install -g hexo-cli

如果全局安装 Hexo的时候失败，提示证书过期

1
npm cache clean --force

：用于强制清理 npm 缓存，解决缓存问题或释放磁盘空间。

1
npm config set strict-ssl false

：用于禁用 npm 的严格 SSL 检查，解决 SSL 证书验证错误，但会降低通信的安全性。

在 git bash 中输入,

1
hexo init 自定义博客名

完后会出现一个自定义博客名的文件夹，

在进入到博客的文件夹右键 git bash 中输入hexo g ,编译静态文件到public文件夹，这是根目录会自动生成public文件夹

1
hexo g

在 git bash 中输入hexo s，启动本地预览，关闭gitbash后,就无法预览

1
hexo s

输入 http://localhost:4000 ，能正常访问，则启动成功

第二部分

3、将hexo代码提交到github仓库，

登录github.com账号。没有的话自己注册一个

新建一个github仓库，仓库名必须是你的GitHub用户名.github.io，

比如1jia1.github.io，可以用别的仓库名，但是3.2中的url链接需要填写正确的GitHub仓库名

目的是为了搭载 GitHub Pages 服务，如果导入到vercel,可以自定义其它用户名

3.1、生成SSH密钥

在 git bash 中输入如下命令

1
2
git config --global user.name "你的GitHub用户名"`
git config --global user.email "你注册github的邮箱"

`

生成密匙命令

1
ssh-keygen -t rsa -C "你注册github的邮箱"

在本地电脑中找到新生成的公匙，复制id_rsa.pub中的内容

找到github个人图像

设置-SSH and GPG keys-New SSH Key-粘贴公钥

验证是否成功

输入命令

1
ssh -T git@github.com

确保 SSH 代理正在运行，并且你的私钥已添加到代理中。
启动 SSH 代理
在 Git Bash 中输入以下命令：

1
eval "$(ssh-agent -s)"

你应该看到类似以下的输出：

1
Agent pid 12345

添加私钥到 SSH 代理

1
ssh-add ~/.ssh/id_rsa

如果你使用了不同的文件名或路径，请相应调整命令。

测试 SSH 连接
在 Git Bash 中输入以下命令测试与 GitHub 的连接：

1
ssh -T git@github.com

你应该看到类似以下的输出：

1
Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.

如果你看到错误信息，请检查以下几点：
确保你添加的是正确的公钥。
确保 SSH 代理正在运行，并且私钥已正确添加。

配置 Git 使用 SSH URL
确保你的 Git 远程仓库 URL 使用的是 SSH 而不是 HTTPS。
查看当前远程仓库 URL

1
git remote -v

你应该看到类似以下的输出：

1
2
origin  git@github.com:yourusername/your-repo.git (fetch)
origin  git@github.com:yourusername/your-repo.git (push)

如果你看到的是 HTTPS URL，请使用以下命令更改为 SSH URL：

1
git remote set-url origin git@github.com:yourusername/your-repo.git

3.2打开 _config.yml，找到文件最后一行的 deploy

替换以下代码

1
2
3
4
5
deploy:

 type: git

 repo: https://github.com/你的github用户名/你的github用户名.github.io.git,main`

安装推送命令

1
npm install hexo-deployer-git --save

清理缓存，重新生成静态文件，推送到github的命令

1
hexo clean && hexo g && hexo de

推送成功后

访问网址：你的GitHub用户名.github.io

第三部分

安装butterfly主题

https://butterfly.js.org/

根目录下git bash 输入命令

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

1
theme: butterfly

清理缓存，重新生成静态文件，推送到github的命令，每次更新完内容执行此命令

1
hexo clean && hexo g && hexo de

访问网址预览效果：你的GitHub用户名.github.io

第四部分

安装hexo admin 插件

执行以下命令即可

1
npm install -g hexo
1
2
3
4
cd ~/
hexo init my-blog
cd my-blog
npm install
1
2
npm install –save hexo-admin
hexo server -d

open http://localhost:4000/admin/

4.1菜单栏修改
在 _config.yml 下找到 menu ：去掉前面的#就可以显示菜单

menu:
首页: / || fas fa-home
归档: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
#菜单||fas fa-list:
#音乐: /music/ || fas fa-music
#电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
#关于: /about/ || fas fa-heart

4.2添加标签页

根目录输入 hexo new page tags

找到 source/tags/index.md 这个文件，修改这个文件：

添加 type: “tags”

title: 标签
date: 2018-01-05 00:00:00
type: “tags”
orderby: random

order: 1

4.3添加子页面

1
hexo n 页面的名称

创建你的页面就行

4.4首页顶部图片更换

1
2
3
The banner image of home page

index_img: https://cdn.pixabay.com/photo/2023/10/23/03/03/fashion-8335213_1280.jpg

著名的无版权可商用的图片网站
https://pixabay.com/

4.5如果你想为整个 Butterfly 主题设置背景图片，可以通过配置 _config.yml 文件中的 background 部分来实现。

将 background 设置为你想要的图片 URL。

例如：

1
2
3
4
# Website Background (設置網站背景) 
# can set it to color or image (可設置圖片 或者 顔色) 
# The formal of image: url(http://xxxxxx.com/xxx.jpg) 
background: url(https://example.com/path/to/your/background-image.jpg)

4.6在 Butterfly 主题的首页设置打字效果,在 _config.yml 文件中找到 subtitle 配置部分,修改如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
    strings: ["Welcome to my blog!", "Enjoy your stay!", "Feel free to explore!"]
    typeSpeed: 50
    backSpeed: 25
    loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub: "Welcome to my blog!"

配置说明

  • enable: 设置为 true 以启用首页的副标题。

  • effect: 设置为 true 以启用打字效果。

  • typed_option

    : 配置打字效果的选项。你可以参考typed.js 的文档

    进行详细配置。

    • strings: 要显示的字符串数组。
    • typeSpeed: 打字速度（毫秒）。
    • backSpeed: 删除速度（毫秒）。
    • loop: 设置为 true 以循环显示字符串。

  • source: 如果你想使用第三方服务提供的句子，可以设置为 1、2 或 3。否则，设置为 false。

  • sub: 如果 effect 设置为 false，将显示此字段的内容。

4.7更换头像，替换url地址即可

1
2
3
4
5
# Avatar (頭像)
avatar:
  img: https://telegraph-image-111.pages.dev/file/138d0c50213576d44c781.jpg
  effect: false