无服务器搭建静态博客|Mac 系统本地安装Hexo博客并部署到GitHub-南盟笔记

无服务器搭建静态博客|Mac 系统本地安装Hexo博客并部署到GitHub-南盟笔记
Nan Ge一、首先搭建Hexo 的环境,需要安装Node.js
1、Node.js 官方下载地址:Node.js — Download Node.js® (nodejs.org)
- 如下图:(着重看标记红色框)
2、打开Mac电脑中自带的 「终端」 软件,输入以下代码,检测Node.js是否安装成功,显示版本则表示安装成功!
1 | node -v |
如下图:(注意显示的版本号,是根据你下载的Node.js的版本决定的,只要显示版本就代表安装成功)
3、安装git (注意Mac电脑是自带git,所以不用安装),检测是否安装git,请输入以下命令!(出现版本号则表示有git)
1 | git -v |
如下图:每台电脑中的git版本不同,只要git版本号即可!
二、本地安装Hexo
1、新建一个“文件夹”,名称随意但“不能有中文字符”,(列如我的文件名称是nange)并在文件夹中运行终端,分别运行以下命令。
1 | sudo npm install -g hexo-cli #(命令注释:全局安装 Hexo) |
1 | hexo -v #注:检查Hexo 是否安装成功,出现版本号即可 |
1 | hexo init #注释:当前目录文件下,生成hexo的配置文件 |
1 | sudo npm install #注释:当前项目的目录中,安装项目所需依赖的包 |
1 | hexo cl && hexo g && hexo s #注释:即可看到“本地”的访问链接 |
Hexo默认主题
终端停止Hexo运行,请按住键盘上的按键,如下图
三、更换Hexo的主题
以此主题界面为列,如下图
主题获取地址:安知鱼主题
1、主题安装方法
第一种 代码安装:(非常慢)
1 | git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu |
第二种 下载软件包直接安装:(非常快,推荐)
下载地址:https://github.com/anzhiyu-c/hexo-theme-anzhiyu/archive/refs/tags/1.6.12.zip
下载之后是一个zip的压缩包,解压出来之后修改文件夹名称 anzhiyu 复制到,如下图的文件夹中即可~
2、修改_config.yml
文件
用记事本方式或者其它可以打开的工具,小编这里用的是HBuilder x工具,如下图中的landscape 修改为 anzhiyu,注意修改时前边要留空格!最后保存即可(保存快捷键:command+s)
覆盖配置
覆盖配置可以使主题配置放置在 anzhiyu 目录之外,避免在更新主题时丢失自定义的配置
1 | cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml |
3、运行Hexo 必要的插件安装
安装之前输入以下代码,检测是否已安装插件
1 | npm ls --depth 0 |
如下图,可以看到缺失四个插件
安装插件:(如出现错误请在代码前加sudo 命令运行)
1 | npm install hexo-deployer-git hexo-renderer-pug hexo-renderer-stylus --save |
如下图,三个插件安装成功
运行全部代码即可看到已经更换了主题~
1 | hexo cl #(全称:hexo clean)该命令用于“清除”生成的缓存静态文件 |
浏览器输入
:http://localhost:4000/
四、通过GitHub托管Hexo博客
以上Hexo 博客是在本地部署,只能自己看见,别人是看不到的,所以咱们通过GitHub部署上线即可~
1、注册GitHub很简单,所以不作演示~ (需要梯子访问,请自行解决)
注册登录之后,“新建仓库”,点击此链接直达:新建仓库
注册的名称:用户名.github.io (必须按照此格式填写),如下图
2、配置GitHub用户名与邮箱
打开电脑终端软件工具,输入以下代码,一直按回车键,出现Y/N的选择Y即可!
1 | ssh-keygen -t rsa -C "你的 GitHub 邮箱" |
1 | cat ~/.ssh/id_rsa.pub |
添加密钥到GitHub
直达链接:Add new SSH key
把生成的密钥填入,按照下图流程填入即可~
检测是否连接成功,输入以下代码
1 | ssh -T git@github.com |
如下图表示连接成功~
上传Hexo代码 到GitHub托管
GitHub打开新建的(名称后缀为github.io)仓库,找到如下图ssh 的代码,复制保存备用~
打开本地Hexo生成的文件夹,(列如我的文件名称是nange ),同样的找到_config.yml
文件
用记事本方式或者其它可以打开的工具,小编这里用的是HBuilder x工具
1 | type: git |
如下图 格式填写,最后保存即可(保存快捷键:command+s)
上传到GitHub
1 | hexo cl |
如下图上传到GitHub成功
GitHub修改配置,按照下图中文字修改即可~
看到这里之后,你的GitHub部署就擦不多完成啦,你的地址:https://用户名.github.io/ 即可访问,如上图中也会出现你的访问地址~