当前位置： 首页 > news >正文

网站域名查主机名,赣州市官网,wordpress的分类目录,上海某家具网站建设方案自动开了这个号以后#xff0c;陆陆续续写了很多干货文章#xff0c;一方面是可以帮助自己梳理思路#xff0c;另一方面也方便日后查找相关内容。 但是#xff0c;我想检索某个关键词是在之前哪篇文章写过的#xff0c;就有点捉急了。CSDN 还好#xff0c;可以检索到相关…自动开了这个号以后陆陆续续写了很多干货文章一方面是可以帮助自己梳理思路另一方面也方便日后查找相关内容。 但是我想检索某个关键词是在之前哪篇文章写过的就有点捉急了。CSDN 还好可以检索到相关标题知乎的检索就太差了连标题都无法精准。 于是一个需求出现了把之前所有写过的文章扒下来做成一个自己的知识库然后发布出去方便自己也共享他人。 如何实现经过一番调研最终确定了如下方案 本地搭建Typro PicGo 图床部署上线Docsify GitHub Pages 等托管平台。 本次分享将记录整个实现过程以及踩过的坑文章略长全程干货希望给有类似需求的小伙伴一点帮助。 目录 1. 本地知识库搭建1.1 Typora 安装和使用1.2 图床选择和使用1.3 PicGo 安装和使用1.3.1 GitHub 图床1.3.1 Gitee 图床不推荐1.3.3 自定义图床1.3.4 图床测试1.3.5 PicGo 集成到 Typora 2. 在线知识库部署2.1 docsify 安装和使用2.1.1 docsify 安装2.1.2 docsify 启动2.1.3 docsify 基础操作2.1.4 docsify 插件配置 2.2 远程仓库建立2.2.1 本地 git 初始化2.2.2 关联远程仓库 2.3 部署工具选择2.4 网站部署2.4.1 Gitee Pages2.4.2 GitHub Pages2.4.3 Netlify2.4.4 Zeabur 写在最后 1. 本地知识库搭建 由于平时的文章都是用在线的 Markdown 工具编写本地 Markdown 编辑器自然首推 Typora。 1.1 Typora 安装和使用 首先前往官网上找到对应你系统的版本: typora官方中文站。 Typora 的界面简洁明了你可以专注于你的文本而不是复杂的排版相信你编写 Markdown 文本一定非常愉快。 关于 MarkDown 中的图片一般都是 我们需要首先保存到本地为此可以先在 Typora 中进行一番设置依次点击 文件 - 偏好设置 - 图像选择 复制图片到./assets文件夹就可以自动将图片保存到当前文件夹下的 ./assets 目录下。 右上角支持知识库检索实时渲染生成文章目录大纲 如果你只是需要一个本地知识库Typora 就完全可以满足所需下面的内容可以不用看啦。 但是如果你还想把知识库部署上线接下来就会遇到一个问题图片安放在哪 1.2 图床选择和使用 互联网上的图片一般都会存放在专属服务器上尤其是当你的图片数量规模变大以后你在网页上看到的任何一张图片背后其实就是一条 url。 图床 就是专门用来存放图片的不过目前市面上可以选择的 图床 可太多了到底该选择哪一个呢 网上看了很多小伙伴的解决方案下面我将先介绍下实测用过的一些图床以及踩过的坑最后给出我最终的选择 Gitee 图床个人仓库最大支持 500M现在不可以使用了因为 Gitee 的图片开启了防盗链无法在你的网页中加载进来。GitHub 图床除了国内访问速度是个问题外非常完美而且个人仓库最大支持 1G 容量。访问慢的问题可以通过镜像的方式解决。但后面遇到的一个问题是PicGo 上自动上传时如果是同名文件就会上传失败难以实现自动化。这个问题的解决方案是在 PicGo 中设置上传时自动以时间戳命名不过这样会产生大量重复图片1G 空间怕是很快就爆了。七牛云等云存储平台七牛云虽然有 10G 免费空间但需要有在国内备案的域名必须要买域名服务器否则一个月之后就无法使用它的测试域名。个人开发者的图床都有一些限制没找到合适的 https://tu.my/可以手动上传单次上传不超过100张。https://imgchr.com/每小时限制 8 张。 国内云厂商的对象存储阿里云/腾讯云等免费试用后需要付费国外云厂商的对象存储 Google 云的对象存储免费空间 5 G每月 1G 的出站流量Oracle 云的对象存储免费空间 20 G每月限制 50000次 API 调用需要把桶设置为公共的才可以访问而且同名文件会自动替换上传速度很快访问速度也还可以部分有延时。Cloudflare R2对象存储免费空间 10 G上传等 A 类操作每月100万次下载等 B 类操作每月1000万次需要绑定一张外币信用卡。
对比来看还是 Oracle 云的对象存储免费空间更大而 Cloudflare R2 的调用次数更加慷慨最终先选择了 Oracle 云的对象存储作为我的图床。 当然在正式使用之前你还需要验证下选择的图床得到的 url 是否开启了防盗链。 怎么验证 给大家分享一个最简单的方式如下图所示随便找一个在线的 markdown 编辑器然后按照图片格式输入看看能否在右侧渲染出来 选择好图床后最好是配合 PicGo 来使用接下来我们一起看下这款 Typora 排版工具的完美搭档。 1.3 PicGo 安装和使用 PicGo 是一个开源的图床工具加上插件可以完美适配各种图床。大家可以前往官方仓库的 Releases 中下载https://github.com/Molunerfinn/PicGo/releases。 界面非常简单你只需要根据你选择的图床进行适配就可以了下面介绍几个常见图床的使用 1.3.1 GitHub 图床 首先需要在你的 GitHub 上新建一个仓库分支名在 GitHub 上新建仓库时默认为 main必要时调整为你新建的分支名。 下面的 设定 Token 在哪获取 在你的 GitHub 主页依次选择【Settings】-最下方的【Developer settings】-【Personal access tokens】-【Generate new token】填好名称过期时间最长可以选择一年然后点击【Generate token】生成一个 Token。 Token 只会显示一次先保存下来再配置到 PicGo 中。 最后的设置自定义域名其作用是加速 GitHub 图片的访问在图片上传后PicGo 会按照(自定义域名储存路径图片名)的方式生成访问链接返回给你。 我们来总结下上面几个字段的填法 设定仓库名按照 用户名/项目名 的格式填写设定分支名main or master设定Token粘贴上面生成的 Token指定存储路径想要储存的路径如 imgs会在你项目下创建一个名为 imgs 的文件夹图片将会储存在此文件夹中。设定自定义域名有两种方式可以实现加速。 使用 jsDelivr 加速设置为 https://cdn.jsdelivr.net/gh/用户名/项目名上传完毕后通过 https://cdn.jsdelivr.net/gh/用户名/项目名/图片名 访问上传的图片。使用镜像加速设置为 https://mirror.ghproxy.com/https://raw.githubusercontent.com/用户名/项目名/master/。
1.3.1 Gitee 图床不推荐 PicGo 本身不支持 Gitee 图床因此需要在 PicGo 中安装插件。搜索框中搜一下 gitee然后任选一个即可。 要注意的是插件安装需要依赖 node.js 环境这个需要前往 node.js 官网下载对应操作系统的进行安装。Windows 的比较简单下载完成之后双击安装包即可进行安装。安装完成之后打开 cmd 输入 node -v 验证一下输出版本号就是安装成功。 安装完成后在图床设置中就可以看到 gitee 的选项配置和上面的 GitHub 图床类似不再赘述了。 不过因为 Gitee 的图片开启了防盗链所以 Gitee 图床还是放弃使用吧。 1.3.3 自定义图床 如果你的图床不在 PicGo 官方支持之列那么就需要安装另外一个插件。 什么插件 插件设置那里搜索 web-uploader 进行安装即可安装完成后在图床设置中就可以看到 自定义Web图床 的选项根据你图床提供的 API 进行填写即可。 1.3.4 图床测试 最后设定好之后来到上传区选择你的图床上传一张图片测试一下是否能上传成功。 1.3.5 PicGo 集成到 Typora PicGo 的图床准备好之后我们需要在 Typora 中进行一番设置依次点击 文件 - 偏好设置 - 图像找到最下面的 上传服务选择 PicGo(app)路径选择你的安装地址最后点击验证图片上传选项验证一下能否上传正常。 如果上传失败了怎么办 PicGo 的上传日志一般保存在C:\Users\12243\AppData\Roaming\picgo\picgo.log可以前往查看具体的报错信息。 然后我们到上面的 插入图片时…选择 上传图片这样你每次在文档中插入图片它会自动给上传到图床然后返回一个 url 插入到文档中非常方便。 当然也可以在你的文档中依次选择 格式 - 图像 - 上传所有本地图片就会把文档中所有图片一键上传到图床。 至此你的本地知识库基本就搭建完成了后续往里增加内容将会变得 so easy~ 2. 在线知识库部署 如何把本地的知识库部署上线和你的小伙伴分享 前几天我们一起盘点了小白搭建静态网站都有哪些建站工具 今天这个需求不就用上了。 那么多建站工具我该选哪个呢 对于知识库这样一个简单需求当然首选 docsify。为啥? 和 GitBook 以及 Hexo 等建站工具不同的是它会智能地加载和解析 Markdown 文件而无需生成 html 文件所有转换工作都在运行时。此外我认为 Docsify 最大的优点有以下几个方面 无需安装任何依赖无需编译完全运行时驱动。界面清新看着就很爽多个主题可供选择插件生态丰富 2.1 docsify 安装和使用 官方文档https://docsify.js.org/#/zh-cn/ 2.1.1 docsify 安装 docsify 安装需要依赖 node.js相信你在上一步按照 PicGo 插件时已经装好了 node.js。 准备好 node.js 环境后在终端中采用 npm 一键安装 npm install -g docsify-cli上述指令中-g 代表全局安装因为我们需要用到 docsify 的场景还挺多所以就选择全局安装了。 怎么知道这个全局安装的包放在哪了 npm root -g这会返回全局安装目录的路径。默认情况下会放在你的 C 盘C:\Users\YourUsername\AppData\Roaming\npm。 如果不想你的 C 盘很快爆满的话最好给它挪个位置~ 这时你可以修改 npm 的全局安装位置。首先新建一个目录然后在终端中配置 npm 使用新的目录 npm config set prefix D:\npm-global可以看到文件夹下多了一个 node_moudules可执行文件也在当前目录下 为了系统自动识别到 docsify 命令你还需要添加新的路径到系统环境变量中。具体步骤如下 右键点击“此电脑”或“计算机”选择“属性”。点击“高级系统设置”。在“系统属性”窗口中点击“环境变量”。在“系统变量”中找到 Path然后点击“编辑”。添加新的路径 D:\npm-global。 对于新手小白来说还会遇到一个问题npm 下载太慢啦~ 这是因为 npm 默认从国外的 https:/registry.npmjs.org/ 服务器进行下载不信你试试看下面这个指令 // 查看当前下载地址 npm config get registry所以你需要给它换个国内的镜像。 // 设置淘宝镜像的地址 npm config set registry https://registry.npmmirror.com/再次安装 docsify有没有快到飞起 2.1.2 docsify 启动 docsify 安装好之后启动知识库只需要一个命令在你的当前知识库文件夹下执行 docify init 如果文件夹下已经有文件也没关系选择 yes会初始化3个文件其中 index.html 就是最终渲染的初始网页 接下来还是一键命令完成部署 docsify serve# 输出如下 Serving D:\data\projects\knowledgebase now. Listening at http://localhost:3000打开上述链接你会看下如下页面 这些文字内容是哪来的呢 还记得刚才生成的三个文件中的 README.md打开看看吧。 所以你只需要编辑这个 README.md就可以实现你的内容展示了。 你不需要杀掉 serve 指令docisfy 支持修改 README.md 时网页端实时更新。 接下来我们来说说这个 index.html 中的一些具体设置将你的网页打造的更加酷炫、高级一些。 2.1.3 docsify 基础操作 网站主题修改: 在 index.html 中 !–这个链接就是主题的选择– link relstylesheet href//cdn.jsdelivr.net/npm/docsify4/lib/themes/vue.css官网支持的主题在https://cdn.jsdelivr.net/npm/docsify4/lib/themes/都去试试吧看看自己更喜欢哪个~ 封面设置: 只需在 window.\(docsify 中加入一行: window.\)docsify {coverpage: true,}然后创建一个 _coverpage.md 文件编写 markdown 内容并保存

猴哥的AI知识库 small2024/small 用心做内容不辜负每一份关注。适合人群- AI 爱好者

• AI 小白GitHub Get Started顶部导航栏设置: 只需在 window.\(docsify 中加入: window.\)docsify {repo: https://github.com/hougeai/knowledgebase, // 仓库链接会显示在右上角GitHub图标loadNavbar: true,}docsify 会默认加载 _navbar.md所以需要新建一个 _navbar.md然后填入你想要在导航栏要展示的内容
• 1.Linux笔记
• 2.玩转云服务
• 3.AI笔记
• 4.Python笔记
• 5.效率工具
• 6.少儿编程这样你在网站上就会看到 侧边栏设置: 只需在 window.\(docsify 中加入一行: window.\)docsify {loadSidebar: true}然后创建一个 _sidebar.md 文件编写你想要展现的目录内容并保存。 2.1.4 docsify 插件配置 docsify 的生态非常丰富开发者搞了很多插件为你的知识库插上三头六臂变得更为智能而这些插件就是一个个 javascript 脚本你只需要在 index.html 中插入即可。 这里给大家推荐几个最常用到的。

1. 搜索插件 随着文章的增多搜索功能就显得尤其必要你只需要在 index.html 的如下位置填入 window.\(docsify {search: {paths: auto,placeholder: Type to search,noData: 找不到结果,depth: 3,},}然后在最下方引入插件脚本 !-- 搜索插件 -- script src//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js/script此时在你的网站左上角就可以看到搜索栏 2. 右侧目录插件 我的文章很多偏实操所以内容比较长如果能够在右侧显示文章目录支持滚动高亮点击跳转等显然更符合当下流行的文档网站布局类似下面这样。 这时你只需要一个插件叫 toc (Table of Content)。不过社区中有两种实现 script srchttps://cdn.jsdelivr.net/npm/docsify-plugin-toc1.3.1/dist/docsify-plugin-toc.min.js/script !-- script srchttps://unpkg.com/docsify-toc1.0.0/dist/toc.js/script --一开始我是采用的第二行的插件后来发现它和 sidebar(也就是左侧目录) 会出现冲突看了下报错应该是插件内部的 bug。所以又找到了第一行的插件再配置下 window.\)docsify完美实现上图中的效果 window.$docsify {toc: {tocMaxLevel: 5,target: h1, h2, h3, h4, h5, h6,ignoreHeaders: [!– {docsify-ignore} –, !– {docsify-ignore-all} –]},}3. 代码复制和高亮插件 技术文章很多都有代码为了实现代码一键复制和高亮类似如下效果 你只需要插入如下插件 !– 代码复制 – script src//cdn.jsdelivr.net/npm/docsify-copy-code/script !– 代码高亮 – script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-bash.min.js/script script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-c.min.js/script script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-json.min.js/script script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-shell-session.min.js/script script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-python.min.js/script script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-java.min.js/script script src//cdn.jsdelivr.net/npm/prismjs1/components/prism-http.min.js/script2.2 远程仓库建立 本地测试没什么问题后接下来我们就需要把它托送到云端了。 因为知识库一定是会不断更新的所以最好用 git 来维护一个远程仓库。 2.2.1 本地 git 初始化 这里值得注意的是如果你在本地存了很多图片最好不要把他们推送上去。 拿我的来举例项目中每个子文件夹都有存放图片的 assets 文件夹现在需要 要在 .gitignore 中忽略所有子文件夹中的 assets 文件夹可以项目根目录下创建 .gitignore 然后填入以下规则 /assets// 表示匹配任意层级的目录。assets/ 确保只忽略名为 assets 的文件夹。 这样所有子文件夹中的 assets 文件夹都会被 Git 忽略。 然后一键三连完成项目初始化 git init git add . git commit -m first commit这样本地仓库就建好了接下来你需要的是一个远程仓库。 2.2.2 关联远程仓库 这里我们选择在 GitHub 上新建远程仓库因为各大网页部署平台对 GitHub 的支持最为友好。 注意上面的 Private 要改为 Public需要是公开仓库才可以部署到 GitHub Pages。 接下来在本地终端中进行账户设置填入你的 GitHub 的注册名称和邮箱

   git 全局设置

   git config –global user.name your_user_name git config –global user.email xxxxx.com

   如果只需要设置当前项目

   git config user.name your_user_name git config user.email xxxxx.com将本地仓库推送到远程仓库 git remote add origin https://github.com/xxx/xxx.git git push -u origin master上面的 origin 是你在本地给远程仓库取的名字一般用不到它。如果将来需要删除和它的关联才会用到它 git remote -v git remote remove origin2.3 部署工具选择 GitHub 远程仓库有了之后我们就要选择一个工具将网站部署上线。都有哪些选择呢 公有云主机 / VPS买域名买服务器需要一笔不菲的开销Github/Gitee/Gitlab Pages 等静态网站生成器完全免费支持持续集成Netlify/Zeabur 等托管平台有一定免费额度支持自定义二级域名。 综合来看对于简单的知识库网站而言后面两种方案完全可以满足需求。 下面我们就一起实操下分别将网站部署到 Gitee Pages Github PagesNetlify Zeabur 2.4 网站部署 2.4.1 Gitee Pages 如果你需要部署在 Gitee Pages 上首先需要在 Gitee 新建一个远程仓库并和本地仓库进行关联当然如果已经有了 GitHub 远程仓库也可以选择 fork 过来。然后在项目首页如下位置找到 Gitee Pages
   遗憾的是 因服务维护调整Gitee Pages 暂停提供服务给您带来不便深感抱歉感谢对 Gitee Pages 服务的支持。 看来国内审核压力也给到 Gitee 了~ 2.4.2 GitHub Pages 进入你的远程仓库首页在 Settings - Pages 中选择你的分支 master选择在根目录部署这个主要根据你的 index.html 所在的位置进行选择。 到这里一个拥有 github.io 二级域名的 page 就已经建好了 访问地址https://hougeai.github.io/knowledgebase 是不是很简单 如果您想拥有一个个性化的域名怎么办 你得掏腰包去域名服务商买一个心仪的域名。如果你只是想拿来玩玩当然也有免费域名可以注册可以参考这篇【保姆级教程】免费域名注册 Cloudflare 域名解析。 拿到域名之后还需要进行域名解析。 具体而言在域名解析服务器中添加一条 DNS 记录参考官方文档github 可以用的 IP 地址如下 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153以我的举例参考上篇教程进行域名解析前往 cloudfare 官网添加一条 DNS 记录 再前往 github pages 配置页填入你的域名等待 DNS 解析成功。
   最后回到 github pages 配置页上方打开你的专属链接看看吧~ 访问地址https://kb.houge.us.kg/#/ 如果您希望 GitHub Pages 在仓库代码更新后能够自动更新 GitHub Actions 来了解下通过设置自动化流程在依赖仓库代码更新后自动触发 GitHub Pages 的更新。GitHub Actions 就是 GitHub 推出的持续集成服务。 首先需要配置下项目的 Actions 其中 Actions permissions一定要选择 Allow all actions and reusable workflows 否则你将无法使用别人的 Action。最下面的 Workflow permissions如果你的项目需要 build则要给读写权限如果只是静态网页保持默认的读权限即可。 然后开始配置 Actions 工作流。 官方的 actions 都放在 https://github.com/actions 里面。 我们这个项目只需要简单的自动更新页面点击 set up a workflow yourself。 在其中填入 name: Deploy to GitHub Pageson:push:branches:- master # 或者你使用的其他分支jobs:deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkoutv4- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pagesv3id: deploymentwith:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./ # 使用根目录或替换为你的 HTML 文件所在目录其中根据 peaceiris/actions-gh-pagesv3 官方使用指南 secrets.GITHUB_TOKEN 不需要手动生成runner 会自动生成。 最后点击右上角 Commit Changes提交至仓库。仓库根目录下会生成一个 .github/workflows 文件夹。 但是这个 workflow 却失败了是第二个 job 执行出了问题。 无奈之下只能把这个 workflow 关掉了。 后来发现pages 默认就有一个 workflow叫 pages-build-deployment会根据你的 push 进行重新部署无需新建 workflow。不得不说GitHub 真的很良心你想到的它都已经给做到了。 2.4.3 Netlify 传送门https://vercel.com/ 当前免费额度 300 分钟每月的计算时长和 100 GB 每月的流量。因为我们这个项目只是一个静态网页无需计算所以应该只要不超过 100 GB 的访问流量就是 OK 的。 注册账号后新建一个项目选择从 GitHub 引入: 然后输入一个你想要的域名检查下是否可用 点击最下方的部署稍等片刻出现下面界面说明已经部署成功 访问地址国内 IP 可访问https://hougeai.netlify.app/ 搞定 2.4.4 Zeabur 传送门https://zeabur.com/ Zeabur 目前的限制是 对于 Serverless Plan 的用户前10GB 流量免费Developer Plan 和。Team Plan 则为100GB 免费Serverless Plan 是无需付费的的但只能用于部署静态网页。 zeabur 只能基于 Github 进行部署。注意如果你不想升级为付费用户的话只能选择 Developer Plan 和 Team Plan 以外的地区的机器进行部署如果长时间无法构建成功可以换一个地区试试。 构建成功后在下面的网络中点击生成一个域名。
   回到上方查看部署状态 访问地址国内 IP 可访问https://hougeai.zeabur.app/ 注意Zeabur 会根据你的代码结构自动检测代码用的框架所以如果只是一个静态网站的话不要在根目录下放 xx.py 文件否则它会识别为一个 python 项目导致你的 index.html 部署失败。 写在最后 至此这篇长文终于写完了。相信看到这里的你一定也遇到过下面这些问题 文章太多找不到?图片上传太麻烦? 从本地知识库到在线部署从 Typora 到 Docsify从 GitHub Pages 到 Netlify终于把知识库搞上线了。 如果本文对你有帮助不妨点个免费的赞和收藏备用。你的支持是我创作的最大动力。