个人网站的搭建部署及自定义域名

个人网站的搭建部署及自定义域名

  • 写在前面
  • 个人网站的搭建
  • 个人网站的部署
  • 自定义域名
  • 更多模板

写在前面

  • 个人网站模板获取方式:个人网站模板
  • 视频教程:视频教程

个人网站的搭建

  • 使用PyCharm打开提前准备好的个人网站模板:
    在这里插入图片描述

  • 双击打开index.html首页文件,并点击右上角的谷歌浏览器小图标进行预览:
    在这里插入图片描述

  • 个人网站模板首页:
    在这里插入图片描述

  • 将模板修改成自己想要的样子,文本修改方式是将需要修改的文本内容先复制下来,以姓名为例:
    在这里插入图片描述

  • 回到PyCharm里,按Control+F,粘贴复制的文本以查找定位到相应的代码:
    在这里插入图片描述

  • 将其修改为自己的姓名:
    在这里插入图片描述

  • 修改完成之后回到Google浏览器里,刷新一下,就将文本内容修改成了自己想要的内容:
    在这里插入图片描述

  • 图片修改方式是先找到想要修改的图片:
    在这里插入图片描述

  • 打开模板所在的文件夹,找到图片所在的位置,以将其修改为最右边的图片为例:
    在这里插入图片描述

  • 将原先图片的命名复制下来:
    在这里插入图片描述

  • 将原先的图片删除:
    在这里插入图片描述

  • 将复制下来原先的图片名称粘贴到想要修改的图片名称上以覆盖想要修改的图片名称:
    在这里插入图片描述

  • 修改完成之后回到Google浏览器里,右击左上角的刷新按钮刷新一下,发现图片并没有被修改过来:
    在这里插入图片描述

  • 右击,点击检查,或者直接按F12,打开调试者模式:
    在这里插入图片描述

  • 再右击左上角的刷新按钮,点击清空缓存并硬性重新加载:
    在这里插入图片描述

  • 图片已成功修改成我们想要的图片:
    在这里插入图片描述

  • 按照这样的方式,逐步将模板自定义成我们自己的个人网站:
    在这里插入图片描述

个人网站的部署

  • 打开GitHub,登录后点击Repositories,再点击New:
    在这里插入图片描述

  • Repository name填写为:用户名.github.io,本教程Repository name为dlaboratory.github.io,并且可以在Description里添加一些描述信息:
    在这里插入图片描述

  • 往下翻,可以勾选Add a README file以添加说明文件,Add .gitignore选择Node后,点击Create repository:
    在这里插入图片描述

  • 创建好仓库后点击Add file的下拉菜单:
    在这里插入图片描述

  • 选择Upload files:
    在这里插入图片描述

  • 进入上传文件页面:
    在这里插入图片描述

  • 将提前自定义好后的个人网站文件拖拽到上传页面窗口,注意一次只能拖拽不超过100个文件:
    在这里插入图片描述

  • 上传完成后,往下翻,点击Commit changes:
    在这里插入图片描述

  • 由于全部文件超过了一次只能上传100个文件的上限,所以要分批次提交文件,继续点击Add file的下拉菜单,再选择Upload files以上传其余文件:
    在这里插入图片描述

  • 接着拖拽:
    在这里插入图片描述

  • 上传完成后,重复相同的操作,往下翻,点击Commit changes:
    在这里插入图片描述

  • 本次提交成功:
    在这里插入图片描述

  • 再次点击Add file的下拉菜单,选择Upload files以上传其余文件:
    在这里插入图片描述

  • 再接着拖拽:
    在这里插入图片描述

  • 因为assets文件中包含的文件数量超出了100,所以会出现一次只能上传少于100个文件的提示:
    在这里插入图片描述

  • 为了能将文件分批次上传成功,可以先在文件夹中新建文件夹:
    在这里插入图片描述

  • 将assets中的部分文件先剪切到刚才新建的文件夹里,以确保assets中余下的文件数少于100:
    在这里插入图片描述

  • 在新建文件夹中,粘贴刚才从assets文件夹里剪切的文件:
    在这里插入图片描述

  • 此时assets文件夹中的文件数量少于了100,继续拖拽上传:
    在这里插入图片描述

  • 上传完成后,往下翻,点击Commit changes:
    在这里插入图片描述

  • 为了确保上传后文件目录结构和本地保持一致,需要进入到已经提交完成的相对应文件里接着上传其余的文件,点击assets/css:
    在这里插入图片描述

  • 再点击assets:
    在这里插入图片描述

  • 这时在assets文件目录下,再点击Add file的下拉菜单,选择Upload files:
    在这里插入图片描述

  • 接着上传其余文件:
    在这里插入图片描述

  • 将文件拖拽到上传页面窗口:
    在这里插入图片描述

  • 上传完成后,往下翻,点击Commit changes:
    在这里插入图片描述

  • 完成后,继续点击assets,进入到已经提交完成的相对应文件里接着上传其余的文件,重复操作,直至全部文件均已上传提交完成:
    在这里插入图片描述

  • 全部文件上传提交完成后点击Settings:
    在这里插入图片描述

  • 点击Pages:
    在这里插入图片描述

  • 可以看到会生成一个链接:
    在这里插入图片描述

  • 点击链接后进入到我们的个人网站,但是此域名不是自定义的,接下来自定义域名:
    在这里插入图片描述

自定义域名

  • 本教程域名为datalaboratory.cn,没有域名可以先提前购买一个,各平台域名之间的操作大同小异,以腾讯云为例,获得域名后进入到云解析页面,在我的域名里,进入到相应域名的记录管理中,点击添加记录:
    在这里插入图片描述

  • 主机记录选择@,记录类型选择CNAME,线路类型保持默认,记录值需要回到GitHub里获取:
    在这里插入图片描述

  • 回到GitHub,点击General:
    在这里插入图片描述

  • 将Repository name中的用户名.github.io,本教程Repository name为dlaboratory.github.io,复制下来:
    在这里插入图片描述

  • 回到云解析页面,粘贴到记录值中后点击保存:
    在这里插入图片描述

  • 再添加一个记录,点击添加记录:
    在这里插入图片描述

  • 主机记录选择www,记录类型选择CNAME,线路类型保持默认,记录值同样粘贴之前复制的Repository name中的用户名.github.io,本教程Repository name为dlaboratory.github.io,点击保存:
    在这里插入图片描述

  • 记录添加完成:
    在这里插入图片描述

  • 回到GitHub里,点击Pages:
    在这里插入图片描述

  • 往下翻,找到Custom domain:
    在这里插入图片描述

  • 回到云解析页面,将域名复制下来,本教程为datalaboratory.cn:
    在这里插入图片描述

  • 回到GitHub里,将域名粘贴到Custom domain中后点击Save:
    在这里插入图片描述

  • 回到最上边,再次点击链接:
    在这里插入图片描述

  • 可以看到,域名已经为自定义的域名了,值得注意的是,目前显示为不安全状态,且域名缺少我们熟知的www.前缀:
    在这里插入图片描述

  • 回到GitHub里,在Custom domain中的域名前添加www.后再点击Save:
    在这里插入图片描述

  • 同时勾选Enforce HTTPS:
    在这里插入图片描述

  • 回到最上边,刷新一下:
    在这里插入图片描述

  • 刷新成功后,再次点击生成的链接:
    在这里插入图片描述

  • 自定义域名完成:
    在这里插入图片描述

更多模板

  • 除上述模板外,还可以选择自己喜欢的模板以完成个人网站的搭建部署及自定义域名:
    在这里插入图片描述

免责声明:如有侵权,联系删除。

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

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

相关文章

FontsTest.java

package fonts;import java.awt.Font; import java.awt.GraphicsEnvironment;/*** Font测试* * 不同字体在不同操作系统是不一样的,更新* * linux: https://blog.csdn.net/spencer_tseng/article/details/135232675windows: https://blog.cs…

【2】Docker Compose编排

Docker Compose 使用 Docker 帮助我们解决服务的打包安装的问题,随着而来的问题就是服务过多的带来如下问题: 多次使用 Dockerfile、Build、Image 命令或者 DockerHub 拉取 Image;需要创建多个 Container,多次编写启动命令&…

探究Android DreamService的梦幻世界

探究Android DreamService的梦幻世界 引言 DreamService的概述 在Android开发中,DreamService是一种特殊类型的服务,它可以用于创建梦幻世界的屏保应用。梦幻世界是一种用户界面显示模式,当设备进入空闲状态时,系统会自动启动D…

qt项目-《图像标注软件》源码阅读笔记-类图

1. 开源项目链接 GitHub - jameslahm/labelme: A image annotation software for 2D or 3D images 2. 项目界面 3. 项目类图 全部类图: 3.1 Shape 形状的绘制及形状的存储 qt项目-《图像标注软件》源码阅读笔记-Shape类绘图及其子类-CSDN博客 负责形状的绘制及…

unknown variable ‘authentication_policy=mysql_native_password‘

unknown variable authentication_policymysql_native_password 背景解决尝试一尝试二(解决) 总结 背景 mac上安装多个版本数据库。我是通过dma安装的,先装的5.7,再装的5.8,然后5.8的能正常用,5.7的启动不起来。报错信息为如下 …

C++ Qt开发:QItemDelegate自定义代理组件

老规矩,首先推荐好书: Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍…

程序员如何高效学习技术?

我们相信努力学习一定会有收获,但是方法不当,既让人身心疲惫,也没有切实的回报。 不少朋友每天都阅读技术文章,但是第二天就忘干净了。工作中领导和同事都认可你的沟通和技术能力,但是跳槽面试却屡屡碰壁。面试官问技术…

龙芯loongarch64服务器编译安装scikit-learn

前言 根据我之前的文章介绍,龙芯loongarch64服务器中的很多python依赖包安装有问题,发现其中安装的"scikit-learn"就无法正常使用,会报如下错误No module named sklearn.__check_build._check_build: 解决办法 从第三方…

java keytool.exe ssl

JDK如果没有先安装 JDK8 install_jdk aleady install-CSDN博客 java keytool.exe ssl keytool -genkey -alias tomcat -storetype PKCS12 -keyalg RSA -keysize 2048 -keystore D:\server.keystore -validity 3650 server.ssl.key-storeD:\server.keystore server.ssl.key-…

吉他初学者学习网站搭建系列(6)——如何根据歌名查歌词

文章目录 背景实现track.searchtrack.lyrics.get 效果存在问题 背景 当你想要扒歌时,第一件事就是如何先拿到一首歌的歌词。当然,你可以去复制粘贴,但是如果可以在网站中直接搜到,那就太棒了。 实现 这里用到了国外的API https…

【Redis刨析】知识图谱的构建与实现

前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 ChatGPT体验地址 文章目录 前言引用构建过程Redis的知识图谱构建过程Redis介绍快的原因持久化 引用 对于编程的学习,过了初级阶段,我认为应该减少对视频的依赖&am…

主动学习如何解决数据标注的难题?主动学习和弱监督学习有何区别?

机器学习的成功与否取决于数据标注的质量和数量。利用主动学习的机器学习技术能加快模型训练的进度和减少数据获取的资金投入。依靠主动学习来得到有价值的数据,以便机器模型从中学习。如果一个模型被具有价值的数据加以训练,它将以较少的人工标注和更短…

istio 示例程序 bookinfo 快速部署

官网 文档位置 相关 yaml 资源下载 Bookinfo 应用分为四个单独的微服务: productpage:这个微服务会调用 details 和 reviews 两个微服务,用来生成页面details:这个微服务中包含了书籍的信息reviews:这个微服务中包含了…

【SpringCloud笔记】(11)消息驱动之Stream

Stream 技术背景 底层不同模块可能使用不同的消息中间件,这就导致技术的切换,微服务的维护及开发变得麻烦起来 概述 官网: https://spring.io/projects/spring-cloud-stream#overview https://cloud.spring.io/spring-cloud-static/spring…

springcloud微服务篇--6.网关Gateway

一、为什么需要网关? 网关功能: 身份认证和权限校验 服务路由、负载均衡 请求限流 在SpringCloud中网关的实现包括两种: gateway zuul Zuul是基于Servlet的实现,属于阻塞式编程。而SpringCloudGateway则是基于Spring5中提供的Web…

Java学习笔记(八)——面向对象编程(高级)

目录 一、类变量和类方法 (一)类变量/静态变量 类变量内存布局 类变量使用注意事项和细节 (二)类方法 类方法经典的使用场景 类方法使用注意事项和细节 二、理解main方法语法 三、代码块 代码块使用注意事项和细节 四、…

FQML_AXI_GPIO工程构建调试记录

FQML_AXI_GPIO工程构建调试记录 一、概述 此记录JFMQL15T开发板,实现ps通过axi接口控制pl 的EMIO接口led闪烁,添加EMIO PJTAG用于PS端调试,先创建vivado工程,最终生成bitstream,procise从vivado中导入工程&#xff0…

深度学习 | 基本循环神经网络

1、序列建模 1.1、序列数据 序列数据 —— 时间 不同时间上收集到的数据,描述现象随时间变化的情况。 序列数据 —— 文本 由一串有序的文本组成的序列,需要进行分词。 序列数据 —— 图像 有序图像组成的序列,后一帧图像可能会受前一帧的影响…

GA/T1400公安视图库在视频监控系统中对接及方案

公安视频图像信息应用系统系列标准,标号为GA/T 1400,现行版本为2017年版,由公安部发布。现较广泛地使用于平安城市安防监控系统、智慧城市安防监控系统、雪亮工程安防监控系统之中。 公安视频图像信息应用系统系列标准,共分为4个部…