如何使用Github Page搭建个人网站【踩坑实录多图预警】

news2024/9/22 23:31:50

读前提示

  • 教程链接:使用GitHub Page创建个人网站和博客 | GitHub 中文社区

  • 点进网站就是非常详细的步骤介绍,基本按部就班来跟着做就OK了,结果不是很熟悉操作,踩了几个坑还是顺利搞定了。

  • 踩坑后的建议:一定要先完成前置条件!学完入门教程、熟悉掌握GIthub使用机制再开始。

  • 看到这里你就可以右上角点叉退出,自己跟着教程做了。

  • 下面是本着写了都写了,不发白不发的原则上传的,中途会去坑里看看。

目录

  • 读前提示
  • 开始:创建Repository
  • 步骤1:启用 GitHub Pages
        • 1)点击您仓库的 **Settings** 菜单
        • 2)进入设置后,点击 **Code and automation** 下的 Pages
      • 踩坑记录:等待时间不足……
  • 步骤2:配置您的网站
        • 1)切换到`my-pages`分支,点击`_config.yml`文件
        • 2)右上角有个编辑按钮,打开文件编辑器
        • 3)写入配置内容
        • 4)提交保存
        • 5)等待20秒,刷新页面
      • 踩坑记录:原因不明+瞎操作
        • 踩坑:效果查看(第一次失败记录)
        • 踩坑:重试步骤1(成功)
  • 步骤3:自定义你的网站首页
        • 1) 修改`index.md`文件
        • 2)提交`my-page`分支中的修改
      • 踩坑记录:提交错误分支
        • 踩坑记录:提交了main 分支 ……
  • 步骤4:发布一篇文章
        • 1)到`my-page`分支,创建文件
        • 2)修改标题和内容
        • 4)等待20秒左右,刷新页面
  • 步骤5:合并您的拉取请求
      • 创建拉取请求
        • 1)手动创建:点击顶部菜单`Pull Request`
        • 2)点击`New Pull Request`
        • 3)**base:** 下拉框中请确保选择的是 **main** 分支
        • 4)选择 **compare:** 下拉框,并点击需要比较的分支
        • 5)点击 **Create pull request**
        • 6)输入标题和描述 (自动创建从这步开始)
        • 7) 点击 **Create pull request**提交
      • 合并拉取请求
        • 1) 打开拉取请求
        • 2)点击Merg Pull request
        • 3)点击 confirm merge
        • 4) 删除`my_pages`branch
        • 5)效果查看
        • 6)修改网页配置
      • 踩坑记录:不了解pull request 机制
      • pull request
        • protect branch
  • 完成!


开始:创建Repository

在这里插入图片描述
点击绿色按钮,输入账号密码后,全部默认设置不懂,全点确认,完成后页面自动跳转。
在这里插入图片描述

步骤1:启用 GitHub Pages

下面是官方步骤一的说明

在这里插入图片描述

1)点击您仓库的 Settings 菜单

在这里插入图片描述

2)进入设置后,点击 Code and automation 下的 Pages

在这里插入图片描述
3)请确保 Source 下拉框选择 “Deploy from a branch”,Branch 选择 main

已经默认设置好了,这步没有其他操作
在这里插入图片描述
4)点击 Save 保存
在这里插入图片描述

上面弹出蓝色消息,表示保存好了。

在这里插入图片描述
然后没什么动静……也没有网址链接。

踩坑记录:等待时间不足……

这里教程提示说,会有网站的链接地址出现, 但是上面根本没有找到。。。(可能就是当时没等够时间)

在这里插入图片描述

步骤2:配置您的网站

在这里插入图片描述

1)切换到my-pages分支,点击_config.yml文件

回去到仓库页面,上面第一个黄框,分支这里一定要切换,原本默认显示是main,切换了才能找到下面的文件,不切换没有

【吐槽教程为什么不配图,没图不熟悉的操作起来真的就跟睁眼瞎一样,也没找到其他的视频教学过程。】

在这里插入图片描述

2)右上角有个编辑按钮,打开文件编辑器

盲猜是这只笔。
在这里插入图片描述

3)写入配置内容
  1. 为了使用minima主题,我们在_config.yml文件里添加下面的内容
   theme: minima

能够编写,把上面代码复制粘贴过去,按绿色按钮提交
在这里插入图片描述

4)提交保存

这时会弹出一个确认信息框,继续绿色按钮确认提交

在这里插入图片描述
不用再去搞其他东西!!!

5)等待20秒,刷新页面

下面是主题修改的前后对比。
(PS: 这一步是后面补的,主页内容有变化)

在这里插入图片描述

踩坑记录:原因不明+瞎操作

踩坑:效果查看(第一次失败记录)

提交了配置文件后,好像什么事都没发生,说好的网址没出来,又回去主页面

在这里插入图片描述

踩坑:重试步骤1(成功)

接着回去setting页面,把步骤1从走了一次,这次网页终于生成了。

在这里插入图片描述

就是图中的设置:Deploy from a branch 下面一行选择main然后按save 保存。
这次保存完,就弹出了上面的网址。
如果选错了,就不会有网址弹出来。第一次尝试可能是等待时间不够,所以没有成功。

页面显示如下:

在这里插入图片描述

步骤3:自定义你的网站首页

在这里插入图片描述

1) 修改index.md文件

同样,打开文件后点击右上角的编辑按钮——那支笔。

在这里插入图片描述
编辑模式状态下,可以修改内容。内容修改后,绿色按钮"commit changes"才可以被点击,否则就和下图一样,为不可点击状态。

在这里插入图片描述

2)提交my-page分支中的修改

这步开始误以为直接修改文件就可以同步更新网站了。

编辑完,还是要去到Setting,提交“my-pages”的修改。

这步如果没有提交,或者提交错了分支,网页都会变得很奇怪。这部分的踩坑记录记在文章末尾。

在这里插入图片描述

踩坑记录:提交错误分支

不同的Branch(分支)类似于不同的版本。这里注意到“Branch” 选项下面其实还有’Main’, ‘None’ 的选项,踩过坑后发现,选择哪个分支提交,网页就会根据分支下的文件设置更新网站
在这里插入图片描述

踩坑记录:提交了main 分支 ……

选择”Main“ 会根据Main分支的内容更新网站。 因为网站没有index文件,所以根据规则会显示README 文件。

在这里插入图片描述
页面如下:

在这里插入图片描述

步骤4:发布一篇文章

在这里插入图片描述

1)到my-page分支,创建文件

点击目录右上的+号,create new file。

在这里插入图片描述

2)修改标题和内容
  • 文件取名格式为 _posts/YYYY-MM-DD-title.md
  • 将下面的内容放于文件顶部
---
title: "YOUR-TITLE"
date: YYYY-MM-DD
---

在这里插入图片描述
3)提交修改

在这里插入图片描述

4)等待20秒左右,刷新页面

网页上出现了新的文章标题
在这里插入图片描述
文件格式front matter配置说明:Front Matter | Jekyll • Simple, blog-aware, static sites

这步很顺利,没有踩坑的。

步骤5:合并您的拉取请求

在这里插入图片描述
这步骤分为创建、合并、删除三个步骤,目的是把my-page分支的内容合并到main分支上。

创建拉取请求

如果上面步骤都正常顺利的情况下,会自动生成类似下面的这条黄色消息。点击 Compare & pull request 会自动创建拉取请求,然后我们直接跳到下面的第6步。否则我们将手动创建,请跟随下面的说明。

在这步之前,我已经点击了My pages的这条消息,自动创建拉取请求。(当时不知道是什么用的,踩了一堆坑。) 所以,这里另外创建了分支test-branch做演示记录。
在这里插入图片描述

1)手动创建:点击顶部菜单Pull Request

![[Github Page-20240619105016474.webp]]

2)点击New Pull Request

在这里插入图片描述

这里可以看到已经生成的My pages的PR(Pull Request) ,但是test-branch还没有,所以可以给test-branch建一个拉取请求。

3)base: 下拉框中请确保选择的是 main 分支

![[Github Page-20240619111427805.webp]]

4)选择 compare: 下拉框,并点击需要比较的分支

这里使用的是test-branch分支,然后就可以看到一个Create pull requesst 的绿色按钮

![[Github Page-20240619111707999.webp]]

如果这里切换到my-pages分支,按钮显示的名字是View pull request, 因为是已经有的PR。

![[Github Page-20240619111411840.webp]]

5)点击 Create pull request

这步等同于点击黄色消息中的Compare & pull request
点击后出现下面的输入框。
![[Github Page-20240619111852137.webp]]

6)输入标题和描述 (自动创建从这步开始)

![[Github Page-20240619112321833.webp]]

7) 点击 Create pull request提交

然后页面会自动跳转到你新建的拉取请求
![[Github Page-20240619112358437.webp]]

合并拉取请求

1) 打开拉取请求

现在转到my_pages的Pull request上。

**加粗样式**

上图也可以看到,在Pull request页面下,先前给test_branch生成的PR,名字显示就是步骤6)的title。

2)点击Merg Pull request

![[Github Page-20240619113224508.webp]]

3)点击 confirm merge

![[Github Page-20240619113322588.webp]]

4) 删除my_pagesbranch

![[Github Page-20240619113517962.webp]]

5)效果查看

Code页面: Branches下拉框的my_pages分支已经被删除。
在这里插入图片描述

Pull Request中的My Pages 也消失不见
在这里插入图片描述

同步的刷新页面,也变成了404状态。
![[Github Page-20240619113913932.webp]]

6)修改网页配置

前面踩了一堆的坑,走到这步终于明白了分支的作用,这里网站404是因为在前面的步骤里,setting-page使用了my_pages分支,现在my page 被删,网页也因此404了。

现在只需要切换回main,然后等待网页刷新。

![[Github Page-20240619115301086.webp]]

踩坑记录:不了解pull request 机制

GitHub 快速入门教程 | GitHub 中文社区

pull request

这里还有一个是pull request 的坑。这个功能是github 用来同步不同分支文件。 不同的Branch分支类似于不同的文件版本,可以合并到main分支下面。如果点击并且提交就可能修改文件。

在创建文件过程中,这种提示或者选项会经常跳出来。

![[Github Page-20240619002708160.webp]]

如果中途不明不白,没忍住点击了提交,就可能造成混乱。T T

protect branch

还有个分支保护 Branch Protect 的功能,为了保护原始分支,防止它被强制修改。

About rulesets - GitHub Docs

![[Github Page-20240619002450212.webp]]

完成!

完成所有步骤后,如果github中的README文件显示如下,就表示通过了!

![[Github Page-20240619115551560.webp]]

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

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

相关文章

百元不入耳耳机哪款好?强推这五款宝藏产品

如今无线蓝牙耳机是年轻人学习通勤、健身娱乐的标配,但普及率极高的入耳式耳机却存在堵塞耳孔、影响外界感知等不足,而开放式耳机的出现恰好弥补了这些不足,受到了越来越多人的欢迎。但要从各种品牌、各类型号的开放式耳机中选出一款最适合自…

数学建模·灰色关联度

灰色关联分析 基本原理 灰色关联分析可以确定一个系统中哪些因素是主要因素,哪些是次要因素; 灰色关联分析也可以用于综合评价,但是由于数据预处理的方式不同,导致结果 有较大出入 ,故一般不采用 具体步骤 数据预处理…

Nginx和Tomcat实现负载均衡群集部署应用

🏡作者主页:点击! 🐧Linux基础知识(初学):点击! 🐧Linux高级管理专栏:点击! 🔐Linux中firewalld防火墙:点击! ⏰️创作时间&…

20240711每日消息队列-------------MQ消息的积压的折磨

目标 解决MQ消息的积压 背景 菜馆系统----------- 系统读取消息,处理业务逻辑,持久化订单和菜品数据,然后将其显示在菜品管理客户端上。 最初我们的用户基数很小,上线后的一段时间内,MQ消息通信还算顺利。 随着用户…

在Mac上一键安装Mysql(解决所有安装问题)

重点强调安装mysql成功的关键在于安装的版本不能是最新!! 目录 一:下载mysql数据库安装部分到此结束 二:配置mysql数据库三:启动mysql数据库四:各类奇葩问题总结 一:下载mysql数据库 1.进入MyS…

触摸屏虚拟键盘组件 jQuery Virtual Keyboard使用 自定义键盘

如何在触摸设备上为输入域添加虚拟键盘? 一个插件可以解决这个问题,关键还支持高度自定义(git地址): GitHub - Mottie/Keyboard: Virtual Keyboard using jQuery ~ 官网地址:Virtual Keyboard 使用步骤&…

百日筑基第十八天-一头扎进消息队列1

百日筑基第十八天-一头扎进消息队列1 先对业界消息队列有个宏观的认识 消息队列的现状 当前开源社区用的较多的消息队列主要有 RabbitMQ、RocketMQ、Kafka 和Pulsar 四款。 国内大厂也一直在自研消息队列,比如阿里的 RocketMQ、腾讯的 CMQ 和 TubeMQ、京东的 JM…

无头双向非循环链表实现

无头双向非循环链表实现 Ilist.java接口:MyLinkedList.java: 无头双向非循环链表大致与无头单向非循环差不多,只不过每个节点多了个prev引用,可以从后一个节点找到前一个节点。并且除了头节点head,双链表还多了个尾节点…

自定义多选组件

一.业务场景 选择用印公司时,需要选择多个公司,一个公司对应一个实际使用人 点击用印单位,弹出选择公司窗口,选择使用人,同时带上公司ID,点击确定按钮,将公司和使用人回显在用印单位上 二.上代码 wxml代码…

快递查询|阿里云实现调用API接口

整体请求流程 介绍: 本次解析通过阿里云云市场的云服务来实现程序中对快递包裹实时监控,首先需要准备选择一家可以提供快递查询的商品。 https://market.aliyun.com/apimarket/detail/cmapi00065859#skuyuncode5985900001 步骤1: 选择商品 如图点击…

复杂表单一键填充,让信息输入更轻松

随着网络购物成为日常生活的一部分,用户在多个购物应用中重复输入地址信息带来的效率问题日益凸显。同样,在为家人预订车票或机票时,添加新的购票人信息也因难以记忆家人详细信息而变得繁琐。 为了解决这些用户痛点,HarmonyOS SD…

企业响应式网站建站模版源码系统 海量模版随心选择 带完整的安装代码包以及搭建部署教程

系统概述 企业响应式网站建站模版源码系统”是一套完整、高效的网站建设解决方案。它旨在为企业提供一站式的网站建设服务,无需专业的编程知识,即可通过简单的操作,快速搭建出美观、专业的企业网站。该系统不仅包含了丰富的网站模版&#xf…

【qt】客户端连接到服务器

获取到IP地址和端口号. 通过connectToHost() 来进行连接. 对于客户端来讲,只需要socket即可. 客户端连接服务端只需要使用套接字(Socket)来进行通信。客户端通过创建一个套接字来连接服务端,然后可以通过套接字发送和接收数据。套接字提供了一种简单而灵活的方式来…

勘测院如何实现可控便捷的图纸安全外发?

勘测院,也称为勘测设计研究院或勘测设计院,是进行与地质、地形和地貌有关的勘察测量的单位,为各类工程项目提供准确的地质数据和设计依据。 勘测院会产生各类包括图纸在内的文件,如: 1、项目相关文件:项目…

不同的企业如何量身制定数据治理体系

在当今数据驱动的商业环境中,数据治理已成为企业不可或缺的一部分。然而,由于行业、规模、业务模式的差异,不同企业在制定数据治理体系时面临着各自独特的挑战和机遇。本文将探讨不同企业如何根据自身特点量身制定数据治理体系。 明确企业数据…

基于Rspack实现大仓应用构建提效实践|得物技术

一、实践背景 随着项目的逐步迭代,代码量和依赖的逐渐增长,应用的构建速度逐步进入缓慢期。以目前所在团队的业务应用来看(使用webpack构建),应用整体构建耗时已经普遍偏高,影响日常开发测试的使用效率&am…

浅谈后置处理器之JSON提取器

浅谈后置处理器之JSON提取器 JMeter 的 JSON 提取器(JSON Extractor)是一个强大的后置处理器,它允许用户从HTTP响应、数据库查询或其他类型的响应中提取JSON数据,并将这些数据存储为变量,以便在后续的请求中重用。这对…

人工智能行业应用-垃圾识别一

垃圾识别应用主要体现在AI图像垃圾识别技术上,这是一种基于人工智能和计算机视觉技术的图像处理技术,广泛应用于各个领域以提高垃圾处理的效率和准确性。 1、垃圾识别效果图 2 垃圾识别任务分析 综合利用Python语言、Qt开发模块,OpenCV开发模…

python使用tkinter加载rtsp视频流

简介 最近有个需求,需要开发个桌面应用工具,可是实时显示rstp视频,于是想到了用python自带的tkinter 来开发,最后打包成exe应用。 import cv2 import random import threading from tkinter import * from PIL import Image, Ima…

group 与查询字段

需求 每周周一,统计菜单在过去一周,点击次数,和点击人数(同一个人访问多次按一次计算) 表及数据 日志表 CREATE TABLE t_data_log ( id varchar(50) NOT NULL COMMENT 主键id, operation_object varchar(500) DE…