【hexo】学习篇(一)| hexo博客搭建说明
系统环境:
- Windows 10
- node 14.8.0
- git 2.21.0
1. 安装node.js
1.1 下载node.js
从官网中 https://nodejs.org/en/download/ 下载解压版至本地。
1.2 将node.js路径添加至环境变量
找到解压文件夹中 node.exe
所在的路径。
然后添加至系统变量的 path 中。
1.3 node与npm安装成功
完成以上操作后,打开命令行(这里,我使用的是 git bash here
)。使用 npm -v
与 node -v
查看 npm 和 node 版本(为了确认 npm 与 node 可以正常使用)。
能看到版本号则表示可以正常使用。
2. 安装git
- 下载 git https://git-scm.com/download
- 无脑 next
具体可以参考这篇博文 —— Windows系统Git安装教程(详解Git安装过程)
3. 安装hexo
3.1 配置镜像源
安装好npm后,我们就可以使用npm包管理器来进行hexo的安装。
在安装前,为了提升下载速度,需要前更换一下镜像源。
在命令行中输入以下命令
注意,这个命令并不会产生各种输出 可通过 npm config get registry 进行验证
3.2 安装hexo
然后输入以下命令,进行全局安装 hexo。
3.3 hexo安装成功
安装成功后输入 hexo -v
查看是否安装成功。
4. 使用hexo服务
4.1 创建文件夹
首先,在本地创建一个新文件夹,用于存放所以和hexo博客相关的文件。
比如,在F盘创建了一个myblog文件夹。
4.2 安装hexo相关依赖
在myblog文件夹中打开命令行,输入命令 hexo init
,hexo会自动从github仓库中下载依赖至当前文件夹。
输入完这条命令后,可以看到文件夹下多了许多文件。
输入命令 npm install
安装模块,node_modules中会多出五个包。进行到这一步,在node_modules中总共有165个包,所以输入 npm install
命令后的出现的5个包,我没有搞清是哪5个包,他们的作用又是什么?
但至少可以确定的是,不输入 npm install
命令去装这5个包,在下一步的启动hexo服务是不会出现什么问题的。
4.3 启动hexo服务
在命令行中输入 hexo server
或 hexo s
后,hexo服务成功运行在4000端口上。如果失败了,有可能是其他的服务占用了这个端口。
可以使用 hexo s -p 5000(端口号)
修改启动端口。如果要修改默认端口值,可以修改 node_modules\hexo-server\index.js
文件
在浏览器中输入地址 localhost:4000
,可以成功地看到博客已经跑起来了。博客显示的是一篇自带的题为Hello World的博文。
直到你在命令行中敲下 Ctrl + C 之前,你都可以通过浏览器使用你的hexo服务。
5. 写博客
5.1 新建博文
在命令行中输入 hexo new "你的博文题名"
。( hexo n
也行哦)
这里出现的中文乱码可以点击右键,选中 Options -> Text ,在对话框中将Locale改为zh_CN,将Character set改为UTF-8
然后,在你的 source/_posts
路径下就会出现新建这个篇博文,他以 markdown 文件的形式存在。
同样的,我们也可以看到一开始自带的那篇名为 Hello World 的博文。
接下来,点开相应的 md 文件,使用 markdown 语法来撰写我们的博文。
5.2 生成静态文件
撰写好 markdown 文件,为了能够以网页的形式阅读我们的博文,需要通过 markdown 文件生成网页的静态文件,这也是 hexo,hugo 等博客框架最核心的功能。我们为什么选择使用这种框架,就是因为我们想把所有的精力放在博客内容上(因为我们前端太菜)。
在命令行中输入命令 hexo generate
或 hexo g
执行完这一步后,可以看到我们的文件夹下多了一个public文件夹,里面存放的就是静态资源。
最后,使用命令 hexo server
启用hexo服务,就可以看到我们新写的博文啦。
最后最后,我们每次更新博文时,可以使用 hexo clean
或 hexo cl
命令去删除我们之前的静态资源,然后再使用 hexo generate
命令生成新的静态资源。
References
[1] 管窥程序,免费打造个人博客系统
[2] Lateautunm4lin,2019年末,来一发基于Hexo自建博客生态指南!
[3] 直上云霄,hexo超完整的搭建教程,让你拥有一个专属个人博客
[4] 布莱恩特科比酱,从0开始搭建你的个人博客
[5] CodeSheep,手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo
[6] 学为所用, Windows系统Git安装教程(详解Git安装过程)