使用Hexo部署NexT主体网站

news2025/2/12 13:01:09

一.使用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主体颜色更改

最后，欢迎参观我的主页！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uni getLocation 公众号h5获取定位坐标没有返回

uni getLocation 公众号h5获取定位坐标没有返回

先看代码 //获取经纬度getLocation() {console.log("111")uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度&#xff1a; res.longitude);console.log(当前位置的纬度&#xff1a; res.latitude);},fail: function(err) {conso…
阅读更多...
C语言基本概念————讨论sqrt()和pow()函数与整数的关系

C语言基本概念————讨论sqrt()和pow()函数与整数的关系

本文来源&#xff1a;C语言基本概念——讨论sqrt()和pow()函数与整数的关系. C语言基本概念——sqrt和pow函数与整数的关系 1. 使用sqrt()是否可以得到完全平方数的精确的整数平方根1.1 完全平方数的计算结果是否精确&#xff1f;1.2 为什么不会出现误差&#xff08;如 1.99999…
阅读更多...
如何本地部署DeepSeek

如何本地部署DeepSeek

第一步&#xff1a;安装ollama https://ollama.com/download 打开官网&#xff0c;选择对应版本 第二步&#xff1a;选择合适的模型 https://ollama.com/ 模型名称中的 1.5B、7B、8B 等数字代表模型的参数量&#xff08;Parameters&#xff09;&#xff0c;其中 B 是英文 B…
阅读更多...
正则表达式--元字符-限定符（4）

正则表达式--元字符-限定符（4）

正则的限定元字符 表示前边一个符号代表的内容出现多少次 1.* ------ 表示0~正无穷次 2. ------ 表示 1~正无穷次 3. ? ------ 表示 0~1次 4. {n} ------ 表示 限定 n 次, 不能多也不能少 5. {n,} ------ 表示 最少 n 次 6. {n,m} ------ 表示 最少 n 次, 最多 m 次 <!DO…
阅读更多...
【CMAEL多智能体框架】第一节 环境搭建及简单应用（构建一个鲜花选购智能体）

【CMAEL多智能体框架】第一节 环境搭建及简单应用（构建一个鲜花选购智能体）

第一节 环境搭建 文章目录 第一节 环境搭建前言一、安装二、获取API1. 使用熟悉的API代理平台2.设置不使用明文存放API 三 、具体应用进阶任务 总结 前言 CAMEL Multi-Agent是一个开源的、灵活的框架&#xff0c;它提供了一套完整的工具和库&#xff0c;用于构建和模拟多智能体…
阅读更多...
网络工程师 （31）VLAN

网络工程师 （31）VLAN

前言 VLAN&#xff08;Virtual Local Area Network&#xff09;即虚拟局域网&#xff0c;是一种将物理局域网划分成多个逻辑上独立的虚拟网络的技术。 一、定义与特点 定义&#xff1a;VLAN是对连接到的第二层交换机端口的网络用户的逻辑分段&#xff0c;不受网络用户的物理位置…
阅读更多...
玩转适配器模式

玩转适配器模式

文章目录 解决方案现实的举例适用场景实现方式适配器模式优缺点优点：缺点：适配器模式可比上一篇的工厂模式好理解多了，工厂模式要具有抽象的思维。这个适配器模式，正如字面意思，就是要去适配某一件物品。 假如你正在开发一款股票市场监测程序， 它会从不同来源下载 XML 格…
阅读更多...
腾讯云大数据套件TBDS与阿里云大数据能力产品对比

腾讯云大数据套件TBDS与阿里云大数据能力产品对比

前言 博主在接触大数据方向研究的时候是在2016年，那时候正是大数据概念非常火热的一个时间段，最著名的Google的3篇论文。Google FS、MapReduce、BigTable，奠定了大数据框架产品的基础。Google文件系统，计算框架和存储框架。往后所有的大数据产品和过程域无一不是在三个模块…
阅读更多...
Codeforces Round 1003 (Div. 4)（A~G题题解）

Codeforces Round 1003 (Div. 4)（A~G题题解）

A. Skibidus and Amogu 思路&#xff1a;把字符串最后的us变成i就可以了&#xff0c;水题一个 #include <iostream> #include <string> int main() { int t; std::cin >> t; std::cin.ignore(); while (t--) { std::string W; std::getline(std::c…
阅读更多...
ubuntu使用防火墙开放和关闭指定端口

ubuntu使用防火墙开放和关闭指定端口

防火墙可以阻止或允许外部对特定端口的访问&#xff0c;Ubuntu 常用的防火墙管理工具是 ufw&#xff08;Uncomplicated Firewall&#xff09; &#xff0c;如果在开发网络通信相关的内容时&#xff0c;要确保所需的端口是打开的&#xff0c;这样可以排除出题出现时的一个问题—…
阅读更多...
mysql8.0使用PXC实现高可用

mysql8.0使用PXC实现高可用

1.什么是 PXC PXC 是一套 MySQL 高可用集群解决方案&#xff0c;与传统的基于主从复制模式的集群架构相比 PXC 最突出特点就是解决了诟病已久的数据复制延迟问题&#xff0c;基本上可以达到实时同步。而且节点与节点之间&#xff0c;他们相互的关系是对等的。PXC 最关注的是数据…
阅读更多...
大数据学习之SparkStreaming、PB级百战出行网约车项目一

大数据学习之SparkStreaming、PB级百战出行网约车项目一

一.SparkStreaming 163.SparkStreaming概述 Spark Streaming is an extension of the core Spark API that enables scalable, high-throughput, fault-tolerant stream processing of live data streams. Spark Streaming 是核心 Spark API 的扩展&#xff0c;支持实时数据…
阅读更多...
Ollama部署DeepSeek（windows or ubuntu）

Ollama部署DeepSeek（windows or ubuntu）

Ollama(官网是https://ollama.com/)是一个专为在本地机器上便捷部署和运行大型语言模型&#xff08;LLM&#xff09;而设计的开源框架。它简化了大型语言模型的部署过程&#xff0c;提供了轻量级与可扩展的架构&#xff0c;使得研究人员、开发人员和爱好者能够更加方便地在本地…
阅读更多...
10.代码生成器-树表

10.代码生成器-树表

1.导入部门表 2.配置生成信息页面 生成代码即可使用。
阅读更多...
Python的那些事第十六篇：Python的网络爬虫技术

Python的那些事第十六篇：Python的网络爬虫技术

基于Python的网络爬虫技术研究与应用 摘要 随着互联网的飞速发展&#xff0c;网络爬虫技术在数据采集、信息挖掘等领域发挥着重要作用。本文详细介绍了Python环境下常用的网络爬虫技术&#xff0c;包括Requests库、BeautifulSoup库以及Scrapy框架。通过对这些工具的使用方法、…
阅读更多...
【AIGC】在VSCode中集成 DeepSeek（OPEN AI同理）

【AIGC】在VSCode中集成 DeepSeek（OPEN AI同理）

在 Visual Studio Code (VSCode) 中集成 AI 编程能力&#xff0c;可以通过安装和配置特定插件来实现。以下是如何通过 Continue 和 Cline 插件集成 DeepSeek&#xff1a; 一、集成 DeepSeek 获取 DeepSeek API 密钥&#xff1a;访问 DeepSeek 官方网站&#xff0c;注册并获取 …
阅读更多...
如何下载CentOS镜像文件

如何下载CentOS镜像文件

文章目录 如何下载CentOS镜像文件 如何下载CentOS镜像文件 直接前往阿里云官网下载即可。 阿里云官网地址&#xff1a;https://www.aliyun.com 进入官网后&#xff0c;鼠标停留在文档与社区位置&#xff0c;找到镜像站&#xff0c;点击进入即可。进入后&#xff0c;我们可以…
阅读更多...
开启对话式智能分析新纪元——Wyn商业智能 BI 携手Deepseek 驱动数据分析变革

开启对话式智能分析新纪元——Wyn商业智能 BI 携手Deepseek 驱动数据分析变革

2月18号&#xff0c;Wyn 商业智能 V8.0Update1 版本将重磅推出对话式智能分析&#xff0c;集成Deepseek R1大模型&#xff0c;通过AI技术的深度融合&#xff0c;致力于打造"会思考的BI系统"&#xff0c;让数据价值触手可及&#xff0c;助力企业实现从数据洞察到决策执…
阅读更多...
嵌入式C语言：大小端详解

嵌入式C语言：大小端详解

目录 一、大小端的概念 1.1. 大端序&#xff08;Big-endian&#xff09; 1.2. 小端序&#xff08;Little-endian&#xff09; 二、大小端与硬件体系的关系 2.1. 大小端与处理器架构 2.2. 大小端与网络协议 2.3. 大小端对硬件设计的影响 三、判断系统的大小端方式 3.1.…
阅读更多...
Vue事件处理 - 按键修饰符

Vue事件处理 - 按键修饰符

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 按键修饰符 目录 按键修饰符 常见修饰符 绑定按键事件 绑定事件 优化回车修饰符 多个按键 直接绑定数字 总结 按键修饰符 常见修饰符 .esc .up .down .left .right . space .ctrl .shift .delete 绑定…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023