嗨,大家好,这期是使用GitHub+Hexo搭建个人静态博客第三期了。主要是关于如何写博客,如何搭配图文,如何上传部署博客。
关于如何写博客,Hexo支持Markdown,所以可以用之前我分享的Markdown编辑器——Typora。不知道的朋友记得去看我之前的文章。
OK!那废话不多说,开始吧。
教程:
1.首先在博客文件夹(关于博客文件夹上一期已经创建好了)里的根目录或者在根目录里进入source文件夹,再进入_posts文件夹,这个文件夹上期也介绍了,主要就是存放博客的文章。我这里在_posts里打开Git。记住以后打开Git都是这样,后面不再描述。
2.创建新博客文章命令:
hexonew文章题目
我这里随便举例。
3.可以看到在_posts文件夹中创建了.md格式的Markdown文件。
但是这儿有个问题:
资源(Asset)代表source文件夹中除了文章以外的所有文件,例如图片、CSS、JS文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在source/images(source文件夹中没有images的话新建一个)文件夹中。然后通过类似于![](/images/image.jpg)的方法访问它们。
但是,能想的到,一旦写的文章多了,图片多了,你把所有的图片都放到一个文件夹里,那整理起来将会非常麻烦。不便于管理博客文章和图片。
我们希望的是在新建.md文件的同时能在_posts文件夹中建立一个和.md文件同名的文件夹,用来存放这一个.md博文的图片。这样就便于管理了。
4.为了解决上述问题,Hexo也提供了解决方案。
打开博客配置文件_config.yml。上一期也说过打开方式。
5.找到:
post_asset_folder:true
默认应该是false,改为true,注意冒号和true之间有一个空格,别删。
之后保存。
6.设置好后再新建.md文件(新建命令前面已有,之后不再赘述),发现_posts文件夹中出现了同名的文件夹和.md文件。满足我们的需求。有助于更好的组织博客。以后就可以把这篇博文的图片放在同名文件夹里。
7.这里我再强调一下,我之前分享的那个Markdown编辑器——Typora。
记得在设置里勾选图片相对路径。
否则博客上传部署后图片不显示,我就吃过亏。
8.之后打开.md进行博文书写。插入同名文件夹里的图片可以看到路径是相对路径。
9.记得把关于这篇博文的相关图片都存放在同名的文件夹里。
10.之后再发布,我在这里总结一下常用的命令。
hexonewname#新建文章hexonewpagename#新建页面hexog#生成页面hexod#部署hexog-d#生成页面并部署hexos#本地预览hexoclean#清除缓存和已生成的静态文件hexohelp#帮助
发布的时候可以用这几条:
hexoclean#清除缓存和已生成的静态文件hexog#生成页面hexos#本地预览hexod#部署
hexoclean和hexos没必要每次都用,但是hexog和hexod每次部署都要用到。
之后不再赘述这些常用的命令哈。
发布完成后如果博客页面还没更新可以耐心等待一下再访问博客网址。
我发布上去的如下图,但是发现了一个问题,可以看到图片没有上传。就连本地预览都没有图片。
这个问题看下一步。
11.导致这个问题的原因有很多,但是如果按照我的教程一步一步走的,应该遇到的问题和我一样,那么解决方法也差不多。
我这个解决方法来源于csdn。感谢这位老哥,网址附上: