个人简历主页搭建系列-05:部署至 Github

news2024/11/28 14:50:06

前面只是本地成功部署网站,网站运行的时候我们可以通过 localhost: port 进行访问。不过其他人是无法访问我们本机部署的网站的。

接下来通过 Github Pages 服务把网站部署上去,这样大家都可以通过特定域名访问我的网站了!

创建要部署的仓库

首先在 github / gitee 上创建同名仓库(gitee 我没试过,不过应该类似,仓库名改为 gitee.io)这里强烈建议大家,网站采用 githubUserName.github.io,后面会解释原因。 我因为已经有过一个 github 用户名的网站了,所以这里要自定义一个。

这里记得勾选 Add a README file,作为默认网站首页内容。

image-20240329212816745

仓库创建成功,如图:

image-20240329213329788

在设置页面中,选择 github pages 服务,从 main 也就是当前唯一的分支部署:

image-20240329213708001

点击保存后我们回到仓库代码页。这里出现了正在部署的标识。以后每次仓库代码上传后几分钟内都会自动部署。

image-20240329213808090

点击黄色小点,或者点击 Actions 标签页可以查看部署状态。黄色为部署中,红色为出错,绿色为成功部署。

image-20240329213850576

这里我已经部署成功了!

那么网站的域在哪里看呢?在 settings - pages 标签页中查看。

image-20240329214406742

如果你的网站名为 githubUserName.github.io,那么域名就是 https://githubUserName.github.io。否则会像我的网站名称一样,这是使用 Github Pages 服务必须遵守的规则。不过可以通过购买域名重新映射解决,我的 twjiang.cn 就是阿里云所购买的域名。这些后续再说~

接下来我们访问一下网站。网站上只有 Readme 里的内容。

image-20240329214704932

将本地代码推送至该仓库

hexo 框架搭建的网站主题样式丰富,内容功能相较全面。我们把上节课创建的 hexo 本地仓库推送至 github 仓库。

打开本地文件夹,找到 _config.yml 文件并打开。上节课我们已经介绍过此文件夹存放基本配置信息。大家不懂 yml 代码也没关系,我们只需要知道要改哪里就行。

首先需要修改的一个地方是对应网址 url,如果不改这个网页会无法显示 css 样式。

我们找到 #url 部分内容:

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com

这里的 url 改成我们刚刚看到的网站地址:

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://jingqing3948.github.io/TWtutoral.github.io/

第二个地方是拉到最下面一行,有这样一段文字:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

前两行是注释信息,提示这段代码用于配置部署相关问题。并且提供了 hexo 相关教程文档。

因为我们之前没有设置部署信息,所以这里基本是空的。我们把他改写为:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:Jingqing3948/TWtutoral.github.io.git
  branch: main

repo 后面的内容是你的 github 仓库 ssh 地址。关于这方面的知识可以参考我之前的一篇文章:

github 终端克隆操作,以及对 https/ssh 的理解

这些配置的意思是:采用 git 部署方式,部署到 repo 对应仓库的 branch 对应分支。

别忘记其中的空格,同时别忘记按下保存。

接下来我们在本地文件夹中打开终端,输入在今后会遇到的最常用的指令:

hexo generate 
hexo deploy

可以简写为 hexo g 和 hexo d。

第一条是根据我们现有文件夹中内容,编译生成一些配置文件和静态网站。

(完成 generate 后可以运行 hexo s,在 localhost:4000 查看网页预览效果是否如我们所期望。如果不满意的地方,我们在部署之前可以先修改,再重新 generate。)

第二条是部署至对应仓库。

C:\Users\23512\Desktop\hexo\TWtutoral.github.io>hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 62 ms
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: archives/2024/03/index.html
INFO  Generated: js/script.js
INFO  Generated: css/style.css
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: archives/2024/index.html
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: js/jquery-3.6.4.min.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: 2024/03/28/hello-world/index.html
INFO  11 files generated in 201 ms

C:\Users\23512\Desktop\hexo\TWtutoral.github.io>hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in C:/Users/23512/Desktop/hexo/TWtutoral.github.io/.deploy_git/.git/
[master (root-commit) 2324081] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 0d24410] Site updated: 2024-03-29 22:01:18
 12 files changed, 2465 insertions(+)
 create mode 100644 2024/03/28/hello-world/index.html
 create mode 100644 archives/2024/03/index.html
 create mode 100644 archives/2024/index.html
 create mode 100644 archives/index.html
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/jquery.fancybox.min.css
 create mode 100644 fancybox/jquery.fancybox.min.js
 create mode 100644 index.html
 create mode 100644 js/jquery-3.6.4.min.js
 create mode 100644 js/script.js
 delete mode 100644 placeholder
Enumerating objects: 27, done.
Counting objects: 100% (27/27), done.
Delta compression using up to 20 threads
Compressing objects: 100% (19/19), done.
Writing objects: 100% (27/27), 278.80 KiB | 813.00 KiB/s, done.
Total 27 (delta 4), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (4/4), done.
To github.com:Jingqing3948/TWtutoral.github.io.git
 + 3fc1368...0d24410 HEAD -> main (forced update)
branch 'master' set up to track 'git@github.com:Jingqing3948/TWtutoral.github.io.git/main'.
INFO  Deploy done: git

C:\Users\23512\Desktop\hexo\TWtutoral.github.io>

现在我们刷新 github 仓库页面,会发现仓库内容已经被自动推送上来了,并且正在重新部署。

Readme 文件没了没有关系,那个本来就只是用于一开始我们查看网站部署效果的。

image-20240329220247367

显示部署完成后,网站内容显示就和本地预览一样了。

image-20240329221031928

至此,个人网站搭建全部完成。你可以在 source/_posts 中添加新的博客文章并重新部署来发布新文章。

接下来我们讲解关于主题更换(个人简历主题),CDN 加速,域名等内容~

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

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

相关文章

【Go】十三、面向对象:方法

文章目录 1、面向对象2、结构体实例的创建3、结构体之间的转换4、方法5、结构体值拷贝6、方法的注意点7、方法和函数的区别8、跨包创建结构体实例 1、面向对象 Go的结构体struct ⇒ Java的Class类Go基于struct来实现OOP相比Java,Go去掉了方法重载、构造函数和析构函…

[Java基础揉碎]枚举

目录 先看一个需求 枚举介绍: 枚举实现的方式: >自定义类实现枚举实例: >使用enum关键字实现枚举 ​编辑 enum关键字实现枚举注意事项 enum常用方法 enum细节 先看一个需求 要求创建季节(Season)对象,请设计并完成。 // 传统的方法建造一个类: clas…

企业能耗数据分析有哪些优势?怎样进行分析?

随着互联网技术的发展,企业在运营中会出现大量的用能数据,但却做不了精准的用能数据分析,导致数据没有得到有效利用,以及产生能源浪费现象。 为什么企业用能分析总是难? 一、用能分析过程复杂 由于用能分析过于复杂…

websocketpp上手笔记-Windows安装

WebSocketpp是什么 最近手上有一个c项目,需要用websocket从服务器端收内容。于是网上找了圈,发现WebSocketpp库可以做websocket的客户端。 WebSocketpp也叫WebSocket,github地址是:https://github.com/zaphoyd/websocketpp&…

每天五分钟深度学习:神经网络和深度学习有什么样的关系?

本文重点 神经网络是一种模拟人脑神经元连接方式的计算模型,通过大量神经元之间的连接和权重调整,实现对输入数据的处理和分析。而深度学习则是神经网络的一种特殊形式,它通过构建深层次的神经网络结构,实现对复杂数据的深度学习…

商标名称的词性:因形近不良而驳回!

近期看到业内有许多因不良驳回的案例,有些是直接因为不良而驳回,普推知产老杨发现一个因形近而驳回的案例,2022年5月申请的“乡巴佬”通过初审下证了,2022年10月申请“乡巴饶”因形近“乡巴佬”不良而驳回,而且还做过驳…

打造安全医疗网络:三网整体规划与云数据中心构建策略

医院网络安全问题涉及到医院日常管理多个方面,一旦医院信息管理系统在正常运行过程中受到外部恶意攻击,或者出现意外中断等情况,都会造成海量医疗数据信息的丢失。由于医院信息管理系统中存储了大量患者个人信息和治疗方案信息等,…

Word、Excel、PPT文件转PDF文件(C#)

一、添加依赖 为wpf项目引用Microsoft.Office.Interop.Excel、Microsoft.Office.Interop.PowerPoint、Microsoft.Office.Interop.Word、Office,依赖文件已经打到源代码包里了。 二、先定义一些命名空间 using Word Microsoft.Office.Interop.Word;using Excel M…

Vue2.x安装Tinymce依赖冲突解决

Vue2.x安装Tinymce依赖冲突原因 使用vue整合tinymce富文本编辑器,安装依赖时报错 报错的原因是下载版本与vue的版本对不上vue2.x版本应该使用如下指定版本依赖更合适 npm install --save "tinymce/tinymce-vue^3.1"额外依赖为 npm install --save &quo…

ssm013小型企业办公自动化系统的设计和开发+vue

小型企业办公自动化系统的设计与实现 摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对小型企业办公信息管理混乱&am…

流行的API架构学习

几种流行的API架构风格图 SOAP(Simple Object Access Protocol) 优点:SOAP 是一种基于 XML 的通信协议,具有良好的跨平台和跨语言支持。它提供了丰富的安全性和事务管理功能,并支持复杂的消息交换模式。 缺点&#xf…

远控桌面多任务并发文件保密传输

远程桌面文件传输是一个重要的功能,大多数远控都是用的桌面程序模式,利用系统自带复制粘贴拖拽文件拷贝功能,做一个ole调用对接,可以将很多控制权交给操作系统。 但我做的是浏览器版,浏览器是沙盒原理,为了…

mkcert生成ssl证书+nginx部署局域网内的https服务访问问题

文章目录 mkcert生成ssl证书nginx部署局域网内的https服务访问问题1、下载mkcert查看自己的电脑是arm还是amd架构 2、安装mkcert3、测试mkcert是否安装成功4、查看CA证书存放位置5、打开windows的证书控制台6、生成自签证书,可供局域网内使用其他主机访问以下是nginx部署https服…

代码随想录第27天 | 39. 组合总和、40.组合总和II、131.分割回文串

一、前言 今天的主题还是回溯算法&#xff0c;还是根据那个backtracking模板&#xff0c;但是今天会涉及到去重和一些小细节的问题。 二、组合总和 1、思路&#xff1a; 我一开始的想法就是在for循环转化为&#xff1a; for(int i 0; i < size; i) 但是这个是会陷入一…

【LDLTS】拉普拉斯深能级瞬态光谱

Laplace deep level transient spectroscopy&#xff08;拉普拉斯深能级瞬态光谱&#xff0c;简称LDLTS&#xff09;是一种用于分析和表征半导体材料中深层能级缺陷的技术。它是传统能级瞬态光谱&#xff08;DLTS&#xff09;方法的扩展和改进&#xff0c;特别适用于解决传统DL…

Kubernetes kafka系列 | Strimzi 部署kafka-bridge

Strimzi kafka集群部署直通车 一、kafka bridge 介绍 Kafka Bridge 是 Apache Kafka 生态系统中的一个工具或组件&#xff0c;用于实现 Kafka 与其他系统或协议之间的通信或集成。Kafka 本身是一个分布式事件流平台&#xff0c;广泛用于构建实时数据流水线和流式应用程序。然而…

【操作系统】想要更好的学习计算机,操作系统的知识必不可少!!!

操作系统的概念 导言一、日常生活中的操作系统二、计算机系统层次结构三、操作系统的定义3.1 控制和管理计算机资源3.2 组织、调度计算机的工作与资源的分配3.3 给用户和其他软件提供方便接口与环境3.4 总结 四、操作系统的目标和功能4.1 作为管理者4.1.1 处理机管理4.1.2 存储…

用kimichat批量识别出图片版PDF文件中的文字内容

图片版的PDF文件&#xff0c;怎么才能借助AI工具来提取其中全部的文字内容呢&#xff1f; 第一步&#xff1a;将PDF文件转换成图片格式 具体方法参见文章&#xff1a;《零代码编程&#xff1a;用kimichat将图片版PDF自动批量分割成多个图片》 第二步&#xff1a;识别图片中的…

Springboot之Actuator的渗透

1. env http://ip:8080/actuator/env GET 请求 /env 会直接泄露环境变量、内网地址、配置中的用户名等信息&#xff1b;当程序员的属性名命名不规范&#xff0c;例如 password 写成 psasword、pwd 时&#xff0c;会泄露密码明文&#xff1b; 2.heapdump Heapdump地址为http…

互联网轻量级框架整合之JavaEE基础II

编写本篇代码并实际执行之前请仔细阅读前一篇互联网轻量级框架整合之JavaEE基础I Servlet 在Servlet容器中&#xff0c;Servlet是最基础的组件&#xff0c;也可以把JSP当做Servlet&#xff0c;JSP的存在意义只在于方便编写动态页面&#xff0c;使Java语言能和HTML相互结合&…