Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定。
Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令。
hexo new '文章' 就会生成一个名为'文章'的md文件。
在图中位置添加描述,分类以及标签,有利于搜索分类。
众所周知,在md文件中插入图片的语法为 ![]() 。
其中 方括号 是图片描述, 圆括号 是图片路径。
一般来说有三种图片路径,分别是 相对路径,绝对路径和网络路径 。
所谓的网络路径就是直接引用网上的图片,直接复制图片地址,放在圆括号中就完事了。
这种方式十分的方便,但是也存在一定的问题:
这种方式算是有利有弊。
绝对路径是图片在计算机中的绝对位置,相对路径是相对于当前文件的路径。
由于我们的博客是要部署在网站上,部署后会生成新的文件目录,所以我们选择使用相对路径的方式。
在hexo中使用 文章资源文件夹 需要在 config.yaml 文件中更改一下配置:
当该配置被应用后,使用 hexo new 命令创建新文章时,会生成相同名字的文件夹,也就是文章资源文件夹。
虽然可以正常引用图片了,但是这种引用图片的方式只有一句话能形容,wtf。
插件 hexo-renderer-marked 解决了这个问题。可以只用 npm install hexo-renderer-marked 命令直接安装,之后在 config.yaml 中更改配置如下:
之后就可以在使用 [图片上传失败...(image-5f3c69-1603081095188)] 的方式愉快的插入图片了。
我们做了这么多都是为了方便,那么为什么不再方便一点呢。
上述是从文章资源文件夹中引用图片,前提是 先将图片放入到文章资源文件夹 ,如果图片数量众多的话,一张一张的放很影响效率。但是不用怕,我们有很方便的解决方法。
Typora 是我非常喜欢的Markdown文本编辑器,在之前的文章中也介绍过一点。
Typora对于插入图片的支持做得非常好,在 文件->偏好设置 或者直接 <C-,>进入设置。
使用该配置后,可以直接复制网页中的图片地址,粘贴到Typora中后,会直接复制该图片到文章资源文件夹,同时自动更改路径。
如复制网络路径的图片 https://...../image.jpg 粘贴到Typora中叫 文章名 的文章后,图片会自动变为 [图片上传失败...(image-bd41f4-1603081095188)] 。
但我们知道部署后,文件路径是不同的,所以当我们插入完所有的图片后,我们还需要删除每个图片路径中的 文件名/ 。不慌,也很简单。
在Typora编辑器中,使用 <C-f>快捷键,将所有的 文章名/ 替换为空即可删除。
然后再将博客上传,图片就会随着文章一起打包。在网页中就可以看到正常显示的图片,大功告成。
先搞明白Hexo博客从搭建到自动发布的架构,才能更好的理解我们每一步进行的 *** 作。
不然只跟着步骤过了一遍,却不知道为什么这么做。
首先看这张架构图:
整个流程就是本地将 *.md 渲染成静态文件,然后Git推送到服务器的 repository ,服务器再通过 git-hooks 同步网站根目录。
前提条件: 腾讯云服务器
第一部分 : 服务器环境搭建,包括安装 Git 、 Nginx 配置 、创建 git 用户 。
第二部分 : 本地 Hexo 初始化, 包括安装 NodeJS 、 hexo-cli , 生成本地静态网站
第三部分 : 使用Git自动化部署发布博客
NodeJS 安装可以参考: Linux安装NodeJS
找到以下内容
在下面添加一行
保存退出后改回权限
随后设置Git用户的密码,
切换至git用户,创建 ~/.ssh 文件夹和 ~/.ssh/authorized_keys 文件,并赋予相应的权限
然后就可以执行ssh 命令测试是否可以免密登录
至此,Git用户添加完成
我是用的是lnmp 一键安装包,nginx安装教程一大堆,就不再叙述。主要看nginx配置。
找到nginx的配置文件,修改配置如下:
首先要安装 hexo-cli ,安装 hexo-cli 需要 root 权限,使用 sudo 运行
然后初始化Hexo程序
等执行成功以后安装两个插件, hexo-deployer-git 和 hexo-server ,这俩插件的作用分别是使用Git自动部署,和本地简单的服务器。
hexo-deployer-git帮助文档
hexo-server帮助文档
使用 hexo new <文章名称> 来新建文章,该命令会成成一个 .md 文件放置在 sources/_posts 文件夹。
编辑完毕以后, 使用 hexo g 将 .md 文件渲染成静态文件,然后启动 hexo-server :
现在便可以打开浏览器访问 http://localhost:4000 来查看我们的博客了!
创建一个裸仓库,裸仓库就是只保存 git 信息的 Repository , 首先切换到 git 用户确保 git 用户拥有仓库所有权
一定要加 --bare ,这样才是一个裸库。
在这里我们使用的是 post-receive 这个钩子,当git有收发的时候就会调用这个钩子。 在 ~/blog.git 裸库的 hooks 文件夹中,
新建 post-receive 文件。
保存后,要赋予这个文件可执行权限
然后打开 _config.yml , 找到 deploy
保存后,尝试将我们刚才写的"hello hexo"部署到服务器
访问服务器地址,就可以看到我们写的文章"Hello hexo",以后写文章只需要:
博客就更新咯!~
使用 Git Hook 自动部署 Hexo 到个人 VPS
Hexo 文档
在写文章时,常常有配图说明的需求,Hexo有多种图片插入方式,可以将图片存放在本地引用或者将图片放在CDN上引用,通过此文总接一下在 hexo 搭建的博客中,插入图片的常用方式。
如果你要插入的图片,是一个外部的 src 链接地址,比如该图片存放在 CDN 上,或某某图床上面,那就使用 Markdown 默认的插入图片的方式,方法和插入链接很像,只是前面多了一个感叹号,如下:
当 Hexo 项目中只用到少量图片时,可以将图片统一放在 source/images 文件夹中,通过 Markdown 语法访问它们。
图片除了可以放在统一的 images 文件夹中,还可以放在文章自己的目录中,文章的目录可以通过配置 _config.yml 来生成。配置如下:
将 _config.yml 文件中的配置项 post_asset_folder 设为 true 后,执行命令 $ hexo new post_name ,在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name 。将图片资源放在 post_name 中,文章就可以使用 相对路径 引用图片资源了。
最后补充一种在 Markdown 中插入Base64 格式图片的方法,和第一种插入外链的方式类似,注意是圆括号 () ,而不是方括号 [] 。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)