使用Github.io创建自己的博客

news2024/10/6 1:43:05

文章目录

  • 1.最终效果
  • 2.操作步骤
    • 2.1 前置操作
    • 2.2 按照自己需求修改内容
      • 2.2.1 基本修改
      • 2.2.2 额外添加知乎等社交网站链接
    • 2.3 首页修改
    • 2.4 查看发布状态
    • 2.5 奇怪的错误(头像显示错误)
    • 2.6 本地调试
    • 2.7 后续修改
  • 3. 项目设置为私密(要付费升级账号才行❌)
    • 3.1 取消/解绑fork的依赖关系
    • 3.2 设置私密

1.最终效果

在这里插入图片描述

2.操作步骤

2.1 前置操作

  1. Fork repo, https://github.com/academicpages/academicpages.github.io
  2. 进入fork的项目中,点击Setting,把名字改成你的github名字.github.io (yourname.github.io), 在这里插入图片描述
  3. 下载fork后的项目到本地,vscode打开准备开始编辑修改

2.2 按照自己需求修改内容

2.2.1 基本修改

_config.yml中的内容全部复制到_config.dev.yml中,后者当做备份,然后对前者进行修改。

主要就是name,baseurl和description个人描述等的修改,这里就不赘述了

参考:

  • Building an Academic Website
  • https://academicpages.github.io/markdown/
  • https://github.com/linfangjian01/linfangjian01.github.io
  • https://bryanyzhu.github.io/

2.2.2 额外添加知乎等社交网站链接

在这里插入图片描述
比如,要添加知乎和csdn的链接

  1. _config.yml中,author字段里,和上面一样,写上名称和对应的url链接地址
  2. _includes/author-profile.html中,照着下面的复制,然后修改,其中关于class字段的值,可以去网站https://fontawesome.com/search搜索
    在这里插入图片描述
  3. 建议看这个:https://www.w3schools.com/icons/icons_reference.asp,似乎这个网页只支持部分font awesome(font awesome 5)
  4. 然后填入对应的值即可,例如:
    在这里插入图片描述

参考:

  • Way to add blogger icon and link easily? #784
  • https://fontawesome.com/search,可以在这个网站找想要的icon的类名称

2.3 首页修改

在这里插入图片描述

  • 左侧的①,其实就是_config.yml文件的Site Author部分,其中关于个人头像,默认给的展位图是720720的png图像,因此自己的图像也尽量是720720的,可以在PPT里裁剪一下,然后用微信发送压缩一下
  • 上面的②,其实体现在_data/navigation.yml中,不想要的可以删除或者注释掉,对应的其实是各个子文件夹,例如:Publications对应的就是_publications文件夹,里面可以存放以md文件或者是html文件形成的内容
  • 上面的③,对应_pages/about.md文件,可以直接用markdown的一级标题二级标题的井号语法。

2.4 查看发布状态

根据https://docs.github.com/zh/pages/quickstart可知,一般5~10分钟就发布好了,但是实际上,查看Actions就可以看到对应的构建和发布状态,基本上都是1分钟左右

在这里插入图片描述

2.5 奇怪的错误(头像显示错误)

在这里插入图片描述
头像无法显示,链接多了一个空格
在这里插入图片描述
搜索定位问题到文件_includes/author-profile.html
在这里插入图片描述

导致这个空格出现的原因是,在添加知乎和csdn的链接后,在VScode中进行了保存,保存时默认对html文件进行了格式化,自动添加了这个空格。

根据如何解决vscode中保存后html自动格式化的问题可知,直接去首选项修改格式即可。在这里插入图片描述

2.6 本地调试

这部分内容我没有试过,来自:https://jayrobwilliams.com/posts/2020/06/academic-website/

如果想在本地调试,那么需要安装Jekyll,最简单的安装方法就是使用Bundler进行安装,Bundler是一个Ruby的包管理器,Jekyll是用Ruby写的

  • 如果是Windows,那么需要RubyInstaller
  • 如果是macOS,就可以直接用homebrew来安装了
    brew install ruby
    
  • 如果是linux,直接用包管理器安装Ruby,然后执行
    gem install bundler
    
  • 安装好bundler之后,就可以切换到项目目录下,执行
    bundle install
    
    这句话会读取 Gemfile文件并执行一些安装
  • 接下来就可以在本地启动一个jekyll服务,
    bundle exec jekyll serve
    
    然后去访问127.0.0.1:4000或者localhost:4000就可以看到网页了

2.7 后续修改

基本了解文件结构之后,想要再改什么,就直接参考下面这两个成品改就可以了

  • https://academicpages.github.io/publications/
  • https://bryanyzhu.github.io/

3. 项目设置为私密(要付费升级账号才行❌)

3.1 取消/解绑fork的依赖关系

如果是直接fork了原项目,那么这个项目是无法修改可见性为私密的。因此,可以使用github的虚拟助手:

  1. 点击链接:https://support.github.com/contact?tags=rr-forks&subject=Detach Fork&flow=detach_fork
  2. 选择Detach/Extract
    在这里插入图片描述
  3. 然后按照提示,输入要解除fork关系的repo url或者yourname/repo等
  4. 然后去自己github绑定的邮箱里,可以看到一个工单号在这里插入图片描述
  5. 点击,就可以看到这个工单的详情了,如果解绑操作完成,邮件也会有额外的通知的,等着就好了,我等了大概4个小时在这里插入图片描述工单处理好的显示 在这里插入图片描述

3.2 设置私密

  • 收到解绑后的通知,就可以去setting中把项目设置为不可见了。
  • BUT,如果想设置成不可见,那么github pages就要升级到专业版。。。
  • so,算了,还是保持公开吧

参考:

  • Delete fork dependency of a GitHub repository

其他参考(非academicpages的视线):

  • https://idratherbewriting.com/documentation-theme-jekyll/mydoc_publishing_github_pages.html
  • https://www.natalyakosenko.com/2017-12-23-how-to-switch-jekyll-theme-on-github-pages-site
  • https://github.com/poloclub/ganlab/tree/master
  • 利用github.io快速拥有自己的第一个免费个人主页
  • 如何在 GitHub 上搭建个人网站(github.io)

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

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

相关文章

【BA-BP分类】基于蝙蝠算法优化神经网络分类研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

RHCE---Shell基础 2

文章目录 目录 文章目录 前言 一.变量 概述 定义 自定义变量 环境变量 概述: 定义环境变量: 位置变量 "$*"会把所有位置参数当成一个整体(或者说当成一个单词 变量的赋值和作用域 read 命令 变量和引号 变量的作用域 变…

Java SOAP 调用 C# 的WebService

Java SOAP 调用 C# 的WebService,C# 的WebService方法的创建可以参考上一篇文章。IntelliJ IDEA Community Edition 2021.2.3的idea64.exe新建项目,导入需要的jar,代码如下: import org.apache.axis.client.Service; import org.…

微信小程序 picker-view 组件构建一个上下拖动选择器

picker-view是官方的一个选择器组件 支持多级选择 当然也可以单项选择 我们先来看看是个什么东西吧 简单写一个 wxml代码 <view><picker-view bindchange"pickerChange" style"width: 300rpx; height: 200rpx; font-size: 20px;"><!-- pic…

1.顺序表-头插、头删、尾插、尾删

文章目录 简介1.头插功能2.头删功能3.尾插功能4.尾删功能5.此程序共包含4个文件&#xff0c;2个.c文件和2个.h文件5.1 SeqList.h文件5.2 SeqList.c文件5.3 test.h文件5.4 test.c文件 6.测试结果6.1 测试尾插和尾删的运行结果6.2 测试头插和头删的运行结果 7.温馨提示 简介 本文…

实战:打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据)

实战&#xff1a;打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据) 目录 文章目录 实战&#xff1a;打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据)目录写在前面本次更新方案背景方案官…

C语言每日一题(17)老人的数目

力扣 2678 老人的数目 给你一个下标从 0 开始的字符串 details 。details 中每个元素都是一位乘客的信息&#xff0c;信息用长度为 15 的字符串表示&#xff0c;表示方式如下&#xff1a; 前十个字符是乘客的手机号码。接下来的一个字符是乘客的性别。接下来两个字符是乘客的…

测开不得不会的python之re模块正则表达式匹配

学习目录 正则表达式介绍 正则表达式的常用符号 python的re模块 findall()函数 finditer()函数 match()函数 search()函数 split()函数 正则表达式的介绍 Python 通过标准库中的 re 模块来支持正则表达式。 正则表达式作为高级的文本模式匹配、抽取、和搜索。简单地说…

Python OpenCV将n×n的小图拼接成m×m的大图

Python OpenCV将nn的小图拼接成mm的大图 前言前提条件相关介绍实验环境n \times n的小图拼接成m \times m的大图代码实现 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容&#xff0c;可点击进入Python日常小操作专栏、OpenCV-Python小…

独立企业签名和共享企业签名的区别

最近两天&#xff0c;小编注意到行业内的一则消息&#xff0c;市面上有好几本企业签名证书又被封了。毋庸置疑&#xff0c;这些肯定是共享的证书。理由很简单&#xff0c;市面上的用来做共享证书的企业签名&#xff0c;基本上都是不会限制应用类型以及签名的数量。据鲲分发平台…

计算机考研自命题(6)

1、C语言–奇数求和 1、使用函数求奇数和&#xff1a;输入一批正整数&#xff08;以零或负数为结束标志&#xff09;&#xff0c;求其中的奇数和。要求定义和调用函数 odd(n) 判断数的奇偶 性&#xff0c;当 n 为偶数时返回 0 &#xff0c;否则返回 1 。试编写相应程序。 /* 解…

yolov7改进优化之蒸馏(二)

续yolov7改进优化之蒸馏&#xff08;一&#xff09;-CSDN博客 上一篇已经基本写出来yolov7/v5蒸馏的整个过程&#xff0c;不过要真的训起来我们还需要进行一些修改。 Model修改 蒸馏需要对teacher和student网络的特征层进行loss计算&#xff0c;因此我们forward时要能够返回需…

Lua入门使用与基础语法

文章目录 目的基础说明开发环境基础语法注释数据类型变量流程控制函数 总结 目的 Lua是一种非常小巧的脚本语言&#xff0c;基于C构建并且完全开源&#xff0c;可以方便的嵌入到各种项目中&#xff0c;当然也可以单独使用。Lua经常被用在很多非脚本语言的项目中&#xff0c;用…

组件通信$refs | $parent |$root

父组件传值子组件用Props 子组件传值父组件用$emit 父组件直接还可以直接取子组件的值用$refs 父组件直接从子子组件中获取值$refs 不建议使用会增加组件之间的耦合度&#xff0c;一般用于第三方插件的封装 ref如果绑定在dom节点上&#xff0c;拿到的就是原生dom节点。 ref如…

【智能家居】

面向Apple developer学习&#xff1a;AirPlay | Apple Developer Documentation Airplay AirPlay允许人们将媒体内容从iOS、ipad、macOS和tvOS设备无线传输到支持AirPlay的Apple TV、HomePod以及电视和扬声器上。 网页链接的最佳实践 首选系统提供的媒体播放器。内置的媒体播…

VRPTW(MATLAB):蜘蛛蜂优化算法SWO求解带时间窗的车辆路径问题VRPTW(提供参考文献及MATLAB代码)

一、VRPTW简介 带时间窗的车辆路径问题(Vehicle Routing Problem with Time Windows, VRPTW)是车辆路径问题(VRP)的一种拓展类型。VRPTW一般指具有容量约束的车辆在客户指定的时间内提供配送或取货服务&#xff0c;在物流领域应用广泛&#xff0c;具有重要的实际意义。VRPTW常…

IPD集成产品开发TR技术评审详解

IPD&#xff08;Integrated Product Development&#xff09;集成产品开发是一种跨部门协同的、利用先进技术和管理方法来快速推出新产品并满足客户需求的开发模式。华为利用IPD也非常出名。在IPD集成产品开发的过程中&#xff0c;TR&#xff08;Technical Review&#xff09;技…

【力扣刷题】只出现一次的数字、多数元素、环形链表 II、两数相加

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 刷题篇 一、只出现一次的数字1.1 题目描述1…

1024程序员节特辑 | 深度解析C/C++内存管理(建议收藏!!)

1024程序员节特辑 | 深度解析C/C内存管理&#xff08;建议收藏&#xff01;&#xff01;&#xff09; 一、C/C内存分布1.1 相关例题 二、 C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free2.1 相关面试题 三、C内存管理方式3.1 new/delete操作内置类型3.2 new和…

通过字符设备驱动的分步实现编写LED驱动,另外实现特备文件和设备的绑定

头文件.h文件 #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct {unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int IDR;unsigned int ODR; } gpio_t; #define PHY_LED1_ADDR 0X50006000 #define PHY_LED2_ADDR 0X5000700…