Github 创建自己的博客网站

这篇具有很好参考价值的文章主要介绍了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 --all

git 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-site

cd 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:
      - main
  pull_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,那就等一下,让子弹飞一会。文章来源地址https://www.toymoban.com/news/detail-628189.html

到了这里,关于Github 创建自己的博客网站的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 薅github的羊毛-用pages建自己的博客或资源站 - 博客工具 - 2/2

    笔者调研了好多个静态博客工具,最后锁定Hexo了,但不等于其他博客不行。我只吐槽两个 Hugo - 难用 Gridea - 简直就是骗钱的,我交钱用不了 theme没有链接,同步也同步不了,估计以前是可以,现在经营不下去,挂在寻利用长尾效应薅点钱 - 笔者最近计划给孩子搞一个静态博客

    2024年02月04日
    浏览(52)
  • 一步步在 github pages 上用 jekyll 搭建属于自己的博客

    我的专业与互联网没有太大关系,接触博客还是工作以后的事情。随着工作的经验增加,总想将自己的所思所得记录下来,毕竟,好记性不如烂笔头。 开始是将自己的总结在本地保存,但是本地有一个劣势,就是不能随时随地的查看,最重要的是,不能随时随地的装X,所以

    2024年01月20日
    浏览(57)
  • 杂货铺 | 使用 Github Pages 和 Hexo 搭建自己的独立博客

    node.js安装,在安装时会自动安装npm。 Git安装,点击此处访问官网,按需下载对应版本,默认安装即可。 检验安装是否成功: Win + R 打开运行窗口,输入 cmd ,输入如下命令,有相应版本信息显示则安装成功。 若不正确可以卸载软件重新安装,此外若安装成功,在桌面右键鼠

    2024年04月27日
    浏览(34)
  • 如何使用Jekyll在GitHub Pages上搭建网站(个人博客)

    本文很长,建议使用侧边栏进行跳转。 Jekyll 是一个基于 Ruby 语言的,用于搭建静态网站的生成器,主要用于搭建博客网站(官方自己的介绍为:Jekyll is a blog-aware, static site generator in Ruby)。但是虽然是静态网站,但是可以实现一些使用数据库的动态网站的效果和功能,是很不

    2024年02月06日
    浏览(81)
  • 环境配置|GitHub——如何在github上搭建自己写的网站

    下面简单地总结了从本地的网页文件到在github服务器上展示出来即可以通过网络端打开的过程: (以下可能会出现一些难点,照着做就可以了,由于笔者是小白,也不清楚具体原理是什么,希望有一天成为大神的时候能轻松驾驭) 在这里笔者以自己的“仿LOL官网”项目为例

    2024年02月04日
    浏览(43)
  • github pages 用法详解 发布自己的网站

    github pages 基础用法 URL 规则 假设你的 github 帐号为 mygithub,需要发布的仓库名为 myrepo,那么 pages 的 URL 为: https://mygithub.github.io/myrepo 添加内容 用任意编辑器写好(或者生成)标准的网页内容,push 到 myrepo 即可。和大部分 web 服务一样,pages 会到指定目录里面寻找 index.html

    2024年02月13日
    浏览(42)
  • 从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站

    可能你也想拥有一个属于自己的博客网站,但是自己搭个博客网站不知道从何下手,而且还需要租个云服务器,虽然一个月只需几十块钱,但是我们的博客网站是要长期维护的,日积月累也要不少钱呢。 现在我就教你用 VuePress2 + GitHub Pages 搭建个人博客网站,不用服务器,完

    2024年02月04日
    浏览(53)
  • github.io创建个人网站

    github.io介绍 github.io 是 GitHub 提供的免费 Pages服务,不需要购买云服务器和域名,就可以将自己的项目、博客在互联网上进行共享。 使用步骤 新建仓库 创建一个新的仓库,仓库名设置为如下格式:账户名 .github.io 添加文件 创建后,提示你导入项目,或者创建文件。

    2024年02月09日
    浏览(45)
  • 零基础!手把手教你使用VuePress2 + GitHub Pages免费搭建个人博客网站

    目录 介绍 VuePress2 pnpm 搭建 安装 Node.js 安装 pnpm 安装 VuePress step 1:创建文件夹并进入该目录 ​编辑 step 2:初始化项目 step 3:安装VuePress step 4:在 package.json 中修改 scripts step 5:创建目录和配置文件 step 6:将默认的临时目录和缓存目录添加到 .gitignore 文件中 step 7:启动服务

    2024年03月13日
    浏览(72)
  • GitHub中如何创建自己的存储库?(图文详解)

    目录 一、创建自己的存储库? 二、详细介绍 1、Repository name 2、Descriptioin(optional) 3、Public、Private 4、Initialize this repository with 5、Add a README file 6、Add .gitignore 7、Choose a license 三、完成创建存 四、新建文件搭建 1、创建新文件 2、上传文件 五、如何删除储存库 六、GitHub如何恢

    2024年02月02日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包