Github 创建自己的博客网站

参考pku大佬视频制作,附上B站视频:【GitHub Pages 个人网站构建与发布】

同时还参考了:【Python版宝藏级静态站点生成器Material for MkDocs】

GitHub Pages 介绍

内容参考:GitHub Pages - 杨希杰的个人网站 (yang-xijie.github.io)

Github pages 可以快速部署静态网站,你可以在 GitHub 的每一个仓库创建一个对应的静态网站,存放说明或文档。

通俗来说,就是白嫖GitHub的服务器来建站,GitHub Pages,与Git管理超搭,相当稳定的,而且有全球的CDN加速,也没被墙,我只能说真爽。

这里一定要注意:个人用户只有两种 GitHub Pages 网站的类型:一种是 user(用户),一种是project(项目)。

这里有介绍:GitHub Pages

user类型的网址只能对应唯一的用户,而且仓库的名字必须为 <username>.github.io,对应的网址为 http(s)://<username>.github.io

project类型的仓库则可以新建很多,只要仓库的名字不为 <username>.github.io 即可,对应的网址为 http(s)://<username>.github.io/<repository>

根据这两种类型,建站可以有两种策略:

  • 只创建一个user仓库<username>.github.io,所有的文章都放在这个仓库中。
    • 优点:只有一个仓库维护方便
    • 缺点:你的个人账户再新建project类型的仓库大概率会与这个user仓库冲突。但我感觉一般对于个人来说 一个仓库也完全够用。
  • 不创建user仓库,需要静态网站时新建多个project类型的仓库
    • 优点:仓库不限量 仓库之间互不冲突 可以使用不同的框架
    • 缺点:多个仓库维护困难

GitHub Pages创建(这部分可以不进行)

这部分参考Github官方文档:GitHub Pages

注意:这节是说的pages的创建,看个流程就可以了,如果要使用下一章节的Mkdocs主题,可以只创建好仓库。

创建仓库

创建一个名为username.github.io的新公共repos。其中username就是你在GitHub上的用户名。

注意:如果repos的第一部分与你的用户名不完全匹配,那么它将无法工作,因此确保正确使用。

clone repos

创建好仓库后,将仓库clone到本地。

git clone https://github.com/username/username.github.io

这里的username及的更换成你自己的。

编辑、push

git add --allgit commit -m "Initial commit"git push -u origin main

关于git操作可以参考其他博客,也可以参考我的记录:http://t.csdn.cn/AhjXg

Mkdocs

介绍完Github pages 后还有模板介绍,对于我这种前端小白来说,写一个前端UI能够杀了我,所以我采用了佬使用的模板Mkdocs。具体怎么使用可以参考以下部分:

Installation - Material for MkDocs (squidfunk.github.io)

Publish a Website with Material for MkDocs and GitHub Pages - 杨希杰的个人网站 (yang-xijie.github.io)

只要按照上述过程来,就可以成功创建一个属于自己的博客。

注意,这些博客全部都是Makedown格式的,只需要git md文件就行,github会自动将其部署为HTML文件,所以说对我这种小白来说,非常的方便。

mkdocs部署过程

这部分记录了我自己的部署过程,可以参考本节开始的url,也是可以的。

创建project

mkdocs new mkdocs-sitecd mkdocs-site

添加github操作 Add GitHub Workflow

使用GitHub Actions,您可以自动部署您的项目文档。在仓库的根目录下,创建一个新的GitHub Actions工作流,例如:. GitHub /workflows/PublishMySite.yml文件,

$ mkdir .github
$ cd .github
$ mkdir workflows
$ cd workflows
$ vim PublishMySite.yml

如果vim用不了,就自己建一个文件。

在yml文件中复制粘贴如下内容:

name: publish site
on: # 在什么时候触发工作流push: # 在从本地main分支被push到GitHub仓库时branches:- mainpull_request: # 在main分支合并别人提的pr时branches:- main
jobs: # 工作流的具体内容deploy:runs-on: ubuntu-latest # 创建一个新的云端虚拟机 使用最新Ubuntu系统steps:- uses: actions/checkout@v2 # 先checkout到main分支- uses: actions/setup-python@v2 # 再安装Python3和相关环境with:python-version: 3.x- run: pip install mkdocs-material # 使用pip包管理工具安装mkdocs-material- run: mkdocs gh-deploy --force # 使用mkdocs-material部署gh-pages分支

现在,当一个新的提交被推送到主分支或主分支时,静态站点将被自动构建和部署。推送您的更改以查看工作流程的运行情况。 

Github 

将内容git到github上

$ git init
$ git add .
$ git commit -m "init"

GitHub > New Repository

GitHub > Repository > Settings > Actions > General >

  • Actions permissions: Allow all actions and reusable workflows
  • Workflow permissions: Read and write permissions
  • Click Save
$ git remote add origin 你自己的clone地址
$ git branch -M main
$ git push -u origin main

GitHub > Repository > Settings > Pages > Source > gh-pages > Click Save

如果出现404,那就等一下,让子弹飞一会。

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

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

相关文章

【CSS】ios上fixed固定定位的input输入框兼容问题

需求 &#xff1a; 实现一个简单的需求&#xff0c;上方是搜索框并且固定顶部&#xff0c;下方是滚动的内容list 问题 : 若如图上方使用固定定位, 下方用scroll-view, 在安卓上是没有问题的, 但是发现ios上会出现兼容问题 : 问题1: 当content list滚动到中间时再去搜索, 展…

c语言每日一练(1)

前言&#xff1a; 每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;暑假时三天之内必有一更&#xff0c;到了开学之后&#xff0c;将看学业情…

解决Springboot+VUE项目部署出现的跨域问题

自己写了一个项目&#xff0c;写好了&#xff0c;发现不会部署&#xff0c;然后到处查资料&#xff0c;最终终于部署好自己写的系统&#xff0c;系统为前后端分离项目。需要分别部署在同一个服务器docker中&#xff0c;配置不同得端口隐射&#xff0c;部署得过程中主要是跨域问…

你值得拥有——流星雨下的告白(Python实现)

目录 1 前言 2 霍金说移民外太空 3 浪漫的流星雨展示 4 Python代码 1 前言 我们先给个小故事&#xff0c;提一下大家兴趣&#xff1b;然后我给出论据&#xff0c;得出结论。最后再浪漫的流星雨表白代码奉上&#xff0c;还有我自创的一首诗。开始啦&#xff1a; 2 霍金说…

Oracle锁的学习

Oracle数据库中的锁机制 数据库是一个多用户使用的共享资源。当多个用户并发地存取数据时&#xff0c;在数据库中就会产生多个事务同时存取同一数据的情况。若对并发操作不加控制就可能会读取和存储不正确的数据&#xff0c;破坏数据库的一致性。 在数据库中有两种基本的锁类…

spark history网络流量占用高问题记录

生产环境遇到一台机器网络流量占用高告警 由于监控只有机器总的网络流量&#xff0c;没有具体进程的 于是只能登陆服务器&#xff0c;安装nethogs&#xff1a;yum install nethogs 然后执行nethogs命令查看进程流量 观察到主要是spark history server这个进程占用流量高(最高…

docker-compose搭建redis服务

docker-compose搭建redis服务 1.首先准备所需文件 mkdir data touch redis.conf touch docker-compose.yaml # 这个结构 [rootiZbp16ukkrjo2m3jyyo3tfZ redis]# ls data docker-compose.yaml redis.conf2.编辑redis.conf bind 0.0.0.0 port 6379 # tcp-backlog 511 timeou…

puppeteer监听response并封装为express服务调用

const express require(express); const puppeteer require(puppeteer); const app express(); let browser; // 声明一个全局变量来存储浏览器实例app.get(/getInfo, async (req, res) > {try {const page_param req.query.page; // 获取名为"page"的查询参数…

openCV图像读取和显示

文章目录 一、imread二、namedWindow三、imshow #include <opencv2/opencv.hpp> #include <iostream>using namespace std; using namespace cv;int main(int argc,char** argv) {cv::Mat img imread("./sun.png"); //3通道 24位if (img.empty()) {std:…

bitbucket ssh登录提示 port 22: Operation timed out

bitbucket ssh登录失败 执行命令 ssh -T -vvv gitbitbucket.org结果提示&#xff1a; ssh: connect to host bitbucket.org port 22: Operation timed out原因&#xff1a;使用了22端口其实并不稳定。配置的其实如果连接到443端口更稳定。修改 ~/.ssh/config &#xff0c;增…

Alchemy Catalyst 2023 crack

Alchemy Catalyst 2023 crack Alchemy CATALYST是一个可视化本地化环境&#xff0c;支持本地化工作流程的各个方面。它帮助组织加快本地化进程&#xff0c;比竞争对手更快地进入新市场&#xff0c;并为他们创造新的收入机会。 创建全球影响力 高质量的产品和服务翻译对跨国组织…

【980. 不同路径 III】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 在二维网格 grid 上&#xff0c;有 4 种类型的方格&#xff1a; 1 表示起始方格。且只有一个起始方格。2 表示结束方格&#xff0c;且只有一个结束方格。0 表示我们可以走过的空方格。-1 表示我们无…

windows创建占用特定端口程序

默认情况下&#xff0c;远程桌面使用的是3389端口。如果您想将远程桌面端口更改为8005&#xff0c;以达到模拟程序占用端口8005的情况&#xff0c;可以执行以下操作&#xff1a; 如执行以下命令&#xff0c;则1&#xff0c;2&#xff0c;3步相同操作可以跳过&#xff0c;直接往…

二进制安装K8S(单Master集群架构)

目录 一&#xff1a;操作系统初始化配置 1、项目拓扑图 2、服务器 3、初始化操作 二&#xff1a; 部署 etcd 集群 1、etcd 介绍 2、准备签发证书环境 3、master01 节点上操作 &#xff08;1&#xff09;生成Etcd证书 &#xff08;2&#xff09;创建用于存放 etcd 配置文…

在VUE中使用websocket

websocket概念 1、WebSocket是HTML5下一种新的协议&#xff0c;在单个TCP连接上进行全双工通信&#xff1b; 2、Websocket是一个持久化的协议&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff0c;并进行双向数据传输&…

传球游戏

题目描述 上体育课的时候&#xff0c;小蛮的老师经常带着同学们一起做游戏。这次&#xff0c;老师带着同学们一起做传球游戏。 游戏规则是这样的&#xff1a;n个同学站成一个圆圈&#xff0c;其中的一个同学手里拿着一个球&#xff0c;当老师吹哨子时开始传球&#xff0c;每个…

链表OJ题讲解2

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大家三连关注&#xff0c;一起学习&#xff0c;一起进步&#…

策略模式(C++)

定义 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换((变化)。该模式使得算法可独立手使用它的客户程序稳定)而变化(扩展&#xff0c;子类化)。 ——《设计模式》GoF 使用场景 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多…

深入理解Streamlit中的按钮行为(四):示例与最佳实践

文章目录 1 前言&#x1f680;2 Streamlit中if st.button()的使用时机 &#x1f3af;&#x1f4a1;3 按钮的逻辑3.1 通过按钮显示临时消息的常用逻辑 &#x1f4e2;&#x1f4a1;3.2 状态保留按钮 &#x1fa84;&#x1f518;3.3 切换按钮 &#x1f504;&#x1f518;3.4 控制流…

Tensorrt 原生Activate 算子讲解

Tensorrt operators docs&#xff1a; Activation Apply an activation function on an input tensor A and produce an output tensor B with the same dimensions. import numpy as np from cuda import cudart import tensorrt as trt # 输入张量 NCHW nIn, cIn, hIn, wI…