一.前期准备
-
Hexo使用前提
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 使用Hexo的前提是电脑上已安装下列程序:
-
安装Hexo
在vscode建立一个文件夹(例如0808prac),右键打开终端,输入以下终端命令:
全局安装hexo:npm install -g hexo-cli (或者npm i -g hexo-cli)
查看是否安装成功:hexo -v
安装成功显示如下图:
二.写博客
- 创建项目:hexo init 文件名 (例如hexo init my-blog)
- 进入创建好的项目:cd 文件名 (例如cd my-blog)
- 安装依赖:npm inistall (或者npm i)
生成的文件如下:关于文件的描述说明在Hexo官网有详细说明,在这里就不赘述了
- 修改博客根目录中_config.yml文件的配置项post_asset_folder为true(方便后面图片的显示)
- 创建一篇新文章或者新的页面:hexo new 名字 (例如hexo new 我的日志)
生成一个我的日志.md文档和一个我的日志文件夹
我的日志.md文件如下图 :
- 在我的日志.md文件中写入文本
Hexo 默认安装了 hexo-renderer-marked 和 hexo-renderer-ejs,因此你不仅可以用 Markdown 写作,你还可以用 EJS 写作,如下使用Markdown语法写作:
写入文本效果如下:
- 在我的日志.md文件中加入图片
博客根目录中下安装插件:
**npm install https://github.com/CodeFalling/hexo-asset-image --save**
把要引入的图片放在我的日志文件夹下
Markdown语法引入图片
- 还可以根据Markdown语法引入更多内容
例如我在这里又接着引入了标题和js
在本地启动项目:hexo s (在localhost:4000运行)
效果如下图:
三.生成外网可以访问的博客
到此时为止,这个博客只能在你自己的电脑上访问,接下来该怎么办呢?
-
Ctrl+c暂停项目
-
生成项目:hexo g
会生成一个public文件夹,如下图:
-
进入public文件夹:cd public
在public文件夹终端下执行一系列git命令,提交到自己的GitHub仓库 -
借助第三方网站netlify网站,这是一个免费的可以发布静态网页的网站
-
打开这个网站,进行登录,登录时授权给GitHub,用自己的GitHub账号登录这个网站
-
登录之后,点击右上角New sit from Git创建一个新的站点
-
选择GitHub
-
进去之后搜索自己刚才提交的仓库,选择这个项目,不需要其他操作,直接点击最下面Deploy site发布
-
发布之后会帮我们生成一个随机的域名
-
上图中绿色网址就是我们的博客网址,谁都可以访问
-
修改域名
如果觉得这个随机生成的域名太随意了,可以自己改一个域名:
点击上图中Site setting→Change site name修改域名
-
自己想改什么随意,比如我给它改为orange-blog
-
修改之后,就生成了一个自定义域名,这个网址谁都可以访问
四.解决Hexo博客不显示图片的一种方法
在上述内容中穿插了解决Hexo博客不显示图片的一种方法,在这里单拎出来
- 引入图片踩坑
一开始我没有修改配置文件,也没有安装加载图片的插件,直接使用Markdown语法引入文件,结果就是文件出不来。 - 解决Hexo博客不显示图片的一种方法
- 修改配置
博客根目录中_config.yml文件的配置项post_asset_folder为true
post_asset_folder:true
- 完成此设置后,当你通过hexo new 文件名新建博客后,会产生一个和文件同名的文件夹
- 在博客根目录中下使用npm安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
-
把要引入的图片放在我的日志文件夹下
-
Markdown语法引入图片
-
在本地启动项目:hexo s (在localhost:4000运行)
图片即可显示,效果如下图:
最后大家如果想了解更多功能,自己写出更炫酷的博客,可以查看hexo官网。