使用 hexo 框架 快速搭建个人博客（一）

已注销
236 阅读7分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

木字楠-header.gif

🎶 文章简介：使用 hexo 框架 快速搭建个人博客（一）

💡 创作目的：使用hexo搭建自己的个人网站

☀️ 今日天气：2022-11-25 天气很好

📝 每日一言：不要讲来日方长，当下最好，现在最好！

🥦 一、什么是 hexo 框架 ？

在这里插入图片描述

hexo框架 是一个快速、简洁且高效的博客框架，它支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。除此之外它可以与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成。在众多美观、强大、可定制的主题中选择；使用任何兼容的模板引擎创建自己的主题。

🥬 二、 环境搭建

🥒 1、Node.js 下载安装

NodeJS 管网：nodejs.org/zh-cn/

🌶️ 一、什么是 hexo 框架 ？

在这里插入图片描述

hexo框架 是一个快速、简洁且高效的博客框架，它支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。除此之外它可以与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成。在众多美观、强大、可定制的主题中选择；使用任何兼容的模板引擎创建自己的主题。

🫑 二、 环境搭建

1、Node.js 下载安装

NodeJS 管网：nodejs.org/zh-cn/

image.png

下载成功之后进行nodejs的安装，选择安装路径之后（不建议装在C盘），一路next就可以了！！（由于我之前已经安装过了，这里就不再进行安装）安装成功之后在cmd中输入 node -v 和 npm -v 显示出node的版本号 和 npm的版本号 即为安装成功！

image.png

🌽 2、npm 淘宝镜像设置

通常我们使用npm下载的时候下载速度非常慢，经常还会出现卡顿，命令窗口无响应的情况！！！为了避免这种情况我们选择更换镜像，我们选择使用淘宝的镜像来进行下载，淘宝的速度可谓是起飞~~~

再cmd中输入这段命令 npm install -g cnpm --egistry=registry.npm.taobao.org 将镜像改为淘宝镜像来使用，以后我们需要下载是就要使用 npms 来进行操作！

image.png

现在就已经安装成功了！！

image.png

🥕 3、hexo框架 下载安装

在cmd 中输入 cnpm install -g hexo-cli 命令开始 hexo 的安装！

image.png

当安装完成之后再输入 hexo -v 命令来查看 hexo是否安装成功！

若查出hexo-cli的版本号即为安装成功！（在查询 hexo 的版本时也同时查询出了node的版本信息，说明 hexo 框架是基于 node的😁）

🫒 三、开始搭建博客！

环境已经搭建完成了，接下来我们就要 正式开始搭建博客了 ！（🤩冲冲冲~~~） 在这里插入图片描述

🧄 1、新建目录进行初始化

首先我们新建一个文件夹（建在哪里都可以）!

image.png

接下来我们点击进入新建的文件夹中，之后在导航栏输入cmd进入cmd命令窗口！

image.png

image.png 这样cmd打开的起始位置就是在该文件夹下！

image.png

接下来我们在cmd命令窗口中输入 hexo init 命令开始项目的初始化！!

image.png

当出现 INFO Start blogging with Hexo! 时说明博客框架 初始化 成功！

image.png

初始化成功之后大家就会发现文件夹中多出了好多东西，这些都是什么呢？node_modules 主要是存放依赖的，source目录中存放的是个人的博客，theme中存放的就是大家最关心的主题啦😉（谁不希望自己的博客漂漂亮亮的呢）

image.png

🧅 2、博客启动！！！！

在这里插入图片描述

没想到吧？!刚初始化完毕就启动了？？？？😱 没错就是要启动了 输入 hexo s 命令 来启动我们的博客！！

image.png ヾ(≧▽≦*)o 启动成功！！！！！！！！！！！！！！！！😁😁😁😁

🥔 3、本地访问

上面已经提示了，博客占用了本地的4000端口！ 啊啊啊，激动的心，颤抖的手。😶😶

image.png 哦哦哦~~~~~~~~~~~~~~~~~~~~~~~~~~ 本地博客搭建成功！！！！👻👻👻👻👻

image.png

🍠 1、本地md文件上传！

之前也说过了，这个文件夹是存放个人静态博客的！那我就把我尘封多年的Markdown写的笔记拿出来试试😚😚

image.png

接下来进入cmd 关闭 服务，按住 Ctrl + C，接下来输入Y即可停止服务！！！

image.png

接下来我们使用 hexo clean 清理一下内存！ 接下来使用 hexo g 来重新生成一下

image.png

image.png 看到这里了吗？ 我新添加的一篇Maekdown笔记已经加载进去了！！😀😀

加下来再次启动服务！！ hexo s

image.png

在这里插入图片描述 哦哦哦~~~~~~~~ 很明显我新添加的博客已经展示出来了😝😝😝

image.png

下载成功之后进行nodejs的安装，选择安装路径之后（不建议装在C盘），一路next就可以了！！（由于我之前已经安装过了，这里就不再进行安装）安装成功之后在cmd中输入 node -v 和 npm -v 显示出node的版本号 和 npm的版本号 即为安装成功！ 在这里插入图片描述

🥐 2、npm 淘宝镜像设置

通常我们使用npm下载的时候下载速度非常慢，经常还会出现卡顿，命令窗口无响应的情况！！！为了避免这种情况我们选择更换镜像，我们选择使用淘宝的镜像来进行下载，淘宝的速度可谓是起飞~~~

再cmd中输入这段命令 npm install -g cnpm --egistry=registry.npm.taobao.org 将镜像改为淘宝镜像来使用，以后我们需要下载是就要使用 npms 来进行操作！ 在这里插入图片描述 现在就已经安装成功了！！ 在这里插入图片描述

3、hexo框架 下载安装

在cmd 中输入 cnpm install -g hexo-cli 命令开始 hexo 的安装！ 在这里插入图片描述 当安装完成之后再输入 hexo -v 命令来查看 hexo是否安装成功！ 在这里插入图片描述 若查出hexo-cli的版本号即为安装成功！（在查询 hexo 的版本时也同时查询出了node的版本信息，说明 hexo 框架是基于 node的😁）

🥯 三、开始搭建博客！

环境已经搭建完成了，接下来我们就要 正式开始搭建博客了 ！（🤩冲冲冲~~~） 在这里插入图片描述

🍞 1、新建目录进行初始化

首先我们新建一个文件夹（建在哪里都可以）在这里插入图片描述 接下来我们点击进入新建的文件夹中，之后在导航栏输入cmd进入cmd命令窗口！ 在这里插入图片描述 在这里插入图片描述 这样cmd打开的起始位置就是在该文件夹下！ 在这里插入图片描述

接下来我们在cmd命令窗口中输入 hexo init 命令开始项目的初始化！在这里插入图片描述 当出现 INFO Start blogging with Hexo! 时说明博客框架 初始化 成功！ 在这里插入图片描述 初始化成功之后大家就会发现文件夹中多出了好多东西，这些都是什么呢？node_modules 主要是存放依赖的，source目录中存放的是个人的博客，theme中存放的就是大家最关心的主题啦😉（谁不希望自己的博客漂漂亮亮的呢） 在这里插入图片描述

🥖 2、博客启动！！！！

在这里插入图片描述

没想到吧？!刚初始化完毕就启动了？？？？😱 没错就是要启动了 输入 hexo s 命令 来启动我们的博客！！ 在这里插入图片描述 ヾ(≧▽≦*)o 启动成功！！！！！！！！！！！！！！！！😁😁😁😁

🥨 3、本地访问

上面已经提示了，博客占用了本地的4000端口！ 啊啊啊，激动的心，颤抖的手。😶😶 在这里插入图片描述 哦哦哦~~~~~~~~~~~~~~~~~~~~~~~~~~ 本地博客搭建成功！！！！👻👻👻👻👻 在这里插入图片描述

本地md文件上传！

之前也说过了，这个文件夹是存放个人静态博客的！那我就把我尘封多年的Markdown写的笔记拿出来试试😚😚 在这里插入图片描述 接下来进入cmd 关闭 服务，按住 Ctrl + C，接下来输入Y即可停止服务！！！ 在这里插入图片描述 接下来我们使用 hexo clean 清理一下内存！ 接下来使用 hexo g 来重新生成一下 在这里插入图片描述 在这里插入图片描述 看到这里了吗？ 我新添加的一篇Maekdown笔记已经加载进去了！！😀😀

加下来再次启动服务！！ hexo 在这里插入图片描述 在这里插入图片描述 哦哦哦~~~~~~~~ 很明显我新添加的博客已经展示出来了😝😝😝 在这里插入图片描述

avatar
文章
阅读
粉丝