基于Hexo的主题Fluid搭建Github博客

简介: 基于Hexo的主题Fluid搭建Github博客

一、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)

1698845864680.jpg

二、node.js安装和环境配置

1.安装node.js

node.js官网:https://nodejs.org/zh-cn/

exe安装直接Next即可(安装路径将默认C盘,建议更换到其他盘,这里我更换到D盘)

2.查看安装是否成功(版本号)

node -v
npm -v #nodejs安装默认附带安装npm

1698845881670.jpg


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地址

1698845899923.jpg

将用户变量下Path的

C:\Users\STAR\AppData\Roaming\npm

修改为

D:\nodejs\node_global


1698845909162.jpg

防止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安装版本

1698845928806.jpg

2.配置fluid主题

hexo主题官网: https://hexo.io/themes/,可以通过github搜索查看stars数大于3000的主题都有哪些,这里我们使用fluid(注:next主题使用的人很多,简约,教程很多这里不再介绍)。‘

1698845942293.jpg

1.安装fluid

npm install --save hexo-theme-fluid

通过npm安装的主题会放node_moduels里,然后在之前创建的博客目录下创建 _config.fluid.yml,将该主题下的 _config.yml 内容复制进去。

1698845953469.jpg

2.配置fluid

修改博客目录中的 _config.yml,修改两个字段:

language: zh-CN  # 指定中文
theme: fluid  # 指定主题

其他配置可参考Hexo Fluid 用户手册:配置指南,介绍的很详细,

_config.fluid.yml

中也有很详细的注释。

1698845962617.jpg

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

1698845971624.jpg

安装hexo-deployer-git自动部署发布工具,将hexo 部署到 git page 的 deployer

npm install hexo-deployer-git --save
hexo d  # hexo deploy,如果本地服务器没问题就可以上传到github上

1698845983973.jpg



更新博客之后,可以通过如下命令就行上传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/中复制喜欢的颜色图标代码粘贴即可。

1698845994728.jpg

1698846000949.jpg

2.背景图更换

推荐一个图片网址:https://wallpaperhub.app/,可以选择尺寸下载。

五、通过git提交代码到远程仓库

重命名,用github代替git@github.com:****/******.git
git remote github git@github.com:****/******.git

1.查看有修改过的文件(标红色的文件表示未提交到缓存区,绿色字表示已经添加到了缓存区)

git status

1698846010616.jpg

2.把代码提交到缓存区,提交到缓存区后可以再次使用git status查看文件状态,如果所有文件都为绿色,证明已经添加到了缓存区

git add .

1698846021435.jpg

1698846030012.jpg

3.提交代码并备注

git commit -m '备注'


1698846038349.jpg

4.要保证你的代码是最新的,要拉取git上的代码

git pull

1698846058563.jpg


5.将代码推到git上(为了防止提交代码时出现错误,通常都会先提交到分支里面,确认不会出现问题以后再将代码合并到主分支)

注:git push 用于从将本地的分支版本上传到远程并合并。

git push origin 分支名
git push origin master将本地的 master 分支推送到 origin 主机的 master 分支


1698846072797.jpg


main是用户qzkq创建的默认分支,master是用户QInzhengk创建的分支。

1698846091780.jpg

1698846103101.jpg


展示:https://qzkq.github.io/

1698846116273.jpg

1698846121298.jpg


相关文章
|
2月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
2月前
|
缓存 开发工具 git
如何修改github博客主题
如何修改github博客主题
|
1月前
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
38 0
|
25天前
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
2月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
1月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
25 0
|
2月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
141 0
|
2月前
使用github制作个人网站或者博客
使用github制作个人网站或者博客
20 0
|
2月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
76 0
|
2月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理