使用 hexo 框架 快速搭建个人博客(一)

简介: 使用 hexo 框架 快速搭建个人博客(一)

Hello,各位小伙伴大家好,今天带大家来使用 hexo框架 来从零搭建个人博客!

使用 hexo 框架 快速搭建个人博客(二)
@TOC

一、什么是 hexo 框架 ?

在这里插入图片描述

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

二、 环境搭建

1、Node.js 下载安装

NodeJS 管网:https://nodejs.org/zh-cn/
在这里插入图片描述
下载成功之后进行nodejs的安装,选择安装路径之后(不建议装在C盘),一路next就可以了!!(由于我之前已经安装过了,这里就不再进行安装)安装成功之后在cmd中输入 node -v 和 npm -v 显示出node的版本号 和 npm的版本号 即为安装成功!
在这里插入图片描述

2、npm 淘宝镜像设置

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

再cmd中输入这段命令 npm install -g cnpm --egistry=https://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 s
在这里插入图片描述
在这里插入图片描述
哦哦哦~~~~ 很明显我新添加的博客已经展示出来了😝😝😝
在这里插入图片描述

总结

以上就是本期个人博客的在本地的快速搭建,下期将带大家更换博客主题以及将博客发布在GitHub上和Gitee上。 使用 hexo 框架 快速搭建个人博客(二)
我是楠橘星,期待大家的关注!😀😀😀😀

树苗如果因为怕痛而拒绝修剪,那就永远不会成材。
在这里插入图片描述

目录
相关文章
|
6月前
|
开发框架 资源调度 JavaScript
用Hexo搭建博客入门教程-搭建环境生成hexo静态页面(一)
用Hexo搭建博客入门教程-搭建环境生成hexo静态页面(一)
71 0
|
12月前
|
JavaScript Shell 网络安全
使用Hexo从0到1搭建个人博客详细教程(超详细,超简单)
使用Hexo从0到1搭建个人博客详细教程(超详细,超简单)
1290 0
|
12月前
|
JavaScript Ubuntu 网络安全
Hexo 个人博客搭建
hexo Github Pages博客搭建全过程 声明: 演示环境为Ubuntu 16.04,记录时间为16~17年。 创建仓库 !NOTE 目的是使用GitHub Pages来部署我们的博客。 注册GitHub账号,官网地址:https //github.com/ 登录后如下图,点击创建仓库
84 0
|
JavaScript
【Hexo基本使用】零基础,快速搭建属于自己的个人博客!
本文包含以下内容:Hexo安装,Hexo基础指令与配置,Hexo切换主题,Hexo部署。 最将自己的博客改为了Hexo静态网页。
267 0
|
域名解析 前端开发 JavaScript
Hexo+Github+vercel 搭建个人博客教程(二)
这篇教程接上篇教程,在上篇教程的基础上在进行
962 1
|
索引
github + hexo 小白超快搭建功能强大的个人博客网站(3)
github + hexo 小白超快搭建功能强大的个人博客网站(3)
115 0
github + hexo 小白超快搭建功能强大的个人博客网站(3)
|
搜索推荐 Shell 开发工具
github + hexo 小白超快搭建功能强大的个人博客网站(2)
github + hexo 小白超快搭建功能强大的个人博客网站(2)
129 0
github + hexo 小白超快搭建功能强大的个人博客网站(2)
|
缓存 JavaScript Shell
|
开发工具 数据安全/隐私保护 git
使用 hexo 框架 快速搭建个人博客(二)
使用 hexo 框架 快速搭建个人博客(二)
97 0
使用 hexo 框架 快速搭建个人博客(二)
|
JavaScript 开发工具 git
用Hexo搭建本地静态博客
用Hexo搭建本地静态博客
114 0