Hexo + Butterfly 搭建个人博客随记

本地部署

首先得有一个GitHub账号

这里就不赘述如何注册一个GitHub账号了，如果大家能够科学上网想必能轻松完成。

打开你的repo，new一个名字叫YourName.github.io的repo。这里我演示的名字叫BlogDemo，大家也可以挑自己喜欢的。

注意这里可以下载安装GitHub Desktop，便于不想学git指令的小伙伴管理仓库。此外，需要将HTTPS和SSH对应的网址https://github.com/Loli-Eternally/BlogDemo.github.io.git和地址git@github.com:Loli-Eternally/BlogDemo.github.io.git记录下来，便于后面修改配置进行博客的部署。

下载安装好GitHub Desktop并启动后，cloneBlogDemo，URL地址为上面提到的https://github.com/Loli-Eternally/BlogDemo.github.io.git

这个时候我们的repo是空的，需要在本地将BlogDemo进行部署。可以直接将我准备好的Demo镜像下载下来，解压到上面Git Clone图里的Local path下

现在需要安装hexo了，但是这个框架需要用到Nodejs，这个请大家自行安装。

大家安装Nodejs时注意添加环境变量，后面安装hexo需要调用npm。

打开Unzip图中最下方的运行脚本.bat，选择1用npm安装hexo（如果太慢可以尝试别的选项）。

这里我们可以看到多了个node_modules文件夹，点进去进入.bin目录，ctrl+c复制这个路径。

添加环境变量，在这个路径下可以直接从cmd启动hexo。

再次打开运行脚本.bat，选择2. 本地运行测试（需要等一小会儿）

本地测试部署成功

线上部署

点击设置git用户名和生成密钥.bat，输入的名字和邮箱后回车。是否覆盖选y，回车一直到底，成功生成ssh密钥。

打开生成的ssh密钥.txt，ctrl+c复制密钥。

回到GitHub仓库，点击Setting选项卡下的Deploy keys，添加一个key并将复制好的密钥粘贴进去。
Setting

SSH key添加好后，打开_config.yml文件，修改url和repo，替换成你自己的https网址和git地址。

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://github.com/Loli-Eternally/BlogDemo.github.io.git

# Deployment 部署
## Docs: https://hexo.io/docs/one-command-deployment

deploy:
  type: git
  repo: git@github.com:Loli-Eternally/BlogDemo.github.io.git
  branch: master
  message: upload

上传博客

关闭本地部署的blog网页和cmd，重新启动运行脚本.bat，选择3. 上传网站。

回到repo主页，看到此时的repo已经都上传好了。

点击Setting选项卡下的Pages，在Branch一栏选择master并保存。

等几分钟后，GitHub完成部署，就可以Visit site了。

博客内容个性化定制

打开根目录下的_config.yml文件，配置网站基本信息。

## Hexo官方文档: https://hexo.io/docs/configuration.html
# 网站的基本信息
title: 雪萌阁
subtitle: 雪萌随记
description: 这里是雪萌教总部哦！
keywords: 
author: 萌雪
language: zh-CN
timezone: ''

主页背景，头像等图片存储在source\media路径下，打开配置文件_config.butterfly.yml可对路径进行更改。

# 图片设置
# --------------------------------------
# 网站图标
favicon: /media/favicon.png

# 头像
avatar:
  img: /media/avatar.jpg
  effect: false

# 禁用所有横幅图片
disable_top_img: false

#首页的横幅图片
index_img: /media/bg.jpg

# 默认横幅图片
default_top_img: /media/top.jpg