用hexo搭建本地博客写笔记并解决图片显示问题

已于 2022-01-29 19:45:56 修改
阅读量681 收藏 1
点赞数
分类专栏： 其他 文章标签： node.js git npm
于 2022-01-07 17:04:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lifeng_dc/article/details/122367084
版权

目录

一、参考网址

https://hexo.io/zh-cn/docs/

二、安装前提

1.git
2.nodejs

三、安装

npm install -g hexo-cli

在这里插入图片描述

四、建站

hexo init myblog
cd myblog
npm install

在这里插入图片描述

五、启动并测试

hexo s

在这里插入图片描述
默认地址http://localhost:4000
在这里插入图片描述

六、设置好typeora图像保存位置

设置图像保存目录

在这里插入图片描述

七、设置图片路径相关参数和依赖

（一）修改_config.yml文件

在这里插入图片描述

（二）安装hexo-asset-image插件

npm install hexo-asset-image@0.0.3 --save

在这里插入图片描述

八、新建文章并添加图片

hexo new 测试文章

在这里插入图片描述
在这里插入图片描述

九、效果

在这里插入图片描述

lf_x
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
hexo-simple-image:hexo图像插件
04-30
六边形简单图像 特征 使用markdown标签导入图像。 安装 npm install hexo-simple-image --save 选项 在_config.yml配置。 post_asset_folder : true 用法 最新帖子 设置选项后，在创建新文章时，将自动生成一个文件夹来放置图片。 + source + _post + new_post.md + new_post + new_post.png 之后，您可以像 ![ my post image ](./new_post/new_post.png) 旧邮报 您应该手动创建一个与帖子名称相同的文件夹。 之后如new post 。
hexo-note(hexo的笔记)
星幕·云影的博客
12-01 523
写作新建一篇文章 你可以执行下列命令来创建一篇新文章或者新的页面： 1 hexo new [layout] [title] 您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布>局。 文件名称 Hexo 默认以标题做为文件名称，但您也可以在_confi...
用hexo搭建博客笔记
violetjack的专栏
02-08 318
一直想有个自己的 Github.io 博客，感觉逼格能够上升一大截。 很久之前就看到网上各种博客搭建的文章，但是从内心中总感觉好像是个很麻烦的事情。所以，一直没有动手去做。 昨天，趁着年前工作不忙，搭建了个博客，这里记录下过程。 其实，搭建hexo博客是非常简单的事情。 安装前提 Mac安装前提 Xcode Node.js Git 这三个玩意儿对于我们开发者基本都是有...
hexo博客上的图片路径问题解决方法
QRLYLETITBE的博客
11-07 1818
hexo博客上的图片路径问题解决方法
hexo图片插件
yatbfm的博客
10-13 71
Hexo图片插件
用Hexo搭建个人博客共7页.pdf.zip
10-31
【标题】: "用Hexo搭建个人博客共7页.pdf" 这个标题暗示了文档内容是关于使用Hexo框架创建个人博客的详细指南。Hexo是一个快速、简洁且高效的静态站点生成器，尤其适合用来构建个人博客。它基于Node.js，通过简单的...
基于Hexo搭建的博客系统源码.zip
11-02
Hexo是一款快速、简洁且高效的静态博客框架，它使用Markdown语法编写内容，通过简单的配置即可生成静态网页。基于Hexo搭建的博客系统源码.zip文件包含了一整套用于创建个人博客的源代码，使得用户可以自定义自己的...
个人博客系统-前后端,基于hexo搭建
最新发布
10-19
本文将深入探讨如何使用Hexo框架来搭建这样一个个人博客系统，并强调其自定义模板的特点。 Hexo，一款轻量级的静态博客框架，以其简洁、高效和易于上手的特点，受到了众多用户的喜爱。它基于Node.js，能够快速生成...
hexoBlog:使用hexo搭建的博客
06-20
本文将详细介绍如何使用Hexo搭建一个功能齐全、自定义性强的博客。 一、安装与配置Hexo 在开始之前，确保您的计算机上已经安装了Node.js环境。接下来，通过npm（Node.js包管理器）安装Hexo： 1. 打开命令行工具...
hexo-blog:使用 Nodejs Hexo 搭建个人博客，本地编辑 MD 文档并 Push 到远程，远程服务执行 Generate 生成静态文件，通过反向代理服务器 Nginx 发布网站资源
05-02
Hexo 搭建个人技术博客 在线博客访问： 安装工具 nodejs [sudo apt-get install nodejs / brew install nodejs] cnpm [npm install cnpm -g] 启动服务 $ git clone https://github.com/Chester-Hee/hexo-blog.git $ ...
关于个人搭建的博客图片问题的一个技巧
易与天行的博客
04-30 395
许多朋友应该有搭建自己的个人博客，但是图片问题一直是个头疼的问题，放在自己的服务器上加载速度慢，要么就是白嫖免费的cdn加速服务，但是一旦服务器迁移或者博客迁移，图片的导入导出很是麻烦。 所以，有一个很好的办法，就是将图片放到csdn的博客上。 如果你没有开启防盗链的话，将你的个人博客的markdown直接复制到csdn的编辑器里面，他会自动上传的。 今后写博客时候也可以在csdn上书写，复...
Hexo网页图片缺失解决
weixin_43856921的博客
11-10 550
Hexo网页图片缺失解决 hexo-asset-image 插件的使用 当发布新文章时，我使用了 hexo-asset-image 这个插件来使用资源文件夹 安装方法为: npm install hexo-asset-image --save 在资源文件夹当中可以放置博文需要引用的资源，例如图片等，流程详见官方文档：资源文件夹的使用 问题描述 使用该插件后新建文章 hexo new "test" ，就会在 _post 文件夹生成与新文章同名的资源文件夹，然后再在文章里使用 Markdown 的引用图片的方
静态博客Hexo搭建——本地and服务器
浩然然然的博客
06-12 425
静态博客–Hexo 静态博客：是指没有后端数据库的博客，所有文章都是以文件的形式存储，是一种纯前端的博客框架。 本地安装 电脑先装好git这个工具吧！ 安装Node.js: npm install -g hexo-cli 查看版本： hexo -v Node.js安装成功后，同时会自动安装一个包管理器，称为npm（Node Package Manager）。 什么是npm？ npm是一个包管理器，发布者将自己的代码发布（npm publish）到代码仓库（registry），使用
解决 Hexo 博客文章中图片的显示问题
梦家の博客
05-12 1万+
解决Hexo博客文章中图片不能显示的问题 设置站点配置文件_config.yml中 post_asset_folder:true。 Hexo 提供了一种更方便管理 Asset 的设定：post_asset_folder当您设置post_asset_folder为true参数后，在建立文件时，Hexo会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹。 安装...
hexo 本地图片不显示
99708
07-30 3606
修改文件_config.yml 里的post_asset_folder:这个选项设置为true 修改之后，再使用hexo n "hexo 本地图片不显示"时，目录的样子是 hexo 本地图片不显示 ├── 01.jpg ├── 02.jpg └── 03.jpg ... hexo 本地图片不显示.md 安装hexo-asset-image...
hexo引用本地图片无法显示
热门推荐
Ericam_
11-15 4万+
最近重新开始用起hexo，但是发现在文章中引用本地图片时总是显示不出来。 问题如下图所示。 花费了许久时间才解决这个问题。 因此将一些解决经验整理出来，希望能帮助到大家。 一、插件安装与配置 首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image npm install https://github.com/CodeFalling/hexo-asset-image...
hexo文章插入本地图片的方法
奇怪的老司机
02-20 3302
hexo装好后，发现它只能引用站外图片，这让有本地化需求的我不能接受，搜到hexo-asset-image插件可以实现文章插入本地图片的目的。具体操作如下：1，进入博客目录，安装该插件npm installhttps://github.com/CodeFalling/hexo-asset-image –save注意不要用下面的命令，这个版本有bugnpm install hexo-asset-...
hexo 生成博文插入本地图片
hqweay 的博客
06-28 4664
原文 hexo生成博文插入图片 步骤 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true 在你的hexo目录下执行这样一句话npm install hexo-asset-image --save，这是下载安装一个可以上传本地图片的插件，来自dalao：dalao的git 等待一小段时间后，再运行hexo n "xxxx"来生成md博文时...
使用Hexo-asset-image插件导致静态图片路径出错-Hexo采坑(二)
Java Developer Blog
07-16 2190
介绍 Hexo 官方提供的静态资源管理功能十分的鸡肋, 并且推荐我们通过安装 hexo-asset-image 来管理自己的静态图片. 故障描述 使用 Hexo-asset-image 插件静态图片路径会变成一个错误的路径. 我们可以看到错误的 URL 中, 在 host:port 后, 明显多了一个 .cn 的资源目录, 这在使用域名部署的时候, 明显是不正确的 错误: http://blog.diswares.cn/.cn/java-multithreading-thread-pool/juc-thr
hexo搭建个人博客
08-13
你想了解如何使用 Hexo 搭建个人博客，是吗？我可以为你提供一些基本的指导。首先，你需要按照以下步骤进行操作： 1. 安装Node.js：Hexo 是基于 Node.js 的静态网站生成器，所以你需要先安装 Node.js。你可以在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值