J.Nemo

Stay Hungry, Stay Foolish

hexo博客搭建和优化

发表于 更新于 分类于
本文字数： 5.6k 阅读时长 ≈ 5 分钟

简介

Hexo(中文官方网站)是一款基于Node.js的静态博客框架。以快速、简洁、高效著称，可以上百个页面在几秒内瞬间完成渲染. Hexo支持Github Flavored Markdown的所有功能，甚至可以整合Octopress的大多数插件. 并自己也拥有强大的插件系统。可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。

主题

主题在官方文档中有很多，其中Next 主题因其强大的扩张性而最受欢迎。

前期准备

  • 注册Github账号，熟悉Git的相关操作
  • 安装了node.js、Git、npm，并了解相关基础知识

开始搭建

创建仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是nchu，那么你就新建nchu.github.io的仓库（必须是你的用户名），将来你的网站访问地址就是 http://nchu.github.io

注意：每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

绑定域名

默认的 xxx.github.io 来访问是可以的，我的就是这样，所以暂不介绍。

本地安装hexo

  1. 调用本地cmd命令运行$ npm install -g hexo
  2. 新建一个本地文件夹，比如说Blog，进入该文件夹
  3. 右键运行Git Bash，输入hexo init回车，继续输入 hexo g和hexo s进行代码的生成和本地启动。
  4. 打开浏览器访问 http://localhost:4000，便可以看到新搭建的博客。
  5. 安装一个deploy的插件，运行npm install hexo-deployer-git
  6. 配置_config.yml中有关deploy的部分：（图中是我的，大家可以自行切换）
1
2
3
4
deploy:
  type: git
  repo: git@github.com:MUXIAONING/MUXIAONING.github.io.git
  branch: master

注意：_config.yml全局命令，冒号后面必须有一个空格，否则可能会出问题。

使用nexT主题

  1. Git Bash终端执行以下命令$ git clone https://github.com/iissnan/hexo-theme-next themes/next。
  2. 解压所下载的压缩包至站点的 themes 目录下， 并将解压后的文件夹名称更改为 next 。
  3. 打开站点__config.yml文件，将themes修改为next。
  4. hexo-next主题下的一些个性化配置，参考：Next主题配置

执行下面的三个命令，打开你的浏览器，地址栏输入你的用户名.github.io进行访问。

1
2
3
hexo clean 删除本地静态文件（Public目录），可不执行。
hexo g 生成本地静态文件（Public目录）
hexo deploy 将本地静态文件推送至github（hexo d）

常见的命令

常见命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章   hexo n == hexo new
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录   hexo g == hexo generate
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）  hexo s == hexo server
hexo deploy #部署到GitHub   hexo d == hexo deploy
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

组合命令：

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

注意：博客的发布与预览可以使用bat命令，新建一个发布.bat文件和预览.bat文件

1
2
3
4
5
6
7
8
9
@echo off
D:
cd D:\WORK\blog
hexo clean&&hexo g&&hexo d
======================================
@echo off
D:
cd D:\WORK\blog
hexo clean&&hexo g&&hexo s

博客编辑

更新文章

1.在blog\scaffolds目录，修改post.md文件为以下的格式（我自己用的）

1
2
3
4
5
6
7
8
9
10
11
12
13
title: {{ title }}
date: {{ date }}
tags: 
categories: 
mathjax: true
copyright: true
comments: true
keywords:
    - Hexo
    - 加密
description: 
password: 
photo:

2.在当前的Blog目录下执行hexo new “Hello Github”,会在source\_posts目录下生成.md文档，建议用Typora打开进行编辑，语法为markdown语法。

3.编辑完后，运行对应的脚本，进行发布或者预览。

添加菜单

进入theme目录，编辑_config_yml文件，找到menu:字段，在该字段下添加一个字段。
NexT主题菜单设置，用于设置博客上方导航栏，在主题配置文件中修改。

1
2
3
4
5
6
7
menu:
  home: /                       #主页
  categories: /categories	      #分类页（需手动创建）
  #about: /about 			        	#关于页面（需手动创建）
  archives: /archives		       	#归档页
  tags: /tags				           	#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

注意：可以先取消自己即将新建的页面的注释，比如关于我、分类、标签等。

标签设置

  1. 运行hexo new page "tags"命令，同时，在/source目录下会生成一个tags文件夹，里面包含一个index.md文件。
  2. 修改/source/tags目录下的index.md文件。
1
2
3
4
5
---
title: tags
date: 2019-06-29 14:37:02
type: "tags"
---

分类设置

  1. 运行hexo new page "categories"，同时，在/source目录下会生成一个categories文件夹，里面包含一个index.md文件。
  2. 修改/source/categories目录下的index.md文件。
1
2
3
4
5
---
title: categories
date: 2019-06-29 14:47:21
type: "categories"
---

其他的类似页面，我就不一一赘述了。

主题美化

修改 site 相关信息

1
2
3
4
5
6
7
title: xx
subtitle:     
description:
keywords:
author: xx
language: zh-Hans
timezone:

修改主题风格

next 主题对应的有四个风格，Muse、Mist、Pisces、Gemini，默认为 Muse。

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

头像设置

编辑站点配置文件，增加avatar字段

1
avatar: /images/avatar.png

文章加密访问

1.打开themes->next->layout->_partials->head.swig文件,在meta标签后面插入这样一段代码：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if({{ page.password }}){
            if (prompt(请输入文章密码) !== {{ page.password }}){
                alert(密码错误！);
                history.back();
            }
        }
    })();
</script>

2.然后在我给的样本代码（blog\scaffolds目录下）中，输入密码，输入描述。

侧边栏社交链接

这一块的代码，包含两部分，其一是链接，其二是链接图标。

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/MUXIAONING || github
  微博: https://weibo.com/6421106372  || weibo
  E-Mail: mailto:muxiaoningdewei@gmail.com || envelope
  网易云: https://music.163.com/#/user/home?id=446917614  || music
social_icons:
  enable: true
  icons_only: true
  transition: false
  网易云: headphones-alt
  微博: weibo

添加RSS

1.运行npm install --save hexo-generator-feed命令。

2.修改站点配置文件，在最后添加以下代码：

1
2
3
4
5
6
feed: # RSS订阅插件
  type: atom
  path: atom.xml
  limit: 0

plugins: hexo-generate-feed

添加评论系统

NexT支持的第三方的评论系统有很多，我选的是Disqus评论，但是发现貌似被墙了，推荐选择Valine评论。

  1. 在来必力的官网上注册账号。
  2. 在此处获取data-uid。
  3. 打开NexT主题的配置文件—config中，搜索livere_uid，将livere_uid前面的#号去掉，将id填写到livere_uid：后面。

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除。

1
2
3
4
5
6
7
8
9
<!--
<div class="powered-by">
  {{ __(footer.powered, <a class="theme-link" rel="external nofollow" href="https://hexo.io">Hexo</a>) }}</div>
<div class="theme-info">
  {{ __(footer.theme) }}-
  <a class="theme-link" rel="external nofollow" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}  </a>
</div>
-->

添加搜索

运行npm install hexo-generator-searchdb --save安装 hexo-generator-searchdb。

编辑主题配置文件，启用本地搜索功能 ：

1
2
local_search:
  enable: true

添加网站访问量统计

1.配置是否开启不蒜子访问量统计功能

在themes/yilia/_config.yml添加属性

1
2
3
# 是否开启访问量统计功能(不蒜子)
busuanzi:
 enable: true

2.引入不蒜子并添加站点访问量

在themes/yilia/layout/_partial/footer.ejs末尾添加如下代码

1
2
3
4
5
6
7
8
9
10
11
<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_site_pv">
                本站总访问量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站访客数<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

3.添加文章访问量

在themes/yilia/layout/_partial/post/date.ejs开头添加如下代码

1
2
3
4
5
6
<% if (theme.busuanzi && theme.busuanzi.enable && !index){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_page_pv" style='display:none' class="<%= class_name %>">
              <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
        </span>
<% } %>

最后，运行上面所述的bat命令即可。