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

一.前期准备

1. Hexo使用前提
   Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 使用Hexo的前提是电脑上已安装下列程序：
   

2. 安装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博客不显示图片的一种方法，在这里单拎出来

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官网。