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。