Hello! My blog!

本博客采用 hexo + github 的方式建立，采用了butterfly主题进行美化

本文记录博客搭建的具体流程，美化部分请看姊妹篇——butterfly主题配置

想法

大三面临保研季，在总结简历的时候突然发现博客是一个很好的分享、记录和展示自己的方式

同时参考了许多大神的博客主页，渐渐的打开了这个全新的世界

搭建过程

安装node.js:

​ 官网下载：Node.js

git:

​ 官网下载：Git

配置git个人信息及配置Github ssh在之前已经完成

打开cmd分别执行：

$ node -v
$ npm -v
$ git --version

得到如下信息则说明安装成功：

hexo：

安装：

打开Git bash,输入以下命令以安装Hexo：

$ npm install -g hexo-cli

初始化

$ hexo init [folder]

[folder]代表的是你的hexo文件夹名，如果不写，就默认在当前文件夹初始化。

例 $ hexo init hexotext

生成静态文件

需要执行generate命令生成静态文件，才能部署到服务器

$ hexo g

启动服务器

由于还没有配置Github，所以我们先部署到本地服务器

$ hexo s

此时便可在浏览器上访问http://localhost:4000/

Github配置：

1.注册Github账号：

创建后网址如下：lxh0510-Github

2.创建github仓库：

！注意：仓库名格式必须为：username.github.io

如下图所示：

3.建立与hexo的关联：

打开hexotest/_config.yml文件，修改基础参数:

修改#url:

url: http://lxh0510.github.io

修改#deploy:

deploy:
  type: git
  repo: git@github.com:lxh0510/lxh0510.github.io.git
  branch: main

4.部署：

在Git Bash输入以下命令部署到Github Page：

$ hexo d

然后在浏览器输入username.github.io就可以看到博客啦，如：lxh0510.github.io

之后进行文章的更新或主题的改变只需三步：

$ hexo clean        #清空缓存
$ hexo g			#生成静态文件
$ hexo d			#部署

此时博客便搭建完成啦！

hexo使用：

以下介绍其他常用的 Hexo 操作命令，需要在博客文件夹下打开 Git Bash 使用

新建文章

$ hexo new "文章名"

文章名不需要后缀，会自动生成Markdown文件，并存放在hexotext\source\_posts文件夹中

文章中，需要设定一些参数与设置;

参数描述
title标题，最好用引号括起来
date建立日期
update更新日期
comments开启文章的评论功能
categories分类
tags标签
excerpt摘要
index-img文章封面图
sticky文章置顶，数值越大越靠前
math公式转换

布局管理

在上面新建文章时，我们还可以制定布局：

$ hexo n [layout] "文章名"

其中，layout 可替换为 post（文章，默认）、draft（草稿）、page（页面）。默认值可以在配置文件中修改 default_layout 来改动。不同布局的文件会存储在不同位置

修改默认布局

我们可以通过修改hexotext\scaffolds中的post.md文件，自定义默认布局。这样，每当创建新文章，该布局便会出现在文章最上方，我们只需根据该布局修改若干参数即可，省时又省力！

如下为我暂时使用的布局（会随时更新）

title: {{ title }}
date: {{ date }}
tags:
categories:
cover: /img/blog/
top_img: /img/article.jpg

注意！：cover封面图与普通图片大小好像不太适配，要用画图软件将宽度缩小为80%

分类与标签

1.添加分类页及标签页：

hexo new page categories
hexo new page tags

2.hexo会自动创建hexotest/source/categories和hexotest/source/tags文件夹，并在其中创建index.md,需要将index.md上方添加type:categories/type:tags:

title: tags
date: 2023-03-01 16:38:21
type: tags

这样就会在我们的博客里创建分类页和标签页

3.在每个文章前可以标注文章所属的类以及标签：

categories:
 - 技术
 - 博客  # 「博客」会作为「技术」的子类
tags:
 - Hexo
 - Git  # 「Hexo」与「Git」是同级标签

一些小问题（持续更新）

有关照片加载：

在写此篇文章的过程中，出现图片在网页中无法显示，只有路径名称的现象。

后参考csdn博客：hexo博客中插入图片失败——解决思路及个人最终解决办法

经过一下几步解决：

创建图片资源文件夹

将hexotest/_config.yml文件，修改post_asset_folder参数

post_asset_folder: true

该操作的作用就是在使用hexo new xxx指令新建博文时，在相同路径下同步创建一个xxx文件夹，而xxx文件夹的作用就是用来存放图片资源

修改Typora图像设置

这么设置的结果就是：想写篇博客，在source\_posts文件夹下新建xxx.md文件，写着写着需要插一张图，从别处复制，然后在typora中直接粘贴，图片资源文件夹自动搞定，并不用关心什么文件夹，只管专注于md文件即可

插件下载

通过如下命令下载插件hexo-asset-image

npm install https://github.com/CodeFalling/hexo-asset-image --save

修改md图片路径

很神奇！我们在写md文件时，引用图片文件时，需以如下格式：![](xxx.png),即删除前面的xxx/，但这样的图片在Typora中是无法显示的

原因和插件编译的过程有关，详细分析见上述csdn博客

至此问题就解决啦！