Hexo+github+Butterfly搭建个人博客

最新推荐文章于 2024-07-13 11:26:37 发布
最新推荐文章于 2024-07-13 11:26:37 发布
阅读量120 收藏 1
点赞数
分类专栏： 笔记 建站小记 文章标签： github
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45837898/article/details/132304784
版权

前言

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。

整体参考教程：【2023最新版】Hexo+github搭建个人博客并绑定个人域名_hexo部署github绑定自定义域名

准备工作

  1. 注册 Github 账号

  2. 新建仓库，此仓库及存放你的博客文件的仓库

2234a1f7-b545-44e6-ba5b-3a6242229893

215b51e5-d63a-4990-86d7-1f1eb78c5695

一、安装并配置Node.js

参考教程：nodejs安装和环境配置-Windows(非常详细)

安装过程会出现的问题，及解决办法，参考如下：

  1. nodejs安装时遇到的问题及解决方案

  2. nodejs 报错 Error: EPERM: operation not permitted, mkdir

二、安装并配置git

安装参考教程：Windows系统Git安装教程

配置参考教程参考文章：Github 生成SSH秘钥（详细教程）

三、配置Hexo

创建一个博客文件，方便起见，可以在任意一个本地磁盘的根目录下创建一个Blog的文件夹)

1

右键 Git Bash 程序，以管理员身份进入，输入cd /e/Blog (根据你的Blog文件位置输入路径)

2

初始化Hexo

hexo init

961194f7-2d9e-4228-93ab-8806e7fa73f2

生成本地的 hexo 页面,点击出现的链接即可访问

 hexo s

4487bafc-acd9-4f23-aade-85d7146cc9e1
Ctrl+C 可以退出
修改 Blog 目录下的_config.yml 文件
46faea97-715e-4514-8a15-a03b954d334b
注意冒号为英文冒号，且冒号后有一个英文空格
安装hexo-deployer-git 自动部署发布工具

npm install hexo-deployer-git --save

89c090ea-9f17-4d3d-89a9-176a27ac541f
生成页面 并 上传

hexo g & hexo d
#(也可以分开操作)

中间会有一个登录页面，选第二种会方便些
最后访问你挂载在Github上的网站

四、Butterfly主题与基础美化

Butterfly使用参考官方文档：Butterfly 安裝文檔(一) 快速開始 | Butterfly
以下列出自己的修改说明

个人信息

修改Blog根目录下的 _config.yml blue 文件

title: Keep Thinking
subtitle: 'Rocky'
description: '保持思考，付诸行动'
keywords: solasea
author: Rocky
language: zh-CN
timezone: 'Asia/Shanghai'
网站图片

修改主题配置文件下的 label _config.yml 文件,该文件在不同下载模式下会出现在不同的地方，npm下载方式下会在node_modules 文件夹中的 hexo-theme-butterfly 子文件夹，其余下载方式会在根目录 label theme 文件夹内。

nav:
  logo: /img/mylogo.png  # 设置网站LOGO
  display_title: true
  fixed: false # fixed navigation bar
  
# Favicon（網站圖標）
favicon: /img/mylogo.png # 设置网站图标

# Avatar (頭像)
avatar:
  img: /img/head.jpeg    # 设置网站头像
  effect: false

# The banner image of home page  
# 设置网站主页顶部图
index_img: https://rocky-box.oss-cn-beijing.aliyuncs.com/image/11.jpg

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg) 
# 设置网站背景
background: url(https://rocky-box.oss-cn-beijing.aliyuncs.com/image/11.jpg) 

# Footer Background
footer_bg: false  # 取消页脚图片显示

#为了更好的显示背景图片，需要将页面顶部图与页脚的默认显示删掉
#主题文件下的 \source\css\_layout 下，分别将 footer.styl 和 head.styl 文件内删除以下内容 
background: $light-blue
主页标签

同样修改Blog根目录下的config.yml blue文件

menu:
  首页: / || fas fa-home
  索引||fas fa-chain:
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    项目: /Done/ || fas fa-check
  娱乐||fa fa-heartbeat:
    照片: /GalleryGroup/ || fas fa-images
  小计: /timeline/ || fas fa-paperclip
  友链: /link/ || fas fa-link

其中的 fa-home 、 fa-tags 均是图标名字，为 Font Awesome 图标库下图标，可直接使用。

网站特效

修改Blog根目录下的label _config.yml文件,选择自己喜欢的特效enable改为 true 即可。

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: false
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: false
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: false
  mobile: false

# Mouse click effects: words (鼠標點擊效果: 文字)
ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  mobile: false

# 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:
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: 1
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
Rockysea1012
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】
01-08
阅读须知 注意，本篇博客并不是从零手把手教你去搭博客，那样会很花费时间去写一篇文档，况且从零搭建的博客一搜也是一大把，太多重复的内容就没必要继续写了。因此，对于不知道怎么搭建的伙伴，我会提供我搭建时用到的学习资料，任意选一篇按着教程搭建就好了。另外，本篇博客教程内容主要是记载本站美化DIY方面，更多后续内容将会更新在本站内 https://yangchaoyi.vip 教程内容可复制引用，但请加一个参考链接，谢谢！ 关于博客是否开源 因为本站博客也是最近重新搭建起来的，还有一些优化和功能也在完善。当然，我也会朝着开源方向发展，但具体什么时候公开博客源码，这还不确定，还需要一段时间准备。因为选择
个人博客Hexo+Butterfly+Gitee Pages+Gitee流水线
qq_38505339的博客
10-25 139
个人博客Hexo+Butterfly+Gitee流水线+快捷指令提交
Hexo+Butterfly+GitHub
hjh_cos
05-20 423
部署GitHub 在 Hexo 项目根目录下的 _config.yml 进行配置 # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: https://github.com/hjhcos/hjhcos.github.io.git # 以前是 master 现在默认是 main branch: main 在 Git Bash Here 里面执行配置 npm instal
博客搭建详解(一)-Hexo+Butterfly+GitHub
公众号 Java4ye
06-27 2673
hexo框架和Butterfly主题的使用，运用Gitalk评论插件，在GitHub上创建这个评论仓库存储issue，同时使用这个Algolia搜索插件提供文章的检索服务
使用 hexo + 主题 butterfly + Github 搭建个人博客
凉了的凉茶的博客
04-03 6016
在新出的导航栏，找到 ssh，点击后，在新的页面点击 ssh keys 的新建钥匙，新建钥匙的 title（名称）随意起名，如：余白博客，将 id_rsa.pub 文件复制的公钥，粘贴到 key 里面，保存。，生成了一个 node安装 文件夹，以及一个 index.md ，把它复制一份放在 _posts 可以在首页看到。标题 Title 可以任意，如凉茶小栈，将刚才复制的 ssh 粘贴到 Key 中，点击 Add SSH key。下面的一些图片用的图床，你们可以可以相对路径的图片试试。
butterfly配置 hexo_Hexo+Butterfly+Github+Coding搭建个人博客
weixin_42432918的博客
01-16 458
Hexo+Butterfly+Github+Coding搭建个人博客Hexo_mind.png背景之前用docsify搭建了一个简单的博客，但是docsify主题较少(也可能本人没有找到正确的设置方法⊙﹏⊙‖∣)，没有自己很喜欢的主题。于是，在近期，利用空闲的时间，用Hexo重新搭建了一个博客。关于Hexo的具体介绍，可以在其官方网站查看具体的说明。搭建Hexo搭建Hexo比较简单，按照官方文档的...
hexo+github博客的搭建以及butterfly主题的安装
qq_73975638的博客
02-12 966
安装之前我先在电脑的E盘中建立了一个文件夹用来存放下载博客过程中所需要的一些文件，大家可以将后续安装的node.js以及git都放在这个文件夹中，大家也可以根据自己的需要进行相应的调整。下载时我们可以自定义安装，我是把后续的Git和node全部安装在了一个文件夹中，包括后面的hexo的主题文件，因为我觉得放在一个文件夹中比较好处理。到此为止，我们的博客已经搭建完成，其基本功能就已经可以实现，但是看起来并不美观，我们接下来还需要应用主题，来美化我们的博客。后，会出现一个网址，将这个网址复制下来进行访问。
hexo +GitHub个人搭建的博客
08-04
下面将详细阐述Hexo和GitHub搭建个人博客的过程及关键知识点。 1. **Hexo基本概念** - **站点结构**：Hexo站点通常包含`source`、`themes`、`public`、`config.yml`等目录，每个都有特定功能，如`source`存放内容...
Hexo + github page 实现搭建博客.pdf
08-20
Hexo + github page 实现搭建博客.pdf
博客系列：Hexo+Github博客搭建教程
01-03
博客系列：Hexo+Github博客搭建教程
Hexo + github page 实现搭建博客.zip
10-25
在IT领域，个人博客已经成为许多技术爱好者和专业人士分享知识、记录成长的重要平台。"Hexo + GitHub Page 实现搭建博客"的主题旨在介绍如何利用Hexo静态站点生成器和GitHub提供的免费托管服务GitHub Page来创建一个...
hexo+github+butterfly主题搭建过程中参考的文章
分享与记录
10-04 1139
hexo博客搭建 https://godweiyang.com/2018/04/13/hexo-blog/ butterfly主题安装和配置 http://www.c-hasel.cn/2019/12/01/hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E4%BA%8C/#%E4%B8%BB%E9%A2%98%E7%9A%84%E5%AE%89%E8%A3%85%E5%92%8C%E5%8D%87%E7%BA%A7 jsDelivr加速博客访问速度 https://zhu
github+hexo+butterfly 搭建个人博客
weixin_45691686的博客
03-29 2536
详细，保姆及用 github page 搭建个人博客 yjr-1100.github.io ，并绑定个人域名，使用 hexo+butterfly 主题 ，坑都是用来踩的，踩着踩着就好了
搭建hexo主题Butterfly部署github+个人服务器
chen_pifrij
11-12 1895
1.文章介绍 网址展示：chen&blog 此文章总结不易，参考各个文章总结，如有问题请留言… 2.环境要求 笔者环境： win11 64位； node.js：v14.15.3 64位； git：2.29.2.windows.2 64位 编写代码使用Notepad++ 2.1 node.js安装 下载 node-v14.15.3-x64.msi 安装 自主安装（修改安装路径，一路next） 验证安装是否成功 cmd 查看版本 C:\Users\hong>node -v v14.15.3 C:
给博客使用Butterfly主题并部署到GitHub服务器
XJHui
03-17 3554
目录 前言 一、安装Butterfly主题 二、将本地博客部署到GitHub服务器 三、将个人域名与GitHub绑定 前言 安装完Hexo框架后，自带的主题在thems文件夹下可以查看，应用后界面： Hexo提供了290+主题，点击可前往官网访问：Hexo主题 我选择的主题是Butterfly，安装后的界面如下： 图源：Butterfly官方Github ...
【教程】Hexo 部署到 Github Page 后，自定义域名失效的问题
noname 博客
07-10 560
近期给 Github Page 上托管的静态网站映射了自定义域名（），之后发现每次更新并部署 hexo 到 Github Page （hexo d）后就会出现自定义域名失效的问题。原因也非常简单，当你在 Github Page 上映射了域名后，Github Page 会在你的仓库下自动生成一个 CNAME 文件（如果你的 Github Page 是在其他分支，则是在其他分支下生成 CNAME 文件）。
github中下载zip后，本地仓库如何与github上的项目相关联
weixin_52120741的博客
07-10 229
有时候网速问题，git clone 太慢，就直接下载zip文件，然后再进行关联。3、在GitHub desktops 中添加刚刚的文件夹，就可以完成更新。1、下载zip，解压，把文件夹名称中-main去掉。
常见问题记录（持续更新）
m0_73647713的博客
07-10 852
关于nginx的配置：以下是config文件：9995端口是服务端口9996用来代理：好处负载均衡，更安全keepalive_timeout 65; 超时时间client_max_body_size 100m; 文件上传100mbwindow上命令查看防火墙开放的端口这将列出所有配置的防火墙规则以一下自带的功能模块为例：2.1功能设计：这个模块可以设计表单的页面，附带增删改查，分页，模糊查询，高级查询，且能根据数据字段灵活的展示想要的数据。的功能2.2流程设计：改模块可以让发起的事项走流程，也就是相当
github actions 、cloudflare worker 免费构建运行的虚拟机环境；google colab 免费gpu jupyter资源
最新发布
weixin_42357472的博客
07-13 211
相当于提供了你一台免费虚拟机，但是只提供特定规则使用；用好了可以解决很多自动化场景，也可以薅羊毛：github actions：通过yml文件去操作运行cloudflare worker：通过js文件去操作运行google colab： 通过jupyter文件免费gpu资源去运行。
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值