目前腾讯云已经部署了一套halo的环境,之前还部署了hexo+next的环境,但是管理起来的话halo似乎更胜一筹,另外halo还出了小程序端,后面就想着尝尝鲜,然后就用到了现在。
服务器明年3月到期,穷孩子续费不起服务器,所以准备把上面的东西都迁出来。
以前用过github page,但是无奈它的龟速,因此放弃了
现在找到了gitee page,感觉找到了新大陆,因此想着把东西都迁移到gitee上面
gitee注册
在gitee上面注册账号,账号名有用,最好起得牛逼一点。
三件套
Git
几乎很多人本来就已经安装,安装方式还是那样,点点点就完了。
Window安装包链接:Git
其他版本就没了解过。
NodeJs
官方文档
中文文档:nodejs
配置环境变量
安装完后,若查看版本信息,发现命令不存在,则需要配置环境变量,执行nodejs安装目录
配置国内镜像源
npm config set registry https://registry.npm.taobao.org
不配置的话,获取某些资源会比较慢,最好配置国内资源镜像源
Hexo
官方文档
中文文档:hexo
安装hexo
npm install -g hexo
-g
全局安装,无论在哪个目录下都可以执行hexo
命令
安装完后,尝试查看版本,确认是否安装成功,显示命令不存在,则需要配置环境变量
hexo -v
添加环境变量
打开系统的环境变量,找到
path
属性,添加hexo的环境变量,路径为hexo全局安装的路径,进入nodejs安装目录下
找到node_global下的node_modules文件夹下hexo文件夹下的node_modules下的.bin目录,一定是.bin目录,一定是.bin目录,一定是.bin目录
D:\nodejs\node_global\node_modules\hexo\node_modules\.bin
验证
再次打开gitbash或者cmd,一定要重新打开,不然在同一个cmd或者gitbash窗口是获取不到最新的环境变量,验证
hexo -v
,正常显示版本信息
初始化
使用gitbash或者cmd 切换到需要初始化的文件夹或者重新新建一个文件夹,后续所有操作都是基于这个文件夹操作,
文件夹名字最好只用英文,避免中文方式。
hexo init hexo # 初始化创建,创建根目录
cd hexo # 进入hexo目录
npm install # 安装hexo需要的资源
验证
hexo clean # 删除本地构建内容,
hexo generate # 根据配置和文章构建内容,可使用 hexo g代替
hexo server # 启动服务,默认是4000端口,可使用hexo s代替
以上命令可以合并使用,方便快捷,如:
hexo clean && hexo g && hexo s
执行完命令后,打开浏览器,输入localhost:4000即可看到第一个初始化后的demo,也就是说hexo已经成功安装了。
创建仓库
- 在gitee上面新建仓库,private和public都可以
- 仓库名称这个要注意,本人已踩坑。
如果新建的仓库名称与账户名称不一致的话,到时候hexo d
的时候就会创建多一层文件夹.io/
,文章中使用的图片没法链接到对应的图片上面,并且还得修改主配置文件_config.yml
修改root
配置为.
,不然整个首页都是出于404的状态,所以建议还是创建一个仓库跟账户名一样的,这样主配置文件也不用修改,图片的链接还是按照正常的查找即可。
举例: 账户名为wenthywangtee,仓库名也叫wenthywangtee
主题配置
主配置文件
hexo安装后,在根目录会存在一个配置文件:_config.yml,配置文件中存放了基本上的配置,根据自身需要配置即可。
提供我已经修改过的配置:
language: zh-CN
permalink: :title/
url :https://wenthywangtee.gitee.io/
deploy:
type: git
repo: git@gitee.com:wenthywangtee/wenthywangtee.git
branch: master
language
:默认是en,也就是说整个网站的内容都会使用英文来展示,可根据个人修改,官方提供zh-tw,zh-CN,en
可配置permalink
:生成的文章构成的路径,可配置,默认配置是根据年月日生成文章。后面使用的时候发现太好使,改成了只需用文章的标题生成文章即可。url
:网站的首页,需要配置,不配置可能会出现找不到路径deploy
:部署到的gitee仓库,必须要修改,不修改不会提交到仓库。type
建议使用git,若使用https,需要验证账号和密码以及出现其他的构建问题,type
和repo
要对应上类型,使用git需要用git的仓库链接,使用https要用https的链接,不对应上类型会导致push失败
安装多个主题
根据需要,在hexo-themes主题列表中找到想要安装的,去到对应的资源路径,下载zip或者使用git clone 拷贝到根目录下的themes文件夹下面
下载
Next主题
以前一直在用,推荐4星
butterfly主题
推荐5星,推荐使用git clone 方式,使用gitBash切到hexo的项目根目录下,clone到主题文件夹中,使用的是gitee
git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly
使用主题
- 修改主配置文件_config.yml 中
theme
配置即可,如果使用的next主题,则改成next
即可
theme: butterfly
主题配置
目前只使用butterfly主题,其他主题可根据主题文档配置即可。现提供我修改的主题配置
主题配置文件根目录下的themes
文件夹下的butterfly
文件夹下的_config.yml
。
修改菜单为中文简体
menu:
首页: / || fas fa-home
文章: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
关于: /about/ || fas fa-heart
修改文章版权开启(可选)
copy:
enable: true
copyright:
enable: false
limit_count: 50
修改个人跳转链接
social:
fab fa-github: https://gitee.com/wenthywangtee || Github
fas fa-envelope: mailto:946374340@qq.com || Email
修改网站图标(可选)
favicon: /favicon.ico
修改个人头像
avatar:
img: /avatar.png
effect: true
修改文章版权设置(可选)
post_copyright:
enable: true
decode: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
修改拷贝设置(可选)
copy:
enable: true
copyright:
enable: true
limit_count: 50
修改文章赞赏功能开启(可选)
reward:
enable: true
QR_code:
- img: /wechat.png
link:
text: wechat
开启文章评论功能(可选)
comments:
use:
- Valine
text: false
lazyload: true
count: true
valine:
appId: appid #个人申请的appid,需要修改
appKey: appKey #个人申请的appkey,需要修改
pageSize: 5 # comment list page size
avatar: monsterid # gravatar style https://valine.js.org/#/avatar
lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
placeholder: 记得留下您的邮箱和昵称...方便快速回复 # valine comment input placeholder (like: Please leave your footprints)
guest_info: nick,mail # valine comment header info (nick/mail/link)
recordIP: true # Record reviewer IP
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
emojiCDN: # emoji CDN
enableQQ: true # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
requiredFields: nick,mail # required fields (nick/mail)
option:
修改尾脚为2020
footer:
owner:
enable: true
since: 2020
开启子标题
subtitle:
enable: true
effect: true
loop: true
source: 1
sub: stay hungry stay foolish
修改右侧菜单列(可选)
aside:
enable: true
hide: false
button: true
mobile: true
position: right
card_author:
enable: true
description:
button:
icon: fab fa-github
text: Follow Me
link: https://gitee.com/wenthywangtee
card_announcement:
enable: true
content: 自信即巅峰
打开统计开关(可选)
busuanzi:
site_uv: true
site_pv: true
page_pv: true
开启统计开启天数(可选)
runtimeshow:
enable: true
publish_date: 2020/11/23 11:00:00
修改主题自动切换(可选)
darkmode:
enable: true
button: true
autoChangeMode: 2
开启美化文章(可选)
beautify:
enable: true
field: post # site/post
title-prefix-icon: '\f0c1'
title-prefix-icon-color: '#F47466'
开启字数统计(可选)
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
如果构建报错,即没有安装wordcount 插件,需要安装插件
npm i --save hexo-wordcount
安装完后,再执行构建
开启音乐播放(全局)(可选)
前提是需要安装音乐插件
hexo-tag-aplayer
npm install --save hexo-tag-aplayer
再修改配置即可
pjax:
enable: true
exclude:
aplayerInject:
enable: true
per_page: true
inject:
head:
bottom:
- <div class="aplayer no-destroy" data-id="五月天" data-server="xiami" data-type="search" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>
添加搜索功能(algolia)(可选)
注册algolia
在algolia官网上注册一个账号,会获取到
appId,apiKey,adminApiKey,indexName
信息,用来补充下面的配置信息
安装搜索插件
需要安装
hexo-algoliasearch
插件,否则构建出错
npm install hexo-algoliasearch --save
修改主配置文件
主配置文件(.config.yml),非主题下的配置文件,添加以下内容
algolia:
appId: appid #在algolia 注册的appid
apiKey: apiKey #在algolia 注册的apiKey
adminApiKey: adminApiKey #在algolia 注册的adminApiKey
chunkSize: 5000
indexName: "blog"
fields:
- content:strip:truncate,0,500
- excerpt:strip
- gallery
- permalink
- photos
- slug
- tags
- title
修改主题下配置文件
algolia_search:
enable: true
hits:
per_page: 6
上传文章信息
hexo clean && hexo g&& hexo algolia
或者单独执行
hexo algolia
,但是这样是没有重新构建文章信息,会导致信息内容出错
压缩图片等资源功能(可选)
安装插件
gulp
npm install --global gulp-cli
npm install gulp --save-dev
html压缩
npm install gulp-htmlclean --save-dev
npm install --save gulp-htmlmin
css压缩
npm install gulp-clean-css --save-dev
js压缩
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env
图片压缩
npm安装
npm install --save-dev gulp-imagemin
npm install gifsicle --save-dev
npm install mozjpeg --save-dev
npm install optipng-bin --save-dev
cnpm安装
- npm全局安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,由于是全局安装,并没有添加到环境变量,导致cnpm命令不能用,因此需要单独把cnpm的安装目录添加到环境变量,需要找cnpm命令所在目录,添加这至环境变量即可
添加完环境变量,需要重新打开终端窗口(cmd或者gitBash)
- 使用cnpm安装对应的图片压缩插件
cnpm install --save-dev gulp-imagemin
cnpm install gifsicle --save-dev
cnpm install mozjpeg --save-dev
cnpm install optipng-bin --save-dev
创建gulpfile 文件
在主配置文件的根目录添加
gulpfile.js
文件
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var htmlmin = require('gulp-htmlmin')
var htmlclean = require('gulp-htmlclean')
var imagemin = require('gulp-imagemin')
// tester (如果使用tester,把下面4行前面的//去掉)
// var uglifyjs = require('terser')
// var composer = require('gulp-uglify/composer')
// var pump = require('pump')
// var minify = composer(uglifyjs, console)
// babel (如果不是使用bebel,把下面兩行註釋掉)
var uglify = require('gulp-uglify')
var babel = require('gulp-babel')
// minify js - babel( 如果不是使用bebel,把下面註釋掉)
gulp.task('compress', () =>
gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(uglify().on('error', function (e) {
console.log(e)
}))
.pipe(gulp.dest('./public'))
)
// minify js - tester (如果使用tester,把下面前面的//去掉)
// gulp.task('compress', function (cb) {
// var options = {}
// pump([
// gulp.src(['./public/**/*.js', '!./public/**/*.min.js']),
// minify(options),
// gulp.dest('./public')
// ],
// cb
// )
// })
// css
gulp.task('minify-css', () => {
return gulp.src('./public/**/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest('./public'))
})
// 壓縮 public 目錄內 html
gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, // 清除 HTML 註釋
collapseWhitespace: true, // 壓縮 HTML
collapseBooleanAttributes: true, // 省略布爾屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, // 刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, // 刪除 <script> 的 type="text/javascript"
removeStyleLinkTypeAttributes: true, // 刪除 <style> 和 <link> 的 type="text/css"
minifyJS: true, // 壓縮頁面 JS
minifyCSS: true, // 壓縮頁面 CSS
minifyURLs: true
}))
.pipe(gulp.dest('./public'))
})
// 壓縮 public/uploads 目錄內圖片
gulp.task('minify-images', async () => {
gulp.src('./public/img/**/*.*')
.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/img'))
})
// 執行 gulp 命令時執行的任務
gulp.task('default', gulp.parallel(
'compress', 'minify-css', 'minify-html', 'minify-images'
))
运行
先执行
hexo -g
生成文件,再执行gulp
压缩文件
gulp
结果如图所示,若中间报错,则需要检查插件是否安装正常,有可能是版本问题,有可能是获取资源问题
添加最新评论显示(可选)
newest_comments:
enable: true
limit: 6
avatar: true
leancloud:
enable: true
appId: appid for leancloud #在leancloud网站上注册账号获取
appKey: appKey for leancloud #在leancloud网站上注册账号获取
serverURL: url fro leancloud #在leancloud网站上注册账号获取
default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank
github_issues:
enable: false
repo:
disqus:
enable: false
forum:
api_key:
关闭相关推荐(可选)
感觉有点小乱,所以关闭了
related_post:
enable: false
limit: 6 # Number of posts displayed
date_type: created # or created or updated 文章日期顯示創建日或者更新日
正式部署
本地构建
不带搜索功能
hexo clean && hexo g && hexo d
带压缩
hexo clean && hexo g &&gulp && hexo d
带搜索功能(algolia)
hexo clean && hexo g&& hexo algolia&& hexo d
带压缩
hexo clean && hexo g &&gulp && hexo algolia&& hexo d
构建结果
gitee同步
打开gitee新创建的仓库 ,在服务中找到
gitee pages
打开的窗口中,点击更新即可,部署分支不用修改,部署目录如果按照上面的操作也是不需要修改的,强制使用HTTPS,根据需要选择即可。
部署完成
上一步部署完之后会提供一个正式的网站路径,点击进去即可。
问题
内容缓存
部署之后,可能看到不是最新的内容,需要等待5-10s
资源404
仓库名称不一样,导致资源404等问题,可修改仓库名和账户名相同
图片异常
图片资源找不到,问题2导致的
命令不存在
确保安装成功,若安装成功了,则查看下环境变量是否存在对应命令的属性
自动播放不生效
部分主流浏览器禁止了自动播放功能
文件夹大小写问题
本地生成的标签文件夹都是正常的,但是
hexo d
之后在gitee上面显示有大写,有小写
比如我定义的标签是Maven
,本地生成的是Maven
,但是上传之后就变成了maven
,导致点击标签之后404,报资源找不到
查询资料可知,git是不管大小写的,需要到.git
文件下下面修改config
文件,修改完后再推送即可
ignorecase = false
通过验证,得上传之后会出现同名的标签文件夹,意味着上传的时候是分开2份上传,导致上传更多的文件,所以最好设置标签的时候使用小写。