hexo创建博客项目并设置butterfly主题

最新推荐文章于 2023-07-31 14:18:29 发布
最新推荐文章于 2023-07-31 14:18:29 发布
阅读量904 收藏 2
点赞数 1
分类专栏： 前端开发 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blue_x2/article/details/119832972
版权

hexo创建博客项目并设置butterfly主题

一、创建项目

我们需要安装hexo，并且使用hexo命令创建并初始化一个项目

1、使用npm安装hexo，输入以下命令

$ npm install -g hexo-cli

2、在指定文件夹下，通过hexo命令创建项目，folder 为文件夹名称

$ hexo init <folder>

3、进入刚刚创建的文件夹，安装依赖包

$ cd <folder>
$ npm install

二、修改主题

1、在项目文件夹的根目录，使用npm安装butterfly主题

npm i hexo-theme-butterfly

2、找到项目中的_config.yml文件，修改主题（如下图）

theme: butterfly

在这里插入图片描述

三、启动项目

IDE的终端中输入下面三条命令（我这里使用webStorm）：

1、清除缓存

hexo clean

2、构建项目

hexo g

3、启动工程

hexo s

项目启动成功后终端将输出访问地址：http://localhost:4000

在这里插入图片描述 访问该地址即可查看初始化的工程

四、添加后台管理系统插件

1、输入下面命令安装插件：

npm install --save hexo-admin

2、启动服务器

hexo s

3、执行完成后，访问这个地址可以进入管理界面

http://127.0.0.1:4000/admin/

在这里插入图片描述

4、设置账号和密码，

点击 ‘Settings’，我们这里把两个附加功能（行数和拼写检查）勾选上吧，然后点击这，个‘Setup authentification here’ 链接
在这里插入图片描述
在这里插入图片描述

5、将生成的配置信息填入_config.yml中

在这里插入图片描述

3、重启服务器重新访问链接来到登录界面

在这里插入图片描述

大功告成！！

子夜求知
关注
专栏目录
Hexo博客之butterfly主题优雅魔改系列（持续更新）
小康博客
06-21 2万+
为了便于各位博主了解到是否新增了魔改方案，请查看更新记录页 前置说明 魔改亮点 ????主题可升级：几乎不改动主题源码。即便魔改，也不需要为升级主题而烦恼。 ????简单快速：简单上手，快速修改。 ????看我72变：多种背景随意更换。 ????优雅阅读：对卡片进行不同的透明度设置，实现更优雅的阅读。 ????个性友联：为你的好友设置不同的颜色 ????页脚更炫酷：彩色渐变footer喜欢么？ ????更多优点等你发现 为什么写这篇文章? 相信在这之前，大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上
hexo 安装、下载使用 butterfly 主题。部署到 github
最新发布
m0_48121128的博客
08-19 542
📖 本教程主要的主要内容针对于 Butterfly 4.9.0版本。（对于旧版本的安装可能不适用）
butterfly::butterfly:Butterfly，A JavaScriptReactVue2 Diagramming library which concentrate on flow layout field. (基于JavaScriptReactVue2的流程图组件)
05-11
一个基于JS的数据驱动的节点式编排组件库 | 简体中文 :sparkles: 特性 丰富DEMO，开箱即用 全方位管理画布，开发者只需要更专注定制化的需求 利用DOM/REACT/VUE来定制元素；灵活性，可塑性，拓展性优秀 :rocket:快速本地DEMO git clone git@github.com:alibaba/butterfly.git npm install cd example npm install npm start :package: 安装 npm install butterfly-dag :hammer: 快速上手 引入方式 // 完全版，内部包含jquery和lodash import {Canvas, Group, Node, Edge} from 'butterfly-dag'; import 'butterfly-dag/dist/index.css'; // 如果您引用的项目使用了jquery和lodash，为
hexo-butterfly主题博客SEO配置
03-26 926
hexo-butterfly主题博客SEO配置 文章目录hexo-butterfly主题博客SEO配置keywords优化优化归档结构生成站点地图robots协议定义百度搜索资源平台（[地址](https://ziyuan.baidu.com)）谷歌搜索控制台（[地址](https://search.google.com/search-console/welcome)） keywords优化 文章front-matter中的keywords节点 站点配置中的keywords节点 # Site title:
利用Hexo创建一个项目文档网站
LTFan
03-24 420
想创建一个项目文档咋办？ 别怕 有 Hexo ！ 准备工作 安装 安装 初始化 运行命令： $ cd [空目录] $ hexo init 需要等一会 挺慢的 如果有代理 也可以设置代理：设置代理 安装 Book 主题 安装 也可以删除默认的 landspace 主题 开始 设置网站图标 打开主题配置文件 配置 favicon_url: # 图标目录 设置主页和菜单 新建几个文件 如图所示： ...
零基础使用hexo搭建butterfly主题的博客
果果小师弟的博客
08-27 3052
摘要：最近把博客网站整理了一下，换了一个简洁干净的主题。很多小伙伴问我个人博客怎么搭的，个人网站怎么搭的？你用的hexo框架还是wordpress框架啊？如果我要搭建网站怎么选择啊？域名咋搞的啊？搭建网站是不是需要买一个服务器啊？是不是还要去公安局备案啊？等等问题，今天就一并解答。顺带再带大家梳理一下个人博客网站的搭建过程和问题。 我们都知道搞技术的都会有一个自己的博客网站，听起来好难、好高大上，其实真的很简单，不需要你掌握什么java、js、html、css就可以很快的搭建出来。因为我们现在的个人博客网站
hexo个人博客搭建（三）butterfly主题配置
YR_112233的博客
02-06 3431
Butterfly主题设置在线聊天功能、评论功能
hexo_butterfly_blog:使用Hexo + Butterfly主题搭建的博客
03-17
在这个项目“hexo_butterfly_blog”中，我们将深入探讨如何使用Hexo与Butterfly主题搭建一个个人博客。 首先，你需要在本地安装Node.js环境，因为Hexo依赖于Node.js。安装完成后，通过npm（Node包管理器）全局安装...
hexo博客 nodejs +博客搭建+butteflr主题自用
07-26
Hexo是一个基于Node.js的静态站点生成器，它可以帮助我们快速、高效地创建博客，而Butterfly主题以其美观、响应式的设计，为个人博客增添了专业感。 首先，我们需要确保已安装了Node.js。Node.js是运行Hexo所必需的...
Hexo博客搭建及配置
RBK的博客
04-03 678
然后hexo可以搭建静态博客网站，放在github或者gitee都行，有免费的网页空间，之前放在了github，现在放在Gitee试试。一定得更新，上次大概时18年还是17年弄的，node.js版本是8，然后我现在更新了hexo，发现node版本已经到了18了，太离谱了。之前配置过hexo但是后来hexo文件夹莫名其妙崩了，我也懒得修理，就没管了，现在又想重拾回来。主题其实也比较影响性能，我第一次换的主题就非常慢，然后我重新换了一个就很快了。hexo提供不少主题可以选，官方就有很多，下载好以后解压，放在。
Hexo 在github 上搭建博客
高筑墙，广积粮，缓称王
03-09 894
转载出处： http://blog.fens.me/hexo-bootstarp-github/前言一直向往有自己的博客，觉得这样很炫酷。上学期期末花了一点时间去搭建，当时没想到用什么框架，就想着用Java来写后台，设计数据库来存储表信息，前端采用Bootstrap，后来注意力分散了，这个项目就烂尾了。这学期重新想起这个项目，觉得应该做下去，考虑到时间原因，就尝试借助Hexo在github上搭建一
hexo+butterfly搭建个人博客网站
m0_64288219的博客
02-12 2926
Hexo是基于NodeJS构建简洁高效的博客框架。使用 Markdown 编写文章内容，几秒内即可利用靓丽的主题生成静态网页。支持丰富的主题与插件，主题用于页面展示效果，插件用于实现博客的特殊功能 如：文章及内容搜索、图片懒加载、一键远程部署等。Butterfly是Hexo的主题之一，也是集成的主题。官方网站也是该主题的演示页面，其教程更加详细，本文为入门级教学，使用该主题不需要对hexo框架有过多了解，遵循butterfly的写作规范开发即可。
github+hexo+butterfly 搭建个人博客
weixin_45691686的博客
03-29 3446
详细，保姆及用 github page 搭建个人博客 yjr-1100.github.io ，并绑定个人域名，使用 hexo+butterfly 主题 ，坑都是用来踩的，踩着踩着就好了
02 Hexo博客Butterfly主题配置博客评论邮件提醒
X北辰北的博客
07-10 5042
概述 个人博客搭建成功后已经上线运行了好久，但是一直没有时间配置评论区的邮件提醒功能，所以今晚有时间就抽空配置了，然后将操作过程做一下记录。 前提条件 一个已经上线运行的Hexo博客(至于用什么主题都是没有强制要求的) 操作步骤 1、为博客配置Valine评论系统 Hexo博客支持的评论系统其实有很多，像之前使用过的来比力啥的，但是目前好多博客都配置了Valine，所以我博客也选择了这一款评论系统，原因无他：轻量级、访问速度快、配置过程简单，以上三个原因足够我使用它了。 Valine评论系统的配
如何搭建 hexo博客和butterfly主题
blog.aiheadn.cn
02-01 318
在众多的博客中，我选择了hexo，最大的优势就是可以结合GitHub page来搭建一个免费的个人博客系统，将文章都托管到GitHub上，在也不用担心服务器过期的问题了，而且可以自己买一个域名，解析了GitHub上就可以直接使域名访问了，不过因为有自己的服务器，所以我直接部署在了自己的服务器上面。
hexo（butterfly）添加说说页面（Artitalk可在线发布）
cungudafa的博客
05-06 6952
文章目录一、前言二、我设置的记录参考1.申请leancloud国际版账号2.后台配置3.博客配置三、使用方法1. 输入内容2.输入密码3.发布说说、心情4.功能畅想四、更多 一、前言 之前有写一篇文章是如何在个人网站配置手写说说页面，这是我从drew叔 那搬运过来的，大家一直催问可不可以在线发布，终于drew叔动手了。 我看着他从leadcloud后台鼓捣到gtalk后台，再到leadcloud国...
Hexo + Butterfly 搭建个人网站（三）
m0_69079573的博客
07-31 1576
在 根目录\source文件夹下新建一个文件夹css，该文件夹是用来存放自定义的css样式，再内部新建一个名为，添加下面代码。在 根目录文件中的引入刚刚创建的custom.css文件在文件中取消封面图与页脚图的加载项避免冗余加载注意：如果说改完了背景图也没了，那大概率是你之前没设置背景图。在文件设置背景图。
Hexo Boot 博客系统介绍
月光中的污点
05-27 740
原文地址：Hexo Boot 博客系统介绍 博客地址：http://www.extlight.com 一、Hexo Boot Hexo Boot 是基于 Spring Boot + MySQL 开发的一套开源的博客系统。前身是 ml-blog 博客系统，在此基础上演变和扩展而来。 二、扩展功能 Hexo Boot 博客系统除了继承 ml-blog 博客系统的文章管理、分类管理、系统参数设置等功能外，还扩展了以下功能。 2.1 评论、留言功能 轻松查看网友的评论与留言，及时互动 2.2 友链功能 与网友.
Hexo+Butterfly主题美化
热门推荐
唐先森的博客
03-06 1万+
前言 本博客基于Hexo框架搭建，用到hexo-theme-butterfly主题（本人博客Butterfly版本3.4.0），hexo-theme-butterfly是基于Molunerfinn的hexo-theme-melody的基础上进行开发的。???? Butterfly 已经更新到3.6.2，请先参考这系列文档Butterfly教程进行基本配置 。如果这篇文章帮到了你，请在留言板写下您的评语吧，感谢您的大力支持! 完整教程：传送门。 主题特点： 简单漂亮，文章内容美观易读 M......
轻松打造hexo-butterfly主题的看板娘教程
在Hexo的butterfly主题中加入看板娘，可以提升博客的趣味性和个性化程度，使得网页不仅具有专业性，同时也具备一定的娱乐性。 本次教程将围绕如何在Hexo的butterfly主题中添加看板娘进行详细说明。教程将涵盖以下...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值