博客搭建记录

创建github账号

新建github项目，项目名为账号.github.io，例如：airlatus.github.io

安装node环境

已经有了就忽略

安装git环境

已经有了就忽略

安装博客目录

安装hexo，注意这里要使用14版本以上的node

1	npm install hexo-cli -g

hexo初始化

hexo init

当显示Start blogging with Hexo!表示安装成功。

生成本地的hexo页面

hexo s

上传到Github

修改-config.yml文件

deploy:
  type: git
  repository: git@github.com:airLatus/airLatus.github.io.git(这里需要仓库的ssh地址，从2021年8月13日开始，GitHub 已经停止了对密码身份验证的支持)
  branch: main

安装hexo-deployer-git 自动部署发布工具

1	npm install hexo-deployer-git --save

生成页面

hexo g

本地文件上传到Github上面

hexo d

此步后可以访问对应git地址访问博客https://airlatus@github.io

文件目录

_config.yml：俗称站点配置文件，很多与博客网站的格式、内容相关的设置都需要在里面改。
node_modules:存储Hexo插件的文件，可以实现各种扩展功能。一般不需要管。
scaffolds：模板文件夹，里面的post.md文件可以设置每一篇博客的模板。具体用起来就知道能干嘛了。
source：非常重要。所有的个人文件都在里面！
themes：主题文件夹，可以从Hexo主题官网或者网上大神的Github主页下载各种各样美观的主题，让自己的网站变得逼格高端的关键！

接下来重点介绍source文件夹。新建的博客中，source文件夹下默认只有一个子文件夹——_posts。我们写的博客都放在这个子文件夹里面。我们还可以在source里面新建各种子文件夹满足自己的个性化需求。

更新内容

依次执行以下指令

1
2
3

hexo cl
hexo g  // 生成
hexo s  // hexo server 启动本地服务

然后随便打开一个浏览器，在网址栏输入localhost:4000/，就能发现自己的网站更新了！不过这只是在本地进行了更新，要想部署到网上（Github上），输入如下代码：

1	hexo d // 部署

用上面指令后，对应内容就更新在了github上，登陆https://airlatus@github.io可以看到更新后内容了。

（可能短时间内容没有更新上，需要等一段时间）

注意

后续更新时发现会报：command not found hexo

经过排查发现是因为上次更新后我将电脑默认node版本修改为了16的版本，原来安装hexo时node版本是12的版本

需要用nvm use 12将node版本切换回12的版本就可以使用hexo指令了

图片上传问题

因为博客以md文档形式放在source文件夹下的post文件夹内，在上传博客后无法解析相对路径，我们需要通过以下方法修改上传博客的图片格式

修改typora中的文件存放路径

我们在复制图片到正在编辑的typora中时，需要配置图片另存为路径，并设置显示在这个正在编辑的文档的相对路径文件夹中

这样配置后，将图片复制过来时会自动创建出一个同文件名的图片存放文件夹，将图片自动保存在这个文件夹中，并且修改文档中文件的路径

将图片路径前缀去除

为了后续使用hexo指令上传文档后转换成html后地址正确，需要将刚才的路径地址的文件名/去除

去除后图片就无法正常在本文件中显示了，这时可以设置改文件的图片根路径为图片文件夹，这样本md文件中就可以正常显示图片了

博客添加插件

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

并将_config.yml文件中的设置改为post_asset_folder: true

这么做的目的是在打包上传博客到线上时，能够将外部图片生成为html可识别的路径从而在线上环境仍可以展示图片出来

参考hexo样式

https://github.com/miiiku/hexo-theme-flexblock