建立自己的HEXO博客

本篇博文我分享Hexo博客搭建的过程和yilia主题的应用,图片插入

第一章 步骤


1.到node.js官网下载node.js选择对应版本的xxx.TSL, 然后无脑下一步
2.Windos下直接打开cmd,查看一下安装好的node的版本和npm(包管理器的版本) node -v npm -v
3.因为中国特色,下载国外镜像很慢,所以taobao有一个镜像cnpm,大家直接到taobao上下载就好 npm install -g cnpm --registry=https://registry.npm.taobao.org
4.安装cnpm后查看一下它的版本 cnpm -v
5.然后通过cnpm来安装hexo cnpm install -g hexo-cli
6安装好后通过查看一下hexo版本 hexo -v
7.新建一个文件夹blog,有错删掉重建 mkdir blog,然后进入到文件夹内cd blog/
8.生成初始化一个hexo博客 sudo hexo init在linux下,我这个是windos下的,在windows10下到git官网下载git安装,无脑下一步。
9.进入到创建的blog内,单击右键选择git bash here 进入到git的命令行中,通过使用git -v查看git的信息。
10.生成初始化一个博客 hexo init,然后开始生成,提升Start blogging with Hexo!说明生成成功
11通过ls -l查看具体生成的配置
12.先进行hexo的预编译 hexo g,启动我们生成的博客 hexo -s 在localhost:4000查看,注意不要在git bash here使用ctrl+v这样会关掉博客端口导致无法打开
13.建立自己的第一篇博客在git bash here使用ctrl+v关闭端口 使用hexo n “博客的标题”进入到source下的_posts下 cd/source/_posts vim 博客标题.md进入博客文档内进行编写 ctrl+ins复制 shift+ins粘贴,写好后 按住esc 输入:wq退出
14.退出来后cd …/…退出到blog下,hexo clean清理一下,然后在生成hexo g
15.注册一个github账号,并new一个repository,名称命名为 左边的名称.github.io,描述随便,然后creat
16.将生成的博客部署到远端github上,先配置一下 vim -config.yml
type: git
repo: github上的库名
branch:master
message:blog 注意冒号后面都要加空格, 按esc+:wq保持退出
17.hexo g预编译一下 hexo d将博客上传到github上,如果出现please tell me who are you
输入git config --global user.name “XXX”(yourname)设置Git用户名,回车
输入git config --global user.email “[email protected]”(youremail)设置Git邮箱然后回车
18.如果提示让你输入github账号密码,输入就好.然后部署成功,通过打开zhenghonghui99.github.io看看你的blog是否部署成功

第二章 主题


19.更换主题 进入blog目录中git bash here 输入git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia,将主题下载到blog\themes\yilia中
20.回到blog中 再配置一下vim -config.yml 找到theme:将原来的landscape改为下载的yilia 。esc+:wq保存退出
21.hexo clean 在hexo g编译一下 hexo s本地4000端口预览一下,hexo d推送跟换好的主题到远端

第三章 插入图片

22.如何在hexo中插入图片首先到hexo(blog)目录下的_config.yml进行配置,vim _config.yml 把post_asset_folder改为true
23.在hexo(blog)目录下执行 npm install hexo-asset-image --save ,有warning不管,然后通过hexo n “博客名”,发现在source下的_post里出现一个跟你博客名一样的文件夹就OK
24.将要使用的图片放在这个文件夹中,然后在写博客中通过makedown语法![任何文本](文件夹名/图片名.图片格式),然后部署和预览博客试试

正确的本地图片插入


建立自己的HEXO博客_第1张图片

下面是我放入的图片


建立自己的HEXO博客_第2张图片

通过<–img- src="/img/图片名称">来显示,首先要在source里建立一个新的文件夹img然后把要显示的图片拖进来,例如下代码

<img src="/img/学习.jpg">

后记

本人现在还是一名学生,这次开发Hexo博客参考了许多教程,遇到问题自己上百度解决,因为Hexo博客比较火热,所以解决问题的方法很多。本篇博文记录自己开发的过程,文中图片在网络可以找到,文中如有粗糙和错误描述还请大佬多多见谅,指教!

作者:Shine先生

你可能感兴趣的:(建立自己的HEXO博客)