😊 欢迎阅读小白建博客的指导内容！干货满满！

小白博客搭建手册

使用Hexo和阿里云搭建个人博客

快速下载安装

  • 安装git

  • 安装node

  • 安装 VS code

    创建一个文件件在文件目录下的命令行里面逐个输入下列指令可以快速开启一个hexo 项目并且本地运行，生成的文件结构如下

    1
    2
    3
    4
    5
    npm install hexo-cli -g
    hexo init blog        
    cd blog
    npm install
    hexo server
    1
    2
    3
    4
    5
    6
    7
    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   └── _posts
    └── themes

themes 里面用来存放好看的主题

source 的 post 放文档的md 文件

_config.yml 用来配置一些信息各种美化和自定义都来自这里

添加github 备份

这个时候只有最原始Hexo,而且创建文章的话只能在本地添加文章十分不方便，因此把整个文件上传到github 或者gitee的私有仓库里这样即使换了一台电脑也可以操作文档。在GitHub或者gitee 里面安装一个仓库，复制仓库地到下面的地址。

1
2
3
4
5
git init 
git add .
git commit -m "first commit"
git remote add origin  远程仓库地址
git push origin

美化Hexo- - butterfly theme

Butterfly 安裝文檔(一) 快速開始 | Butterfly

安装主题

1
npm install hexo-theme-butterfly

在_config.yml 里面修改配置

1
theme: butterfly

常用指令

通过在指令行里面输入可以快速启动和部署

1
2
3
4
5
6
7
8
hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

本地启动

1
2
3
hexo clean            # 清除缓存和已生成的静态文件
hexo g                # 生成页面
hexo s                # 本地预览

文件配置

​ 在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)

具体的配置查看推荐文档： Butterfly 安裝文檔(一) 快速開始 | Butterfly

创建服务

视频教程：https://www.bilibili.com/video/BV12b4y18725/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=9db27ccccc6b1cadb96ba262bd4f7c5f

部署

参考：https://juejin.cn/post/6987384418717401101#heading-2
视频教程： https://www.bilibili.com/video/BV1384y1p7NC/?spm_id_from=333.788.top_right_bar_window_history.content.click&vd_source=9db27ccccc6b1cadb96ba262bd4f7c5f

写作

在_posts 文件夹下创建文件夹下 md 文件，在md 文件头部添加下面内容（自己选择添加）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
random:
---

写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块 (默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax (当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex (当设置katex的per_page: false时，才需要配置，默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开 (true/false) (默认为设置中highlight_shrink的配置)
random 【可选】配置友情链接是否随机排序默认为 false

  • 之后本地启动查看并且部署