hexo服务搭建

hexo服务搭建

Hexo 一款简洁并且高效的博客框架,结合markdown语法,让你的想法展现的淋漓尽致。通过本地编译markdown文件生成html 静态文件,部署到云端;使得笔记得到永久保存。利用Github、腾讯云等免费代码仓库存储服务,让你能够随时随地编辑;不受设备影响。

1.初始化hexo

​ 在命令行中运行一下命令

1
2
3
4
5
#初始化hexo
hexo init <folder_name>
cd <folder_name>
#下载相关依赖
npm i

​ hexo 初始化完成之后,在folder_name目录下将会产生一下文件和文件夹

​ hexo相关的命令均需要在bash中进入folder_name目录后运行

1
2
3
4
#启动本地预览
hexo s
#将md文件编译为html
hexo g

​ 启动本地预览后,访问网址可以查看到静态网页

http://localhost:4000/

2.部署到云端

2.1GithubPage进行部署

  1. 在github中创建一个仓库

  2. 将hexo push到github仓库中

下载对应的插件

--save参数会将插件信息保存在package.json文件中

1
npm install hexo-deployer-git --save

配置站点目录下_config.yml文件

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:zpliu1126/codeHub.git
branch: gh-pages

部署实际上就是在将hexo编译生成的public目录下的所有文件推送到云端

部署完成后通过访问网址即可访问到hexo静态博客

https://<Github账号名称>.github.io /仓库名

2.2部署到腾讯云

当有多个云端时,配置文件如下进行配置

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repo: git@github.com:zpliu1126/codeHub.git
branch: gh-pages
- type: git
repo: git@e.coding.net:biocodehub/codeHub.git
branch: master

3.自定义主题

​ hexo中默认的主题是landscape,可以在github中搜索对应的主题选择下载

3.1主题安装

我这里使用到的是next主题

  1. 下载对应的主题文件
  2. 将主题整个文件夹粘贴到themes目录下
  3. 更改站点文件夹配置文件中theme字段为对应的主题名
1
2
3
4
5
6
#下载对应的主题 
git clone https://github.com/theme-next/hexo-theme-next themes/next
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

3.2主题优化

Next主题优化官方文档

https://theme-next.org/docs/theme-settings/

  • 自定义样式文件

    Next最新版主题支持将样式文件放置在主题文件夹之外,只需要在主题文件夹中进行配置

1
2
3
4
5
6
7
8
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
style: source/_data/styles.styl
  • 添加背景图片

    添加主题自定义样式

    修改样式时,最后将public文件夹全部删除,然后hexo g重新编译生成css文件

1
2
3
4
5
6
7
body{
background:url(/images/themeImg/splash.png);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
  • 转载协议
1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language:
  • 自定义logo
1
2
# Custom Logo (Do not support scheme Mist)
custom_logo: /images/themeImg/logo.png
  • 代码高亮显示和复制按钮
1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style:
  • 阅读进度条
1
2
3
4
reading_progress:
enable: true
color: "#37c6c0"
height: 2px
  • 书签

    当下次访问时自动滚动到对应位置

1
2
3
4
5
6
7
bookmark:
enable: false
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto
  • Follow me 标签
1
2
3
4
5
# Follow me on GitHub banner in right-top corner.
github_banner:
enable: true
permalink: https://github.com/yourname
title: Follow me on GitHub
  • 字体设置

    Next为5中类型提供字体设置

    • 全局字体设置
    • title字体设置
    • 标题字体设置 h1 、h2
    • 文章字体设置
    • 代码字体设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: true

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host:

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Monda
size: 1.125

# Font settings for site title (.site-title).
title:
external: true
family: Lobster Two
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family: Amita
size:

# Font settings for posts (.post-body).
posts:
external: true
family: Roboto Slab

# Font settings for <code> and code blocks.
codes:
external: true
family: PT Mono
  • 安装插件

    支持两种安装方法

    1. 本地安装
    2. 使用CDN links

    如果你的站点是部署在一些免费的云端,推荐使用CDN links,因为它加载起来更快

    本地安装

1
2
3
4
5
6
7
#在bash中安装下载对应插件
$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax
# 启用pjax插件
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true

CDN links 安装

jsDelivr CDN is recommended to deliver our third-party plugins

1
2
3
4
5
6
7
# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Remember to use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix.
_internal: lib
pjax: https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js
  • 设置整体布局
1
2
3
4
5
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
  • 配置菜单栏
    1. 第一栏表示菜单名
    2. 第二栏表示相对url
    3. ||后表示icon
1
2
3
4
5
6
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archiveasad
  • 菜单栏的一些修饰
    • 显示icon
    • 显示条目数
1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: true

条目数支持中文

修改next\layout\_partials\header\menu-item.swig文件

1
2
3
4
5
6
7
{%- if theme.menu_settings.badges %}
{%- set badges = {
'文章' : site.posts.length,
'分类': site.categories.length,
'标签' : site.tags.length
}
%}
  • 侧边栏显示头像

    支持将图片放在theme文件夹之外,例如在 site directory source/uploads/

1
2
3
4
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif
  • 编辑站点信息

    • author
    • description

    配置hexo/_config.yml文件

1
2
3
# Site
author:
description:

4.第三方评论系统

推荐指数 优点 缺点
Valine 4 每天30000条评论,10GB的储存 作者评论无标识
来必力/livere 4 多种账号登录 评论无法导出
畅言 3 美观 必须备案域名
gitment 3 简洁 只能登陆github评论
Disqus 1 需要翻*墙

4.1Valine

注册Valine账户

https://leancloud.cn/dashboard/applist.html

文章中添加字段

comments: true

主题文件中进行设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
enable: true
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: zh-cn # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0

5.搜索

使用本地插件配置搜索数据库

1
npm install hexo-generator-searchdb

hexo/_config.yml文件配置

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

next/_config.yml文件中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
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

6.自定义标签

hexo生成标签页面

1
hexo new "新的标签"

在标签页面md文件中指定类型为标签

1
2
3
title: 新的标签
date: 2020-03-22 08:39:29
type: tags

在post文章中使用标签

  • 多个标签使用-进行区分
1
2
3
4
5
6
7
8
title: hexo服务搭建
comments: true
author: zzz
date: {date}
categories:
- test
tags:
- hexo

7.首页进行文章截取

编辑theme/_config.yml文件

1
2
3
4
5
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

下载对应插件

npm i hexo-excerpt

另外一种可以使用<!-- more -->在md文件中实现更加精准的控制

8.静态资源压缩

一般将css和js文件中的空格和换行符进行压缩,一定程度上能减少网络延迟

  • 安装gulp 命令

    站点根目录下运行

1
$ npm install gulp
  • 安装gulp插件
1
2
3
4
5
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
  • 压缩规则文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', gulp.series('minify-css',function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
}));
// 压缩js文件
gulp.task('minify-js', gulp.series('minify-html',function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
}));
// 压缩 public/demo 目录内图片
gulp.task('minify-images', gulp.series('minify-js',function() {
gulp.src('./public/demo/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('./public/uploads'));
}));
// 默认任务
gulp.task('default', gulp.series('minify-css',function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
}));
  • 在hexo 编译生成html文件后执行压缩即可

hexo g && gulp && hexo d

9.保存原始post文件和主题配置文件

9.1新建空分支

1
2
3
4
5
6
7
8
9
10
11
12
13
#先克隆仓库
git clone git@e.coding.net:biocodehub/codeHub.git
# 进入仓库
cd codeHub
# 创建新的分支
git checkout --orphan source
# 删除当前分支所有文件
git rm -rf .
# 创建一个文件并提交到当前分支
$ echo \"My GitHub Page\" > index.html
$ git add .
$ git commit -a -m \"new branch source\"
$ git push origin source

登录远程仓库,手动删除index.html就变成空的分支了

9.2提交hexo源码

1
2
3
4
5
6
# 站点初始化仓库
cd codeHub
git init
# 添加远程地址
git remote add origin “仓库地址"
# 编辑

gitignore文件 ,选择推送的文件

在添加要推送的文件之间,先将主题下的\themes\next\.git文件夹删除,git不允许一个仓库包含另外一个仓库。

1
2
3
4
5
6
7
8
9
10
11
12
#获取远端分析
git fetch
#切换到origin source分支
git checkout origin/source
#新建本地分支
git checkout -b source
#将本地分支与远端分支关联
git branch -u origin/source source
#开始上传文件
git add .
git commit -m "code Hub source code"
git push origin source

9.3克隆远端源码

1
2
3
4
5
$ git clone -b source git@e.coding.net:biocodehub/codeHub.git
$ hexo s
$ npm install hexo-deployer-git -save
# 推送到远端
$ hexo g && gulp hexo d

10文章访问统计

使用LeanCloud (China)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 npm install hexo-leancloud-counter-security
#hexo 站点进行配置
leancloud_counter_security:
enable_sync: true
app_id: <your app id>
app_key: <your app key>
username: <your username> # Will be asked while deploying if is left blank
password: <your password> # Recommmended to be left blank. Will be asked while deploying if is left blank
# 主题配置文件
leancloud_visitors:
enable: true
app_id: #<app_id>
app_key: #<app_key>
# Required for apps from CN region
server_url: # <your server url>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in lc counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
security: true

使用Busuanzi

开启主题配置文件

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

修改主题文件中swig文件实现自定义

\themes\next\layout\_third-party\statistics\busuanzi-counter.swig

修改文章顶部栏目

\themes\next\layout\_macro\post.swig

11.参考

  1. 遇见西门 https://www.simon96.online/2018/10/12/hexo-tutorial/
  2. Next https://theme-next.org/docs/
  3. git仓库推送 https://blog.csdn.net/wankui/article/details/53328369
------ 本文结束 thankyou 感谢阅读 ------

欢迎扫一扫上面的微信二维码,订阅 codeHub 公众号