hexo安装美化和部署,看这篇文章就够啦

987 阅读8分钟

获取更多信息,可以康康我的博客,所有文章会在博客上先发布随记 - 记录指间流逝的美好 (xiaoyustudent.github.io)

准备工作

在安装hexo之前,您需要安装nodejs和git,前者用于安装hexo和其他插件,后者用于部署

nodejs安装

以下安装都是基于windows系统,其他系统可以参考官方文档

点击 nodejs下载,下载好后双击打开,除了安装位置可能需要更改以外,其他设置可以根据自己情况进行勾选,默认一路next

因为我们只需要用到npm工具,所以在安装好后,我们可以尝试一下在cmd中是否能够正常使用npm工具

npm.png

问题记录:本地运行会出现图片无法加载出来的问题。有两种方法:

第一种方法是在source文件夹下新建一个img文件夹,用来存放图片文件,使用绝对路径引入图片

第二种方法是安装插件,在项目根目录中运行cmd,执行下列代码

npm install hexo-renderer-marked

插件安装.png

之后在_config.yml文件中更改配置如下

post_asset_folder: true #更改配置
marked:
  prependRoot: true #添加配置
  postAsset: true #添加配置

更改完成后直接引入图片名称即可

git安装

接下来是安装git,点击 git下载,下载好后双击打开,同样也是除了安装位置可能需要更改,其他设置默认可以一路next,同理,安装好后,我们可以在cmd中尝试git是否安装成功,nodejs和git在windows下安装后默认都是已经在系统环境中了,如果没有在系统环境中,可以自己添加

git.png

安装hexo

准备工作完成后我们就可以开始安装hexo了,这里我推荐全局安装,当然也可以自己新建文件夹局部安装,需要自己添加进环境变量中。打开cmd,运行下列代码

npm install -g hexo-cli

安装完成后,通过以下命令查看是否安装成功,成功会显示版本信息

hexo -v

创建博客文件

新建文件夹,在文件夹下运行cmd,并依次执行下列命令

blog可以是其他名字

hexo init blog
cd blog
npm install 

执行完成后我们打开blog文件夹

blog.png

其中,scaffolds是模板文件夹,创建新文章或者新页面时,Hexo会根据此文件夹建立文件;source是资源文件夹;themes是主题文件夹,Hexo会根据此文件夹生成静态页面

主题美化

我目前使用的主题是butterfly,放一张图给大家康康,具体信息可以查看 hexo butterfly官网

index.png

安装和基础配置

在项目根目录下运行cmd,并运行以下代码

npm i hexo-theme-butterfly

安装好了之后我们会在themes文件夹下看到butterfly文件夹,这个就是主题文件夹。接下来我们安装butterfly必须要的插件,同样在cmd中运行

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

建议

在项目根目录新建文件_config.butterfly.yml,并且把主题目录的_config.yml内容复制到_config.butterfly.yml中,后面我们只需要在_config.butterfly.yml中配置主题相关的内容,Hexo会合并_config.butterfly.yml和_config.yml中的配置,如果存在同名配置,则优先使用_config.butterfly.yml中的配置

进阶配置

只列举了常用,并且我正在使用的配置,后续如果有其他配置更改,后续添加

打开_config.butterfly.yml文件

导航栏配置

menu:
  首页: / || fas fa-home # 可以设置为中文
  Archives: /archives/ # 可以取消或者更改图标
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

复制添加版权信息

copy:
  enable: true #是否开启网站复制权限
  copyright:
    enable: true #是否开启复制版权信息添加
    limit_count: 20 #字数限制,当复制文字大于这个数字,将在复制的内容后加上版权信息

代码相关配置

highlight_theme: darker #  darker / pale night / light / ocean / mac / mac light / false 代码主题设置
highlight_copy: true # copy button 显示或者隐藏复制按钮
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button 是否折叠代码块,如果是true则默认开始就折叠
highlight_height_limit: false # unit: px
code_word_wrap: true

网站图标

# Favicon(设置网站图标)
favicon: /img/favicon.png

# Avatar (设置头像)
avatar:
  img: /img/head.png
  effect: false

首页图片展示

# The banner image of home page
index_img: /img/top_img.jpg

文章相关配置

post_meta:
  page: # Home Page
    date_type: both # created or updated or both 显示创建日期或者更新日期或者都显示
    date_format: date # date/relative 设置日期显示是绝对日期还是相对日期。绝对日期:2023/1/1 相对日期:2天前
  post:
    date_type: both # created or updated or both 显示创建日期或者更新日期或者都显示
    date_format: date # date/relative 设置日期显示是绝对日期还是相对日期。绝对日期:2023/1/1 相对日期:2天前

字数统计

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

需要安装对应插件,cmd中运行下列代码

npm install hexo-wordcount --save

评论设置

comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Valine # Valine,Disqus
  # 我使用的Valine框架,具体可以查看官方文档
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
  
  valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  avatar: hide # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

底部相关设置

footer:
  owner:
    enable: true #是否启用
    since: 2023 #开始年限
  custom_text: 欢迎来到我的 <a href="https://butterfly.js.org/">随记</a>! # 自定义文字
  copyright: false # Copyright of theme and framework #是否显示copyright相关内容

自定义颜色

theme_color:
  enable: true
  main: "#b6d5e1"
  paginator: "#65799b"
  button_hover: "#b6d5e1"
  text_selection: "#65799b"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#65799b"
  blockquote_padding_color: "#b6d5e1"
  blockquote_background_color: "#b6d5e1"
  scrollbar_color: "#b6d5e1"
  meta_theme_color_light: "#e2eff1"
  meta_theme_color_dark: "#0d0d0d"

大家可以直接拿去用,嘿嘿

网站信息

runtimeshow:
  enable: true
  publish_date: '2023/1/19' #开始日期

创建页面

常用的比如标签页,分类页,默认是没有的,需要我们自己去创建

进入cmd,运行下列代码

about可以是其他名字

hexo new page about

运行后会在项目的source文件夹中创建一个名为about的文件夹,其中有index.md文件,后面我们就在此文件中进行修改

标签页,分类页等需要获取对应数据的页面,需要在md文件顶部添加type

---
title: 归档
date: 2023-01-18 15:02:14
type: archives
---

创建文章

进入cmd,运行下列代码

text可以是其他名字

hexo new text

运行后会在项目的source/_posts文件夹中创建一个名为text.md的文件(如果开启了静态资源加载,则会创建一个同名文件夹),后面我们就在此文件中进行修改

<!-- 以下是一些常用的文章配置 -->
---
title: hexo安装与部署
<!-- 标题 -->
copyright_author: 小昱同学
<!-- 作者 -->
copyright_author_href: /about/
<!-- 点击作者跳转页面 -->
copyright_info: 本文为原创文章,如需转载,请联系博主
tags: hexo
<!-- 标签 -->
categories: 博客
<!-- 分类 -->
top_img: top_img.jpg
<!-- 头图 -->
cover: top_img.jpg
<!-- 缩略图 -->
abbrlink: 17921
date: 2023-01-18 17:47:26
---

部署

在以上工作完成后我们就可以部署了,部署需要用到git,我们已经安装了,然后我们需要创建github或者gitee(还有其他的,常用的就这两个),这里我用的是github

git准备工作

我们需要配置一下GitHub账户信息,用户名和邮箱为您github上的用户名和邮箱

git config --global user.name "用户名"
git config --global user.email "邮箱"

之后继续输入

ssh-keygen -t rsa -C "邮箱"

一路回车即可,之后在C:\Users\您当前登录windows的账号.ssh可以找到id_rsa.pub文件,打开文件,复制里面的内容

github准备工作

新建仓库,仓库名为用户名.github.io 点击仓库的settings,点击Deploy keys,然后点击Add deploy key,title设置为您的邮箱,Key为刚才复制的内容,之后点击Add key

setting.png

文件设置和插件安装

回到Hexo,打开_config.yml文件,在最底部填写如下内容

deploy:
  type: git
  repo: https://github.com/您的用户名/您的用户名.github.io.git
  brach: master

然后找到URL,改为以下内容

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://您的用户名.github.io/

在项目根目录打开cmd,运行以下代码

npm install hexo-deployer-git --save

部署命令

在cmd中运行以下代码

hexo clean
hexo g
hexo d

然后在浏览器输入 http://你的Github用户名.github.io 即可访问您的博客