使用GitHub+Hexo+live2d搭建个人博客
使用GitHub+Hexo+live2d搭建个人博客
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
安装hexo
sudo npm install hexo-cli -g
创建博客目录
hexo init username.github.io
cd username.github.io
npm install
运行
hexo clean #清理文件
hexo g #生成文件
hexo s #运行
打开浏览器,输入地址localhost:4000
即可看到博客页面
安装主题
主题官网可以查看
https://hexo.io/themes/[](https://hexo.io/themes/)
我使用的是volantis,文档地址
https://volantis.js.org/v2/getting-started/[](https://volantis.js.org/v2/getting-started/)
下载主题
git clone https://github.com/xaoxuu/hexo-theme-volantis themes/volantis
修改配置文件
项目根目录下_config.yml文件
theme: volantis
安装依赖
npm i -S hexo-generator-search hexo-generator-json-content
npm i -S hexo-renderer-stylus
配置文件
一般在/_config.yml
配置网页图标名称等
一般在/theme/{theme}/_config.yml
配置主题等页面显示的问题
部署到Github
在GitHub创建一个<username>.github.io
的public仓库,如果你的用户名是xxx,则需要创建一个xxx.github.io
的public仓库,这个步骤很简单就跳过了
安装依赖
npm install hexo-deployer-git --save
网站配置git
在网站的_config.yml
中配置deploy
deploy:type: gitrepo: <repository url> #你的仓库地址branch: master
部署
hexo d
需要Github的用户名和密码,填入即可
现在的样子
当然这个需要你们根据主题里面的文档进行配置
配置live2d
hexo可以直接当做插件使用live2d,不过很慢
下载依赖
npm install --save hexo-helper-live2d
下载主题
可以选择主题下载,选择不同的人物
npm install live2d-widget-model-shizuku
配置主题
在/_config.yml
配置文件里面添加一段配置
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:enable: true#enable: falsescriptFrom: local # 默认pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径# scriptFrom: jsdelivr # jsdelivr CDN# scriptFrom: unpkg # unpkg CDN# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 urltagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中debug: false # 调试, 是否在控制台输出日志model:use: live2d-widget-model-shizuku# use: live2d-widget-model-wanko # npm-module package name# use: wanko # 博客根目录/live2d_models/ 下的目录名# use: ./wives/wanko # 相对于博客根目录的路径# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 urldisplay:position: leftwidth: 150height: 300mobile:show: true # 是否在移动设备上显示scale: 0.5 # 移动设备上的缩放react:opacityDefault: 0.7opacityOnHover: 0.8
可以自己选择大小和位置
配置好了之后再次部署
hexo clean
hexo g
hexo d
测试
下面那个人物等了一会再出现的
感谢
hexo+github+live2d+volantis
万能的网络
以及勤劳的自己
使用GitHub+Hexo+live2d搭建个人博客相关推荐
- 如何使用Github+Hexo快速搭建个人博客
如何使用Github+Hexo快速搭建个人博客 可以移步地址:https://zyt505050.gitee.io/2019/01/27/ru-he-shi-yong-github-hexo-kuai ...
- GitHub+hexo+win10 搭建个人博客
GitHub+hexo+win10 搭建个人博客 个人感觉这篇很详细,值得收藏. http://hujichn.github.io/2016/04/06/Win10上利用github+hexo建立博客 ...
- 使用 Hexo + Next 搭建静态博客
欢迎移步我的博客阅读:<使用 Hexo + Next 搭建静态博客> 前言 Github 为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时Github还提供了开发者可以在 Git ...
- hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学
最近,粉丝们在金九银十期间也是不断的面试,有比较多的毕业生说我在这个期间出多一些面试题,上几期都是倾向于面试文章,这期出一次简历加分项操作,使用hexo框架搭建个人博客. 作为应届毕业生或者1-3年工 ...
- Github Pages + Hugo 搭建个人博客
文章目录 Github Pages + Hugo 搭建个人博客 零.效果 一.创建 Github 库 二.安装 Hugo 和 Git 三.新建 Hugo 网站 四.选择 Hugo 主题 五.新建文章 ...
- 20210826-Gitee+Hexo+NexT搭建个人博客
Gitee+Hexo+NexT搭建个人博客 一.准备 1.1 安装 node.js 参考: https://www.cnblogs.com/zhouyu2017/p/6485265.html Node ...
- hexo同时在github和gitcafe搭建个人博客
说明 自己在使用hexo搭建静态博客的时候踩了许多坑,最终去官网看教程搞定了, 建议用hexo搭建个人博客的时候,最好看清教程的日期和使用的版本,这样就 不会因为版本的不同导致的问题了.建议先去hex ...
- node mysql 搭建博客_node.js+Hexo+Git搭建个人博客
今早上考完试回来,接到腾讯云的每月邮件续费通知. 对于一个小开发来讲,买一个云服务器建站最方便不过,但是对于学生党来说还是有些贵. 一想明年7月份,云服务器就一元每月变65每月,加上30来块的域名费, ...
- 使用Hexo免费搭建个人博客教程
前言 现在各种互联网博客非常的,常见的如CSDN.简书.掘金.博客园等平台,这些博客平台做的都很好,可以直接在上面注册自己的账号写文章,发表的文章在百度.Bing等搜索引擎上也能收到,但缺点是受于平台 ...
最新文章
- 2017-04-09,周日整理
- 你想见的大神都来AI ProCon 2019了,优惠票限时抢购开启!
- Linux实用命令集
- html 中ajax 请求没反应,ajax请求数据成功,页面的数据没有加载出来
- Spring事务传播行为详解
- 神了!用命令行管理你的 GitHub 项目,不必再开网页!
- java语言语法--- Java标识符(标识符命名规则)、Java关键字、Java变量(变量的声明、赋值、使用)和常量(字符常量、字面常量)(包括Java字节码文件反汇编命令javap)
- 如何查看一个网站是否部署了SSL证书?
- 【智能车Code review】——小S与中S道路判断
- MySQL——JSON_REPLACE()函数修改JSON属性值
- linux基础知识总结(四)
- python每天学多久_怎么自学python,大概要多久?
- 水库大坝安全监测系统/水利平台高保真原型/大坝安全监测分析预警系统 /工程监测/工程档案/环境量监测/位移监测/渗压监测/工程管理/报警管理/横河向位移监测/历史数据/工程档案/顺河向位移监测
- 个人博客作业-Week2 (代码规范, 代码复审)
- gdb学习汇编(三)
- CANOE学习笔记-CAPL语言设计
- FusionAccess模板制作并发放
- 适合有编程基础的人看的《韩顺平零基础30天学java》笔记(P104~P129)
- python经典小游戏贪吃蛇_Python开发贪吃蛇小游戏
- 【总结】最全1.5万字长文解读7大方向人脸数据集v2.0版,搞计算机视觉怎能不懂人脸...
热门文章
- 原生Array.isArray()判断对象是否为数组
- cocos creator 2.43 使用 BMFont文字会变黑块,drawCall飙升
- Unity 3D 导入资源包 || Unity 3D 导出资源包
- 自动驾驶测试系列(一):初识自动驾驶 下
- CentOS 7 安装windows字体
- node.js快速入门指南
- 马帮对接打通金蝶云星空订单
- 全国车牌号所属地JSON(省及城市两级联动)
- python matlab 多条曲线 单位_【基础篇】MATLAB科研制图常用代码命令
- u盘文件计算机信息,U盘数据恢复