使用Hexo部署NexT主体网站

一.使用git提交文件

参考: 从零开始搭建个人博客(超详细) - 知乎 致谢!

第一种:本地没有 git 仓库

  • 直接将远程仓库 clone 到本地;
  • 将文件添加并 commit 到本地仓库;
  • 将本地仓库的内容push到远程仓库。
$ ssh -T git@github.com
	Hi xidianswq! You've successfully authenticated, but GitHub does not provide shell access.
$ git clone git@github.com:xidianswq/switch_homepage.git
	Cloning into 'switch_homepage'...
	remote: Enumerating objects: 3, done.
	remote: Counting objects: 100% (3/3), done.
	remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
	Receiving objects: 100% (3/3), done.
$ cd ./switch_homepage
$ git status
	On branch main
	Your branch is up to date with 'origin/main'.
	Untracked files:
	  (use "git add <file>..." to include in what will be committed)
	        test.txt

	nothing added to commit but untracked files present (use "git add" to track)
$ git add test.txt
$ git commit -m test.txt "test.txt"
	[main 4463650] test.txt
	 1 file changed, 0 insertions(+), 0 deletions(-)
	 create mode 100644 test.txt
$ git log
	commit 4463650540e1bc66dc16aedc8b132e11b5e469ed (HEAD -> main)
	Author: xidianswq <3209507800@qq.com>
	Date:   Thu Feb 6 22:31:41 2025 +0800

	    test.txt
	
	commit 8f09f668066393a7b16b2c8c5df31e0d6a64eaa1 (origin/main, origin/HEAD)
	Author: xidianswq <94434249+xidianswq@users.noreply.github.com>
	Date:   Thu Feb 6 21:32:08 2025 +0800
	
	    Initial commit
$ git push origin main
	Enumerating objects: 4, done.
	Counting objects: 100% (4/4), done.
	Delta compression using up to 16 threads
	Compressing objects: 100% (2/2), done.
	Writing objects: 100% (3/3), 269 bytes | 269.00 KiB/s, done.
	Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
	To github.com:xidianswq/switch_homepage.git
	   8f09f66..4463650  main -> main

第二种:本地有 Git 仓库,并且我们已经进行了多次 commit 操作

  • 建立一个本地仓库进入,init 初始化;
  • 关联远程仓库;
  • 同步远程仓库和本地仓库;
  • 将文件添加提交到本地仓库;
  • 将本地仓库的内容 push 到远程仓库。
$ ssh -T git@github.com
	Hi xidianswq! You've successfully authenticated, but GitHub does not provide shell access.
$ cd switch_homepage/public/switch_homepage/
$ git remote add origin git@github.com:xidianswq/switch_homepage.git
$ git add test2.txt
$ git commit -m "test2.txt"
$ git push origin master
	Enumerating objects: 3, done.
	Counting objects: 100% (3/3), done.
	Writing objects: 100% (3/3), 207 bytes | 207.00 KiB/s, done.
	Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
	remote:
	remote: Create a pull request for 'master' on GitHub by visiting:
	remote:      https://github.com/xidianswq/switch_homepage/pull/new/master
	remote:
	To github.com:xidianswq/switch_homepage.git
	 * [new branch]      master -> master/

两种由于创建的主体不同,如果关联同一仓库即会产生分支Branches,例如main和master两个版本


二.Hexo部署个人博客

参考: 个人博客第5篇——安装node.js和Hexo - 知乎 致谢!

1.本地静态部署

  • 完成git通过ssh连接github步骤
  • node官网下载安装
  • 用 node -v 和 npm -v 命令检查版本
  • 设置npm在安装全局模块时的路径和环境变量(npm install X -g时的安装目录):
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
  • 设置环境变量
npm install webpack -g
github创建XXX.github.io仓库
npm install -g hexo-cli
hexo init
hexo g
hexo s	#static deploy

解决 bash: hexo: command not found:
参考: 完美解决 bash: hexo: command not found-CSDN博客


2.动态部署及后续更新

  • 修改hexo根目录_config.yml文件
	deploy:
 		type: git
  		repository: XXX.github.io.git  #你的仓库地址
  		branch: master
npm install hexo-deployer-git --save

重新部署网页三条指令:

  • hexo clean #清除缓存文件 db.json 和已生成的静态文件 public(同时检查语法)
  • hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
  • hexo d #自动生成网站静态文件,并部署到设定的仓库(hexo deploy 的缩写)

注:打开XXX.github.io网页时使用默认分支branch,可在设置内设置默认分支
(参考: github:master提交项目到远程仓库出现“There isn’t anything to compare.”_there isn鈥檛 anything to compare.-CSDN博客 )。


三.安装及优化NexT主题

1.安装NexT主题

参考目录:
个人博客第7篇——设置next主题 - 知乎 ;
个人博客第8篇——优化主题(持续更新) - 知乎
致谢!

  • 在网页根目录:git clone https://github.com/theme-next/hexo-theme-next themes/next 下载主题
  • 打开根目录下的\_config.yml(称为站点配置文件),修改主题(注意冒号后都要有空格):
# Site
title: XXX  #标题
subtitle: ''
description: 选择有时候比努力更重要     #简介或者格言
keywords:
author: XX     #作者
language: zh-CN     #主题语言
timezone: Asia/Shanghai    #中国的时区

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题改为next
  • 打开目录Blog/themes/next/下的_config.yml(称为主题配置文件),选择需要使用的主题,注释其他的
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini    #这是我选的主题
  • 回到根目录打开Git Bash,输入如下三条命令:
hexo clean & hexo g & hexo d


2.优化主题

参考:

[1] 个人博客第8篇——优化主题(持续更新) - 知乎
[2] 在hexo博客中插入图片的方法_hexo插入图片-CSDN博客

致谢!

  • 下载主题next:
git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 参考博客中错误:
    • 第6个,设置背景图片,添加内容的时候,url(/images/…),斜杠一定不要漏加

其他

  • 新建文章时,在相同目录下创建同名文件夹(便于图片管理)

    • 打开站点配置文件_config.yml,搜索post_asset_folder字段,设置其值为true
    • 安装hexo-asset-image:npm install hexo-asset-image --save
    • 此时hexo new "fileName"会在/source/_posts 目录下创建同名的文件夹
    • 只需在 md 文件里使用 ![title](图片名.jpg) ,无需路径名就可以插入图片。

    原文链接: Hexo框架下用NexT(v7.0+)主题美化博客_next主题魔改教程-CSDN博客

  • 其他参考:

    hexo+next添加鼠标点击和打字特效-CSDN博客

    hexo博客工具屏蔽上传一些私人文章_hexo markdown设定文章不发布-CSDN博客

    Hexo本地预览与部署样式不统一的几种可能的解决思路 | 云上时记

    Hexo 博客上手入门指南、性能优化、界面美化、扩展功能、各种疑难杂症等解决方案全系列合辑 | 竹山一叶

3.NexT主体颜色更改

  • 在网页上右键想要更改的样式,点击检查(或F12,在网页元素 “flex” 中寻找对应 html 代码)
  • 在样式中找到对应规则,复制关键字,在vscode中寻找对应段代码,进行相应修改
  • 一些常用的样式配置文件:
    • ~\themes\next\source\css\\variables\base.styl
    • ~\themes\next\source\css\\variables\Pisces.styl
    • ~\themes\next\layout\macro\post.swig
    • ~\themes\next\layout\\partials\footer.swig
  • themes\next\source\css\_common\outline\header\site-meta.styl

4.侧边栏“当前位置”显示样式更改

  • vscode搜索.sidebar-nav-active,此为点击后的显示效果,可更改颜色与字体
.sidebar-nav-active {
  	border-bottom-color: $sidebar-highlight;
  	color: $sidebar-highlight;

  	font-weight: bold;
  	font-size: 1.05em;
  	font-style: italic;
		
  	&:hover {
    	color: $sidebar-highlight;
  	}
}


  • 同理,更改.active-current > a,如下:
.active-current > a {
  color: $sidebar-highlight;

    font-weight: bold;
    font-size: 1.25em;
    font-style: italic;
    
    &:hover {
      color: $sidebar-highlight;
    }
  }


5.更改字体

(参考: 字体设置 - Hexo-NexT

  • 在 Browse Fonts - Google Fonts 网站点击想使用的字体

    • 点击 Get font Get embed code
    • 复制Embed code in the <head> of your html内的内容
    • 复制字体: CSS class内的内容
  • 修改~\themes\next\layout\_partials\head\head.swig,在{{ next_font() }}下添加之前复制的内容

    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Roboto&display=swap" rel="stylesheet">

  • 在需要修改字体的地方添加或修改font-style,如何搜索修改位置见上NexT主体颜色更改

最后,欢迎参观我的主页!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/967870.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

redis 缓存击穿问题与解决方案

前言1. 什么是缓存击穿?2. 如何解决缓存击穿?怎么做?方案1: 定时刷新方案2: 自动续期方案3: 定时续期 如何选? 前言 当我们使用redis做缓存的时候,查询流程一般是先查询redis,如果redis未命中,再查询MySQL,将MySQL查询的数据同步到redis(回源),最后返回数据 流程图 为什…

【分布式理论9】分布式协同:分布式系统进程互斥与互斥算法

文章目录 一、互斥问题及分布式系统的特性二、分布式互斥算法1. 集中互斥算法调用流程优缺点 2. 基于许可的互斥算法&#xff08;Lamport 算法&#xff09;调用流程优缺点 3. 令牌环互斥算法调用流程优缺点 三、三种算法对比 在分布式系统中&#xff0c;多个应用服务可能会同时…

【车载项目】 systemui下拉负一屏界面,通过语音输入:“中文模式/英文模式“,会闪现一下负一屏下层的画面

1、背景 【操作步骤】负一屏界面&#xff0c;语音输入&#xff1a;“中文模式/英文模式” 【预期结果】显示正常 【实际结果】 会闪现一下负一屏下层的文字 【发生概率】必现 systemui下拉负一屏界面&#xff0c;通过语音输入&#xff1a;“中文模式/英文模式”&#xff0c;会…

CSS 渐变效果详解——线性渐变与径向渐变

在现代前端开发中&#xff0c;CSS 渐变被广泛应用于网页背景、按钮、图形等元素的渲染。相较于使用图片&#xff0c;实现渐变可以减少资源请求&#xff0c;同时也更灵活。今天我们主要介绍两种常用的渐变类型&#xff1a;线性渐变&#xff08;Linear Gradient&#xff09;与径向…

【愚公系列】《Python网络爬虫从入门到精通》001-初识网络爬虫

标题详情作者简介愚公搬代码头衔华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xff0c;阿里云签约作者&#xff0c;腾讯云优秀博主&…

如何借鉴GitHub开源项目进行LabVIEW开发

在设备开发过程中&#xff0c;许多开发者选择借鉴GitHub等平台上的开源项目&#xff0c;特别是当目标程序没有LabVIEW版本时。比如&#xff0c;在本例中&#xff0c;我们看到一个开源的Micro-Manager项目&#xff0c;它主要使用Java、C、Python等编程语言。对于LabVIEW开发者来…

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡 背景 前端开发接口请求&#xff0c;调试&#xff0c;联调&#xff0c;接入数据&#xff0c;前端必不可少工具&#xff0c;postman是一个非常好…

CSS3+动画

浏览器内核以及其前缀 css标准中各个属性都要经历从草案到推荐的过程&#xff0c;css3中的属性进展都不一样&#xff0c;浏览器厂商在标准尚未明确的情况下提前支持会有风险&#xff0c;浏览器厂商对新属性的支持情况也不同&#xff0c;所有会加厂商前缀加以区分。如果某个属性…

Docker Compose介绍及安装使用MongoDB数据库详解

在现代容器化应用部署中&#xff0c;Docker Compose是一种非常实用的工具&#xff0c;它允许我们通过一个docker-compose.yml文件来定义和运行多容器应用程序。然而&#xff0c;除了Docker之外&#xff0c;Podman也提供了类似的工具——Podman Compose&#xff0c;它允许我们在…

防火墙是什么?详解网络安全的关键守护者

当今信息化时代&#xff0c;企业和个人在享受数字生活带来的便利时&#xff0c;也不可避免地面对各种潜在的风险。防火墙作为网络安全体系中的核心组件&#xff0c;就像一道牢不可破的防线&#xff0c;保护着我们的数据和隐私不受外界威胁的侵害。那么防火墙是什么&#xff1f;…

畅游Diffusion数字人(16):由音乐驱动跳舞视频生成

畅游Diffusion数字人(0):专栏文章导航 前言:从Pose到跳舞视频生成的工作非常多,但是还没有直接从音乐驱动生成的工作。最近字节跳动提出了MuseDance,无需复杂的动作引导输入(如姿势或深度序列),从而使不同专业水平的用户都能轻松进行灵活且富有创意的视频生成。 目录 贡…

机器学习常用包matplotlib篇(一)简单图像绘制

前言 Matplotlib 是支持 Python 语言的开源绘图库&#xff0c;简单且完善。 一、环境配置 1.环境设置 在 Notebook 环境绘图时&#xff0c;需先运行 %matplotlib inline 命令&#xff0c;将绘制图形嵌入当前页面。在桌面环境绘图&#xff0c;无需上述命令&#xff0c;而是在…

深入理解指针初阶:从概念到实践

一、引言 在 C 语言的学习旅程中&#xff0c;指针无疑是一座必须翻越的高峰。它强大而灵活&#xff0c;掌握指针&#xff0c;能让我们更高效地操作内存&#xff0c;编写出更优化的代码。但指针也常常让初学者望而生畏&#xff0c;觉得它复杂难懂。别担心&#xff0c;本文将用通…

如何利用DeepSeek开源模型打造OA系统专属AI助手

利用DeepSeek开源模型打造OA系统专属AI助手&#xff0c;可以显著提升办公效率&#xff0c;增强信息检索和管理能力。 注册与登录DeepSeek平台 访问DeepSeek官网 访问DeepSeek的官方网站DeepSeek。使用电子邮件或手机号码注册账号并登录。 获取API Key 登录DeepSeek平台&am…

jupyter notebook中3种读图片的方法_与_图片翻转(上下翻转,左右翻转,上下左右翻转)

已有图片cat.jpg 相对于代码的位置&#xff0c;可以用./cat.jpg进行读取。 下面是3种读图片的方法。 1.python读图片-pillow 图片文件不适合用open去读取 用open读图片&#xff0c;易引发UnicodeDecodeError: gbk codec cant decode byte 0xff in position 0: illegal multib…

软考高级《系统架构设计师》知识点(一)

计算机硬件 校验码 码距&#xff1a;就单个编码A:00而言&#xff0c;其码距为1&#xff0c;因为其只需要改变一位就变成另一个编码。在两个编码中&#xff0c;从A码到B码转换所需要改变的位数称为码距&#xff0c;如A:00要转换为B:11&#xff0c;码距为2。一般来说&#xff0c;…

【原创精品】基于Springboot3+Vue3的学习计划管理系统

大家好&#xff0c;我是武哥&#xff0c;最近给大家手撸了一个基于SpringBoot3Vue3的学习计划管理系统&#xff0c;可用于毕业设计、课程设计、练手学习&#xff0c;系统全部原创&#xff0c;如有遇到网上抄袭站长的&#xff0c;欢迎联系博主~ 项目演示视频 https://www.bili…

从零到一:我的元宵灯谜小程序诞生记

缘起&#xff1a;一碗汤圆引发的灵感 去年元宵节&#xff0c;我正捧着热腾腾的汤圆刷朋友圈&#xff0c;满屏都是"转发锦鲤求灯谜答案"的动态。看着大家对着手机手忙脚乱地切换浏览器查答案&#xff0c;我突然拍案而起&#xff1a;为什么不做一个能即时猜灯谜的微信…

RAG 在智能答疑中的探索

一、背景 得物开放平台是一个把得物能力进行开放&#xff0c;同时提供给开发者提供 公告、应用控制台、权限包申请、业务文档等功能的平台。 面向商家&#xff1a;通过接入商家自研系统。可以实现自动化库存、订单、对账等管理。 面向ISV &#xff1a;接入得物开放平台&#…

Flutter编译问题记录

问题&#xff1a; 运行出现以下报错 Launching lib/main.dart on macOS in debug mode... Warning: CocoaPods not installed. Skipping pod install. CocoaPods is a package manager for iOS or macOS platform code. Without CocoaPods, plugins will not work on iOS or …