搭建个人博客
抽出时间来记录下个人博客搭建。通过github page平台上托管博客，hexo作为一个快速简洁的博客框架，用它来搭建博客还挺非常容易得。
Hexo简介
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。
本文分三个部分，
- 第一部分：hexo搭建及部署
- 第二部分：更换主题、设置主题
- 第三部分：推送文章
第一部分：搭建
hexo的初级搭建还有部署到github page上，以及个人域名的绑定。
Hexo搭建步骤
- 安装Git
- 安装Node.js
- 安装Hexo
- GitHub创建个人仓库
- 生成SSH添加到GitHub
- 将hexo部署到GitHub
- 设置个人域名
- 发布文章
1.1 安装Hexo
前两步骤 安装Git、安装Node.js 暂时跳过，电脑已有相应的环境。
留意一下版本问题，如下是hexo及对应的最低兼容node.js的版本：
| Hexo 版本 | 最低兼容 Node.js 版本 |
|---|---|
| 6.0+ | 12.13.0 |
| 5.0+ | 10.13.0 |
| 4.1 - 4.2 | 8.10 |
| 4.0 | 8.6 |
| 3.3 - 3.9 | 6.9 |
| 3.2 - 3.3 | 0.12 |
| 3.0 - 3.1 | 0.10 or iojs |
| 0.0.1 - 2.8 | 0.10 |
首先创建一个文件夹blog，在这个文件夹下右键git bash打开。
输入命令安装hexo
npm install -g hexo-cli
装完可以用hexo -v查看一下版本。
初始化hexo
hexo init myblog
myblog可以自己取什么名字都行
cd myblog //进入这个myblog文件夹
npm install //安装依赖
新建完成后，指定文件夹目录下有：
- node_modules: 依赖包
- public：存放生成的页面
- scaffolds：生成文章的一些模板
- source：用来存放你的文章
- themes：主题
- ** _config.yml: 博客的配置文件**
hexo g
hexo server
打开hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了。
1.2 GitHub创建个人仓库
在github新建一个仓库。
- 新建一个名为: http://username.github.io 的仓库(username 为你的 Github 用户名)
- 必须是用户名，其它名称无效，将来博客的网站访问地址就是 https://test.github.io 了。由此可见，每一个 github 账户最多只能创建一个这样可以直接使用域名访问的仓库。
1.3 生成SSH添加到GitHub
将SSH密钥添加到GitHub是为了通过SSH协议进行安全的身份验证，而不是使用用户名和密码。这提供了更高的安全性，并允许您无需输入密码即可访问和推送GitHub存储库。这对于开发者在与GitHub进行交互时更加方便和安全。
首先打开电脑文件夹，找到 C:\Users\您的用户名\ .ssh文件夹并删除(如果没有，则直接进入第二步)。
在 C:\Users\您的用户名 文件夹下右键打开 Git Bash输入命令: ssh-keygen -t rsa -C "你的github登录邮箱" 生成.ssh秘钥，输入后连敲三次回车，出现下图情况代表成功。
生成了一个新的 C:\Users\您的用户名\ .ssh文件夹，打开这个文件夹，找到 .ssh\id_rsa.pub 文件，记事本打开并复制里面的内容
打开您的 github 主页，进入个人设置 -> SSH and GPG keys -> New SSH key，把复制的内容粘贴进去，title 随便填，保存即可，我们的公钥就添加成功了，设置好如下图:
检查一下是否设置成功
ssh -T git@github.com
还需要如下配置
git config --global user.name "yourname"
git config --global user.email "youremail"
1.4 将hexo部署到GitHub
在blog目录下安装 hexo-deployer-git 插件
npm install hexo-deployer-git --save
编辑blog 目录下的 _config.yml 文件，在文件末尾添加如下内容。翻到最后，修改为 YourgithubName就是你的GitHub账户
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master
然后通过：
hexo clean
hexo generate
hexo deploy
其中 hexo clean清除了之前生成的东西，也可以不加。 hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写 hexo deploy 将本地 blog 推送到 github 远程仓库，也可能需要输入 username & pwd
推送成功后，即可通过 https://username.github.io/ 访问个人博客了!
第二部分：主题
在blog目录下有一个 themes 文件夹，该文件夹下存放着 hexo 所使用的主题.
hexo 官方提供了很多主题供我们使用，地址: Themes | Hexo, 选择喜欢的主题并点击即可跳转至 github
我使用了butterfly主题。
2.1 下载主题
在blog 目录下右键 Git Bash Here
执行命令: git clone 主题http链接 themes/主题名称 将主题下载至 themes 文件夹下
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
2.2 使用主题
安装pug 和 stylus 渲染器。
npm install hexo-renderer-pug hexo-renderer-stylus --save
修改项目根目录下的_config.yml文件（称为站点配置文件），开启主题。
theme: butterfly
升级建议：
为了減少升级主题带来的不便，我们可以把主题文件夹中的 _config.yml 重命名为 _config.butterfly.yml，复制到blog根目录下与config.yml同级。
Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml中，比如博客的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 _config.butterfly.yml 中，那么在将来你想换一个主题是很方便的。
2.3 设置博客
设置博客个人资料
修改根目录下的站点配置文件_config.yml，可以修改网站各种资料，例如标题、副标题和语言等个人资料。
# Site
title: Capybarato #标题
subtitle: '' #副标题
description: '不要气馁，我的小太阳' #个性签名
keywords:
author: GuoJingjing #作者
language: zh-CN #语言
timezone: Asia/Beijing #中国的时区
设置导航菜单
修改主题配置文件 _config.butterfly.yml
menu:
主页: / || fas fa-home
博文 || fa fa-graduation-cap:
分类: /categories/ || fa fa-archive
标签: /tags/ || fa fa-tags
归档: /archives/ || fa fa-folder-open
生活 || fas fa-list:
分享: /shuoshuo/ || fa fa-comments-o
相册: /photos/ || fa fa-camera-retro
友链: /links/ || fa fa-link
留言板: /comment/ || fa fa-paper-plane
#留言板: /messageboard/ || fa fa-paper-plane
关于笔者: /about/ || fas fa-heart
效果图：
代码块显示设置
highlight_theme: mac # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条
效果图：
本地搜索功能：
安装搜索插件
npm install hexo-generator-search --save
主题配置文件 _config.butterfly.yml补充：
# Local search
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示
创建文件夹
分类：
hexo new page categories
会出现source/categories/index.md文件
标签
hexo new page tags
会出现source/tags/index.md文件
修改副标题
修改主题配置文件 _config.butterfly.yml:
# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (开启打字效果)
effect: true
# loop (循環打字)
loop: true
# source調用第三方服務
# source: false 關閉調用
# source: 1 調用搏天api的隨機語錄（簡體）
# source: 2 調用一言網的一句話（簡體）
# source: 3 調用一句網（簡體）
# source: 4 調用今日詩詞（簡體）
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果有英文逗号' , ',请使用转义字元 ,
# 如果有英文双引号' " ',请使用转义字元 "
# 开头不允許转义字元，如需要，请把整個句子用双引号包住
# 如果关闭打字效果，subtitle只会现示sub的第一行文字
sub:
图片设置
图片可以用云链接或者本地路径：/themes/butterfly/source/img。修改主题配置文件_config.butterfly.yml：
# Favicon（网站图）
favicon: /img/favicon.png
图像
avatar:
img: /img/avatar.jpg #图片路径
effect: false #头像会一直转圈
主页封面图片
# The banner image of home page
index_img: /img/background.jpg
文章详情页的顶部图片
第三部分：博文
2.1 使用 Typora 编写博客
在blog目录下，通过输入命令:
hexo new "文章 title"
会在 /source 文件夹下生成对应文章的 .md 文件，然后就可以通过 Typora 打开此文件编写文章并保存了。
写完该篇文章后，依次输入以下命令:
hexo clean 删除 public 文件夹，即删除旧的博客文章
hexo g 生成 public 文件夹，即生成新的博客文章相关 html 文件
hexo d 将博客推送到 github
2.2 插入图片
当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 markdown 语法访问它们。
首先移动图片到images文件夹下，并改为这个格式例如(/images/image20231016200853748.png)
2.3 修改博文的一些配置
top_img: /img/hexo.png # 顶部背景图 存在themes\butterfly\source\img中
cover: /img/hexo.png # 文章封面
更全面的详见：https://blog.csdn.net/mjh1667002013/article/details/129290903
2.4 在博客上播放你的PPT
需要用office power point打开，并保存到OneDrive
我们再hexo g后每篇博文会生成html文件可以供我们进一步对网页进行编辑，ppt嵌入的代码必须从PowerPoint for web获取。
获取嵌入代码
- 将演示文稿保存到 OneDrive.com。 (将演示文稿存储到联机公用文件夹是允许将其嵌入网页的内容。)
- 在PowerPoint for web中打开演示文稿。 在功能区的 “文件“ 选项卡上, 单击 “共享“, 然后单击 “嵌入“。
- 若要创建 HTML 代码以在网页中嵌入文件, 请单击 “生成 “。
- 在 “嵌入“ 框中的 “尺寸“ 下, 为博客或网页选择正确的尺寸。buttefly这个主题下大概是772px*520px
- 在 “嵌入代码“ 下, 右键单击代码, 单击 “复制“, 然后单击 “关闭“。
- 在对应的html文件中，粘贴嵌入代码，hexo d即可。