个人博客搭建Hexo+Next主题

个人博客搭建Hexo+Next主题

安装 Hexo

hexo官网

Node.js下载

Git官网

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

创建博客目录

hexo init gotesting

创建名为gotesting的文件夹作为博客根目录

cd gotesting
npm install

进入目录,安装在下安装hexo依赖

hexo server

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

启动服务,打开网址 http://localhost:4000/

在这里插入图片描述

安装Next主题

git clone https://github.com/next-theme/hexo-theme-next themes/next

在gotesting\themes文件夹下看到生产的next文件夹

在这里插入图片描述

修改gotesting下_config.yml文件

theme: landscape
修改为
theme: next
language修改为
language: zh-CN

启动hexo

hexo server

在这里插入图片描述

配置Next

修改配置文件themes/next/_config.yml

修改语言
language: zh-CN

修改主题样式
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

配置菜单
menu:
  home: / || fa fa-home
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

配置完效果

在这里插入图片描述

配置分类、标签和关于

hexo new page tags
hexo new page categories
hexo new page about

在source目录下分别修改对应文件夹中的index.md文件中的title,并且增加type属性,点击菜单的时候才能正常打开页面,页面的title显示的是自己设置的title

tags
---
title: 标签
date: 2014-12-22 12:39:04
type: tags
---
categories
---
title: 分类
date: 2014-12-22 12:39:04
type: categories
---
about
categories
---
title: 分类
date: 2014-12-22 12:39:04
type: about
---

修改博客主页的title

根目录\_config.yml
# Site
title: Gotesting的博客
subtitle: <br><font size="3" color="red">坚持自律,越自律越自由</font>
description:
keywords:
author: Gotesting
language: zh-CN
timezone: ''

效果

开启本地搜索

安装服务
npm install hexo-generator-searchdb

themes\next\_config.yml

修改enable 为true
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

修改这里的ture为false
algolia_search:
  enable: false
  hits:
    per_page: 10

根目录\_config.yml,最后新增
search:
  path: search.xml
  field: post
  content: true
  format: html

新建页面属性修改

根目录\_config.yml,修改
# Writing
new_post_name: :year/:month/:title.md # File name of new posts

新建博客并添加标签和分类

根目录
hexo new "个人博客搭建Hexo+Next主题" 
修改 个人博客搭建Hexo+Next主题.md, 添加标签和分类
---
title: 个人博客搭建Hexo+Next主题
date: 2022-02-13 15:18:54
tags: [Hexo, Next]
categories: ['博客搭建']
---

首页不全显示添加阅读全文

next\_config.yml,修改read_more_btn为true
# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

个人博客搭建Hexo+Next主题.md中合适位置增加 
<!--more-->

在这里插入图片描述

在这里插入图片描述

添加代码块复制功能

  next\_config.yml,修改如下位置enable为true
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style:

部署博客到gitee

配置路径
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://gitee.com/gotesting1/gotesting1.git

安装依赖
npm install hexo-deployer-git --save

设置git邮箱账号
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

执行命令,并在弹出的输入框填写正确的用户名和密码
hexo deploy
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值