11 GitHub Pages

你可能已经知道使用 GitHub Pages 来托管一个静态网站。如果你不知道，现在就来学习，这一节是专门用于讨论使用 Jekyll 来构建一个站点的。

最简单的就是： GitHub Pages + Jekyll会通过一个漂亮的主题来渲染你的 README.md 文件。例如:通过 about-github  来查看的我的 README 页面。

如果我在 GitHub 中点击了 settings选项，切换到 Github Pages 设置，然后选择一个 Jekyll theme。。。

我就可以得到 Jekyll-themed 页面。

从这点上我可以主要依据易编辑的 Markdown 文件来构建一个完整的静态站点。本质上是把 GitHub 变成了 CMS。

虽然我没有实际使用过，但是 React Bootstrap 的网站都是使用它来构建的。所以它不会糟糕。

注意:它要求 Ruby 运行本地环境( Windows 自行安装， macOS 自带)。

12 把 GitHub 当做 CRM 使用

假设你有一个存有一些文本内容的网站，你不想将文本内容存储于真正的 HTML 源码中。

相反的，你想要将这些文本块存储于非开发人员能轻松的进行编辑的地方。可能是一个版本控制系统，甚至是一个审核流程。

我的建议是:使用 GitHub 厂库中的 Markdown 文件来存储这些文本内容，然后使用前端组件来拉取这些文本块并展示在页面上。

我是搞 React 的，所以这有一个 解析 Markdown 的组件例子，给定一些 Markdown 文件路径，它将会自动拉取并作为 HTML 显示出来。

class Markdown extends React.Component {
    constructor(props) {
      super(props);
      // replace with your URL, obviously
      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';
      this.state = {
        markdown: '',
      };
    }
    componentDidMount() {
      fetch(`${this.baseUrl}/${this.props.url}`)
        .then(response => response.text())
        .then((markdown) => {
          this.setState({markdown});
        });
    }
    render() {
      return (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}

奖励环节 —— GitHub 工具

我已经使用了 Octotree Chrome extension 有段时间了，现在我向大家推荐它！

无论你是在查看哪个 repo 它都会在左侧给你一个树状面板。

通过这个视频我了解到了 octobox，它是用于管理你的 GitHub Issues 收件箱，看起来相当不错！

以上就是我针对于octobox的全部想法。

其他

就是这样了！我希望这里至少有三件事是你还不知道的。

最后: hava a nice day！

个人博客：crossoverjie.top。