[实战干货]30分钟快速搭建hexo3.7.0 + next主题6.4教程(持续更新)

最新推荐文章于 2024-04-11 09:53:49 发布
最新推荐文章于 2024-04-11 09:53:49 发布
阅读量241 收藏
点赞数
文章标签： git 人工智能 javascript ViewUI
原文链接：https://juejin.im/post/5bd06f19e51d457a502a8598
版权

30分钟即可完成一个带评论、打赏、搜索、RSS、分类、标签等功能的博客
高效的搭建让博主更加专注于内容的生产

欢迎关注博主的个人博客 东行不西游

准备工作

  1. 必须安装git和node,官网有各平台详细的安装过程
  1. 准备一张头像和网站favicon
  • 200*200方形或圆形头像 (用来显示作者头像)
  • 32*32的favicon (浏览器打开网站标签的一个ico)
  1. hexo全局的图标配置信息均来自fontawesome
  2. 所有的配置项在修改的时候一定要记住 冒号 后是有一个空格的,不然保存后 在执行 hexo server 会失败

开始安装

git和node安装完后进入到博客的文件夹内,执行下面代码(均在终端操作)

$ npm install hexo-cli -g  #全局安装hexo命令
$ hexo init blog           #在当前目录下,初始化hexo一个名为blog项目
$ cd blog                  #进入该目录
$ git clone https://github.com/theme-next/hexo-theme-next themes/next #安装next主题
$ npm install              #安装项目必备插件
$ hexo server              #本地启动项目
复制代码

如果以上步骤均正确可以 点击即可看到博客首页 或 浏览器输入 localhost:4000 即可看到博客首页,如不能请检查之前的步骤是否正确,此时你已经完成了50%的工作

先找到 站点配置文件 blog/_config.yml
重要提示:修改每一个配置的时候都可以刷新页面观看修改结果,如果不显示可以在终端的博客目录执行

$ hexo clean
$ hexo server
复制代码

站点配置

  1. 先设置hexo的next主题 找到theme后修改为:
    theme: next #配置成刚下载的next主题
复制代码
  2. 配置hexo网站相关信息 找到site的设置 按下面备注修改相关信息
    # Site
title: 东行不西游  #网站标题
subtitle: 风在前,无惧!  #网站副标题
description: 心猿不定，意马四驰  #描述,介绍网站的
keywords: python,php,mysql,滑雪,摄影 #网站的关键字
author: Bowen #博主姓名
language: zh-CN #语言  zh-CN 是简体中文
timezone: UTC #时区
复制代码
  3. 设置hexo永久链接 设置永久链接的目的是为了便于分享和seo优化.这样别人收藏地址后不会出现链接失效
    # URL
url: https://dangbowen.com #网站的首页地址
root: / #网站的根目录设置
permalink: :year/:month/:day/:title.html # 这种 
设置的url表现为2018/10/18/hello-world.html 样式
复制代码
    默认链接样式可修改为 (permalink配置只能有一种,关闭某种开头加 #)
    permalink: :category/:title.html #用分类和博客title当做url地址
复制代码
  4. 设置hexo中的默认分类 找到 Category & Tag
    # Category & Tag
default_category: default  #这里设置一个默认分类名称,如果第3条永久链接设置为 permalink: category/:title/ 那么没有分类的博客就会被放在default这个分类下进行归档
复制代码

额外配置:hexo如何配置git信息(可跳过!后续新开一贴详细介绍) github和coding都提供page服务,这样我们就可以把博客静态资源发布到这2个仓库,然后用域名来访问博客,所有人都可以通过浏览器来观看你的博客.双仓库格式如下:

deploy:
  type: git
  repo:
      github: https://github.com/{your_name}/{your_name}.github.io,master #github 提供page的服务要求仓库名必须为 {your_name}.github.io 格式 比如你的github用户名为 abc 那么你必须建立一个 abc.github.io仓库
      coding: https://git.coding.net/{your_name}/{your_name}.git,master #coding要求page服务的仓库名为 用户名 一样 .例如:用户名为abc 仓库名也必须为abc  
复制代码

先找到 主题配置文件 blog/themes/next/_config.yml ,修改配置的时候都可以刷新页面观看修改结果,如果不显示可以在终端的博客目录执行

$ hexo clean
$ hexo server
复制代码

主题配置

  1. 配置hexo网站的favicon 把准备好的favicon放在 blog/themes/next/source/images/下

    favicon:
  small: /images/favicon-16x16-next.png #把favicon名修改成你自己的
  medium: /images/favicon-32x32-next.png 
复制代码

  2. 配置hexo中的tag,categories菜单 默认菜单只开启了首页和归档,hexo所有图标均来自fontawesome

    menu: #菜单设置为 菜单名: /菜单目录 || 菜单图标名字
  home: / || home 
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  commonweal: /404/ || heartbeat
menu_settings:
  icons: true  #显示图标
  badges: true  #显示统计信息
复制代码

  3. 手动生成hexo菜单对应文件 新菜单开启后是没有对应文件的,所以要手动生成about,tags,categories和404页面,这里我们将404替换成腾讯的公益页面 新建about页面

    $ cd blog
$ hexo new page about #about就是普通的布局一般用来介绍站点信息和博主信息等
复制代码

    新建一个tags页面

    $ cd blog
$ hexo new page tags
复制代码

    找到tags文件 blog/source/tags/index.md 编辑它,在头部修改为

    ---
title: All tags
date: 2018-10-01 13:58:44 #时间随意
type: "tags" #类型一定要为tags
comments: false #提示找个页面不需要评论,后续评论插件那里会详细介绍
---
复制代码

    新建一个categories页面

    $ cd blog
$ hexo new page categories
复制代码

    找到categories文件 blog/source/categories/index.md 编辑它,在头部修改为

    ---
title: 分类
date: 2018-10-15 00:03:57
type: "categories"
comments: false
---
复制代码

    新建一个404页面

    $ cd blog
$ hexo new page 404
复制代码

    找到404文件 blog/source/404/index.md 编辑它,内容全部替换成如下

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="返回"></script> 
</body></html>
 ```
复制代码

  4. 配置hexo本地搜索 安装插件,终端进入 cd blog 后执行:

    npm install hexo-generator-searchdb --save
复制代码

    主题配置文件如下:

    local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false
复制代码

    站点配置文件新添加如下代码:

    search:
  path: search.xml
  field: post
  format: html
  limit: 100
复制代码

  5. 设置hexo中的rss订阅 rss需要安装一个插件,终端进入 cd blog 后执行:

    npm install hexo-generator-feed --save
复制代码

    刷新主页就可以看到rss

  6. 配置hexo站点的footer信息 底部footer可以开关显示hexo版权,theme版权,还有建站时间等个性化配置

    footer:
  since: 2015   #建站开始时间
  icon:
    name: user  #设置 建站初始时间和至今时间中间的图标 默认是一个'小人像'更改user为heart可以变成一个'心'
    color: "#808080" #更改图标的颜色 红色为 '#ff0000'
  powered:
    enable: true #是否开启hexo驱动
    version: true #是否开启hexo版本号
  theme:
    enable: true #是否开启theme驱动
    version: true #是否开启主题版本号
  custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> #这里的底部标识是为了添加coding page服务时的版权声明 打开注释就可以看到底部有一个 hosted by coding pages
复制代码

  7. 配置hexo中next主题样式选择 next一共提供了4种首页样式,按照自己喜好选择一个,切记选择一个其他主题后其他的主题之前一定要加上#

    # Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
复制代码

  8. hexo网站next主题侧边栏宽度,头像信息,头像设置圆形和头像旋转

    sidebar:
  position: left  #选择pisces 或者 gemini 主题是 可以 选择侧边栏 位置 调整左边或者右边
  #position: right
  width: 300   # muse mist 主题 可以控制侧边栏的宽度 
  display: post   #如果是muse mist 主题 可以选择 侧边栏弹出动作  post 是 只在内容页弹出
  #display: always  #全局弹出
  #display: hide    #全局隐藏侧边栏 右下角有角标唤出
  #display: remove  #移除侧边栏
avatar:
  url: /images/avatar.gif  #设置头像资源的位置
  rounded: false  #开启圆形头像
  opacity: 1    #不透明的比例  0 就是完全透明
  rotated: false  #开启旋转
复制代码

  9. hexo中next主题的社交信息和友链配置

    social: #和菜单设置格式一样  社交名字: 社交url || 社交图标 ,图标信息还是[fontawesome](https://fontawesome.com/v4.7.0/icons)
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google

social_icons:
  enable: true  #显示社交图标
  icons_only: false #只显示图标的开关

# Blog rolls
links_icon: link  #友链的图标 参考上文
links_title: Links #友链的title  比如你可以更改为 友情链接
links_layout: block #友链摆放的样式,按块 一行一个
#links_layout: inline #按线摆放,一行很多个 切记 同时只能一种样式
links:
  Title: http://example.com/  #友链的地址
复制代码

  10. hexo中next主题首页文章不展示全文显示摘要,自动截取摘要和点击阅读全文跳转顶部

    scroll_to_more: true  #点击阅读全文后是否跳到<!--more-->标记处,设为false时点击阅读全文可以从头阅读
auto_excerpt: #是否自动截取摘要
  enable: false #设置为true则自动截取150字当做首页摘要
  length: 150   #自动截取的字数
复制代码

  11. hexo中next主题首页文章属性显示创建时间,修改时间,分类

    post_meta:
  item_text: false  # 设为true 可以一行显示 文章的所有属性
  created_at: true  #显示创建时间
  updated_at:
    enabled: true   #显示修改的时间
    another_day: true #设true时 如果创建时间和修改时间一样则显示一个时间
  categories: true  #显示分类信息
复制代码

  12. hexo中的next增加页面阅读统计,字数统计,阅读时长 新增busuanzi阅读统计

    busuanzi_count:
  enable: false  #设true 开启
  total_visitors: true  #总阅读人数 uv数
  total_visitors_icon: user  #阅读总人数的图标
  total_views: true  #总阅读次数 pv数
  total_views_icon: eye  #阅读总次数的图标
  post_views: true #开启内容阅读次数
  post_views_icon: eye #内容页阅读数的图标
复制代码

    新增字数统计,阅读时长,先安装插件

    $ npm install hexo-symbols-count-time --save
复制代码

    主题配置信息如下:

    symbols_count_time:
  separated_meta: true  # false 会显示一行
  item_text_post: true  # 显示属性名称,设为false后只显示图标和统计数字,不显示属性的文字
  item_text_total: true #底部footer是否显示字数统计属性文字
  awl: 4 #计算字数的一个设置,没设置过
  wpm: 275 #一分钟阅读的字数
复制代码

    站点配置新增如下:

    symbols_count_time:
 #文章内是否显示
  symbols: true
  time: true
 # 网页底部是否显示
  total_symbols: true
  total_time: true
复制代码

  13. hexo中next主题给内容页里的代码块新增复制按钮

    codeblock:
  copy_button:
    enable: true #增加复制按钮的开关
    show_result: true #点击复制完后是否显示 复制成功 结果提示
复制代码

  14. hexo中next主题文章主页配置微信公众号

    # Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /images/wechat-qcode.jpg #微信公众号的二维码
  description: 这是我的公众号  #公众号描述文字
复制代码

  15. hexo中next主题配置微信,支付宝打赏

    # Reward
reward_comment: 一毛也是爱~  #打赏描述
wechatpay: /images/wechat_pay.png #微信支付的二维码图片地址
alipay: /images/ali_pay.png  #支付宝的地址
#bitcoin: /images/bitcoin.png #这个是设置比特币的...
复制代码

  16. hexo中next主题新增 相关文章推荐 安装推荐文章的插件

    $ npm install hexo-related-popular-posts --save
复制代码

    主题配置信息如下:

    related_posts:
  enable: true
  title: 相关文章推荐 # 属性的命名
  display_in_home: false #false代表首页不显示
  params:
    maxCount: 5 #最多5条
    #PPMixingRate: 0.0 #可以看github上 这个相关度介绍
    #isDate: true #是否显示 日期
    #isImage: false #是否显示配图
    isExcerpt: false #是否显示摘要
复制代码

  17. hexo中next主题的文章原创申明 给每一个原创文章开启版权保护

    post_copyright:
  enable: true #设置true就开启了
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>
复制代码

  18. hexo中next主题更改code高亮样式

    highlight_theme: normal #可选值为 normal | night | night eighties | night blue | night bright 这几个挑一个喜欢的
复制代码

  19. hexo中next主题添加评论-Valine 点击官网leancloud注册账号,获取自己的appid,appkey,再看valine官网设置下自己的leancloud

    valine:
  enable: true # 开启评论
  appid:  ~~~  # 刚申请 leancloud 的 appid
  appkey:  ~~~ # 刚生情 leancloud 的 appkey
  notify: false # 是否邮件推送 详情看 https://github.com/xCss/Valine/wiki
  verify: false # 
  placeholder: Just go go # 评论框里的placeholder信息
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # 一页显示的评论条数
  visitor: false # 
复制代码

  20. hexo中next主题配置网页body背景动态效果 4个效果同时只能开启一个

    canvas_nest: false
three_waves: false
canvas_lines: false
canvas_sphere: false
复制代码

常见问题

  1. 为什么hexo server报错? 检查最近修改的配置文件中的各个配置项冒号后是否有空格,某些样式选择是否唯一
  2. 为什么menu设置完后,点击各个菜单无效,href=""现象? 检查站点配置文件relative_link: false 如为true 改为 false即可

最后的最后

由于6.4比5.x多了很多以前个性定制的配置,使得个性化的配置操作简单很多,不用修改样式和源码即可完成以前的定制效果,所以主题的更新还是要看个人的需求,如果功能够用的情况下还是保证创作博客为主,毕竟内容才是最能吸引读者的,共勉.

欢迎关注博主的个人博客 东行不西游,今天是10月24日,祝大家也祝自己节日快乐

本文作者： Bowen 本文原创链接： dangbowen.com/hexo/ad0bed… 版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

转载于:https://juejin.im/post/5bd06f19e51d457a502a8598

weixin_34306593
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
安装Hexo
对方北方
04-26 1204
什么是Hexo Hexo是基于Node.js实现的一个快速、简洁且高效的博客框架。Hexo使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 为什么选择Hexo GitHub Page官网首页的页底有Blogging with Jekyll的链接： 那么为什么不用Jekyll，而是选择Hexo呢？ Jekyll基于Ruby实现，安装Jek...
几个好用的hexo主题
热门推荐
破旧的手枪の博客
11-06 4万+
1.NexT 演示 Muse scheme: Alex LEE Mist scheme: uchuhimo Pisces scheme: Vi(iissnan大佬的blog) Gemini scheme: Raincal 评价 这是很多hexo用户的选择，也是十分成熟的hexo主题。对新手非常适合，对dalao也有拓展空间，十分值得一试。 使用教程 官方文档 简书上比较全的进阶配置 2.Yi...
Hexo 好看且实用的主题推荐
邻家阿涛的博客
03-10 7776
昨天在腾讯云开发CloudBase，搭建了一个属于自己的Hexo静态博客，然后还绑定了自己的已ICP备案的个人域名，但是了博客主题还是默认的，是时候要换一个博客主题了。今天在网上搜索Hexo博客主题时，还真有一款主题，我一眼就看中了，就是那种“一见钟情”的感觉。 一、主题简介 Fluid 是基于 Hexo 的一款 Material Design 风格的主题，由Fluid-dev负责开发与维护。 主题 GitHub:https://github.com/fluid-dev/hexo-...
hexo博客主题推荐
奇想派
07-25 5006
推荐多款hexo博客主题，每款都很精致简洁，功能众多。
hexo的butterfly主题美化，2024最新版，随缘更新
JesseXW的博客
01-18 5079
被同事拉入hexo坑后，他直接推荐我使用butterfly主题，网上很多美化要么用不起，要么有问题，经过一系列踩坑后诞生了这篇文章，不定时更新新功能......
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】
01-08
因此，对于不知道怎么搭建的伙伴，我会提供我搭建时用到的学习资料，任意选一篇按着教程搭建就好了。另外，本篇博客教程内容主要是记载本站美化DIY方面，更多后续内容将会更新在本站内 https://yangchaoyi.vip 教程...
hexo博客 nodejs +博客搭建+butteflr主题自用
07-26
在本文中，我们将深入探讨如何使用Node.js和Hexo框架搭建个人博客，并专注于Butterfly主题的自定义和应用。Hexo是一个基于Node.js的静态站点生成器，它可以帮助我们快速、高效地创建博客，而Butterfly主题以其美观、...
搭建Hexo博客+部署到Github
01-08
【搭建Hexo博客+部署到Github】教程 前言： 本文档主要介绍如何在Windows 10 64位系统下搭建Hexo博客，并将其部署到GitHub上。灵感来源于B站up主codesheep的视频及其评论区的分享，旨在为初学者提供详细步骤和学习...
Hexo博客搭建文件（next主题）
12-07
Hexo博客搭建是一个深受开发者喜爱的过程，它是一个基于Node.js的快速、简洁且高效的博客框架。在本案例中，我们关注的是使用Next主题来构建个人博客。Next主题以其优雅的设计和丰富的功能，成为Hexo用户中的热门...
我的博客（Hexo + NexT + GitPage）.zip
02-28
标题 "我的博客（Hexo + NexT + GitPage）.zip" 暗示这是一个包含个人博客搭建配置的压缩包，使用了Hexo框架、NexT主题以及GitPage服务。接下来，我们将深入探讨这些关键词所代表的IT知识点。 Hexo是一个基于Node....
网站人物头像
03-04
在注册页面若有头像可选的话不妨可以用用看
推荐一款优雅的Hexo主题：Chic
最新发布
gitblog_00097的博客
04-11 365
推荐一款优雅的Hexo主题：Chic 项目地址:https://gitcode.com/Siricee/hexo-theme-Chic 如果你是 Hexo 的爱好者并在寻找一个既美观又功能丰富的主题，那么 Chic 绝对值得你一看。这款由 Siricee 创建的主题以其简洁的设计、丰富的自定义选项和卓越的性能脱颖而出。 项目简介 Chic 是一个专门为 Hexo 框架设计的响应式博客主题，它注重阅...
将Hexo博客主题更换为NexT主题
winney07的博客
07-14 405
本地预览我们的博客页面，会发现，点击分类、标签、关于这几个页面的时候，会显示。13、上传成功后，可以通过自己的博客域名访问修改主题和修改相关配置后的博客页面。评论，欢迎在评论区与我分享您的想法和建议，将是对我最大的支持和鼓励。，进入命令窗口，输入下面的命令，本地预览博客，如果发现。，本地预览我们的博客页面，发现刚才的配置已经完成。12、在命令窗口，输入以下命令，将修改后的本地。
《Hexo: 从零开始编写自己的主题》2. 入门Hexo主题编写
Smileyan's blog
04-19 9129
2. 入门Hexo主题编写 这部分内容将非常非常简陋地实现主题编写，因为非常简陋，所以代码量也非常少，并且不带任何样式，主要的目的是搭建主题的总体架构，证明所有功能我们都是已经实现了的，把优化界面的事情留到以后完成。 2.1 新建主题并配置 在 themes 目录下新建一个文件夹，我们的主题对应的就是这个文件夹，给自己的主题起个名字，我们暂时起名为 base 吧。 目前 base 还是为空的文件夹，我们修改根目录的 _config.yml 也就是Hexo的配置文件，将主题修改为我们的主题名字 base。 并
Hexo+Butterfly主题美化
唐先森的博客
03-06 1万+
前言 本博客基于Hexo框架搭建，用到hexo-theme-butterfly主题（本人博客Butterfly版本3.4.0），hexo-theme-butterfly是基于Molunerfinn的hexo-theme-melody的基础上进行开发的。???? Butterfly 已经更新到3.6.2，请先参考这系列文档Butterfly教程进行基本配置 。如果这篇文章帮到了你，请在留言板写下您的评语吧，感谢您的大力支持! 完整教程：传送门。 主题特点： 简单漂亮，文章内容美观易读 M......
hexo主题应用中遇到的问题和解决方案（持续更新中）
Serena_tz的博客
04-07 1909
今天使用hexo部署的时候报错：ERROR Deployer not found: git 解决方案：命令行输入 npm install --save hexo-deployer-git
1.hexo+next友情链接页面搭建
kinght的博客
09-03 1569
title: 1.hexo+next友情链接页面搭建 date: 2020-08-02 22:36:47 categories: 3.系统运维 3.hexo相关 1.hexo美化 安装next模板的初始设置，友情链接是直接放在侧边栏里的，少还好，一旦友情链接多了，就会显得侧边栏特别的杂乱，所以就打算专门做个页面来存放友链 新增Links页面 命令创建 $ hexo new page links 然后根目录下/source就新增了一个links文件夹，里面还有一个index.md文件 在文件中写入.
Hexo版本升级和Next主题升级之坑
Just do it !
07-17 2万+
缘起 差不多用了一年hexo的3.2.0版本，next主题版本也用的5.0的，本来用的好好的，但是最近访问其他人的博客，发现访问速度比我的提升了不止一点点，遂决定折腾一番。 过程 Hexo版本升级 Hexo版本升级可以通过npm实现，相关命令如下： 先全局升级hexo-cli：-g表示全局升级。hexo本身是一个静态博客生成工具，具备编译Markdown、拼接主题模板、生成 HT...
NexT 6 添加字数和阅读时间统计
平行空间
10-31 3565
打开hexo目录，运行git bush，安装插件 $ npm install hexo-symbols-count-time --save 修改博客配置文件，添加以下代码 symbols_count_time: symbols: true time: true total_symbols: true total_time: true 修改主题配置文件，搜索symbols_count_time，快...
Hexo博客开发之——主题升级
我的博客
06-13 1146
一 为何要升级 主仓库已从 iissnan 名下 迁移至 theme-next 组织 theme-next版本已经从5.1.4 升级到了7.1.1(可能包含一些新的功能) 插件之间的依赖变弱 旧版本编译文件过多时编译时间变长 二 主题升级 2.1 升级说明文档 2.2 安装新主题库 git clone https://github.com/theme-next/hexo-t...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值