我没有前端经验，但1天就搞定了开源项目主页

前言

前段时间打算为本身的开源项目作一个主页，一方面有个好的门面能提高项目的关注度，一方面也能对项目所涉及的资源作一个整合。

其实原先项目已经有一个文档主页，比较简洁，大体长这样：

其实看起来也还能够是不？

这是用docsify作的，docsify是一款优秀的文档生成工具，使用起来比较简单，只须要写内容的markdown文件就能够了，支持markdown的大部分语法，而且本身也扩展了部分语法显示效果。

可是我以为docsify虽然建文档还不错，但用来建项目主页就有点寒酸了。首先它的定位就是文档工具，其次主题样式不够丰富，页面的定制性也比较差，就这么一个套路。我对于静态建站工具备这么几点要求

• 主题丰富，美观简洁。毕竟项目首页是一个项目的门面，好看是很重要的。
• 搭建简单，尽量的只让我关注内容部分，由于毕竟我对前端并不精通，不想为了建主页而去学一大堆前端知识。
• 首页须要井井有条，有那种大项目首页的既视感。
• 页面定制化强，不能千篇一概。
• 可以最大化整合资源，多级目录。

静态网站生成工具

我带着这些要求去比较了当下常见的静态站点生成工具。最终决定在Hexo，VuePress，Docusaurus这3个当中选。

仔细比较了功能点以后，最终我选择了Docusaurus，缘由是....颜值好看。

固然，颜值是重要的一部分，其次的缘由是，Hexo烂大街了，并且我的以为不太适合作开源项目主页。VuePress的话虽然也很是优秀，中文支持的也很是好，可是深耕后端的我并太精通Vue，因此选择性放弃。

Docusaurus是Facebook开源的一个静态站点生成框架，比较新，国内极可能许多人还不必定知道。可是Facebook的许多新的开源项目网站如今都在使用Docusaurus了。

这是Docusaurus官网主页：

Docusaurus是基于React构建的。基本上我对项目首页的要求它都能知足，可定制化程度也比较高。缺点是文档中文支持不是很好，虽然Docusaurus1建了一个中文站点，可是文档只翻译了部分，并未彻底翻译。Docusaurus2则全是英文文档。不过耐心点阅读，应该会很容易知道该怎么作。

建主页过程

先不废话，先放上我用Docusaurus搭建以后主页最后的效果和连接供你们观摩下：

项目主页连接为：

http://bryan31.gitee.io/tlog-...

是否是还挺像那么回事的吧？你们既然点击了，那就欢迎帮我这个开源项目在gitee&github上star下哦。

下面我会把建主页的过程说下。

Docusaurus须要预先装好node.js和yarn，而且要求node.js的版本在10.15.1及以上，yarn的版本在1.5及以上

你能够经过脚手架来建立初始化的项目站点：

npx @docusaurus/init@next init my-website classic

建立好以后，你就能够进入你的工程，运行

yarn run start

浏览器中输入127.0.0.1:3000，你就能看到如下初始化站点：

固然我没有在脚手架建立的站点上改，我是在官网上的展现站点中选了一个站点，而后下载他们的源码，进行编译启动。而后再在基础上进行修改。

整体来讲Docusaurus配置还算简单，首页可定制化程度仍是很高的。若是你精通react，能够玩出很炫的花样。若是你不精通react，也能够根据别人的源码来修改，能够得到相似的效果。具体配置文档，能够参考Docusaurus的中文站点：

https://www.docusaurus.cn/

这里的文档部分有中文翻译。

剩下的工做就是编辑markdown，Docusaurus对于markdown的特性做了不少扩展，这是我比较喜欢的部分。有了这些扩展，就能够编辑出很漂亮的文档。

我比较喜欢的markdown扩展特性有：

Tab：

Docusaurus支持在文档中嵌入tab标签，具体效果：

Hignlight块：

Docusaurus扩展了markdown的语法，使得在文档中能根据重要程度显示不一样颜色的Highlight块，具体效果：

代码的高亮行：

对于在markdown的代码块相信不少人都用过，非常方便，还能根据代码进行着色。可是若是要高亮某几行代码，怎么办，markdown的默认语法是办不到的，Docusaurus扩展了这个特性，效果以下：

要是多行，也能够这样定义：{1,4-6,11}，这样第1行，4到6行，11行，都会被高亮。

除了以上这3个我比较喜欢的特性外，Docusaurus还提供了很细致的扩展，相信这些都是你用得着的。

关于项目主页

个人开源项目主页，主要配色是黑金，因此我对css的配色进行一些修改，尽可能在总体上保持统一，包括图标颜色，logo颜色，文档里面的图片配色，都是统一的。因此建议在建设主页的前期，先选好配色。颜色越多不必定看着舒服。简约统一才是比较好的选择。

有小伙伴问：你的Logo是哪里来的，是本身设计的吗？

我不作平面设计，这种应该交给专业的人来作。这个Logo花了几百块请人设计的。我以为一个开源项目也应该传递自身的品牌信息。因此这是值得的。

关于开源项目

TLog是一个新的开源项目，是目前我开源项目中近期主打维护迭代的一个项目，主要致力于在分布式环境中日志的追踪。它小巧且使用简单，社区也很活跃，开源1个月来，我收到了不少人的使用反馈，听取这些反馈进行迭代和新特性开发。

TLog的将来蓝图是作成日志领域集收集，追踪，统计，分析，展示于一体日志中间件。

Gitee官方曾对TLog进行过社区宣传，官方曾发文进行过推广：

https://mp.weixin.qq.com/s/Ls...

如今TLog拥有了本身的官网主页，我以后会继续对这个开源框架进行迭代。但愿你们关注，若是喜欢的话，请帮忙请给项目一个star哦。

https://gitee.com/bryan31/TLog

关注做者

「元人部落」是一个坚持作原创的技术科技分享号，但愿你能关注我，我每周会出一篇实用的原创技术文章，陪着你一块儿走，陪你一块儿成长。关注公众号回复tlog能加入群聊，我会耐心回答你的每个使用中的问题，也会长期对这个项目进行长期维护和迭代。