【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 -vnode -v 查看 npmnode 版本(为了确认 npmnode 可以正常使用)。

能看到版本号则表示可以正常使用。


2. 安装git

  1. 下载 git https://git-scm.com/download

  1. 无脑 next

具体可以参考这篇博文 —— Windows系统Git安装教程(详解Git安装过程)


3. 安装hexo

3.1 配置镜像源

安装好npm后,我们就可以使用npm包管理器来进行hexo的安装。

在安装前,为了提升下载速度,需要前更换一下镜像源。

在命令行中输入以下命令

npm config set registry https://registry.npm.taobao.org

注意,这个命令并不会产生各种输出 可通过 npm config get registry 进行验证

3.2 安装hexo

然后输入以下命令,进行全局安装 hexo。

npm  install -g hexo-cli

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 serverhexo 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 文件生成网页的静态文件,这也是 hexohugo 等博客框架最核心的功能。我们为什么选择使用这种框架,就是因为我们想把所有的精力放在博客内容上(因为我们前端太菜)。

在命令行中输入命令 hexo generatehexo g

执行完这一步后,可以看到我们的文件夹下多了一个public文件夹,里面存放的就是静态资源。

最后,使用命令 hexo server 启用hexo服务,就可以看到我们新写的博文啦。


最后最后,我们每次更新博文时,可以使用 hexo cleanhexo cl 命令去删除我们之前的静态资源,然后再使用 hexo generate 命令生成新的静态资源。

hexo cl && hexo g && hexo s

References

[1] 管窥程序,免费打造个人博客系统
[2] Lateautunm4lin,2019年末,来一发基于Hexo自建博客生态指南!
[3] 直上云霄,hexo超完整的搭建教程,让你拥有一个专属个人博客
[4] 布莱恩特科比酱,从0开始搭建你的个人博客
[5] CodeSheep,手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo
[6] 学为所用, Windows系统Git安装教程(详解Git安装过程)


【hexo】学习篇(一)| hexo博客搭建说明
http://example.com/2020/08/21/hexo-01-build/
作者
Guoguo
发布于
2020年8月21日
许可协议