创建个人网站(github pages)并将站点一键托管到Github

2023-05-16

创建个人网站(github pages)并将站点一键托管到Github

内容:使用网站生成器mkdocs将markdown文件生成wiki站点并挂载到github的流程总结
亮点:个人网站一键部署,简易文档直接渲染成网页挂载全流程
使用工具:mkdocs和git命令

1、mkdocs:

  MkDocs是一个快速、简单、完全华丽的静态站点生成器,用于构建项目文档。文档源文件基于python,以 Markdown 格式编写,并使用单个 YAML 配置文件进行配置,可以将生成的网站部署到任何地方。

2、mkdocs安装:

  linux系统采用命令行安装:

sudo apt-get install mkdocs

  由于mkdocs基于python,windows用户需要先确保自己有python环境和pip工具,如果没有自行到官网下载。

  windows用户同样到cmd终端通过运行以下命令安装:

pip install mkdocs

3、mkdocs版本检查:

mkdocs --version

  正常情况下,如果正确安装就可以看到mkdocs的版本信息

在这里插入图片描述

4、创建wiki

(1)新建项目:

  进入合适的文档位置,开始创建你的wiki

mkdocs new my_wiki

  其中my_wiki是项目名称,可以自行拟定

  进入新创建的项目

cd my_wiki

  项目创建成功后可以看到:

在这里插入图片描述

  多了新的文件夹my_wiki,且文件夹里自动生成了文件夹docs用于存放md文件,这里已经生成了示例文件index.md。另外my_wiki文件夹里还有用于渲染网页的配置文件mkdocs.yaml

(2)预览wiki

  在这儿其实我们就已经可以预览wiki页面啦,进入我们刚才创建的文件夹里,在终端输入命令:

cd my_wiki
mkdocs serve

  之后终端中会出现如下提示:

在这里插入图片描述

  复制提示的网址信息http://127.0.0.1:8000,粘贴到浏览器访问即可看到预览信息

在这里插入图片描述

  在终端中退出预览,可以开始编辑我们的个性化网站

ctrl+c

(3)个性化修改编辑

  编辑网站可以选择在原始的index.md按照markdown语法进行修改,也可以将自己已经编写好的md文档复制到该路径。当有多个md文件共存时,会在左上角并列显示,可以选择。

在这里插入图片描述

(4)插入图片

   如需插入图片,可以在docs文件夹下新建一个imags(名字可自定义)文件夹,在需要插入图片的位置按照markdown语法引用该图片的相对路径即可

![mkdocs](images/mkdocs.png)

  插入图片时一定要注意相对路径的书写语法,尤其是如果你是从已经写好的文件复制过来的,那么极有可能是会出现问题,显示不正常的,这里可能只显示一个小圆圈或者小方块。这大概率是相对路径书写错误。

  • 相对路径书写为绝对路径会导致找不到图片
  • 相对路径的斜杠和反斜杠书写错误,windows下是以斜杠方式查找路径而linux下是反斜杠,所以复制过来,系统不一样的要注意检查啦

在这里插入图片描述

  上图就是不注意相对路径的书写方式(斜杠/和反斜杠\用错)导致找不到图片报错。

  编辑完成之后就可以按照(2)预览wiki提供的方式进行界面预览啦。这样我们的wiki网站就在本地完成搭建啦

(5)美化界面

  有些小伙伴可能会觉得这个界面不够美观,这里mkdocs也提供了大量的模板素材可以供大家选择,大家可以自行查阅选择,这里给大家推荐使用material主题美化。

material是一个mkdocs主题,它的优点:

  • 谷歌的material设计风格。

  • 渐进式布局,可以适配各种设备访问。

  • 支持非常多的插件和扩展。

    使用方法如下:

    ①安装

    pip install mkdocs-material
    

    ②配置:打开配置文件mkdocs.yaml,加入如下内容

    theme:
      name: 'material'
    

    ③个性化设置:如果想进行网页左上角logo修改,颜色修改等可加入如下内容

    theme:
        name: "material"
        logo:
            icon: "mkwiki"
        palette:
            primary: "black"
            accent: "white"
        language: "zh"
    

  其中logo是设置左上角的显示,可以是文字、图片等,palette是设置主题颜色,常见的颜色都可以选择,language就是设置语言啦,这里选用中文

5、将本地wiki网站托管到github

(1)创建一个新的仓库:

示例: https://github.com/user_name/repository_name

在这里插入图片描述

  可以看到后面已经提示了我们如果需要远程push一个仓库到这里需要怎么做

在这里插入图片描述

(2)初始化本地仓库

  进入项目文件夹,初始化本地仓库

cd my_wiki
git init 

在这里插入图片描述
  可以看到这里会创建一个.git的文件夹,这里在my_wiki中看不到,如果想要看到需要选中显示隐藏文件夹

(3)添加本地的文件到本地仓库

git add .

  这里的.表示所有文件都加进去,这里正常是没有输出反馈的,只要不报错一般就是没问题已经添加成功

(4)提交仓库信息

  将本地修改保存到本地仓库中

git commit -m"first version"

在这里插入图片描述

(5)推送到远程仓库

  这里用到最初新建仓库时的提示信息,如果已经添加了readme文件不显示提示信息了也没有关系,仿造下面的地址修改为自己的仓库地址即可

git remote add origin https://github.com/Chenying2000/my_wiki.git
git push -u origin main

  注意这里也有可能是master,如果报错可以尝试修改为master再次运行

在这里插入图片描述

  由于github都是实名制维护,所以这里如果你是第一次进行仓库维护提交,在提交时他会报错问你的名字邮箱,如实填写即可。

报错信息:

*** Please tell me who you are.
Run  
git config --global user.email "you@example.com"  
git config --global user.name "Your Name" to set your account's default identity.
Omit --global to set the identity only in this repository. fatal:
unable to auto-detect email address (got 'Zero@zero.(none)')

处理方式:

git config --global user.email "gitHub邮箱"
git config --global user.name "gitHub用户名"

  这里我不是第一次提交,所以并没有报错,如果你报错了按照上面的方式处理即可。

  接下来正常push,它会问你的github账号密码。但是这里账号密码的方式在2021年已经废弃了,如果你依然输入账号密码它会报错"support for password authentication was removed on August 13,2021",让你通过token方式进行身份验证。

在这里插入图片描述

  此时将密码换成个人token粘贴进去,即可成功托管到github。

在这里插入图片描述

  没有token的小伙伴不要担心,后面会补充获取个人github的token方法。

(6)补充github的token验证方法

在这里插入图片描述

进去之后拉到最下面

在这里插入图片描述

在这里插入图片描述

  接下来填入基本信息后按需选择赋予该令牌的权限,需要注意的是,如果要远程push仓库进去,至少要勾选第一个选项,不然后面会没有权限。

在这里插入图片描述

  设置完之后会出现token, 请务必复制粘贴备份!! 这个以后你将无法查看第二次。

  到这里我们的个人令牌token就设置好了,接下来在push仓库时,照常输入用户名,但是密码要用token代替。

(7)渲染个人网页

  目前在github中它是以代码的形式存放的,那么怎么将网站部署到github上可以通过网址访问呢?接下来会用到mkdocs的一个部署工具。

  回到终端,进入自己的wiki项目(my_wiki),输入命令:

mkdocs gh-deploy

  即可一键部署,这里会再次要求输入github 的账号密码,还按照上面操作即可,将密码换成个人token,这里最终会生成一个网址,这个网址就是我们网页的访问地址啦(组成是github个人账号网址加仓库名)

在这里插入图片描述

  这里可能需要等上几分钟,一开始会出现404 not found,这个是正常现象,因为部署需要一定时间,稍等片刻再访问就好啦~部署结果预览如下图所示。

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建个人网站(github pages)并将站点一键托管到Github 的相关文章

  • 持续事务管理过程中的事件驱动

    比较官方的定义 xff1a 事件驱动是指在持续事务管理过程中 xff0c 进行决策的一种策略 xff0c 即跟随当前时间点上出现的事件 xff0c 调动可用资源 xff0c 执行相关任务 xff0c 使不断出现的问题得以解决 xff0c 防
  • Docker 应用实践-仓库篇

    目前 Docker 官方维护了一个公共仓库 Docker Hub xff0c 用于查找和与团队共享容器镜像 xff0c 界上最大的容器镜像存储库 xff0c 拥有一系列内容源 xff0c 包括容器社区开发人员 开放源代码项目和独立软件供应商
  • 浅谈网络中接口幂等性设计问题

    所谓幂等性设计 xff0c 就是说 xff0c 一次和多次请求某一个资源应该具有同样的副作用 用数学的语言来表达就是 xff1a f x 61 f f x 在数学里 xff0c 幂等有两种主要的定义 在某二元运算下 xff0c 幂等元素是指
  • 分布式系统中的补偿机制设计问题

    我们知道 xff0c 应用系统在分布式的情况下 xff0c 在通信时会有着一个显著的问题 xff0c 即一个业务流程往往需要组合一组服务 xff0c 且单单一次通信可能会经过 DNS 服务 xff0c 网卡 交换机 路由器 负载均衡等设备
  • 关于基于标准库函数与基于HAL库函数的stm32编程方式的差异

    在之前的博客中 xff0c 我已经使用过通过标准库函数和HAL库函数对stm32进行编译工作 xff0c 在这篇博文里 xff0c 我将对之前的进行总结 关于标准库函数 由于stm32系列有着很多不同的芯片 xff0c 其所使用的寄存器也大
  • curl wget pip git-clone yum apt-get的区别

    在linux中 xff0c 会常用到这些命令进行文件下载 xff0c 软件安装以及url访问 xff0c 但总是分不清楚什么时候用什么命令去下载或者安装和访问 这里将这几个命令的用法和区别进行一个说明 xff0c 方便大家学习和记忆 1 首
  • CSS 三种样式

    本节我们要学习一下 CSS 样式的几种形式 xff0c 在实际应用中向 HTML 中引入 CSS 样式的方法有三种 xff0c 分别是行内样式 内部样式 外部样式 我们会依次学习这三种方式的优缺点以及应用场景 xff0c 本节我们先来讲一下
  • JavaFx-报错WindowsNativeRunloopThread

    问题 解决办法 需要卸载掉JDK1 8 并且将环境变量中的 34 JAVA HOME 34 指向改成JDK11的目录 点赞 收藏 关注 便于以后复习和收到最新内容 有其他问题在评论区讨论 或者私信我 收到会在第一时间回复 在本博客学习的技术
  • Gradle-JDK版本问题导致运行失败

    问题 解决办法 因为当前我们使用jdk8去运行Gradle 但是Gradle意思是必须使用11 43 的jdk版本 下面这个问题就是因为 我们默认是 改为 点赞 收藏 关注 便于以后复习和收到最新内容 有其他问题在评论区讨论 或者私信我 收
  • 权力的游戏,我是小股东,咋办?

    案例简述 xff1a 某初创业公司 xff0c 有A B两个大股东 xff0c 股份份额一样大 xff0c 另外还有一个小股东C A股东负责市场和销售 xff0c B股东负责研发和技术 xff0c B曾经是C的上司 xff0c 将C带入公司
  • Java-高版本没有jre的问题

    解决方案 jre 文件夹是可以用命令自动生成的 xff0c 在window环境中 xff0c 进入jdk目录所在的文件夹 xff0c 运行下面命令就会自动 生成jre文件夹 bin span class token punctuation
  • Java-ForkJoinPool(线程池-工作窃取算法)

    文章目录 概述工作窃取算法工作窃取算法的优缺点使用 ForkJoinPool 进行分叉和合并ForkJoinPool使用RecursiveActionRecursiveTask Fork Join 案例Demo 概述 Fork 就是把一个大
  • JavaFx-缺少JavaFX运行时组件,需要这些组件才能运行此应用程序

    问题 报错 缺少JavaFX运行时组件 需要这些组件才能运行此应用程序 解决办法 解决办法额外添加一个类似启动类的java文件 然后将需要启动的文件以class添加到launch里就行 span class token keyword pu
  • Mysql-解决Truncated incorrect DOUBLE value xxx

    问题 出现这种问题一般来说就是多表操作的时候 使用的字段类型不一致导致的 查询除外 我们来看下真实案例 在hd user表中parentId是binint类型 而在hd user increment copy1 96 表中parentId是
  • Mysql-解决创建存储函数This function has none of DETERMINISTIC

    问题 当二进制日志启用后 xff0c 这个变量就会启用 它控制是否可以信任存储函数创建者 xff0c 不会创建写入二进制日志引起不安全事件的存储函数 如果设置为0 xff08 默认值 xff09 xff0c 用户不得创建或修改存储函数 xf
  • JPA-ids for this class must be manually assigned before calling save (使用数据库的自增)

    问题 Spring Data JPA ids for this class must be manually assigned before calling save id的生成错误 xff0c 在调用 save 方法之前 xff0c 必须
  • Java-gradle编译忽略警告

    使用gradle打包的时候出现好多警告 如何忽略大部分的警告呢 使用如下配置即可 tasks span class token punctuation span span class token function withType span
  • JPA-排除实体类里不存在于数据库的字段

    在实体类与数据库表建立映射关系时添加 64 Table 注解 当表中不存在实体类中的某个属性的时候 就需要用到 64 Transient 注解 如果不好使那么在 64 Transient基础上在添加 64 Column updatable
  • SpringBoot-快速搭建一套JPA

    文章目录 结构Mavenapplication yml实体类daoservicecontroller测试 结构 Maven span class token tag span class token tag span class token
  • IntelliJ IDEA-Gradle-SpringBoot搭建

    前提条件 IntelliJ IDEA Gradle教学 Gradle 全局镜像配置和优先使用Maven 将Gradle进行安装和配置 创建项目 配置项目设置 指定自己的gradle的安装位置 以及仓库位置 用户主目录 用户主目录 Gradl

随机推荐

  • 我的喜马拉雅FM开播啦!

  • SpringBoot-JAP-JpaSpecificationExecutor详解

    文章目录 SpringBoot JAP JpaSpecificationExecutor详解使用方法接口介绍自定义工厂 SpringBoot JAP JpaSpecificationExecutor详解 JpaSpecificationEx
  • SwitchHosts-快速切换Hosts

    SwitchHosts是一个管理 快速切换Hosts小工具 xff0c 开源软件 xff0c 一键切换Hosts配置 xff0c 非常实用 xff0c 高效 其主要功能特性包括 xff1a 下载地址 https github com old
  • Java-新年抽奖-消息自动化发送脚本

    我们公司7点半开年会 然后大约8点半开始抽奖抢 使用腾讯会议的方式进行发关键字消息然后截图方式抽奖 然而我还在地铁上 手速慢的我只抽到了3等奖小米耳机一个 然后我回家后迫不及待第一时间赶紧使用java写一个机器人脚本 疯狂发消息 一言难尽啊
  • Java多线程-CompletableFuture(链式)

    线程池这个大家都知道 xff0c 是为了提高效率 xff0c 可以类比生活 xff0c 如果开个店 xff0c 需要几个员工 xff0c 正常的操作都是雇佣员工 xff0c 而不是每天使用临时工 xff0c 这样用完就解雇掉 xff0c 对
  • Java-Javassist(字节码修改)

    文章目录 开篇Javassist 常用类Javassist 的使用依赖代码示例 如何实现类似 AOP 的功能 开篇 说起 AOP 小伙伴们肯定很熟悉 xff0c 无论是 JDK 动态代理或者是 CGLIB 等 xff0c 其底层都是通过操作
  • Java多线程-Pip管道

    管道的意思 就是向一个管子一样从一端到另一端 只支持单方向的数据传输 需要注意的不能在同一个线程使用管道否则会导致死锁的情况 发生和接收必须在不同线程 通过使用管道 xff0c 实现不同线程间的通信 xff0c 而无需借助于临时文件之类的东
  • 新版本代码自动生成(MybatisPlus-generator) 代码示例+问题解决

    虽然MybatisPlus官网上已经给出了新版本代码生成器的核心依赖和核心代码 xff0c 但对于没接触过的小伙伴还是比较困难上手 x1f62d xff0c 本文将展现如何使用MybatisPlus generator快速生成代码 目录 1
  • 虚拟机如何使用共享文件夹传文件

    项目场景 xff1a 在使用VMware平台 xff0c ubuntu操作系统时 xff0c ftp文件传输一直报错 问题描述 xff1a 尝试了多种 xff0c 更改电脑设置 xff0c 甚至重装虚拟机 xff0c 始终如下图报错 解决方
  • 强化学习入门DQN详解

    Deep Q Network 参考资料 xff1a B站莫烦 xff1a https www bilibili com video BV13W411Y75P spm id from 61 333 337 search card all cl
  • 某项目因为多次流标导致实际项目时间严重压缩,我该咋办?

    问题 xff1a 某政府项目 xff0c 三个月前就开始招标 xff0c 因各种原因 xff0c 流标三次 xff0c 导致时间拖太长 原计划一期工期三个月 43 xff0c 1月底上线 xff0c 但因为招投标影响直到一个月前签订了合同
  • ROS创建工作空间及功能包流程总结整理(python)

    ROS创建工作空间及功能包流程总结整理 xff08 python xff09 参考资料 xff1a B站赵虚左 xff1a https www bilibili com video BV1Ci4y1L7ZZ p 61 19 amp vd s
  • ROS自定义发布消息类型

    ROS自定义发布消息类型 xff1a 在 ROS 通信协议中 xff0c 数据载体是一个较为重要组成部分 xff0c 在上一案例中 xff0c ROS 中通过 std msgs 封装了一些原生的数据类型 比如 String Int32 In
  • ROS服务通信:自定义数据文件以及服务端和客户端代码编写流程及步骤详解

    ROS服务通信具体实现流程 demo xff1a 实现两个整型数相加求和 xff0c 客户端发送两个整型数 xff0c 服务端对其求和 服务通信也需要自定义服务数据类型 xff0c 即自定义srv文件 xff0c 该过程和自定义msg文件非
  • ROS TF静态坐标变换实现

    ROS TF静态坐标变换实现 法一 xff1a 编码实现 发布方代码实现 xff1a 创建功能包并添加依赖 catkin create pkg tf static roscpp rospy std msgs tf2 tf2 ros tf2
  • ROS:Gazebo导入自定义环境

    Gazebo导入自定义环境 之前的案例gazebo中导入的是一个空世界empty world xff0c 这里会介绍如何导入房屋数目等自定义的环境 xff08 1 xff09 启动 gazebo 打开构建面板 xff0c 绘制仿真环境 xf
  • ROS导航实现:SLAM建图(slam_gmapping)与保存(map_server)

    导航实现 xff1a SLAM建图 先安装相关的ROS功能包 安装 gmapping 包 用于构建地图 sudo apt install ros lt ROS版本 gt gmapping 安装地图服务包 用于保存与读取地图 sudo apt
  • ROS导航实现:amcl定位

    ROS导航实现 xff1a amcl定位 xff08 1 xff09 首先编写启动amcl的launch文件 xff0c 这里建议复制粘贴模板 xff0c 再修改相关的参数即可 xff0c 步骤如下 xff1a 主目录下进入amcl文件 r
  • ROS导航实现之路径规划

    导航实现之路径规划 move base 功能包提供了基于动作 action 的路径规划实现 xff0c move base 可以根据给定的目标点 xff0c 控制机器人底盘运动至目标位置 xff0c 并且在运动过程中会连续反馈机器人自身的姿
  • 创建个人网站(github pages)并将站点一键托管到Github

    创建个人网站 xff08 github pages xff09 并将站点一键托管到Github 内容 xff1a 使用网站生成器mkdocs将markdown文件生成wiki站点并挂载到github的流程总结 亮点 xff1a 个人网站一键