📣 用hexo搭建个人博客（持续更新中）

本文记录自己搭建个人博客的历程，欢迎收看~

📚 搭建基础的个人博客

前提：需安装了git 和 nodejs

1. 安装hexo。先新建一个文件夹，在该文件夹下打开git bash，然后运行npm install -g hexo-cli

2. 初始化hexo，命令为：hexo init ，出现下图结果就表示初始化成功！

新建完成后，在路径下会产生一些文件和文件夹：

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

3. 启动服务器

命令为：hexo server，或者简写：hexo s，然后打开浏览器，在地址栏输入：localhost:4000回车就可以得到如下结果：(ctrl+c可关闭服务)

至此，您的Hexo博客已经搭建在本地。

4.上传到github

在github创建仓库，仓库名为：<Github账号名称>.github.io（必须是这个，否则后续打不开）。安装hexo-deployer-git插件。在命令行（即Git Bash）运行以下命令即可（也可以走淘宝镜像，淘宝镜像就是换成cnpm）：

npm install hexo-deployer-git --save

添加SSH key，如果已添加可以不用管。如果未添加，可以参考添加SSH key，我这里已经添加，接着下一步；

5. 修改_config.yml（在站点目录下）。文件末尾修改为：

   # Deployment
   ## Docs: https://hexo.io/docs/one-command-deployment
   deploy:
     type: git
     repo: git@github.com:LuoyNothing/LuoyNothing.github.io.git
     branch: main

   6.生成页面并上传到github

// 生成页面：
hexo g
// 上传到github: 
hexo d

执行完上面两个命令，并出现下图结果即表示上传成功。

至此，您的Hexo博客已经搭建在GitHub上，访问域名为：https://luoynothing.github.io/

访问博客，开始的页面是初始化页面，没有做美化和增加内容。

🌸 域名绑定

还未绑定

📚 文档学习

官网文档：文档 | Hexo

🌸 修改主题

我的博客修改的主题是fluid（ Hexo Fluid 用户手册）,github(fluid Hexo 主题)，以下是详细步骤：

1. 下载主题

方式一：推荐通过 npm 直接安装，进入博客目录执行命令：npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的_config.yml内容复制过去。

方式二：下载 最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

我采用的是方式二。

2. 然后采用hexo三连，就可以在本地查看到主题修改

   // 清除缓存文件 `db.json` 和已生成的静态文件 `public`。
   hexo cl 
   // 生成网站静态文件到默认设置的 `public` 文件夹。
   hexo g
   // 启动本地服务器，用于预览主题。
   hexo s

   下图表示换主题成功！然后可以用localhost:4000来访问个人博客

3. 部署到github上：

hexo三连：

// 清除缓存文件 `db.json` 和已生成的静态文件 `public`。
hexo cl 
// 生成网站静态文件到默认设置的 `public` 文件夹。
hexo g
// 部署到远程仓库里
hexo d

然后可以用https://luoynothing.github.io/ 来访问个人博客了。

🌸 发布文章

1.新建md文件。在网站根目录下git bash，输入hexo new <title>，执行该命令，Hexo会在/source/_posts目录下创建一篇新的文章。

2.上传到github，就是hexo三连操作。

// 清除缓存文件 `db.json` 和已生成的静态文件 `public`。
hexo cl 
// 生成网站静态文件到默认设置的 `public` 文件夹。
hexo g
// 部署到远程仓库里
hexo d

🌸 给博客加子分类

categories: [“父亲分类”, “子分类”]

Hexo 一篇文章多个 categories - 简书 (jianshu.com)

🌸 常见问题

1.hexo引用网络图片无法显示问题。

答：在文章的头部位置添加：<meta name="referrer" content="no-referrer"/> 即可

2.Nunjucks Error: 解决方案

答：最主要原因是用{ { } }或{ ％ ％ }包装的内容将被解析，并可能导致问题。比如写公式的时候就容易解析出错，所以可以采用如下解决方式：

{% raw %}	// 敏感内容前加上这个
Hello {{ sensitive }}	// 敏感内容被包装在中间
{% endraw %}	// 敏感内容后加上这个

3.添加自定义HTML文件

Hexo博客技巧：添加自定义html页面

📚 博客更新说明

2023-8-30

1.成功搭建博客

2.博客文章：

​ 1.封面字段：标题、发布时间、关键字

​ 摘要：去掉摘要

​ 2.封面进去：发布时间、更新时间、字数、阅读时长​

3.标签和分类：

分类1：前端

​ 子类：html css等

分类2：持续更新

标签：相当于关键字吧，里面的某个知识点

4.博客中的图片不显示问题