Docsify 配合 Github Pages 搭建一个自己的云笔记

简介: Docsify 配合 Github Pages 搭建一个自己的云笔记



简单说了如何使用 Docsify 将自己的写的 markdown 文件变成可浏览的网站,但那只是在本地,只能自己看到,这显然是无法满足我们的。

这次我们来说说如何将他们部署到可访问的网站上的,你可能此刻就在我部署的 github pages 上阅读本篇文章。

当然使用 gitee pages 也是可以的,两者的操作几乎一致。

直入主题:

  • 在 github 上创建一个仓库
  • 将 本地文件上传至 github 仓库
  • 通过 github pages 部署
  • 访问测试

🪐创建一个 github 仓库

1704465024327.jpg

🌅将本地文件 push 至 github 仓库

将我们本地的 docsify 初始化的项目及写好的文章等,push 至 github 仓库。

1704465040003.jpg

我的本地目录就是这样的,docs 就是我用docsify 创建的项目,稍后我们就是将这整个文件夹上传至 github 。

git init ## 初始化一个 git 本地仓库
git add file ## 添加需要 push 的文件或文件夹 
git commit -m "first commit" ## 提交到暂存区
git branch -M main  ## 将本地的分支名改为 main 因为现在 github 的主分支名是 main 而不是master
git branch ## 此命令可查看本地名称
git remote add origin https://github.com/ningzaichun/nzc_blog.git ## 关联远程仓库
git push -u origin main ## push 至远程仓库

1704465049259.jpg

push github 上的状态

1704465051841.jpg

🌝使用 github pages 部署

1704465054855.jpg

1704465076181.jpg

1704465078877.jpg

点击下面的 choose a them 可以选择自己的发布样式

1704465083731.jpg

之后还会跳转一下,直接点击就好了,忘记截了,最后反正记得 save 就好.

1704465115538.jpg

会弹出这样的一个提示消息,证明就完事啦.

1704465119565.jpg

回到code页面会出现一个这样的.

1704465121603.jpg

gh-pages 已经在五分钟前 push 了.当我框起来的那个地方,变成 active就表示已经部署完成,可以进行访问了.

这点有一些延迟,稍等一会刷新一下即可.

我们的链接在哪里勒?

直接点击这个 github pages进去是这样一个界面.

1704465125735.jpg

直接点击这个 view deployment 就可以访问啦.

🌁关于 Push 更新问题

就是你将你本地的更新推送上去了,但是你访问 github pages 仍然是你未更新前的那个页面。

可能产生的原因:

  1. 本身 github pages官方文档有说,可能会存在延迟之类的问题。
  2. 可能是浏览器缓存问题,可以试着清除再访问。
  3. 可能是github server所在时区的问题,这点是在google搜到的。

还可以尝试以下解决方法,直接在网页版上更改一下文件的空格,回车之类的,提交commit,再次触发更新。

🏂自言自语

花费了一些时间,写了这几篇文章,虽然都是一些非编程类的东西,但是对于我自己仍然是新知识,是让我有收获的。

在使用 github pages 和 docsify 的过程中,其实还了解到很多其他的知识,如 CDN 加速、DNS 污染、计算机如何通信、解析等等关于计算机网络的一些知识。

耐心期待我们下一次的相见吧。


目录
相关文章
|
6月前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
|
6月前
|
Java 程序员 Docker
爱了!Alibaba技术官甩出的SpringCloud笔记,GitHub已标星81.6k
阿里巴巴,作为国内互联网公司的Top,算是业界的标杆,有阿里背景的程序员,也更具有权威性。作为程序员,都清楚阿里对于员工要求有多高,技术人员掌握的技术水平更是望尘莫及。所以,大厂程序员的很多经验也都值得我们借鉴和学习,在一定程度上确实能够帮助我们“走捷径”。
|
11月前
|
设计模式 运维 并行计算
GitHub上的677页Java性能优化笔记火了!竟是阿里调优专家肝出的
Java是目前应用最为广泛的软件开发平台之一。随着Java及Java社区的不断壮大,Java早已不再是一门简单的计算机语言了,它更是一个平台、一种文化、一个社区。
|
5天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
11 2
|
22天前
为什么 GitHub Pages 的文章标题不能以 @ 开头?
本文记录了一个 GitHub Pages 博客网页上文章标题以 `@` 开头导致的问题,并分析了原因,提供了解决方法。
41 0
|
3月前
GitHub——使用GitHub Pages生成在线文档
GitHub——使用GitHub Pages生成在线文档
23 0
|
5月前
|
开发工具 git
【笔记】十分钟学会正确的github工作流,和开源作者们使用同一套流程
【笔记】十分钟学会正确的github工作流,和开源作者们使用同一套流程
83 11
|
6月前
|
缓存 网络协议 Windows
FFmpeg开发笔记(六)如何访问Github下载FFmpeg源码
在国内访问GitHub不稳定时,可以采取三种解决方法。首先,通过网站(<https://ping.chinaz.com/github.com>)找到快速响应的GitHub IP,将其添加到本地hosts文件,然后刷新DNS缓存以正常访问。其次,使用代下载网站如(<https://d.serctl.com/>)下载GitHub上的压缩包。最后,可从国内镜像站点,如码云(<https://gitee.com/mirrors/ffmpeg>),下载FFmpeg等开源代码。这些方法有助于绕过访问限制,确保FFmpeg学习与开发的顺利进行。
143 3
FFmpeg开发笔记(六)如何访问Github下载FFmpeg源码
|
6月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
169 0
|
11月前
|
JavaScript 开发工具 git
保姆级教程:从零构建GitHub Pages静态网站(下)
保姆级教程:从零构建GitHub Pages静态网站(下)
319 0