使用hexo搭建一个博客超详细步骤

一.前期准备

  1. Hexo使用前提
    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 使用Hexo的前提是电脑上已安装下列程序:
    在这里插入图片描述

  2. 安装Hexo
    vscode建立一个文件夹(例如0808prac),右键打开终端,输入以下终端命令:
    全局安装hexonpm 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官网有详细说明,在这里就不赘述了
    Hexo项目生成文件
  • 修改博客根目录中_config.yml文件的配置项post_asset_folder为true(方便后面图片的显示)
    修改配置文件
  • 创建一篇新文章或者新的页面hexo new 名字 (例如hexo new 我的日志)
    生成一个我的日志.md文档和一个我的日志文件夹
    生成文章
    我的日志.md文件如下图 :
    我的日志.md
  • 在我的日志.md文件中写入文本
    Hexo 默认安装了 hexo-renderer-markedhexo-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文件夹

  • 进入public文件夹cd public
    public文件夹终端下执行一系列git命令,提交到自己的GitHub仓库

  • 借助第三方网站netlify网站,这是一个免费的可以发布静态网页的网站

  • 打开这个网站,进行登录,登录时授权给GitHub,用自己的GitHub账号登录这个网站

  • 登录之后,点击右上角New sit from Git创建一个新的站点
    创建项目

  • 选择GitHub
    选择GitHub

  • 进去之后搜索自己刚才提交的仓库,选择这个项目,不需要其他操作,直接点击最下面Deploy site发布
    发布

  • 发布之后会帮我们生成一个随机的域名
    随机域名

  • 上图中绿色网址就是我们的博客网址,谁都可以访问

  • 修改域名
    如果觉得这个随机生成的域名太随意了,可以自己改一个域名:
    点击上图中Site setting→Change site name修改域名
    修改域名

  • 自己想改什么随意,比如我给它改为orange-blog
    修改域名

  • 修改之后,就生成了一个自定义域名,这个网址谁都可以访问
    生成自定义域名

四.解决Hexo博客不显示图片的一种方法

在上述内容中穿插了解决Hexo博客不显示图片的一种方法,在这里单拎出来

  1. 引入图片踩坑
    一开始我没有修改配置文件,也没有安装加载图片的插件,直接使用Markdown语法引入文件,结果就是文件出不来。
  2. 解决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官网

  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值