通过hexo快速搭建个人博客

个人博客预览点击这里：菜卷的博客

一、需要安装的工具

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
• Git

二、开始安装Hexo

$ npm install -g hexo-cli

三、安装完成后，初始化项目

$ hexo init

四、在项目根目录下执行命令

我用的是cnpm命令安装的

$ npm install

五、启动项目

$ hexo server

六、部署到github

点击这里

七、配置文件

项目根目录下的 _config.yml 是 站点配置文件，博客中和网站相关的配置都在这里更改，关于配置信息的详细解释点击这里。

八、安装next主题

在根目录下打开终端,执行如下命令，这行命令会从github上下载next主题到根目录themes/next：

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

九、优化next主题

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于根目录下，主要包含 Hexo 本身的配置；另一份位于next主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

1. 选择Scheme

也就是选择页面的布局方式，一共有四种scheme，在主题配置文件中搜索 Schemes，去掉前边的#即可。

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Pisces和Gemini的区别就是背景色和有无盒子阴影，区别不是很大。

2. 设置语言、网站标题、网站描述等

在站点配置文件中，把language修改为zh-CN，即可将语言更改为中文，修改完后需要重启项目

# Site
title: 菜卷的博客
subtitle: ""
description: ""
keywords:
author: 菜卷
language: zh-CN
timezone: ""

3. 隐藏底部由 Hexo & NexT.Pisces 强力驱动

在 主题配置文件中搜索Powered，改为false

  # Powered by Hexo & NexT
  powered: false

4. 开启字数统计、阅读时长

1. 安装插件 npm install hexo-symbols-count-time
2. 在站点配置文件最下边新增如下代码：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

3. 在主题配置文件中搜索symbols_count_time，做出如下修改，最终实现效果如图。

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

5. 开启搜索服务

1. 安装插件npm install hexo-generator-searchdb --save
2. 在站点配置文件最下边新增如下代码：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3.在主题配置文件中搜索local_search，启用本地搜索功能，效果如图

local_search:
  enable: true

6. 更换背景图片

1. 在项目根目录source文件下新建 _data/styles.styl
2. 将如下代码复制进新建的文件中

//背景图片设置
body {
    background-image: url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

3. 在主题配置文件中搜索custom_file_path，将style注释解开

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

4. 将背景图放入根目录public/images中，注意，背景图的命名和扩展要和styles.styl文件中的background-image的路径一致

7. 框体透明度调整

在根目录source/_data/styles.styl中新增如下代码，如果没有该文件，点击这里

//背景图片设置
body {
    background:url(https://source.unsplash.com/random/1600x900); 
    // background-image: url(/images/background.jpg);
    // background: green;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

// 各板块设置透明度
// 侧边框的透明度设置
.content-wrap {
  opacity: 0.75;
}

// 主板块
.main-inner {
  background-color: rgba(255, 255, 255, 0);
}

// 主版块里的post板块(f12,cmd+shift+c找出)
.post-block {
  opacity: 0.75;
}

// 侧边框的透明度设置
.sidebar {
  opacity: 0.75;
}

// 菜单栏的透明度设置
.header-inner {
  background: rgba(255, 255, 255, 0.75);
}

// 页码
.pagination {
  opacity: 0.75;
}

// 搜索框（local-search）的透明度设置
.popup {
  opacity: 0.75;
}

8. 文章内容居中显示

在主题配置文件中搜索text_align，做如下修改

text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: center
  mobile: center