乐于分享
好东西不私藏

电脑本地搭建Hexo博客部署到Github

电脑本地搭建Hexo博客部署到Github

一,首先安装 node.js,git

1,安装node.js,访问官网 https://nodejs.org/zh-cn 下载电脑版安装 2,安装Git,访问官网 https://git-scm.com/install/ 下载电脑版安装 3,查看下Node.js、Git版本,确保安装无误,显示版本号说明安装成功 4,安装好 git ,后续都是打开 Git Bash 运行命令

验证安装

node -v 
npm -v
git -v

二,安装 Hexo

npm install -g hexo-cli

Hexo查看版本

hexo v

显示下面的说明安装成功

 这些 warn 只是警告,可执行下面命令不再拦截

# 1. 查看当前被拦截的脚本列表(确认是 hexo-util)npm install-scripts ls
# 2. 全局允许 hexo-util 运行安装脚本 不再拦截npm config set allow-scripts=hexo-util --location=user

1,安装完 hexo 后,在桌面手动创建 Hexo 文件夹,点击空白处鼠标右键打开 Git Bash

也可执行cd ~/Desktop/Hexo  

2,初始化 hexo

hexo init

 初始化成功会在当前文件夹下生成hexo文件

├── _config.landscape.yml:主题配置文件。├── _config.yml:站点配置文件,对站点进行配置。├── node_modules:用来存储已安装的各类依赖包。├── package-lock.json:包版本依赖锁文件。├── package.json:应用数据,Hexo的版本以及相关依赖包的版本等。├── scaffolds:博客模版文件夹,包含page.md,post.md,draft.md三种。├── source:资源文件夹,存放静态资源如博客md文件、图片等。└── themes:主题文件夹,Hexo通过将网站内容与主题组合来生成静态网站。

3,安装依赖

npm install

启动本地预览

cd ~/Desktop/Hexo  
hexo s

如下图说明启动成功

访问 http://localhost:4000/ 就可以查看博客了,本机IP:4000

如果关闭了cmd 窗口,需要重新运行,桌面 Hexo 文件夹内,点击空白处鼠标右键打开 Git Bash

或是

cd ~/Desktop/Hexo  
hexo s

三,hexo常用命令

1,启动本地预览

hexo s

2,新建文章

hexo n "我的第一篇博客 Hexo Hello!"

3,清除缓存

hexo clean

4,生成静态文件

hexo g

5,部署到 github 仓库

hexo d

6,组合命令

hexo clean && hexo g && hexo s

说明:

清缓存 生成页面 启动本地预览

或者部署到远程仓库

hexo clean && hexo g && hexo d

运行 hexo(每次新建文章或者修改配置都执行三步)

四,安装主题(以 Fluid 为例)

Fluid主题 https://github.com/fluid-dev/hexo-theme-fluid,官方文档 https://hexo.io/zh-cn/docs/

 配置指南,Hexo Fluid 用户手册 https://fluid.ist/docs/guide/#%E5%85%B3%E4%BA%8E%E6%8C%87%E5%8D%97

Hexo-Fluid主题美化,参考这里 https://blog.csdn.net/weixin_43471926/article/details/109798811?spm=1001.2014.3001.5502

hexo主题网站 https://hexo.io/themes/

拉取 Fluid 主题成功后 theme 目录下没有 fluid 文件夹,创建软链接,执行下边命令

ln -s "$(pwd)/node_modules/hexo-theme-fluid" themes/fluid 

创建主题配置文件

cp themes/fluid/_config.yml _config.fluid.yml  

然后编辑 _config.fluid.yml 来个性化你的博客(比如修改导航栏、首页信息、颜色主题等)

修改根目录的 _config.yml

theme: fluid  

或者在 Git Bash 中,用命令直接替换 _config.yml 中的主题配置

sed -i 's/theme: .*/theme: fluid/' _config.yml  

四,部署到远程仓库GitHub

1,注册 github 账号,github官网 https://github.com/

2,新建仓库,仓库名最好和用户名一样,这里只做演示,和用户名一样,github 博客地址就是 https://用户名.github.io/,而不是 https://用户名.github.io/仓库名.github.io/

用户名格式需要注意,必须是 用户名 .github.io

 3,添加远程仓库地址

新建的仓库初始化一下,再添加远程地址

git init  
git remote add origin git@github.com:你的用户名/你的仓库名.git 

验证远程仓库是否关联成功

git -v

4,安装 Hexo 部署插件(用于将静态文件部署到 GitHub)

npm install hexo-deployer-git --save

5,修改 桌面 Hexo 目录下_config.yml 文件,记事本编辑打开,底部 deploy 位置,复制进去替换

deploy:  type: git  repo: git@github.com:你的用户名/你的仓库名.git  branch: main

6,配置SSH钥匙,用 hexo d 部署需要设置一下

#输入自己的邮箱地址,创建一对密钥ssh-keygen -t rsa -b 4096 -C "your_email@example.com"  

查看公钥

cat ~/.ssh/id_rsa.pub  

 如果遇到下面问题,安装 Git 后,不要用系统 CMD,而是在桌面 Hexo文件夹,点击空白处鼠标右键打开 Git Bash

或是命令进入

cd ~/Desktop/Hexo  

7,执行下边命令打开秘钥目录

start /c/Users/Administrator/.ssh/  

 8,记事本编辑打开 id_rsa.pub 公钥文件,复制下来,到 github,点你的头像,有个setting,进去后点 SSH and GPG keys 配置公钥

配置好公钥了,检查一下

ssh -T git@github.com

输入yes

 9,设置用户信息

git config --global user.name "github名字" #用户名git config --global user.email  "github注册的邮箱" #填写自己的邮箱

检查一下

ssh -T git@github.com

 10,配置完成后部署到 github 仓库

hexo clean && hexo g && hexo d

11,部署成功后 github 仓库会多出来文件

 12,打开仓库,在 Pages 设置页面打开 main 分支,然后点击 Save,最好看一下 _config.yml 里面是哪个分支

重要提示:GitHub Pages 设置的发布分支必须与 _config.yml 中 deploy 配置的 branch 保持一致。如果您的 _config.yml 中配置的是 branch: main,那么 GitHub Pages 也必须选择 main 分支作为发布源;如果配置的是 branch: master,则需选择 master 分支。

 稍等几分钟,就会显示 github 博客地址了,https://用户名.github.io/

 13,创建自动化一键部署博客

①进入 Hexo 目录 ②新建一个文本文档,命名为 deploy.bat ③右键编辑,写入以下内容,保存退出

@echo off  chcp 65001 >nul  cd /d "%~dp0"  echo 正在清理缓存...  call npx hexo clean  echo 正在生成静态文件...  call npx hexo generate  echo 正在部署到 GitHub...  call npx hexo deploy  echo 部署完成!  echo 按任意键退出 . . .  pause >nul  

使用方法 以后要部署博客时,双击 deploy.bat 就会自动执行清理、生成、部署三步操作,部署完成后窗口会暂停显示结果,方便你查看有没有报错。

注意:如果以后 Hexo 项目路径变了,需要同步修改 deploy.bat 里的 cd /d 路径

五,文章发布

进入hexo 目录

cd ~/Desktop/Hexohexo n "你的文章标题名"

这会在 source/_posts/ 下生成一个 Markdown 文件

用任意编辑器(VS Code、Typora 等)打开生成的 .md 文件,复制下面的进去替换

---title: file_nametag: 标签名categories: 分类    # 分类在sakura显示才能查看comment: 是否允许评论(true or false)description: 描述language: zh-CNtimezone: 'Asia/Shanghai'---

然后写正文即可

编辑好文章后重新执行,部署到 github 仓库

hexo clean && hexo g && hexo d

常用命令就以下几个

hexo n:写文章 hexo s:本地预览 hexo g:生成页面 hexo d:部署上线 hexo clean:清缓存

六,备份源码

#添加所有源码文件  git add .  #提交git commit -m "更新文章"  #推送到github仓库备份git push   

七,常见问题看这里 https://blog.csdn.net/qq_15775209/article/details/163480625?spm=1011.2415.3001.10575&sharefrom=mp_manage_link

看到这里,博客就部署完成了,感谢耐心阅读!

相关学习资料