搭建Github Page完全手册

一、前期准备

  1. 注册Github账号(必备)
  2. 下载GitHub Desktop:下载链接(可使用git代替)
  3. 模板选择网站:
    • jekyllthemes.org
    • gohugo
    • mademistakes

二、快速入门

1.模板参考

  • 作者使用的模板来源:https://github.com/qiubaiying/qiubaiying

  • 零基础的朋友可以直接拉取他的仓库

  • 搭建方法参考文章:搭建方法参考

  • 其他好看的模板:模板一  模板二

2.拉取仓库

(1)打开上文模板链接

image-20230514224926314

(2)转跳到如下界面

image-20230514225022141

(3)修改以下内容

Repository name = 存储库名称 = 你想给他取的存储库名字
仓库名称格式:你的Github账号名.github.io

注意:这里的名字就是访问他的网址

image-20230514225222001

image-20230514225428887

(4)修改仓库名

如果您在上部部分仓库名修改有误、不正确、报404错误请参考此章节

修改格式:

你的Github账号名.github.io,然后 Rename

image-20230514230523280

3.测试访问

按如上步骤来来应显示如图所示

image-20230514232212722

三、进阶步骤

推荐使用GitHub Desktop将仓库拉取到本地,然后使用vscode编辑

1.增加左侧栏目中原作者未提供的转跳链接

(1)打开_config.yml

找到SNS settings部分

# SNS settings
RSS: false
zhihu_username:     你的用户名
github_username:    你的用户名
csdn_username:   你的用户名

原作者并未提供csdn或其他链接的修改代码

(2)此处添加你想要的链接的变量名

例如CSDN的变量名为:csdn_username
image-20230514233259668

(3)添加完成后修改

\_layouts\page.html

修改为:

{% if site.csdn_username %}<li><a target="_blank" href="https://blog.csdn.net/{{ site.csdn_username }}"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-stack-1x fa-inverse">C</i></span></a></li>
{% endif %}

image-20230514233912169

(4)刷新测试

正常应为下图所示

image-20230514234459795

2.更改域名

(1)域名购买方推荐使用

  • godaddy

  • 阿里云-万网

(2)作者使用的是阿里云万网域名

可以看到.top域的域名非常的便宜(推荐使用)

image-20230514234718681

(3)配置域名解析

  • 打开域名管理界面

image-20230515110945863

  • 点击解析

image-20230515085950949

  • 添加解析记录

可按需添加,这里的IPv6地址可以使用cmd直接ping你的博客地址得出

主机记录记录类型记录值
@A185.199.111.153
@A185.199.110.153
@A185.199.109.153
@A185.199.108.153
@AAAA2606:50c0:8003::153
@AAAA2606:50c0:8002::153
@AAAA2606:50c0:8001::153
@AAAA2606:50c0:8000::153
wwwCNAMEyouusername.github.io

配置具体如图所示

image-20230515112020649

(4)购买完成并配置完域名转发后,回到Github已经可以访问的库中,点击setting

  • 选择Pages选项

image-20230514235045476

  • 填入购买的域名

image-20230515210737322

  • 出现这个标志表示域名添加成功

image-20230515112250419

  • 回到仓库界面多出CNAME文件,文件内存放刚刚添加的域名

注意:若没有自动新增该文件,则需要自行手动增加

image-20230515112526748

image-20230515112707261

3.添加SSL证书实现https访问

注意:到该步骤前,请确定您的网站可以通过访问域名正常转跳

(1)访问https://www.cloudflare.com/zh-cn/,注册用户

image-20230515113344002

(2)使用已注册完成的账号登录,来到这个界面

image-20230515113457735

(3)点击添加站点

image-20230515113534788

(4)输入站点网址

image-20230515113650281

(5)选择免费服务

image-20230515113801562

(6)添加DNS记录

image-20230515113950408

(7)cloudflare会扫描出当前域名的A、AAAA、CNAME记录,并显示在下面

由于使用演示案例的域名配置所以无记录显示

image-20230515160803824

(8)指引会告诉您删除阿里云分配的服务器添加cloudflare给出的服务器

image-20230515161211685

(9)更改cloudflare给出的服务器

  • 打开域名控制台

image-20230515161815472

  • 点击域名后的管理按钮

image-20230515162012902

  • 管理界面点击修改DNS服务

image-20230515162213601

  • 点击修改DNS服务器

image-20230515162336089

  • 修改成cloudflare提供的DNS服务器,点击确认。
dante.ns.cloudflare.com
stella.ns.cloudflare.com

image-20230515162649278

  • 修改成功

image-20230515163004488

(10)回到cloudflare应显示如下界面,则代表修改成功

image-20230515163148094

(11)点击SSL设置

image-20230515163307257

(12)默认应该为如图所示,若不是,则选择第三个选项

注意:

  1. 中文为完全,英文为Full
  2. 更改不是立即生效,需要稍等一会

image-20230515163433804

(13)完成上述步骤后回到GitHub,打开强制使用https的开关,以增强安全性

image-20230515163759242

image-20230515163818592

(14)至此SSL证书配置完毕,可以使用https进行访问

image-20230515163933714

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

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

相关文章

文件批量改名,快速去除文件名中的空格,告别命名烦恼!

在日常工作中&#xff0c;我们经常遇到文件名中带有空格的情况&#xff0c;这不仅导致文件难以查找&#xff0c;还可能在某些软件中引发问题。那么&#xff0c;如何快速、有效地去除这些空格呢&#xff1f;今天&#xff0c;我就来教你一招&#xff01; 首先&#xff0c;我们要进…

【IEEE会议征稿通知】第五届计算机视觉、图像与深度学习国际学术会议(CVIDL 2024)

第五届计算机视觉、图像与深度学习国际学术会议&#xff08;CVIDL 2024&#xff09; 2024 5th International Conference on Computer Vision, Image and Deep Learning 第五届计算机视觉、图像与深度学习国际学术会议&#xff08;CVIDL 2024&#xff09;定于2024年4月19-21日…

LeetCode刷题---两数之和

解题思路&#xff1a; 该题使用哈希表的思想解决该问题 首先定义一个Map&#xff0c;key为数组中的每个元素&#xff0c;value为每个元素的索引下标。接着遍历原数组&#xff0c;对每一个元素进行判断&#xff0c;如果哈希表中包含target-nums[i]&#xff0c;则将其value和当前…

【JAVA GUI+MYSQL]社团信息管理系统

本社团信息管理系统主要实现登录注册、管理员信息管理、社团用户信息管理、用户申请信息管理功能模块。 目录 &#xff11;&#xff0e;系统主要功能介绍 &#xff12;&#xff0e; 数据库概念模型设计 3.具体功能模块的实现 3.1模型类 3.1.1Student.java 3.1.2User .j…

基于ssm的孩童收养信息管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本孩童收养信息管理就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息…

react-native下载图片到本地相册

需求 点击右上角下载icon&#xff0c;可以将当前图片下载并保存到本地相册。 下载的图片&#xff1a; 流程 下载图片的本质其实是&#xff0c; 固定需要下载的页面内容和样式 》将其放在当前页面不可见区域 》点击下载按钮 》穿一个ref给native&#xff0c;会自动拉起手机系…

SpringBoot怎么写一个自定义的starter,Gradle依赖引入starter的Jar包

1.新建一个Spring的项目myasset-spring-boot-starter 项目结构如下: 注意:不需要Application启动类 和 application.yml/application.properties文件 2. resources下添加spring.factories文件 # Auto Configure org.springframework.boot.autoconfigure.EnableAutoConfigu…

Zookeeper的基础介绍和安装教程

1、 Zookeeper入门 1.1 概述 Zookeeper是一个开源的分布式的&#xff0c;为分布式应用提供协调服务的Apache项目。 1.2 特点 1.3 数据结构 1.4 应用场景 提供的服务包括&#xff1a;统一命名服务、统一配置管理、统一集群管理、服务器节点动态上下线、软负载均衡等。 统一…

ros gazebo机械臂仿真,手动控制与MoveIt自动控制

本文总结归纳古月居胡春旭ros机械臂教程&#xff0c;给出了一些error的解决方法&#xff0c;补充了通过python运行moveit。十分建议去看github huchunxu源代码的repository。 创建机械臂的xacro模型 首先创建一个工作空间&#xff0c;在工作空间中创建arm_description功能包。…

GPT如何完成AI绘图?

详情点击链接&#xff1a;GPT如何完成AI绘图&#xff1f; 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二定制自己的GP…

react antd 计算公式 (+-*/)运算,回显

计算器的源码计算器触发事件源码 import {DictValueEnumObj } from @/components/DictTag; import {getDeptTree, getFormulaListAll, getListAll } from @/services/Energy/Metering;import {getListAllInfo, getDepartmentName } from @/services/Energy/Calculation; import…

蓝牙网关在物联网领域三大应用

蓝牙网关在物联网的应用主要包括物联网室内定位、物联网数据采集、物联网连接控制三大应用领域&#xff0c;以下对三大应用领域做详细解释。 一、物联网蓝牙室内定位 蓝牙网关在室内定位的应用包括人员定位和资产设备定位两大方向。 1、人员定位 蓝牙网关安装于室内的特定地…

护眼灯哪个品牌最好?2024年十大护眼灯品牌排行榜

由于科技水平的提高和电子产品的普及&#xff0c;儿童青少年的近视率正逐年攀升&#xff0c;出现低龄化现象&#xff0c;面对眼健康问题的严峻形势&#xff0c;我们应该还有爱眼意识、加强眼健康知识普及&#xff01;现在呢&#xff0c;护眼台灯被越来越多的人发现了&#xff0…

接口芯片选型分析 四通道差分驱动可满足ANSI TIA/EIA-422-B 和ITU V.11 的要求 低功耗,高速率,高ESD

四通道差分驱动可满足ANSI TIA/EIA-422-B 和ITU V.11 的要求 低功耗&#xff0c;高速率&#xff0c;高ESD。 其中GC26L31S可替代AM26LS31/TI&#xff0c;GC26L32S替代AM26LS32/TI&#xff0c;GC26E31S替代TI的AM26LV31E

如何快速制作网址的静态码?网址二维码在线制作的简单技巧

现在很多人会将网址转换成静态二维码来使用&#xff0c;一个原因是扫码更符合现在人们的生活习惯&#xff0c;二来是采用二维码图片来做传播能够有效的节省制作者的成本&#xff0c;而且容易更快的完成网址内容的传播&#xff0c;所以将网址生成二维码的方法现在应用非常的广泛…

U盘无法安全弹出怎么办?

当电脑弹出“弹出USB大容量存储设备时出问题”提示时&#xff0c;只能抱着侥幸的心理直接拔出&#xff0c;如果运气好&#xff0c;可能没有什么事&#xff0c;如果运气不好&#xff0c;你的U盘可能就会报废。那么&#xff0c;为什么U盘无法弹出&#xff1f;遇到U盘无法安全弹出…

ORA-600 adg无法查询故障

再续前缘 ORA-600[12406]故障解决-CSDN博客 当你点背的时候&#xff0c;看似一个简单的case&#xff0c;总是会迎来反转 上次改完参数没两天&#xff0c;又出现了报错不同&#xff0c;但是现象相似的情况 这次是 ORA-600 [kksgaGetNoAlloc_Int0] 这次出现故障的范围更大&a…

windows@管理员用户账户

文章目录 windows中的管理员用户账户将某个用户提升为管理员&#x1f388;直接创建一个管理员账户&#x1f60a;使用lusrmgr.msc程序创建先新建一个用户FAQ 在管理员组中添加新用户为管理员&#x1f388;方式1:手动输入方式2:在已有的用户列表中查找并选中修改/禁用pin码(普通情…

Vue中Vuex的环境搭建和原理分析及使用

Vuex的环境搭建 Vuex是Vue实现集中式数据管理的Vue的一个插件&#xff0c;集中式可以理解为一个老师给多个学生讲课。 Vue2.0版本的安装&#xff1a; npm i vuex3 使用Vuex需要在store中的index.js引入Vuex和main.js中引入store,目的是让vm和vc都能看到$store。实现多个组件…

降噪自编码器(Denoising Autoencoder)

降噪自编码器&#xff08;Denoising Autoencoder&#xff09;是一种用于无监督学习的神经网络模型。与普通的自编码器不同&#xff0c;降噪自编码器的目标是通过在输入数据中引入噪声&#xff0c;然后尝试从具有噪声的输入中重建原始无噪声数据。 以下是降噪自编码器的主要特点…