基于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 独立博客一小时快速搭建&上线指南
79 1
|
5月前
|
缓存 开发工具 git
如何修改github博客主题
如何修改github博客主题
|
17天前
使用github制作个人网站或者博客
使用github制作个人网站或者博客
8 0
|
5月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
|
9月前
|
数据采集 JavaScript 搜索推荐
hexo搭建github.io博客
hexo搭建github.io博客
139 0
|
5月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
58 0
|
8月前
|
NoSQL Java Nacos
GitHub最火的成熟私活利器:基于微服务架构的前后端分离博客系统
博客使用了一些监控的 SpringCloud 组件,但是并不一定都需要部署,必须启动的服务包含 nacos,nginx,rabbitmq, redis,mysql,mogu-gateway,mogu-sms,mogu-picture, mogu-web, mogu-admin 其它的服务都可以不启动,也不影正常使用,可以根据自身服务器配置来启动 最低配置:1核2G 【需开启虚拟内存】【容易宕机】
|
9月前
|
JavaScript 网络安全 开发工具
Github+Hexo搭建个人网站详细教程
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
|
9月前
|
存储
GitHub个人资料自述与管理主题设置
可以通过创建个人资料 README,在 GitHub.com 上与社区分享有关你自己的信息。 GitHub 在个人资料页面的顶部显示您的个人资料自述文件。 您决定在个人资料自述文件中包含哪些信息,因此您可以完全控制如何在 GitHub 上展示自己。 以下是访客可能在您的个人资料自述文件中找到感兴趣、有趣或有用信息的一些示例。 • “About me(关于我)”部分介绍您的工作和兴趣。 • 您引以为豪的贡献以及这些贡献的背景信息 • 在您参与的社区获得帮助的指南
70 0
|
10月前
你可以用RSS订阅GitHub博客了
你可以用RSS订阅GitHub博客了