首页 > 其他分享 >Hexo+Butterfly主题+Github搭建博客

Hexo+Butterfly主题+Github搭建博客

时间:2024-03-20 21:23:24浏览次数:30  
标签:Butterfly butterfly Github Hexo hexo 主题 博客 github 安装

目录

用Hexo+Butterfly主题+Github搭建博客

如标题所示,废话不多说直接上干货!

原文链接:Hexo+Butterfly 主题 + Github 搭建博客

一、安装Node.js

首先去官网下载,https://nodejs.org/en,直接选择长期支持版本安装

img

我这里是以win10 64位系统为例,如果是其他系统,可以点击上图长期支持版本下的Other Downloads现在其他版本

img

下载完成后直接双击打开安装(基本上全部下一步就行)

img

img

这一步一般软件都是默认安装在C盘,可以改一下安装位置

img

img

接着等待安装成功即可。接着在电脑搜索框,输入cmd 打开

img

输入 node -v 如果出现版本号则说明安装成功。

img

二、安装Git

打开Git官网下载页面https://git-scm.com/downloads ,选择自己系统进行下载

img

img

下载完成后,直接全程下一步进行安装,步骤有点多,我就不一步步贴图了。(建议也安装在其他盘,不要安装在C盘

img

安装好后,打开cmd命令行,输入 git --version ,出现版本号则说明安装成功。

img

此时我们回到桌面,点击鼠标右键就会出现

img

三、安装配置Hexo

1:安装hexo

首先我们建立一个文件夹 比如在D盘建立一个Hexo文件夹,建立好后打开文件夹,点击鼠标右键打开Git Bash

img

紧接着我们在这个框输入全局安装Hexo的命令

nmp install hexo-cli -g

安装完成后,输入 hexo --version 出现下面一坨则说明安装成功。

img

2:初始化博客项目

接着输入 hexo init myblog (你的博客名字)初始化博客

img

img

在bash命令框输入 cd myblog/ 按enter进入刚初始化的博客目录

3:本地部署打开博客

接着输入 hexo g & hexo s 命令

img

执行完后打开上图显示的 http://localhost:4000/ ,就可以看到我们的hexo博客已经在本地部署成功了。

img

接着输入 npm install 安装所需要的文件。

img

四、安装配置butterfly主题

1:克隆下载butterfly主题

首先打开butterfly主题在GitHub上的地址https://github.com/jerryc127/hexo-theme-butterfly

接着我们复制这条命令

img

butterfly主题克隆到我们的项目里

img

img

这时主题已经克隆到我们的博客项目里了。接着打开butterfly主题文件夹,把config文件复制到我们项目的根目录下,并重新命名成 _config.butterfly (为了以后如果主题升级,我们升级后不会影响我们现有的项目配置)

img

img

2:配置butterfly主题

接着我们打开我们项目的配置文件(不是刚才复制过去并重新命名的主题配置文件),拉到最下面

img

找到这个配置,并把它改成butterfly。

此时我们再去在bash命令窗口执行 hexo g & hexo s 命令

img

发现会报一个错 extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug

img

这是因为此时我们的项目还缺少依赖,执行下面的命令安装

npm install hexo-renderer-pug hexo-renderer-stylus

img

安装完成后再次执行 hexo g & hexo s 命令重新打开我们的项目就会发现,butterfly主题已经配置成功。

img

如果需要配置其他主题,可以到hexo主题网站去找。(建议选择支持中文的,后期好改)

五、部署到GitHub

1:新建github仓库

打开我们的GitHub(没有账号的话,先去注册一个) https://github.com/

img

注册登录好后,点击右上角我们的头像,新建一个仓库

img

img

img

命名为 username.github.io(username是你的账号名)。这里要注意。

还有就是新建的仓库一定要选择为 Public ,不然待会我们的项目是访问不了的。

img

2:配置hexo部署插件内容

首先确保安装了 hexo-deployer-git 插件(一般是没有的),如果没有,需要执行命令

npm install hexo-deployer-git --save

安装插件(待会本地项目生成静态文件部署到github需要执行命令)

img

接着打开我们hexo博客项目的配置文件 _config.yml ,在底部找到deploy配置项

img

修改成

img

deploy:
 type: git
 repo: [email protected]:username/username.github.io.git #username是你的账号名,username.github.io是你的仓库名
 branch: main #现在github默认是main分支

返回git bash命令行窗口,依次执行执行

hexo clean

hexo generate (可以简化成 hexo g

hexo deploy (可以简化成 hexo d

img

hexo g & hexo d 可以连一起执行

然后浏览器中输入 你的GitHub用户名.github.io 即可看到刚刚部署的博客,如果没有出现的话,可以稍微等一会延迟。

至此,Hexo+Butterfly+Github搭建博客就大功告成了!

如果需要域名配置的话,请看下面的一篇文章,链接在此

标签:Butterfly,butterfly,Github,Hexo,hexo,主题,博客,github,安装
From: https://www.cnblogs.com/laodengai/p/18086112

相关文章

  • 又发现一款免费好用的 AI 写代码神器,好用到爆,GitHub Copilot 可以扔了。。
    大家好,我是R哥。近两年AI太火了,风靡全球,AI编程工具也没有落下,比如微软的GitHubCopilot,还有阿里的通义灵码,连JetBrains系列工具都逼出了自家的AI功能。大家知道我是效率狂人,同样也是工具狂人,之前给大家分享了不少开发神器,其中也不乏国内的优秀选手,不是我吹,在某些方面,国......
  • Github高级搜索【指定日期区间,星星数,用户仓库名多条件精确搜索】
    小伙伴们号,欢迎关注,一起学习,无限进步GitHub高级搜索允许用户使用多种条件来精确查找所需的仓库、文件和代码。以下是对GitHub高级搜索的最全、详细总结说明:文章目录关键字搜索仓库名搜索用户搜索组织搜索文件搜索语言搜索星星数搜索更新时间搜索授权搜索组合搜索排......
  • FFmpeg开发笔记(六)如何访问Github下载FFmpeg源码
    ​学习FFmpeg的时候,经常要到GitHub下载各种开源代码,比如FFmpeg的源码页面位于https://github.com/FFmpeg/FFmpeg。然而国内访问GitHub很不稳定,经常打不开该网站,比如在命令行执行下面的ping命令。pinggithub.com上面的ping结果如下所示,可见默认解析的DNS地址连接超时。正在......
  • 如何使用 Github
    如何使用Github我们知道github是一个开源社区,但是经常因为网络的原因难以访问,下面提供一种方法,可以顺利访问github之前在github网址后面加上fast即可快速访问,现在不可以了WattToolkit在电脑的应用商店下载这个软件步骤然后点击一键加速,最后访问这个网站即......
  • 一个现成的用python写的项目, 有GUI,https://github.com/mustafamerttunali/deep-learni
    安装该项目ENV:Win11Anaconda 1.安装Python3.7, 在Anaconda新建一个python3.7环境2.安装VC++buildtool14.0 以上版本,我从下面这个link下载的最新版是17.6.4https://visualstudio.microsoft.com/visual-cpp-build-tools/否则会遇到 3.修改一下requir......
  • Gitlab+Jenkins+Docker+Harbor+K8s集群搭建CICD平台(持续集成部署Hexo博客Demo)
    目录涉及内容:一、CICD服务器环境搭建1、docker环境安装(1)、拉取镜像,启动并设置开机自启(2)、配置docker加速器2、安装并配置GitLab(1)、创建共享卷目录(2)、创建gitlab容器(3)、关闭容器修改配置文件(4)、修改完配置文件之后。直接启动容器(5)、相关的git命令(针对已存在的文件夹)3、安装配......
  • 【AIGC调研系列】Github Copilot进行pytest自动化测试的实践经验
    GitHubCopilot可以用于pytest自动化测试的实践和使用方法。此外,Copilot可以在很多情况下仅通过注释或函数名就能实例化出完整的代码,这表明它也可以用于补充测试用例[5]。具体到pytest框架,它是一个非常容易上手的自动化测试框架,具有丰富的资料文档和第三方插件,可以自定义扩展......
  • GitHub推荐使用指南
    GitHub是什么?做代码仓库,代码托管的仓库,类似功能的还有CSDN、GitLab等使用步骤创建账号创建仓库第一步第二步将本地代码推送到远程仓库gitbranch-Mmain表示将主线命名为main实际使用提交直接执行以下即可推送master分支gitremoteaddoriginhttps://github.com/G......
  • github官网访问不到的解决方法
    解决方案: 1)在键盘同时按住win+R输出cmd 2)在命令行窗口输入ping github.com 获取GitHub的官网IP    3)配置hosts文件,绕过DNS解析过程  打开电脑C:\Windows\System32\drivers\etc下的hosts文件编辑(需要管理员权限,右键,管理员权限打开),新增如下一行配置:20.205.243......
  • 无法访问GitHub,原因以及快速解决办法(转载)
    转载:无法访问GitHub,原因以及快速解决办法访问GitHub时,总是无法访问:例如出现如下情况:原因分析:一、首先,需要明确的是GitHub本身并没有封锁某些地区的访问。如果无法访问GitHub,很有可能是由于网络层面的问题。可能存在以下问题:DNS是一种用于将网址转换为IP地址的工具,如果你的电......