hexo本地部署-图文教程

最终效果

前置条件

你的电脑需要有git,node环境

安装使用

npx 想要解决的主要问题，就是调用项目内部安装的模块,如果提示你hexo命令无法识别，但是你安装了hexo模块，你就需要使用npx hexo … 来进行命令操作。

npm install -g hexo 

npx hexo init blog

cd blog

npm install

npx hexo server

配置主题

下载butterfly主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

需要安装一个插件，进行主题渲染

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

重新启动项目，可以看到控制台输出了butterfly主题的logo

创建页面

hexo new page 页面名称

标签页

创建标签页：hexo new page tags

分类页

创建分类页：hexo new page categories

友链页

创建友情链接页：hexo new page link

添加几个友链，创建 source/_data,然后编写 link.yml

- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
    - name: 杀死一只知更鸟
      link: https://robindeblog.cn/
      avatar: https://img.robindeblog.cn/weblog/c609eb80779a43f69855d5926743ad5f.jpg
      descr: 😶‍🌫️热衷于web开发的菜鸟一枚！

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

404页

使用主题内置的404页面，开启一下

个性化设置

语言及网站信息设置

导航栏,菜单目录

nav:
  logo: # image
  display_title: true
  fixed: fixed # fixed navigation bar

# Menu 目录
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

头像及背景封面图

# Avatar (頭像)
avatar:
  img: /img/avatar.jpg
  effect: false

# Disable all banner image
disable_top_img: false

# The banner image of home page
index_img: /img/default-bg.png

# If the banner of page not setting, it will show the top_img
default_top_img: /img/default-top.png

美化特效

# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖動特效)
  mobile: false

# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'

# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
click_heart:
  enable: true
  mobile: false

模板页的配置说明

页面 Front-matter

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
---

文章 Front-matter

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
---