个人博客-hexo配置-butterfly配置

个人博客搭建到使用

1. 注册 码云

建议用户名为5位英文字母,方便使用

创建一个与用户名相同的仓库,其他的都不用动

2. 注册 Coding

建议用户名为5位英文字母,方便使用
授权,新建工作空间

3. 配置云工作区

关闭快速引导,ctrl+shift+c 进入命令模式
sudo apt-get update #更新环境
sudo apt-get upgrade #更新系统组件
sudo apt-get autoremove #卸载多余/旧版 程序

4. npm 换成 阿里源( 使用阿里的配置方法你就哭吧!)

npm config set registry https://registry.npm.taobao.org
验证命令
npm config get registry
返回https://registry.npm.taobao.org,说明镜像配置成功。
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm安装hexo
cnpm install hexo-cli -g
以后npm安装的东西都用c开头,Understand?

装完这些,在配置好之后需要 cnpm i 补充依赖

5. 切换目录

cd /home/

mkdir doc

cd doc

git clone https://gitee.com/zygds/hexo.git #这个是从官方拉取过来的,替代 <u>git init</u>

cd hexo/themes/

git clone https://gitee.com/zygds/hexo-theme-butterfly.git butterfly 官方库最新 后期暂不更新

rm -r landscape/ 删除自带的 landscape

cd hexo-theme-butterfly/

rm -r .git/

cd ../.. # 此时到/home/doc/hexo#目录

cnpm install hexo --save

cnpm install hexo-renderer-pug hexo-renderer-stylus --save

6. 看官方文档/或者继续看

cd source/

mkdir _data/

hexo n 第一篇文章

hexo new page link

hexo new page categories

hexo new page tags

规范:创建完之后

---
title: 友情链接
date: 2018-06-07 22:17:49
type: "link"
---

title:这个是写 页面名字的,比如categories: 分类 tags: 归档

date: 随意

type: 这个一定要配置,需要修改 hexo/source/各自文件下的/ index.md

7. 友联

在source/_data/目录下创建link.yml

8. 评论系统

leancloud 注册,登陆,实名认证,在百度,今天不想写,你可以去我博客找找有没有

valine valine 搭建教程

需要去butterfly.yml里面配置

valine:
enable: true

大哥找不到就 Ctrl + F5 搜索 valine

配置文件有具体要求说明!

9. 本地搜索系统

cnpm install hexo-generator-search --save

10. 字数统计

cnpm install hexo-wordcount --save

11. 各种报错

官方文档

hexo没有首页 cnpm ls --depth 0 判断缺少什么插件

再不行就 cnpm audit fix cnpm i

或者 cnpm i --package-lock-only

Git 推送

Clone并推送主分支

git add . # 批量添加删除

git commit -m "推送说明" # 把文件暂存到本地仓库

git remote add origin git@gitee.xxx.git # 这个只需要设置一次

git push -u origin master # 推送到指定仓库

*** 推送完结 ***

git clone -b backup https://xxx.git

Clone其他分支的方法

git add .

git commit -m “clear”

git checkout -b backup //创建并切换到分支

git remote rm origin #这里可能会切换失败,所以要删除原有的git

git remote add origin git@git.xxx.git

git push origin backup

git push -f origin backup #强制推送覆盖原有

Clone并推送到备份分支

it clone -b backup https://gitee.com/zhegeshijiedeni/zhegeshijiedeni.git

Git配置及报错

Git》》》Hexo

首先配置用户名密码

git config --global user.name "John Doe"

git config --global user.email johndoe@example.com

大部分都是没有配置这两个报错,或者本地与与[云端不同步](#Git 推送)

ssh-keygen -t rsa 生成

ssh -T git@github.com 测试

Hexo 使用命令

hexo g 渲染,生成静态文件

hexo d 把静态文件推送到指定仓库需安装

npm install hexo-deployer-git --save

hexo clean 清除生成的静态文件

hexo s -p80 使用80端口运行hexo,地址:127.0.0.1

hexo clean && hexo g (-d) 连写,应为我们已经不采用推送方法,所以就不用 d

Hexo踩坑

建议:Coding 云平台``nodejs 搭环境我的 gitee HEXO butterfly

踩坑:node损坏,所以不建议用本地环境部署,直接Gitee Giteepage部署 插件不要乱下,即使止损

Hexo部署

上面 git 推送完成后

渲染部署

Hexo跳过渲染

如何跳过 hexo 的渲染
查看官方文档页面跳过 hexo 的渲染主要有两种方式:

Front matter
新建页面,然后将你的代码直接写入 index.md 中

在 Front matter 中添加 layout: false,此方法适用于单一的纯 HTML
css 页面。

skip_render
如果页面含有复杂的 js,layout 的方式可能容易报错,因此利用 hexo 自带的 skip_render
在根目录【根目录】的_config.yml,你可以看到 skip_render,大致在 32 行。写入你想要的跳过渲染的路径,例如 - CodePen 页面:
Yaml
skip_render:
- 'fireworks/'
- 'fireworks/**'
注意缩进和空格,解释一下:'fireworks/
' 表示在目录 source/fireworks 下的文件全部跳过渲染,'fireworks/**' 表示在目录 source/fireworks/文件夹下的文件全部跳过渲染(例如页面的 js、css 在另一个文件夹中)。这里有点重复了,只为了你能看明白。

Hexo 最终是把 md 渲染为 HTML 页面,所以既然跳过渲染,那页面就只写入 HTML。如图,将新建页面的 index.md 直接改为 HTML(注意调整 css)

可以混用
都是跳过渲染,当然可以混用

例如我的小圆点页面,两种方法混用

修改 md 为 HTML,直接写入 HTML,并在 Front matter 中利用 layout: false
跳过渲染

若采用第二种方法,在根目录【根目录】的_config.yml 添加

Yaml
skip_render:
- 'dot/*'
- 'dot/**'
文章中直接嵌入 HTML
既然 md 最终会被渲染为 HTML,那直接写 HTML 当然是可以的,但只能以文章形式展示,而不是新的页面

上一篇:Hexo搭建博客教程-基于Butterfly主题


下一篇:安装butterfly+nginx+https