Hexo本地安装、主题部署

1、安装Hexo

准备工作完成后(git  node.js   ),就可以进行安装Hexo  了,先建立一个文件夹My-Blog,用来存放博客文件,然后可以直接在这个分区里找到这个文件夹内找到这个文件夹,打开进入文件夹内,鼠标直接点击空白处右击选择git bash  打开。

这里以我自己的为例,我把文件都存放在E:\My-Blog 目录下。

在这个目录下点击Git Bash Here ,打开git的控制台窗口,以后基本上所有的操作都 可以在git 控制台里面进行,这样就不用系统自带的CMD 命令窗口了,也可以避免不必要的错误。
image-20210319181924184

在命令窗口内输入以下的命令:

npm install -g hexo-cli	

git的控制台窗口出现如下即表示安装完成
image-20210319182508670
安装完后输入hexo -v验证是否安装成功。
至此hexo就安装完了
接下来初始化一下hexo,即初始化我们的网站,输入hexo init初始化文件夹,文件夹内具体内容如下:

hexo init	

image-20210319231242649

git的控制台窗口内容如下:

image-20210319231357748

之后就可以进行hexo 三连运行Hexo原始页面

hexo clean(or hexo cl)		#清空已有的Hexo文件	
hexo generate(or hexo g) 	#依据网页文本与新的css样式生成新的网站文件	
hexo server(or hexo s) 		#启动本地服务器,可以在localhost:4000查看网站修改效果	

image-20210319232506276

打开浏览器(建议使用无痕模式打开访问网站),输入网址: http://localhost:4000 即可看到hexo生成的静态页面。

2、更换Hexo主题

2.1主题推荐

官网主题:https://hexo.io/themes/
image-20210319233142643
这里推荐两款主题

  • Sakura 非常炫,缺点加载慢 https://github.com/honjun/hexo-theme-sakura

  • Next 功能集成多,简洁,界面一般 https://github.com/theme-next/hexo-theme-next

2.2Butterfly主题

此次我选择的主题是Butterfly,这款主题非常好看,好用,功能十分齐全,那么接下来就赶紧下载安装体验吧

2.2.1 主题下载

进入github点击下载zip:https://github.com/jerryc127/hexo-theme-butterfly/
或者进入gitee点击下载zip:https://gitee.com/iamjerryw/hexo-theme-butterfly
解压文件夹,将中的主题样式复制My-Blog\themes 目录下(注意下载下来需要将文件夹名改为butterfly):
image-20210319234449569

2.2.2 主题修改

打开My-Blog文件夹根目录下面的站点配置文件_config.yml,这里建议使用visual Studio Code或者sublime Text3程序查看编辑软件,把主题修改为butterfly,可以查找theme定位到在配置文件的位置,并且进行修改

image-20210319235224719

这里为了后期butterfly主题的更新方便以及后期插件的安装与替换,这里建议将My-Blog\themes\butterfly 目录下的_config.yml 文件进行复制并且修改名称为_config.butterfly.yml,然后将这个文件剪切到My-Blog\themes 目录下,后面直接对_config.butterfly.yml修改即可。

2.2.3 安装插件

如果沒有 pug 以及 stylus 的渲染器,还需要下载,否则在项目运行时会报错:

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

2.2.4 主题预览

这里还是一样hexo 三连即可,复习一下

hexo clean(or hexo cl)		#清空已有的Hexo文件	
hexo generate(or hexo g) 	#依据网页文本与新的css样式生成新的网站文件	
hexo server(or hexo s) 		#启动本地服务器,可以在localhost:4000查看网站修改效果	

image-20210320001219456

### Hexo 本地部署教程 #### 准备工作 为了成功在本地环境中部署 Hexo 博客,需先安装 Node.js 和 Git。Node.js 是 JavaScript 的运行环境,而 Git 则用于版本控制和项目管理[^1]。 #### 安装 Hexo 完成上述软件的安装之后,在命令行工具中执行如下指令来全局安装 Hexo: ```bash npm install -g hexo-cli ``` 这一步骤会通过 npm(Node 包管理器)安装 Hexo 命令行接口至计算机上[^4]。 #### 初始化博客目录 选择一个合适的文件夹作为博客项目的根目录,并进入该文件夹路径下执行初始化命令: ```bash hexo init blog cd blog ``` 此过程将在指定位置创建一个新的 Hexo 站点结构。 #### 主题渲染插件配置 为了让 Hexo 支持更多样化的模板引擎与样式表语言,可以考虑安装额外的主题渲染插件。例如,对于 Pug 模板引擎和支持 Stylus 样式定义的语言来说,可以通过下面这条命令实现它们的支持: ```bash npm install hexo-renderer-pug hexo-renderer-stylus --save ``` 这些插件能够增强 Hexo 对不同前端技术栈的支持能力[^5]。 #### 启动本地服务器 当一切准备就绪后,就可以尝试启动本地开发服务器来进行初步测试了。只需简单地输入以下命令即可快速查看效果: ```bash hexo server # 或者更简洁的形式 `hexo s` ``` 默认情况下,Hexo 开启的服务监听于 http://localhost:4000/ 地址之上[^3]。 #### 测试与发布前的操作组合 在正式对外分享之前,通常还需要经历一系列常规性的准备工作,比如清理旧数据、重新生成最新内容以及上传更新后的资源等。为此,经常使用的复合型操作序列如下所示: ```bash hexo clean && hexo generate && hexo deploy ``` 这段脚本实现了清除缓存、构建新页面并推送更改到远程主机的功能集合[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值