博客搭建过程

博客搭建全过程和方案展示

搭建过程

• 使用hexo搭建博客；具体参考
  • https://zhuanlan.zhihu.com/p/60578464
  • https://blog.csdn.net/cat_bayi/article/details/128725230
  • https://fluid-dev.github.io/hexo-fluid-docs/guide

1. 关联github page的仓存到本地

2. 安装hexo

3. 配置主题

   1. 选择的是这个：https://github.com/fluid-dev/hexo-theme-fluid?tab=readme-ov-file

4. 安装hexo-deployer-git插件实现自动远程部署：npm install hexo-deployer-git –save

5. 然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：

     deploy:
        type: git
        repository: git@github.com:用户名/用户名.github.io.git
        branch: main
   

6. 关联域名： 打开github上博客仓库的设置: 重新设置Custom domain:[www.tolsz];并开启https;(github给的权益)

   • 为什么github pages部署hexo之后每次hexo g -d后关联的域名都会失效,每次都要在github上手动设置吗;
     • 参考链接：
     1. 不需要，只需要在github的该仓库中创建一个CNAME文件并将域名写入即可；等个1min就好了；但这样再下一次推送后CNAME文件又会失踪；原因如下
     2. 偶然中发现，刚开始还未部署hexo时本地仓库整个文件夹都和远程git仓库是关联同步的，包括CNAME和README.md都是同步的；但是部署hexo之后，远程仓库中只含有博客项目下的.deploy_git下的文件夹；每次更新使用hexo g 会根据本地内容（source中的文件）生成相应页面到pulic中， 然后hexo d进行部署时，会将public中的文件同步deploy_git下同时推送到远程的github仓库；即source下所有的文件内容对应public;比如source/A hexo -g之后就会在public/A 生成相应内容；
     3. 这也是为什么1中操作下CNAME文件会消失，因为public下没有CNAME文件，所以推送到远端时，自然也没有；解决办法就是在source文件夹下创建CNAME文件添加不含http前缀的域名，然后hexo g -d即可；
     4. 由于dns缓存的原因，每次更新并部署后需要过一会（20s-60s）才能看到新的内容，样式与本地的markdown看到的几乎一样；

7. 常用命令：

     hexo new "name"       # 新建文章
     hexo new page "name"  # 新建页面
     hexo g                # 生成页面
     hexo d                # 部署
     hexo g -d             # 生成页面并部署
     hexo s                # 本地预览
     hexo clean            # 每次更新前使用：清除缓存文件: 删除 public 文件夹、db.json 文件以及 _config.yml 中配置的 public_dir 目录下的所有文件。确保生成干净的网站文件: 清除缓存后，下次运行 hexo generate 命令时，会重新生成所有网站文件，避免旧文件的影响。这样会导致你直接在Public下对文件做的修改比如更换Img、html等等都会被撤销；因此，强调修改任何东西都是在source、配置文件下才是正确稳妥的；
     hexo help             # 帮助
   

8. 基本操作

   1. 删除/删除页面：直接在本地source / _post 文件夹中删除/修改相应文件然后hexo clean; hexo g -d即可

   2. 图片操作：

      1. 插入图片时需要考虑其大小以及排版在此博客系统上的效果，一般使用html标签调整，设置width/height为百分比；eg:

         <center>
         <img src="https://alexcld.com/images/pengyuyan.jpg" width="25%" height="25%" />
         </center>

   3. 实际上，hexo渲染一篇post的工作流程是：

        拿到一个markdown文件，
      
        根据这个文件的layout类型，
      
        进行样式排版，生成html文件，
      
        最终展示到网页端。
      

   4. 发布一篇博客的操作流程

      1. 进入本地git所在根目录
      2. hexo new ‘title’
      3. 在生成的title文件夹下放入所需要的静态资源，比如tolsz\source_posts\周末北京武汉往返随机放入所有的图片/pdf，然后就在这个文件夹下创建一个md文档，进行博客的创建（相当于草稿），图片等静态资源的导入方式举例如下，这样你在编辑草稿的时候就能实时看到了，最后再编辑好之后，将内容复制到文件夹外一级的同名md文件中，删除此草稿md文档。（如果你在发布后还想修改，那就同理再创建一个草稿md文件，实时预览静态资源，编辑后再删除）

      图片：![图片 text](图片.jpg)
      pdf: {% pdf 名称.pdf %}

      5. hexo clean
      6. hexo g -d
         1. 或者先hexo g在本地生成
         2. hexo s本地预览 http://localhost:4000,而且是热加载，可以一边改一边预览
         3. 最后发布hexo d

hexo使用技巧

1. 设置文章摘要和标签操作举例如下：

---
title: hello hexo markdown
date: 
tags:
- hello
---

我是短小精悍的文章摘要(๑•̀ㅂ•́) ✧

<!-- more -->

紧接着文章摘要的正文内容

2. 很多用法比如如何布局多张照片，代码折叠、标签样式、mermaid渲染等等见https://hexo.fluid-dev.com/docs/guide/#tag-%E6%8F%92%E4%BB%B6
3. 资源引用：除了url的绝对引用外，相对引用可以使用 Hexo 提供的资源文件夹功能:使用文本编辑器打开站点根目录下的 _ config.yml 文件，将 post_asset_folder 值设置为 true。Hexo 将会在我们每一次通过 hexo new title 命令创建新文章时自动创建一个同名文件夹，于是我们便可以将文章中所引用的相关资源比如截图放到这个同名文件夹下，然后通过相对路径引用；不针对封面等与文章内容无关的资源；
   1. 强调一下hexo g时，只会将source目录下的img文件夹、_posts下的new出来的md文件以及资源引用开启后下的同名文件夹下的资源文件复制到public下，其他的文件不会复制到public下；因此直接复制图片粘贴到md中的资源图片，vscode会默认在当前目录下创建一个img/{title}文件夹用以存放截图，但是此文件夹不会被hexo g复制到public下，因此需要手动将其复制粘贴一份到资源引用功能开启后的同名（title）文件夹下，然后hexo g -d即可；
4. 分类与标签：
   1. 二者区别：分类具有顺序性和层次性而标签没有顺序和层次；可忽略不计
   2. 在scaffolds/post.md设置默认的文章模板如下，生成之后再加入分类/标签即可，分类比较好用：

   ---
   title: {{ title }}
   date: {{ date }}
   tags:
   - 标签
   categories:
   - 类别
   ---

5. 自定制、美化博客
   1. 参考：
      1. https://blog.kevinchu.top/2023/07/17/hexo-theme-fluid-modify/
      2. https://blog.csdn.net/weixin_51545953/article/details/128499341
   2. 配置：包括所有图片、导航栏的title、标题等等都在_conflg.主题.yml中设置,其优先级最高,然后考虑_config.yml;
   3. 修改banner图：
      1. 在网上查找免费开源的风景图片并下载下来（避免版权纠纷）推荐几个免费开源的图片网站
         1. https://pixabay.com/
         2. https://unsplash.com/
         3. https://www.pexels.com/
      2. 不知为何在配置中修改默认banner_img的属性不生效，但是可以分步设置各个分页的banner图，参考

      # 首页
      index:
          banner_img: /img/banner.jpg  # 首页 Banner 头图，以下相同
          banner_img_height: 100  # 头图高度，屏幕百分比，available: 0 - 100
      #---------------------------
      # 文章頁
      # Archive Page
      #---------------------------
      archive:
          banner_img: /img/articles.jpg
          banner_img_height: 80  # available: 0 - 100
      #---------------------------
      # 分類頁
      # Categories Page
      #---------------------------
      category:
          banner_img: /img/categories.jpg
          banner_img_height: 80  # available: 0 - 100

   4. 设置文章在首页中的封面图：
      1. 设置模版scaffolds/post中添加index_img: /img/cover/{{ title }}.png；
      2. 在source/img下创建cover文件夹,将new的文章的封面移动到其中，并改为{title}.png
      3. hexo clean ;hexo g -d
   5. 同理，banner_img: /img/cover/{{ title }} .png设置文章的banner图

解决问题

• 图片无法加载

  • 参考
    • https://blog.csdn.net/m0_43401436/article/details/107191688
  • 解决办法：

    • md文件中的图片路径只能是文件名，并将相应的图片放到其同名文件夹下，也就是说要想在云端能看到图片，那么在本地就看不到；

    • 谷歌也没有发现更好的办法，也许这就是hexo的bug；

    • 2025.11，AI发展太快太好用了，在windsurf问了下gemini就立刻解决了（之前谷歌很久都找不到答案）；

      • npm install hexo-renderer-marked@latest –save
      • _config.yml中写入

        marked:
           postAsset: true

    • 文章图片的导入方式使用相对路径 <img src="./周末北京武汉往返随机/IMG_20251122_080702.jpg" />这样本地和网页上都能看到了

• 如何设置图片的大小

- 等比例缩放
<img src="./12.jpg" style="zoom:15%" />
- 直接设置宽高
<img src="./12.jpg" style="width:300px;height:300px"/>

• 也许在本地看起来不是居中的，但是博客主题会使得发布后网站显示的图片都是居中的。

分享方式

• 直接分享博客地址似乎不太好，那你可以截博客文章长图发到qq空间/朋友圈然后附上博客地址，举例如下：
  
• 如何在本地进行分类管理
  • 直接在tolsz\source_posts下创建类型文件夹，其他同上:
    • hexo new ‘tltle’然后将文章和同名文件夹手动移到类型文件夹即可