Jasper Jiang'Blog

hexo搭建博客

6 min

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. 发表文章

    • 进入博客所在目录（要在hexo那一级目录下）

    • 右键打开 Git Bash Here，创建博文：

      hexo new "你文章的名字"

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

      • 并列分类，了解一下：

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

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

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

      • eg.

        ---
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
    • 打开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

    hexo1

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

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

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

5. 调整

  1. 配置一个p.sh文件

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

  2. 关于图片路径配置

    已弃用——统一用图床

    1. 点击文件—> 偏好

    image-20240115111812161

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

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

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

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