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

前面只是本地成功部署网站,网站运行的时候我们可以通过 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: gitrepo: git@github.com:Jingqing3948/TWtutoral.github.io.gitbranch: 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 msC:\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 commit1 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:1812 files changed, 2465 insertions(+)create mode 100644 2024/03/28/hello-world/index.htmlcreate mode 100644 archives/2024/03/index.htmlcreate mode 100644 archives/2024/index.htmlcreate mode 100644 archives/index.htmlcreate mode 100644 css/images/banner.jpgcreate mode 100644 css/style.csscreate mode 100644 fancybox/jquery.fancybox.min.csscreate mode 100644 fancybox/jquery.fancybox.min.jscreate mode 100644 index.htmlcreate mode 100644 js/jquery-3.6.4.min.jscreate mode 100644 js/script.jsdelete 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: gitC:\Users\23512\Desktop\hexo\TWtutoral.github.io>

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

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

image-20240329220247367

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

image-20240329221031928

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

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

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

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

相关文章

CAS、AQS、ReentrantLock机制以原理

1、CAS 1.1 基本概念 CAS 是 compare and swap 的简写,即比较并交换。它是指一种操作机制,而不是某个具体的类或方法。在 Java 平台上对这种操作进行了包装。在 Unsafe 类中,调用代码如下 这里无法用Unsafe类看,我使用的是Atomi…

绿联 部署vocechat,搭建私人聊天服务器,用于小型团队和家庭环境

1、镜像 privoce/vocechat-server:latest 2、安装 2.1、基础设置 重启策略:容器退出时总是重启容器。 2.2、网络 桥接即可。 2.3、存储空间 装载路径:/home/vocechat-server/data不可变更,权限读写。 2.4、端口设置 容器端口3000不可变…

鸿蒙OS开发教学:【编程之重器-装饰器】

HarmonyOS 有19种装饰器 必须【2】 绘制一个页面,这两个肯定会用到 EntryComponent 可选【17】 StatePropLinkObjectLinkWatchStylesStoragePropStorageLinkProvideConsumeObservedBuilderBuilderParamLocalStoragePropLocalStorageLinkExtendConcurrent 如果…

python3将exe 转支持库错误 AssertionError: None does not smell like code

exe -> pyc包(*.exe_extracted) 安装反编译工具 exe反编译工具:pyinstxtractor.py下载:https://sourceforge.net/projects/pyinstallerextractor/ python pyinstxtractor.py hello.exe包反编译 懒的写!!! 这有详…

如何使用Zabbix监控MySQL的MGR群集状态

MySQL的MGR(MySQL Group Replication)是MySQL官方提供的一种高可用性和高可靠性的集群解决方案。MGR通过使用基于组复制的方式,实现了多个MySQL实例之间的数据同步和故障转移,从而提供了自动故障恢复和负载均衡的功能。本文将介绍…

安装uim-ui插件不成功,成功解决

安装:这种安装,umi4 不支持,只有umi3才支持。而我发现官网现在默认使用的umi4。 yarn add umijs/preset-ui -D 解决:更改umi版本重新安装umi3 npm i ant-design/pro-cli3.1.0 -g #使用umi3 (指定umi3版本) pro create user-ce…

【YOLOv8 代码解读】数据增强代码梳理

1. LetterBox增强 当输入图片的尺寸和模型实际接收的尺寸可能不一致时,通常需要使用LetterBox增强技术。具体步骤是先将图片按比例缩放,将较长的边缩放到设定的尺寸以后,再将较短的边进行填充,最终短边的长度为stride的倍数即可。…

爬虫(Web Crawler)逆向技术探索

实战案例分析 为了更好地理解爬虫逆向的实际应用,我们以一个具体的案例进行分析。 案例背景 假设我们需要从某电商网站上获取商品价格信息,但该网站采取了反爬虫措施,包括动态Token和用户行为分析等。 分析与挑战 动态Token:…

海豚【货运系统源码】货运小程序【用户端+司机端app】源码物流系统搬家系统源码师傅接单

技术栈:前端uniapp后端vuethinkphp 主要功能: 不通车型配置不通价格参数 多城市定位服务 支持发货地 途径地 目的地智能费用计算 支持日期时间 预约下单 支持添加跟单人数选择 支持下单优惠券抵扣 支持司机收藏订单评价 支持订单状态消息通知 支…

Photoshoot 2(Java)

Photoshoot 2 题目描述 在一个似曾相识的场景中,Farmer John 正在将他的 N 头奶牛(1≤N≤10^5)排成一排(为了方便将它们按 1⋯1⋯N 编号),以便拍照。 最初,奶牛从左到右按照 a1,a2,⋯,aN 的顺…

【C/C++】从零开始认识C++历程-启航篇

文章目录 📝前言🌠 什么是C?🌉C的发展史 🌠C的重要性🌉语言的使用广泛度 🌠在工作领域🌉 岗位需求 🌠相关笔试题🌉 公司怎样面试C 🚩总结 &#x…

用grafana+prometheus+cadvisor监控容器指标数据,并查询当前容器的网速网络用量

前言 整理技术,在这篇文章中,将会搭建grafanaprometheuscadvisor监控容器,并使用一个热门数据看板,再监控容器的性能指标 dashboard效果 这个是node-exporter采集到的数据,我没装node-exporter,而且这也…

Vitis AI——FPGA学习笔记<?>

参考资料: Xilinx/Vitis-AI-Tutorials (github.com) Xilinx/Vitis-AI: Vitis AI is Xilinx’s development stack for AI inference on Xilinx hardware platforms 【03】ALINX Zynq UltraScale MPSoC XILINX FPGA视频教程Vitis AI开发 一. 简介 1.简介 边缘计…

【物联网】Qinghub opc-ua 连接协议

基础信息 组件名称 : opcua-connector 组件版本: 1.0.0 组件类型: 系统默认 状 态: 正式发布 组件描述:通过OPCUA连接网关,通过定时任务获取OPCUA相关的数据或通过执行指令控制设备相关参数。 配置文件&a…

卸载原有的cuda,更新cuda

概述:看了一下自己的gpu,发现驱动可能装低了,随即尝试更新驱动,写下此篇 注:我原先是10.2的版本,改了之后是11.2,下面的图都用11.2的,不过不碍事 目录 第一步:查看现在…

位运算算法(2)

目录 面试题 01.01. 判断字符是否唯一 一、题目描述 二、思路解析 三、代码 268.丢失的数字 一、题目描述 二、思路解析 三、代码 371.两整数之和 一、题目描述 二、思路解析 三、代码 137.只出现一次的数字 II 一、题目描述 二、思路解析 三、代码 面试题 01.0…

Web漏洞-深入WAF注入绕过

目录 简要其他测试绕过 方式一:白名单(实战中意义不大) 方式二:静态资源 方式三: url白名单 方式四:爬虫白名单 #阿里云盾防SQL注入简要分析 #安全狗云盾SQL注入插件脚本编写 在攻防实战中,往往需要掌握一些特性,比如服务…

下拉选中搜索angularjs-dropdown-multiselect.js

需要引入angularjs-dropdown-multiselect.js 页面 <div ng-dropdown-multiselect"" options"supplierList_data" selected-model"supplierList_select" events"changSelValue_supplierList" extra-settings"mucommonsetti…

四、Yocto创建静态IP和VLAN(基于raspiberrypi 4B)

Yocto创建VLAN配置 在车载域控中很多时候需要创建VLAN&#xff0c;本小节记录如何为yocto构建出来的image自动化创建静态IP以及VLAN。 关于各种VLAN的配置参考&#xff1a;VLAN 1. ubuntu系统中使用netplan创建VLAN 正常情况下我们在ubuntu系统中可以通过netplan来自动化创建…