0.系统环境

  • 开发系统:Windows 10 Professional x64
  • 测试浏览器:Edge 138.0.3351.77 (正式版本) (64 位)及140.0.3421.0 (正式版本) dev (64 位)
    *后续软件安装均为windows x64版本
  • hexo配置文件分两类:站点(全局)配置、主题配置
  • hexo中的网页分为两种page、post,page是页面,post是文章,page和post都放在source文件夹下,但page在source下,post在source/_post下
  • hexo也可以自定义页面,参考自定义页面
  • 也可以在默认page上修改某一页面的index.md,来修改页面的布局
  • md文件支持原生markdown、css、html等语法
  • hexo自带tags(根据标签分类的页面)、categories(根据类别分类的页面)、about(关于)、link(友情链接)、archives(根据时间线排序)等page,可通过修改_config.yml中menu配置项来添加或删除
  • hexo新建

1. 下载node.jsgit

2. 安装hexo

创建hexo_blog_main文件夹,进入文件夹,右键选择Git Bash Here,输入以下命令:

1
2
npm install -g hexo-cli #安装,后续新建hexo blog不需重新下载,跳过该命令
hexo init #初始化

初始化成功后在当前路径会新建如下文件/文件夹:
hexo_init
其中,_config.landscape.yml是默认主题(landscape)的配置文件,主题在_config.yml中设置,但需提前下载(见下一步),_config.yml是hexo的配置文件,hexo博客的配置都在这个文件中,包括主题、插件、插件配置等;themes文件夹下放置主题文件夹;source文件夹下放置全局配置、资源,如博客文章/_post/*.md结尾、本地图片/img/*、配置/css/mystyle.css、/js/star-canvas.js、字体/fonts/*.ttf、页面/introduction/index.md、html等、插件/live2d*;

3. 安装butterfly主题及插件

直接下载butterfly仓库zip或者git克隆

1
2
3
4
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save #butterfly渲染插件
npm install hexo-wordcount --save #文章数词插件
...#搜索栏,其他插件,忘了

下载live2d-widgetlive2d-apixiaomai模型
新版live2d-widget的autoload.js、*.css被放在了dist文件夹中,修改路径时需加上/dist/。

4. 配置github pages

在github上创建一个仓库,仓库名为linphone-young.github.io
网站配置文件_config.yml中添加:

1
2
3
4
deploy:
type: git
repository: git@github.com:linphone-young/linphone-young.github.io.git
branch: main

hexo三连: hexo clean; hexo g; hexo d;
访问https://linphone-young.github.io/
hexo g 会生成/public文件夹,hexo d会将public文件夹中的内容推送到github仓库,github仓库中的内容即为网站内容

5. 推送到搜索引擎

https://shutiaoz.top/指南/Hexo/Hexo_Push_To_Search_Engine/