学习 Gitee+Hexo 搭建个人博客这一篇就够了

最终效果:个人博客


目录

  • 1、环境准备
  • 2、hexo
  • 3、Butterfly主题
  • 4、码云配置
  • 5、文章发布


1、环境准备

  • Node.js v14.19.1
  • Git

2、hexo

中文文档

1、全局安装 hexo

npm install hexo-cli -g

hexo -v

2、初始化hexo模板

mkdir blog

cd blog

hexo init

4、目录结构

其中 /blog/source/_posts 存放md文件
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第1张图片

学习 Gitee+Hexo 搭建个人博客这一篇就够了_第2张图片

5、运行hexo(建议每次新建或者修改配置都执行三步)

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

6、访问 - http://localhost:4000
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第3张图片


3、Butterfly主题

官方展示

1、在你的 blog 根目录

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

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

theme: butterfly

3、安装插件

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

4、重新启动

hexo clean
hexo g
hexo s

5、配置直接参考官方文档


4、码云配置

1、新建仓库
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第4张图片
2、配置 _config.yml

deploy:
  type: git
  repo: https://gitee.com/laptoy/laptoy.git
  branch: master

3、安装git部署插件

npm install hexo-deployer-git --save

4、推送到远程库

hexo g --d  

5、本地多了public文件夹,远程仓库多了文件
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第5张图片


6、开启page服务
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第6张图片
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第7张图片


5、文章发布

1、md文件签名添加如下

---
title: file_name
tag: 标签名
categories: 分类    # 分类在sakura显示才能查看
comment: 是否允许评论(true or false)
description: 描述
---

博客正文md格式
---
title: Java毕业设计:智慧校园管理系统
tag: 毕设项目
categories: 技术 #分类在sakura显示才能查看
comment: true
description: VUE+SpringBoot+MyBatis-plus
---

2、推送到远程仓库

hexo g --d

3、远程仓库手动刷新page服务
学习 Gitee+Hexo 搭建个人博客这一篇就够了_第8张图片


你可能感兴趣的:(hexo)