个人简历主页搭建系列-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: 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.mfbz.cn/a/499696.html

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

相关文章

Spring 源码调试错误修复

Spring 源码调试错误修复 文章目录 Spring 源码调试错误修复1. fatal: not a git repository (or any of the parent directories): .git问题描述解决方案 2. fatal: Needed a single revision问题描述解决方案 1. fatal: not a git repository (or any of the parent director…

14.Java为什么这么火、Java主要特性

文章目录 一、Java为什么这么火?二、Java主要特性 一、Java为什么这么火? 一个语言火不火、能不能长久的生存下去,主要其实是看四个方面 1、用户量:使用的程序员多不多。 不管在国内,还是在国外,使用Jav…

ASCII查询

最近踩的字符坑有点多&#xff0c;自己写了个ASCII查询&#xff0c;不用求人了。 <html> <head> <title>ASCII码查询</title> <style> table { border-collapse:collapse; } th, td { border:1px solid black; padding:10px; text-align:center;…

Java基础之算数运算符的初级用法

运算符 运算符: 对字面量或者变量进行操作的符号 表达式: 用运算符把字面量或者变量连接起来,符合java语法的式子就可以称为表达式 不同运算符连接的表达式体现的是不同类型的表达式 一 .算数运算符 实践一下 加 减 乘 运行结果: 除 取模 运行结果 练习: 数值拆分 需求…

Doris实践——叮咚买菜基于OLAP引擎的应用实践

目录 前言 一、业务需求 二、选型与对比 三、架构体系 四、应用实践 4.1 实时数据分析 4.2 B端业务查询取数 4.3 标签系统 4.4 BI看板 4.5 OLAP多维分析 五、优化经验 六、总结 原文大佬介绍的这篇Doris数仓建设实践有借鉴意义的&#xff0c;这些摘抄下来用作沉淀学…

Makefile用法及变量

一、Makefile概述 自动化编译”&#xff1a;一旦写好&#xff0c;只需要一个make命令&#xff0c;整个工程完全自动编译&#xff0c;极大的提高了软件开发的效率。 提升编译效率&#xff1a;再次编译&#xff0c;只编译修改的文件。 通过检查时间来检查文件是否被修改过 二…

零拷贝技术探讨

零拷贝技术是一种用于提高数据传输效率的网络技术&#xff0c;主要应用于网络服务器中。它通过减少数据在操作系统内核空间和用户空间之间的复制次数来提高性能。 在传统的网络服务器中&#xff0c;当客户端向服务器发送请求时&#xff0c;服务器会从磁盘读取数据&#xff0c;…

3.亿级积分数据分库分表:ShardingSphere官方提供的平滑数据迁移方案介绍,有什么缺点呢?

前面的 2.亿级积分数据分库分表&#xff1a;增量数据同步之代码双写&#xff0c;为什么没用Canal&#xff1f; 博客中介绍了实现平滑数据迁移的两种方案&#xff1a;Canal监听MySQL的binlog、代码双写&#xff0c;也分别介绍了两种方案的实现原理及优缺点&#xff0c;最后基于…

VTK 9.2.6 源码和VTK Examples 编译 Visual Studio 2022

对于编译 VTK 源码和编译详细的说明&#xff1a; VTK 源码编译&#xff1a; 下载源码&#xff1a; 从 VTK 官方网站或者 GitHub 获取源代码。官网目前最近的9.3.0有问题&#xff0c;见VTK 9.3.0 编译问题 Visual Studio 2022去gitlab上选择9.2.6分支进行clone CMake 配置&…

Linux之文件系统

我们之前谈到的文件描述符fd,是与被加载到内存中的文件相关的&#xff0c;那么还有什么文件呢&#xff1f;磁盘文件 内存文件 ------ 断电失效 磁盘文件 ------ 不受断电的影响 磁盘存储器存、取信息的最基本单位是扇区。 —个扇区能存储512Bytes的数据,OS与磁盘交互的单位…

Spring-01

Spring 1.Spring是什么? spring是一个开源的Java应用框架&#xff0c;它提供了一套全面的基础设施支持 2.Spring框架的主要特点 1&#xff09;依赖注入&#xff08;Dependency Injection&#xff0c;DI&#xff09; 2&#xff09;面向切面编程&#xff08;AOP&#xff09…

Redis命令-Key的层级结构

基础篇Redis 4.4 Redis命令-Key的层级结构 Redis没有类似MySQL中的Table的概念&#xff0c;我们该如何区分不同类型的key呢&#xff1f; 例如&#xff0c;需要存储用户.商品信息到redis&#xff0c;有一个用户id是1&#xff0c;有一个商品id恰好也是1&#xff0c;此时如果使…

长篇分享,如何学习电路设计?

本文来自看海原创视频教程&#xff1a;《运放秘籍》运算放大器基础精讲及应用第一部*开天 微信公众号&#xff1a;工程师看海 【淘宝】https://m.tb.cn/h.5PAjLi7?tkvmMLW43KO7q CZ3457 「运放秘籍_运算放大器Multisim仿真视频教程第一部开天_工程师看海」 点击链接直接打开 …

王道C语言督学营OJ课后习题(课时14)

#include <stdio.h> #include <stdlib.h>typedef char BiElemType; typedef struct BiTNode{BiElemType c;//c 就是书籍上的 datastruct BiTNode *lchild;struct BiTNode *rchild; }BiTNode,*BiTree;//tag 结构体是辅助队列使用的 typedef struct tag{BiTree p;//树…

OpenGL的MVP矩阵理解

OpenGL的MVP矩阵理解 右手坐标系 右手坐标系与左手坐标系都是三维笛卡尔坐标系&#xff0c;他们唯一的不同在于z轴的方向&#xff0c;如下图&#xff0c;左边是左手坐标系&#xff0c;右边是右手坐标系 OpenGL中一般用的是右手坐标系 1.模型坐标系&#xff08;Local Space&…

保理业务产品方案

常见的信贷业务流程 产品架构 一般分为贷前、贷中、贷后三个部分&#xff1a; 贷前一般处理客户入驻、资质审批、授信项目准入&#xff1b; 贷中一般处理处理具体的融资申请、审批、中登登记、资产锁定、放款事务&#xff1b; 贷后一般处理客户还款冲销、账款跟踪、到期日调整…

GRE_MGRE综合实验

目录 1、R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;其所有地址均配为公有IP地址。 IP配置 配置公网全网通 2、&#xff08;1&#xff09;R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方。 PAP认证 &#xff08;2&#xff09;R2与R5之间使用ppp的CHAP认证&am…

顺序栈、链式栈、顺序队列、链式队列的ADT及其实现

顺序栈ADT及其实现 链式栈ADT及其实现 顺序队列的ADT及其实现 在数组中队首队尾的分配方案 第三中方案&#xff0c;即达到入队出队操作的时间代价是O&#xff08;1&#xff09; 同时可充分利用空间&#xff0c;不会出现空间似乎用完了的假象 时间性能和空间性能发挥到最大 链…

Qt FFmpeg开发环境配置以及测试 - 不编译源码

Qt FFmpeg环境配置以及测试 引言一、下载二、配置三、测试 引言 FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。它采用了LGPL或GPL许可证&#xff0c;并提供了录制、转换以及流化音视频的完整解决方案。 FFmpeg包含了非常先进的…

【C++】map set

文章目录 1. 关联式容器2. 键值对3. 树形结构的关联式容器3.1 set3.1.1 set 的介绍3.1.2 set 的使用 3.2 map3.2.1 map 的介绍3.2.2 map 的使用 3.3 multiset3.3.1 multuset 的介绍3.3.2 multiset 的使用 3.4 multimap3.4.1 multimap 的介绍3.4.2 multimap 的使用 1. 关联式容器…
最新文章