Gitfolio
每个 github 用户的个人网站 + 博客。
Gitfolio 将帮助你开始一个作品集网站,在那里你可以展示你的工作,还有一个博客,将帮助你把你的想法传播到现实世界。
请看这个 在线演示,看看 gitfolio 的实际操作。
入门
让我们来安装
安装 gitfolio
npm i gitfolio -g
让我们来构建
使用用户界面
$ gitfolio ui
提示:你可以使用 ui 来创建新的博客,也可以更新你的文件夹。
或
gitfolio build <username>
<username> 是你在 github 上的用户名。这将使用你的 GitHub 用户名建立你的网站,并将其放在 /dist 文件夹中。
要运行您的网站,请使用运行命令,默认端口为3000。
gitfolio run -p [port]
恭喜你,你刚刚为自己建立了一个个人网站!
让我们来定制
Forks
要在你的个人网站上加入 forks,只需在建立网站时提供 -f 或 -fork 参数。
$ gitfolio build <username> -f
Sorting Repos
要对仓库进行排序,需要在构建时提供 --sort [sortBy] 参数,其中 [sortBy] 可以是 star, created, updated, pushed, full_name。其中 [sortBy] 可以是 star, created, updated, pushed, full_name。默认:created
$ gitfolio build <username> --sort star
Ordering Repos
要对排序后的仓库进行排序,需要在构建时提供 --order [orderBy] 参数。其中 [orderBy] 可以是升序或降序。默认:asc
$ gitfolio build <username> --sort star --order desc
自定义主题
当运行编译命令时,可以使用 --theme [主题名称] 标志来指定主题。可用的主题有
light
dark
TODO: 增加更多主题
例如,下面的命令将建立一个深色主题的网站。
$ gitfolio build <username> --theme dark
自定义背景图片
要自定义背景图片,只需在构建时提供 --background [url] 参数。
$ gitfolio build <username> --background https://images.unsplash.com/photo-1557277770-baf0ca74f908?w=1634
你也可以在 index.css 中加入你的自定义 CSS,让它更有个性。
在你的个人资料上添加社交媒体链接
构建的同时,将 Twitter、LinkedIn、Medium 和 Dribbble 链接到你的个人资料,
gitfolio build <username> --twitter <twitter_username> --linkedin <linkedin_username> --medium <medium_username> --dribbble <dribbble_username>
让我们来发布
到 GitHub 上创建一个新的仓库,命名为 username.github.io,其中 username 是你的用户名。把里面的文件 /dist 文件夹推送到你刚刚创建的 repo。
转到 username.github.io,你的网站应该就可以了!
更新
要更新您的信息,只需运行
$ gitfolio update
或使用 gitfolio 用户界面中的更新选项。
这将更新你的信息和你的仓库信息。
要更新背景或主题,你需要再次运行构建命令。
添加博客
要添加你的第一个博客,请使用用户界面。
$ gitfolio ui
这将打开一个 UI 页面,你可以点击 "新建博客" 来创建一个新的博客。一旦你写完你的博客,你可以点击创建博客。
这将在 ./dist/blog 文件夹内创建一个博客。
在你的终端中寻找成功或错误。
这也将内容添加到 blog.json 文件中。这个文件有助于在你的个人网站上以 卡片 的形式展示你的博客。你可以自定义 JSON 对象,对应你当前的博客。
博客演示?在这里。
博客的默认 JSON 格式
{ "url_title": "my-first-blog", // the title you provide while creating a new blog, this appears in url "title": "Lorem ipsum dolor sit amet", // main title of blog "sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", // sub-title of blog "top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450", // main image of blog "visible": true // don't worry about this }
在 twitter 上关注我,获取更多更新信息 @imfunnieee
许可证
(First version translated and edited by vz on 2020.12.19)