hexo搭建博客

1. hexo new “文章名字”（thumbnail: /images/）
2. hexo g
3. hexo d

1.前置知识

搭建博客需要掌握一些基本的知识，比如：

• HTML、CSS、JavaScript等前端技术，用于制作网页的结构、样式和交互。
• Markdown语法，用于编写博客文章的内容。
• Hexo框架，用于生成静态博客网站，并提供多种主题和插件。
• Git工具，用于管理和部署博客代码。
• 域名注册和解析，用于给博客网站一个易记的地址。
• 服务器配置和运行，用于托管博客网站，并提供访问服务。

---

参考网站使用 Hexo+GitHub 搭建个人免费博客教程（小白向） - 知乎 (zhihu.com)

2.Hexo使用

2.1基本操作

1. github上挂的网址：https://用户名.github.io

2. INFO表示这是一个正常的信息，没有错误或警告。

$ hexo g
INFO  Validating config
INFO  Start processing
......

3. 写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这两条命令。

hexo g   # 生成页面
hexo d   # 部署发布

4. 修改并部署后没有效果，使用 hexo clean 清理后重新部署。

5. 发表文章

   ==(1)==

• 进入博客所在目录（要在hexo那一级目录下）
• 右键打开 Git Bash Here，创建博文：

hexo new "你文章的名字"

​ ==(2)==

• 也可以不使用命令自己创建 .md 文件，只需在文件开头手动加入如下格式 Front-matter 即可，写完后运行 hexo g 和 hexo d 发布。

  • 并列分类，了解一下：

    categories:
    \- [Linux]
    \- [Tools]

  • 并列+子分类，再了解一下：

    categories:
    \- [Linux, Hexo]
    \- [Tools, PHP]

  ---
  title: Hello World # 标题
  date: 2019/3/26 hh:mm:ss # 时间
  tags: # 标签
  thumbnail: "https://th.bing.com/th/id/R.3a5e7bf8631e9ba95bdc3598fada03b4?rik=a6OgIGORrMhREg&pid=ImgRaw&r=0"
  excerpt: "分享一些搭建博客的过程与学习内容"
  ---

6. 补充几个常见命令

hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件

• 对于hexo s，访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功！

2.2更换主题

2.3.1我选择了redefind主题

Theme Redefine (ohevan.com)

• 定期更新

$ cd your-hexo-site
$ npm install hexo-theme-redefine@latest

• 迁移配置文件：
  • 主题更新后，请务必把 /node_modules/hexo-theme-redefine/_config.yml 和 主题配置文件 (_config.redefine.yml) 进行比对。如果文件出现了更改，那你必须要把更改过的项同步在 _config.redefine.yml 中。VS Code 的文件比对 可能对你迁移有帮助。
  • 每次迁移请注意把最底部的 version 改为最新版本！！

2.3.2 如何配置

1. 在theme文件夹下新建一个文件夹，名为“redefine”
2. 在该目录下打开git bush，输入命令git clone https://github.com/EvanNotFound/hexo-theme-redefine
3. • 打开hexo根文件夹中_config.yml，用Ctrl+F查找，输入theme
   • 将theme后的内容改为redefine。注意，redefine前头有一个空格

3.为Typora更换redefine主题

在redefine补充下用法补充

折叠显示

<!--more-->的作用是折叠本会全部显示的文章，加强浏览的方便性。

添加文章头图

1. 在对应文章的 front-matter 中增加

   thumbnail: "可写相对路径/绝对路径"

2. 例如我上面提供的截图的配置

   ---
   title: 主题样式 Demo
   date: 2022-12-30 19:07:05
   tags: "demo"
   thumbnail: "https://evan.beee.top/img/208184324-f2640ade-587a-4f46-8ad1-7b4c1b31394f.png"
   ---

自定义摘要

• 开启

  在行头写下：

tags: Excerpt
excerpt: "分享一些搭建博客的过程与学习内容"

• 关闭

  在文章页的 front matter 添加 excerpt: false 属性,首页摘就消失了

  示例：

  ---
  title: Excerpt Test
  date: 2022-12-20 12:12:12
  tags: Excerpt
  categories: Excerpt
  excerpt: false
  ---

• 写作模块

1. 写作模块 | hexo-theme-redefine (ohevan.com)

note 笔记模块

• 小号提示块

  • {% note warning  %}
        warning 提示块标签
        {% endnote %}
    
    {% note danger  %}
        danger 提示块标签
        {% endnote %}
        
    
    * 大号提示块
    
      * ```
        {% notel [颜色] [标题] %}
        内容
        支持换行
        {% endnotel %}
    

设置小图标

官网：Find the Perfect Icon for Your Project | Font Awesome

4. 避雷掉坑

1. 本地server成功，部署到github上之后不能显示主题样式

   掉坑原因：原本以为_config.redefine.yml会覆盖_config.yml，但不全会。找了半天才解决这个bug

   

   • 解决：在_config.yml文件中添加url中添加: https://milefer7.github.io/Jaxi-Jiang-Blog/

2. hexo中笔记页面渲染不出来

   掉坑原因：之前增加功能导致article-content.ejs出错。我就直接把他删除了。以为会自动生成。debug真累。。。

   • 解决方案：卸载掉redifine主题重新下载

5. 调整

1. 配置一个p.sh文件

   • 集合hexo clean hexo g hexo d
   • 使用命令： ./p.sh

2. 关于图片路径配置

   • 点击文件—> 偏好

     

   • 这样就实现了又可以在博客上显示，又可以在typora上显示

   • ！！！这样设置的坏处就是你在电脑上其他地方写的md.文件中的图片都会被放到images文件夹下。

     typora不支持对一个文件夹操作。只可以全局或对多个文件

     • 每次hexo d后图片都会被放到文章上
       • 增加博客传输时间