30分钟快速搭建hexo3.7.0 + next主题6.4教程(持续更新最新版)

| | | 评论数： |
| 本文字数： 8.9k | 阅读时长 ≈ 8 分钟

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

准备工作

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

开始安装

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

1
2
3
4
5
6
$ 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
重要提示:修改每一个配置的时候都可以刷新页面观看修改结果,如果不显示可以在终端的博客目录执行

1
2
$ hexo clean
$ hexo server

站点配置

  1. 先设置hexo的next主题
    找到theme后修改为:

    1
    theme: next #配置成刚下载的next主题

  2. 配置hexo网站相关信息
    找到site的设置 按下面备注修改相关信息

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: 东行不西游  #网站标题
    subtitle: 风在前,无惧!  #网站副标题
    description: 心猿不定，意马四驰  #描述,介绍网站的
    keywords: python,php,mysql,滑雪,摄影 #网站的关键字
    author: Bowen #博主姓名
    language: zh-CN #语言  zh-CN 是简体中文
    timezone: UTC #时区

  3. 设置hexo永久链接
    设置永久链接的目的是为了便于分享和seo优化.这样别人收藏地址后不会出现链接失效

    1
    2
    3
    4
    5
    # URL
    url: https://dangbowen.com #网站的首页地址
    root: / #网站的根目录设置
    permalink: :year/:month/:day/:title.html # 这种 
    设置的url表现为2018/10/18/hello-world.html 样式

    默认链接样式可修改为 (permalink配置只能有一种,关闭某种开头加 #)

    1
    permalink: :category/:title.html #用分类和博客title当做url地址

  4. 设置hexo中的默认分类
    找到 Category & Tag

    1
    2
    # Category & Tag
    default_category: default  #这里设置一个默认分类名称,如果第3条永久链接设置为 permalink: category/:title/ 那么没有分类的博客就会被放在default这个分类下进行归档

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

1
2
3
4
5
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 ,修改配置的时候都可以刷新页面观看修改结果,如果不显示可以在终端的博客目录执行

1
2
$ hexo clean
$ hexo server

主题配置

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

    1
    2
    3
    favicon:
      small: /images/favicon-16x16-next.png #把favicon名修改成你自己的
      medium: /images/favicon-32x32-next.png

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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页面

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

    新建一个tags页面

    1
    2
    $ cd blog
    $ hexo new page tags

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

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

    新建一个categories页面

    1
    2
    $ cd blog
    $ hexo new page categories

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

    1
    2
    3
    4
    5
    6
    ---
    title: 分类
    date: 2018-10-15 00:03:57
    type: "categories"
    comments: false
    ---

    新建一个404页面

    1
    2
    $ cd blog
    $ hexo new page 404

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!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 后执行:

    1
    npm install hexo-generator-searchdb --save

    主题配置文件如下:

    1
    2
    3
    4
    5
    local_search:
      enable: true
      trigger: auto
      top_n_per_article: 1
      unescape: false

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

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 100

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

    1
    npm install hexo-generator-feed --save

    刷新主页就可以看到rss

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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种首页样式,按照自己喜好选择一个,切记选择一个其他主题后其他的主题之前一定要加上#

    1
    2
    3
    4
    5
    # Schemes
    scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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主题的社交信息和友链配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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主题首页文章不展示全文显示摘要,自动截取摘要和点击阅读全文跳转顶部

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

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

    1
    2
    3
    4
    5
    6
    7
    post_meta:
      item_text: false  # 设为true 可以一行显示 文章的所有属性
      created_at: true  #显示创建时间
      updated_at:
        enabled: true   #显示修改的时间
        another_day: true #设true时 如果创建时间和修改时间一样则显示一个时间
      categories: true  #显示分类信息

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

    1
    2
    3
    4
    5
    6
    7
    8
    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 #内容页阅读数的图标

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

    1
    $ npm install hexo-symbols-count-time --save

    主题配置信息如下:

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

    站点配置新增如下:

    1
    2
    3
    4
    5
    6
    7
    symbols_count_time:
     #文章内是否显示
      symbols: true
      time: true
     # 网页底部是否显示
      total_symbols: true
      total_time: true

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

    1
    2
    3
    4
    codeblock:
      copy_button:
        enable: false #增加复制按钮的开关
        show_result: false #点击复制完后是否显示 复制成功 结果提示

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

    1
    2
    3
    4
    5
    # Wechat Subscriber
    wechat_subscriber:
      enabled: true
      qcode: /images/wechat-qcode.jpg #微信公众号的二维码
      description: 这是我的公众号  #公众号描述文字

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

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

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

    1
    $ npm install hexo-related-popular-posts --save

    主题配置信息如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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主题的文章原创申明
    给每一个原创文章开启版权保护

    1
    2
    3
    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高亮样式

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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个效果同时只能开启一个

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

Bowen wechat
博客文章会同步更新在公众号[后端浪里个浪]
一毛也是爱~