一、Github配置
1.安装Git
Git官网:https://git-scm.com/downloads
安装步骤简单不再介绍,安装完成后通过
git --version
查看安装版本号。
2.部署本地Git与Github连接(SSH)
1.生成SSH KEY
ssh-keygen -t rsa -C *********@qq.com
注:邮箱填写github绑定的邮箱
2.查看.pub文件(.文件隐藏文件,使用ls -a显示隐藏文件)
cd ~/.ssh 切换目录到这个路径 vim id_rsa.pub 将这个文件的内容显示到终端上
也可以直接前往.shh文件所在的路径(前往~/.ssh这个路径),然后打开.pub这个文件,同样可以看到里面的内容。
3.将KEY添加到github的SSH Key里。
4.右键打开git bash,设置用户名和电子邮箱(注:这里的用户名和邮箱为你的github名称和绑定的邮箱)
git config --global user.name "****" git config --global user.email "*********@qq.com"
5.通过github创建一个新的respository,名称为
github名字.github.io
(添加readme可以勾选上,后续可以介绍一下你的Bolg)
二、node.js安装和环境配置
1.安装node.js
node.js官网:https://nodejs.org/zh-cn/
exe安装直接Next即可(安装路径将默认C盘,建议更换到其他盘,这里我更换到D盘)
2.查看安装是否成功(版本号)
node -v npm -v #nodejs安装默认附带安装npm
3.配置环境变量
在nodejs安装目录下创建node_global,node_cache两个文件夹(全局安装的模块路径和缓存路径)
npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache" # 如显示权限不够,用管理员打开cmd
右键此电脑,点击属性,打开高级系统设置,环境变量,编辑系统变量,新建NODE_PATH变量,变量值为node_modules地址
将用户变量下Path的
C:\Users\STAR\AppData\Roaming\npm
修改为
D:\nodejs\node_global
防止npm下载过慢,使用国内淘宝镜像
npm config set registry https://registry.npm.taobao.org
三、下载Hexo并配置fluid主题
1.下载Hexo
通过cmd用npm安装hexo并初始化本地博客文件夹
npm install hexo-cli -g hexo init ***.github.io # 这里替换成你自己的,为后续更新到github上,使用github名字.github,io cd ***.github.io # 进入本地的博客文件夹 npm install hexo server # 打开本地服务器预览
之后通过浏览器查看http://localhost:4000/是否成功
注:可以通过
hexo -v
查看hexo安装版本
2.配置fluid主题
hexo主题官网: https://hexo.io/themes/,可以通过github搜索查看stars数大于3000的主题都有哪些,这里我们使用fluid(注:next主题使用的人很多,简约,教程很多这里不再介绍)。‘
1.安装fluid
npm install --save hexo-theme-fluid
通过npm安装的主题会放node_moduels里,然后在之前创建的博客目录下创建 _config.fluid.yml,将该主题下的 _config.yml 内容复制进去。
2.配置fluid
修改博客目录中的 _config.yml,修改两个字段:
language: zh-CN # 指定中文 theme: fluid # 指定主题
其他配置可参考Hexo Fluid 用户手册:配置指南,介绍的很详细,
_config.fluid.yml
中也有很详细的注释。
3.更新部署博客页面
$ hexo clean # 清空一下缓存,有时候博客页面显示不正常也可以试试这个命令行 $ hexo g # hexo generate的简写,把刚刚做的改动生成更新一下 $ hexo server # 在本地服务器看看博客有没有更新成NexT主题:https://localhost:4000
4.部署到github
修改博客根目录下的_config.yml文件中的deploy
deploy: type: git repo: git@github.com:qzkq/qzkq.github.io.git # 这里我用的是ssh,也可以用https,可能会报错,设置token即可 branch: main # 注意自己创建的分支,我的是main,有可能是master
安装hexo-deployer-git自动部署发布工具,将hexo 部署到 git page 的 deployer
npm install hexo-deployer-git --save hexo d # hexo deploy,如果本地服务器没问题就可以上传到github上
更新博客之后,可以通过如下命令就行上传github
$ hexo clean # 清空一下缓存,有时候博客页面显示不正常也可以试试这个命令行 $ hexo g # 是hexo generate的简写,把刚刚做的改动生成更新一下 $ hexo server # 在本地服务器看看博客有没有更新成NexT主题:https://localhost:4000 $ hexo d # hexo deploy,如果本地服务器看了没问题就可以上传到github网站
四、美化
1.github-corners
在博客目录下的node_modules\hexo-theme-fluid\layout\layout.ejs的<header>***</header>中将从网站https://tholman.com/github-corners/中复制喜欢的颜色图标代码粘贴即可。
2.背景图更换
推荐一个图片网址:https://wallpaperhub.app/,可以选择尺寸下载。
五、通过git提交代码到远程仓库
重命名,用github代替git@github.com:****/******.git git remote github git@github.com:****/******.git
1.查看有修改过的文件(标红色的文件表示未提交到缓存区,绿色字表示已经添加到了缓存区)
git status
2.把代码提交到缓存区,提交到缓存区后可以再次使用git status查看文件状态,如果所有文件都为绿色,证明已经添加到了缓存区
git add .
3.提交代码并备注
git commit -m '备注'
4.要保证你的代码是最新的,要拉取git上的代码
git pull
5.将代码推到git上(为了防止提交代码时出现错误,通常都会先提交到分支里面,确认不会出现问题以后再将代码合并到主分支)
注:git push 用于从将本地的分支版本上传到远程并合并。
git push origin 分支名
git push origin master将本地的 master 分支推送到 origin 主机的 master 分支
main是用户qzkq创建的默认分支,master是用户QInzhengk创建的分支。
展示:https://qzkq.github.io/