开发工具静态站点前端【免费下载链接】gitfolio:octocat: personal website blog for every github user项目地址https://gitcode.com/gh_mirrors/gi/gitfolio点击查看免费下载Gitfolio 是一个面向所有 GitHub 用户的开源工具核心能力是根据你的 GitHub 用户名自动抓取账号信息与仓库数据生成一套可直接部署的静态个人作品集网站并附带博客功能让你既能展示工作成果也能把想法写成文章发布到线上。读完本文你将掌握 Gitfolio 的安装、构建、运行、发布全流程熟悉主题、背景、排序、社交链接等全部自定义参数并通过源码级解读理解build/update/ui/run四个命令背后的实现原理。项目概览Gitfolio 是什么用项目自己的话说Gitfolio 就是 personal website blog for every github user——它帮助任何拥有 GitHub 账号的开发者快速起步一个作品集网站用来展示你的工作同时附带一个博客用于传播你的想法。它的工作方式很直观你提供 GitHub 用户名Gitfolio 通过 GitHub API 拉取你的用户资料与仓库列表把数据填充进内置的 HTML 模板最终输出一套纯静态网站文件含 CSS、配置文件与博客目录可以部署到 GitHub Pages 或任意静态托管平台。需要说明的是本仓库 README 顶部标注了archived in favor of v2 release soon已归档等待 v2 版本发布当前仓库即 v1 版本package.json中记录的版本号为0.1.5。本文所有命令、参数与源码细节均以当前仓库的实际内容为准。安装 GitfolioGitfolio 以 npm 包形式发布推荐全局安装npm i gitfolio -g全局安装后命令行中会多出gitfolio命令供后续的build、update、ui、run使用入口脚本见 bin/gitfolio.js。如果你想在本地仓库直接跑 CLI 而不全局安装package.json中也提供了开发脚本scripts: { cli: OUT_DIR./dist node bin/gitfolio.js }即运行npm run cli等价于以./dist为输出目录启动命令行工具。构建你的个人网站构建个人网站有两条路径交互式 UI 与纯命令行。方式一使用 UI 构建$ gitfolio ui该命令会在本机3000端口启动一个 Express 服务并打开基于 EJS 的图形界面页面模板见 views/index.ejs你可以在表单中填写 GitHub 用户名、背景图、排序方式、主题、是否包含 Fork、社交账号等点击Build完成构建。UI 同时提供了New Blog新建博客与Update更新信息入口因此 README 特别提示UI 既可以用来创建新博客也可以用来更新你的 folio。方式二命令行构建gitfolio build username其中username是你的 GitHub 用户名。该命令会调用 GitHub API 抓取你的信息构建网站并输出到/dist目录。构建完成后dist目录下会包含index.html、index.css、config.json、blog.json以及博客目录blog/等产物。本地预览你的网站构建完成后可以用run命令在本地启动静态服务gitfolio run -p [port]默认端口为3000。其底层实现位于 run.js使用 Express 的express.static托管dist目录并把/路由指向index.html随后监听指定端口并在终端打印访问地址let port program.port ? program.port : 3000; app.use(express.static(${outDir})); app.listen(port);运行后浏览器访问http://localhost:3000即可预览你的个人网站。到这一步你已经拥有了一个属于自己的个人网站。自定义你的网站gitfolio build提供了丰富的参数来控制生成效果下面逐一说明。选择主题--theme主题通过--theme [theme-name]指定当前可选主题为light默认dark$ gitfolio build username --theme dark主题样式文件位于 assets/themes/dark.css 与 assets/themes/light.css。两者本质上是 Handlebars 模板通过 CSS 变量:root中的--bg-color、--text-color、--background-image等控制整站配色并包含{{{background}}}占位符构建时会被你指定的背景图 URL 替换见下文。README 中标注了 TODO: Add more themes说明主题数量仍在扩充计划中。自定义背景图--background通过--background [url]传入任意图片 URL 作为网站背景$ gitfolio build username --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w1634若未指定默认背景图在 build.js 中定义为https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w1500q80UI 表单 views/index.ejs 中的默认值与此一致。背景图会被注入主题模板的{{{background}}}占位符最终写入dist/index.css。包含 Fork-f/--fork默认构建只展示你自己的仓库不含 fork如需把 fork 的仓库也展示出来构建时加-f或--fork$ gitfolio build username -f排序仓库--sort通过--sort [sortBy]指定仓库排序依据可选值为star、created、updated、pushed、full_name默认created$ gitfolio build username --sort star排序方向--order通过--order [orderBy]指定排序方向可选asc或desc默认asc。可与--sort组合使用$ gitfolio build username --sort star --order desc添加社交链接构建时可通过以下参数把 Twitter、LinkedIn、Medium、Dribbble 链接加到个人主页gitfolio build username --twitter twitter_username --linkedin linkedin_username --medium medium_username --dribbble dribbble_username自定义 CSS除了上述参数你还可以直接往index.css中追加自己的样式让网站更具个人风格。注意这里的index.css指的是构建产物所用的样式模板 assets/index.css构建时它会被整体复制到dist/index.css随后再追加编译后的主题样式。构建背后的源码原理理解几个命令的执行链路能帮你更好地把握参数生效的位置。CLI 入口与参数定义所有命令与参数在 bin/gitfolio.js 中用commander定义命令说明选项build username用 GitHub 用户名构建站点-t/--theme默认light、-b/--background、-f/--fork、-s/--sort默认created、-o/--order默认asc、-w/--twitter、-l/--linkedin、-m/--medium、-d/--dribbbleupdate更新用户与仓库数据无ui通过界面创建和管理博客无run运行构建产物-p/--port默认 3000同时入口支持-v/--version查看版本当没有传入任何命令或传入未知命令时会打印帮助信息。构建主流程build.jsbuild.js 中的buildCommand(username, program)依次执行三步populateCSS(program)先确认dist目录存在不存在则创建把模板 assets/index.css 复制为dist/index.css然后从assets/themes目录读取主题文件若请求的主题不存在则报错并回退到light用 Handlebars 编译主题模板替换{{{background}}}并把结果追加到dist/index.css末尾最后把主题名写回config.json。populateConfig(opts)把排序、顺序、fork、社交账号等选项整体合并写入config.json。updateHTML(username, opts)真正抓取数据并渲染 HTML见下节。HTML 渲染populate.js api.jspopulate.js 使用jsdom加载模板 assets/index.html然后异步完成填充通过 api.js 的getRepos(username, opts)拉取仓库列表逐条渲染仓库卡片仓库名、描述、语言、Star 数、Fork 数。描述中的:emoji:文本会被convertToEmoji转换为 GitHub emoji 图片。非 fork 仓库插入work_sectionfork 仓库只有在includeFork为 true 时才插入forks_section并同时把forks区块从display:none改为可见。通过getUser(username)拉取用户资料填充头像、姓名、login、bio以及 company、email、blog、location、hireableAvailable for hire等信息社交链接根据传入的 twitter/linkedin/medium/dribbble 参数决定显示与否。把username、name、userimg写入dist/config.json最终把渲染后的完整 HTML 写入dist/index.html。值得一提的是 api.js 的仓库抓取细节getRepos以每页 100 条的方式循环请求https://api.github.com/users/username/repos直到某页返回不足 100 条为止确保大仓库列表也能完整抓取。其中sortstar是本地排序按stargazers_count比较其余sort值直接透传给 GitHub API 处理order未指定时full_name排序默认asc其余默认desc。配置文件config.json构建会在dist下生成config.json其默认结构定义在 default/config.json[ { username: null, name: null, userimg: null, sort: null, order: null, includeFork: null, theme: light.css } ]该文件由 utils.js 的getConfig()读取若dist下不存在则回退到默认文件是后续update命令的重要数据来源。发布到 GitHub Pages网站构建完成后即可发布前往 GitHub 创建一个名为username.github.io的新仓库username是你的 GitHub 用户名。把dist文件夹里的内容全部推送到这个仓库。访问username.github.io你的个人网站就上线了。dist是纯静态产物因此除了 GitHub Pages也可以部署到任意支持静态托管的平台。更新个人信息当你的 GitHub 信息或仓库信息变化后运行$ gitfolio update也可以在 Gitfolio UI 中点击Update选项。这会重新抓取并更新你的个人信息与仓库信息。update的实现位于 update.js它先从config.json读取用户名若为null会提示 username not found in config.json, please run build command before using update请先执行 build 再 update随后把config.json中保存的排序、顺序、fork、社交账号等选项取出重新调用updateHTML完成更新。需要特别留意更新主题或背景图必须重新执行build命令因为update只刷新用户与仓库数据不重新生成 CSS。添加博客Gitfolio 的博客功能通过 UI 创建与管理。通过 UI 创建第一篇博客$ gitfolio ui页面打开后点击New Blog进入编辑器模板见 views/blog.ejs填写标题、副标题并可通过编辑器内按钮添加段落支持直接写 HTML和图片也可以设置顶部大图。写作完成后点击Create Blog提交。提交后会生成博客文件到./dist/blog目录并同时更新blog.json。创建结果会在终端打印请留意终端中的成功或错误信息。博客的文件结构与生成规则从 ui.js 的createBlog实现可以确认生成细节博客目录名为url_title对应的文件夹title中的非字母字符被移除、空格替换为连字符例如my first blog变为my-first-blog博客页面生成在dist/blog/folder/index.html内容基于模板 assets/blog/blogTemplate.html 填充。编辑器中的图片以 base64 数据上传服务端解码后写入dist/blog/folder/img_index.ext顶部图片写入top_image.ext。每个博客的元数据会追加进dist/blog.json。博客页面通过../../config.json加载作者信息头像、姓名、用户名并根据config.json中的主题决定背景遮罩的明暗样式。blog.json 的作用与字段blog.json的作用是让博客以卡片形式展示在个人网站首页的Blog.板块中见 assets/index.html 中的$.getJSON(blog.json)渲染逻辑。你也可以直接编辑blog.json中对应博客的 JSON 对象进行微调。博客条目的默认 JSON 格式如下//注释为 README 中的示意说明实际文件为合法 JSON{ url_title: my-first-blog, // 创建博客时提供的标题会出现在 URL 中 title: Lorem ipsum dolor sit amet, // 博客主标题 sub_title: Lorem ipsum dolor sit amet, consectetur adipiscing elit., // 博客副标题 top_image: https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w1450, // 博客主图 visible: true // 是否可见 }各字段含义url_title对应./blog/url_title/路径title与sub_title显示在首页博客卡片上top_image是卡片缩略图visible控制该博客是否展示。其他机制补充输出目录约定从源码结构看utils.js 与 run.js 中的outDir均通过path.resolve(./dist/ || process.env.OUT_DIR)计算由于字符串字面量./dist/恒为真值实际产物目录始终是当前运行目录下的./distbin/gitfolio.js虽然设置了process.env.OUT_DIR作为兜底但按上述表达式不会被采用。日常使用中把dist当作出目录即可。Service Worker 与离线体验构建产物中的 assets/service-worker.js 使用 Workbox3.6.1实现了 PWA 能力JS/CSS 资源走networkFirst策略图片走cacheFirst策略并带有 128 条缓存上限与 7 天过期时间为访客提供基本的离线与缓存支持。依赖栈从 package.json 可以看到项目的技术栈CLI 解析用commander静态服务与 UI 用expressejsHTML 模板处理用jsdom主题编译用handlebarsGitHub API 请求用got文件操作用bluebird包装的fs另外包含github-emoji、prettier、ncp等工具依赖许可证为 GPL-3.0。小结与注意事项Gitfolio 的完整工作流为npm i gitfolio -g安装 →gitfolio build username或gitfolio ui构建 →gitfolio run -p 3000本地预览 → 推送dist到username.github.io发布 → 日常更新用gitfolio update→ 博客通过 UI 创建并维护。主题目前仅light与dark两种更新主题或背景必须重新执行build。update依赖config.json中的用户名务必先 build 再 update。当前仓库已标记归档并等待 v2 发布本文描述的均是 v10.1.5的实际行为若需深入定制可继续阅读 build.js、populate.js、ui.js 等源码。赞分享开发工具静态站点前端【免费下载链接】gitfolio:octocat: personal website blog for every github user项目地址https://gitcode.com/gh_mirrors/gi/gitfolio点击查看免费下载相关推荐Gitfolio终极指南为每个GitHub用户打造个人网站博客的完整教程Gitfolio终极指南为每个GitHub用户打造个人网站博客的完整教程 想要快速搭建个人网站和博客Gitfolio就是你的终极解决方案Gitfolio开发工具静态站点前端MediaToolkit核心功能解析从元数据提取到自定义FFmpeg命令MediaToolkit核心功能解析从元数据提取到自定义FFmpeg命令 MediaToolkit是一个强大的.NET库专为视频和音频文件的转换与处理而设计音视频CS自学指南入门教程:131 篇名校课程,怎么读、按什么顺序学CS自学指南入门教程:131 篇名校课程,怎么读、按什么顺序学 刚 clone 完 cs self learning,你打开 docs 目录会先愣一下:25 个文档教程教育创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考