搭建Hexo博客通过GithubPages部署

在本文开始之前首先我要声明一下,因为博主之前通过Hexo搭建的内容在我之前笔记本上面,而那台笔记本我重装过系统,所以Hexo的源文件找不到了,这里博主就当是一个回顾吧,重新来搭建一波,记录一下搭建过程

搭建Hexo需要有NodeJS的环境,所以没有NodeJS环境的可参考NodeJS环境搭建,好了然后我们接着说,然后就是打开Hexo官网,查看它的安装命令,博主打开官网发现安装命令就在首页,首页上面的安装命令是全局安装的,我先贴在下方:

npm install -g hexo-cli

其实是有必要进行全局安装的,因为Hexo是基于该cli客户端来初始化一个 hexo 博客的,当然你如果不需要全局安装这里我也研究了不进行全局安装的指令根据我NodeJS的经验观察我觉得应该是需要初始化一个nodeJS环境的工程然后在该工程当中通过npm安装Hexo-cli即可,然后在通过hexo-cli初始化一个hexo然后发现不太行,所以这里我推荐全局安装,更何况官方也是推荐 全局安装

初始一个 Hexo

hexo init name

例如博主的就是:

hexo init BNTang

初始化好了之后就是进入到初始化好的工程当中输入:

npm install

到这里就算是初始化完毕了。

启动 Hexo

将 hexo 的内容编译为静态文件:

hexo g

在启动 hexo 服务:

hexo server

image-20211224170647012

然后在浏览器当中访问 http://localhost:4000

image-20211224170722414

到此为止 hexo 博客就算是搭建好了,接着就是通过 GitHubPages来进行部署,关于什么是 GitHubPages

搭建 GitHubPage

首先你需要注册一个 GitHub 账号,并在个人主界面里选择创建一个新的 Repository 。进入页面后,在 Repository name 的位置填写域名,格式是 username.GitHub.io

image-20211227111304656

开启 GitHubPages,修改 hexo 配置(_config.yml):

image-20211227111736452

deploy:
  type: git
  repo: https://github.com/BNTang/BNTang.GitHub.io
  branch: main

修改 hexo 配置(package.json):

image-20211227112028945

"bntang": "hexo clear && hexo generate && hexo deploy"

添加完毕之后,在通过 npm run bntang 即可完成打包发布和部署,然后在访问 username.github.io 即可。

到此为止,本文的主要内容就介绍完毕,其它的内容关于 hexo 的美化和配置等后续文章在介绍。

posted @ 2021-12-24 17:08  BNTang  阅读(136)  评论(0编辑  收藏  举报