81

我和几个人一起有一个项目,我们有一个README.md包含一堆 GitHub Flavored Markdown 的文件,它在我们的 GitHub 页面上呈现。我们还建立了一个 GitHub Pages 分支,它托管在我们的 GitHub 组织的子域下,并使用自动页面生成器在我们创建页面时简单地加载到我们的README.md文件中。但是,我注意到当我更新我们的README.md文件时,它不会更新项目页面。相反,我们必须转到 GitHub 设置选项卡并重新创建项目页面,并README.md在执行此操作时重新加载文件。

此外,在阅读了 GitHub 项目目录页面上的文档文件之间的相对链接之后。我非常喜欢 Markdown,因为它节省了大量时间,无需为我们的文档手动编写所有 HTML。然而,我想要的是能够拥有一个README.md文件,该文件能够包含指向位于docs/*.md. 我希望有一个简单的解决方案,以便我的其他文档文件也可能包含在我的 gh-pages 分支中,并托管在我的 GitHub Pages 子域下并被呈现和/或主题化。

换句话说,我的问题是:

  • 有没有办法让我的 README.md 文件在我的 Github 页面子域上自动更新?
    • [编辑]:如果使用自动页面生成器,答案似乎不是。您必须转到存储库的设置页面并在每次发生更改时重新加载它才能更新它。
       
  • 有没有一种方法可以让我的 README.md 文件上的文档的相对链接在我的 Github 页面上工作,也许我以某种方式将我的文件同步/docs/*.md到我的 Github 页面并以某种方式呈现和/或主题化它们?
    • [编辑]:从我写这个问题以来所学到的知识看来,这似乎只能通过使用像 ruby​​ gem Jekyll这样的静态站点生成器在 GitHub 页面上实现,并且可能是提到的 GitHub 支持的 webhook 的一些使用在下面的评论中。我目前正在尝试寻找最佳解决方案。
       
  • 更好的是,有没有一种更简单的方法可以做到这一点,也许只有一份我的 README.md 和文档的副本,用于 gh-pages 和我的主分支,并使一切变得简单?
    • [编辑]:看来这个几乎肯定是不。我正在考虑在 GitHub 中内置一些东西来实现这一点的可能性。看来将来可能会在 GitHub Pages 中内置对这种东西的更好支持,或者至少我绝对希望它会。
       
4

10 回答 10

37

我将发布一个我设置的解决方案,它利用了 GitHub Pages 使用 Jekyll 已经使用自动页面生成器这一事实。

  1. git checkout gh-pages
  2. mkdir _layouts
  3. mv index.html _layouts
  4. git checkout master -- README.md
  5. mv README.md index.md
  6. 将以下文本添加到index.md

 

---
layout: index
---

您还需要打开index.html文件并进行以下更改:

  1. 从文件中的降价中删除呈现的 HTML README.md。这通常在<section>标签之间<article>。将此 HTML 替换为文本,{{ content }}这将允许我们将此文件用作 jekyll。我们应用布局的文件将放置在内容标签所在的位置。

  2. 找到项目页面主题的 CSS。对我来说,这是如下一行:

    <link rel='stylesheet' href='stylesheets/stylesheet.css' />

    这需要更改为

    <link rel='stylesheet' href='{{ site.path }}/stylesheets/stylesheet.css' />

  3. 将在此布局中使用的存储在您网站上的任何其他资产也需要以{{ site.path }}.

通过这样做,Jekyll 会将 markdown 文件渲染为目录中index.html布局的内容_layouts。为了使这个过程自动化,不仅是 README.md 文件,还有你的 master 分支中可能拥有的其他文档,我采取了以下步骤:

创建了名为post-commit包含以下内容的文件:

 

#!/bin/bash
###
### The following block runs after commit to "master" branch
###
if [ `git rev-parse --abbrev-ref HEAD` == "master" ]; then

    # Layout prefix is prepended to each markdown file synced
    ###################################################################
    LAYOUT_PREFIX='---\r\nlayout: index\r\n---\r\n\r\n'

    # Switch to gh-pages branch to sync it with master
    ###################################################################
    git checkout gh-pages

    # Sync the README.md in master to index.md adding jekyll header
    ###################################################################
    git checkout master -- README.md
    echo -e $LAYOUT_PREFIX > index.md
    cat README.md >> index.md
    rm README.md
    git add index.md
    git commit -a -m "Sync README.md in master branch to index.md in gh-pages"

    # Sync the markdown files in the docs/* directory
    ###################################################################
    git checkout master -- docs
    FILES=docs/*
    for file in $FILES
    do
        echo -e $LAYOUT_PREFIX | cat - "$file" > temp && mv temp "$file"
    done

    git add docs
    git commit -a -m "Sync docs from master branch to docs gh-pages directory"

    # Uncomment the following push if you want to auto push to
    # the gh-pages branch whenever you commit to master locally.
    # This is a little extreme. Use with care!
    ###################################################################
    # git push origin gh-pages

    # Finally, switch back to the master branch and exit block
    git checkout master
fi

编辑:README.md我为文件和降价更新了上述脚本,docs/*以使用相同的布局文件。这是一个比我以前更好的设置。该脚本位于您的.git/hooks/目录中。bash 必须在您的路径中。

_config.yml使用以下内容创建文件

markdown: redcarpet
path: http://username.github.io/reponame

docs/*上面的脚本还会同步分支目录中的markdown 文件master,以便它们也可以在 GitHub Pages 站点上查看。如果您包含以下 jQuery 函数以便从分支.md上的锚点中剥离扩展,则到这些文档的相对链接有效。gh-pages您可以index.html_layouts目录中添加以下脚本:

$(document).on('ready', function () {
    $('a').each(function (i, e) {
        var href = e.href;
        if (href.search('.md') > 0)
            $(this).attr('href', href.split('.md')[0]);
    });
});

编辑:我在我的存储库中更改了上面的代码,这是一种快速而肮脏的方法,但如果你知道我的意思,它不会在所有情况下都正常工作。例如,company.mdata.md不会处理降价文件正确。为了解决这个问题,我将其更新为以下脚本,该脚本更仔细地检查了 href 并删除了扩展(如果找到)。ext我还使脚本更通用,允许通过更改变量来删除其他扩展。这是代码:

$(function () {
    $('a').each(function () {
        var ext = '.md';
        var href = $(this).attr('href');
        var position = href.length - ext.length;
        if (href.substring(position) === ext)
            $(this).attr('href', href.substring(0, position));
    });
});

我在CoryG89/docsync设置了一个示例 repo ,这里有一个项目页面,如果你想看看这一切是如何一起工作的。

于 2013-05-05T22:13:51.707 回答
6

我对 README 与 Github 页面同步问题的解决方案与上述略有不同。可以使用 Github API 返回呈现为 HTML 的 Markdown 文件,而不是使用单独的 JavaScript Markdown 引擎。

  1. 从. README.md_https://api.github.com/repos/<owner>/<repo>/contents/README.md
  2. 解码 Base64 响应:window.atob( JSON.parse( blob ).content );
  3. 将解码后的内容发布READMEhttps://api.github.com/markdownJSON 正文中

     {
       "text": "<README>",
       "mode": "markdown",
       "context": "<owner>/<repo>"
     }
    
  4. 正如Brad Rhodes所做的那样,将呈现的 HTML 插入到 DOM 元素中。

这种方法有两个注意事项:

  1. 执行两个串行请求会减慢页面加载速度。
  2. 访问 Github API 时可能会遇到速率限制。

对于加载时间不重要(约 1-2 秒)的低流量页面,上述方法效果很好。

于 2014-09-12T19:17:28.740 回答
4

您可以使用DocumentUp来呈现您的 README.md。

于 2015-01-09T14:49:28.383 回答
3

我有几个想法可以在您的文档站点和主 github 存储库之间共享一个自述文件:

  1. 您只能使用一个包含您的代码和 jekyll 文档站点的 gh-pages 分支。您的存储库可能会有点混乱,您需要在自述文件的顶部放置一个 YAML 标头。它几乎支持相对链接。问题是,如果你想让 jekyll 渲染你的 markdown,它会给它一个 .html 扩展名。也许有一种方法可以配置它。这是我拼凑起来的一个例子,看看它是否有效。

  2. 您可以在文档站点中使用 AJAX 调用从主分支读取自述文件,然后使用Javascript Markdown 渲染器进行渲染。这将需要更长的时间来加载,并且如果您不编写一些聪明的 Javascript,它将不支持相对链接。与想法 1 相比,实施起来也需要更多的工作。

于 2013-04-30T07:59:17.570 回答
3

另一个需要考虑的方法是设置一个构建相关页面的预提交钩子。我在我的一个存储库中执行此操作。不过,您可能不得不放弃自动页面生成器并gh-pages自己推送到分支,以及像Nathan 建议的那样做一些花哨的事情来将您的文档转换为 HTML 或 Jekyll 站点。

在那个存储库中,我像这样推送以保持gh-pagesmaster. 还有很多其他方法可以做到这一点。不过,这可能不适合您的情况(您可能不希望它们相同)。

无论如何,我在这个问题上提供赏金的原因是因为我希望有人有更好的工作流程。这种方法有点复杂和不灵活,它要求每个人都保持他们的钩子同步。

于 2013-05-02T05:29:06.263 回答
2

我已经非常成功地工作的另一种方法是使用 Ajax 来获取文档,使用 Github API 和 Javascript 降价引擎来呈现 HTML(正如 Nathan 所建议的那样)。

  1. 使用 Github API 和 JSONP 从 Github 获取文档
  2. 解码来自 Github API 的响应中的 base64 内容
  3. 使用 javascript markdown 引擎渲染 markdown
  4. 显示渲染的 html

Nathan 表达了对性能的一些担忧,但根据我的经验,它似乎是立即加载的,所以我认为这实际上不是问题。

优点是它易于设置,即使您只是直接在 github 上的浏览​​器中编辑 markdown,它也会始终更新您的文档。

我在http://bradrhodes.github.io/GithubDocSync/的 Github 页面上设置了一个示例来展示它的工作原理。

于 2014-02-25T07:26:59.950 回答
2

Nathan 和 Brand Rhodes 描述的方法的另一种可能性是使用一个很棒的工具:由 Rico Sta 创建的FlatDoc 。克鲁兹。

FlatDoc 将通过 ajax 加载文档(README.md 或任何其他降价文件),对其进行解析并显示所有好东西,甚至是用于导航的侧边栏菜单!

它在其 api 中构建了一个辅助方法来从 GitHub repo master 加载文件(但也可以从 web 的其他任何地方加载)。

指示

首先将以下html 模板复制到 gh-pages 分支中的 index.html 中。继续:

  • 将“USER”替换为您的 GitHub 用户名
  • 将“REPO”替换为您的 GitHub 存储库名称
  • 用您的项目名称替换“您的项目”

在文件中。在浏览器中本地试用。然后提交并推送更改。现在,您的 github 页面将始终使用您的主分支中的 README.md 文件进行更新。

如果默认主题对您不满意,您可以使用自己的 css 重新设置样式。

于 2015-02-25T15:52:45.463 回答
1

我还想在 master 中编辑文档并在 gh-pages 中发布 - 我喜欢使文档与源代码保持同步,这似乎是最好的方式。这对我来说正在进行中,但我以Cory 的脚本为起点并对其进行了扩展,只要有一个 gh-pages 分支_layouts(即 jekyll 站点),它就可以开箱即用。它转换了反引号样式围栏(用于代码块),在 github 源代码浏览中工作得很好,但在 gh-pages 中却不行。我index.md在项目中使用了一个包含,README.md所以我可以添加一个标题和其他一些装饰。此版本还处理任何称为“docs”的嵌套目录中的文档,我发现它在具有多个模块(不是 git 子模块,只是子目录)的项目中很有用:

.git/hooks/post-commit

#!/bin/bash
###
### The following block runs after commit to "master" branch
###
if [ `git rev-parse --abbrev-ref HEAD` == "master" ]; then

    # function to convert a plain .md file to one that renders nicely in gh-pages
    function convert {
        # sed - convert links with *.md to *.html (assumed relative links in local pages)
        # awk - convert backtick fencing to highlights (script from bottom of file)
        sed -e 's/(\(.*\)\.md)/(\1.html)/g' "$1" | awk -f <(sed -e '0,/^#!.*awk/d' $0) > _temp && mv _temp "$1"
    } 

    if ! git show-ref --verify --quiet refs/heads/gh-pages; then
        echo "No gh-pages, so not syncing"
        exit 0
    fi

    # Switch to gh-pages branch to sync it with master
    ###################################################################
    git checkout gh-pages

    mkdir -p _includes

    # Sync the README.md in master to index.md adding jekyll header
    ###################################################################
    git checkout master -- README.md
    if [ -f README.md ]; then
        cp README.md _includes/
        convert _includes/README.md
        git add README.md
        git add _includes/README.md
    fi

    # Generate index if there isn't one already
    ###################################################################
    if [ ! -f index.md ]; then
        echo -e '---\ntitle: Docs\nlayout: default\n---\n\n{% include README.md %}' > index.md
        git add index.md
    fi

    # Generate a header if there isn't one already
    ###################################################################
    if [ ! -f _includes/header.txt ]; then
        echo -e '---\ntitle: Docs\nlayout: default\nhome: \n---\n\n' > _includes/header.txt
        git add _includes/header.txt
    fi

    # Sync the markdown files in all docs/* directories
    ###################################################################
    for file in `git ls-tree -r --name-only master | grep 'docs/.*\.md'`
    do
        git checkout master -- "$file"
        dir=`echo ${file%/*} | sed -e "s,[^/]*,..,g"`
        cat _includes/header.txt | sed -e "s,^home: .*$,home: ${dir}/," > _temp
        cat "$file" >> _temp && mv _temp "$file"
        convert "$file"
        git add "$file"
    done

    git commit -a -m "Sync docs from master branch to docs gh-pages directory"

    # Uncomment the following push if you want to auto push to
    # the gh-pages branch whenever you commit to master locally.
    # This is a little extreme. Use with care!
    ###################################################################
    # git push origin gh-pages

    # Finally, switch back to the master branch and exit block
    git checkout master
fi

exit $?

#!/usr/bin/awk
{
   # Replace backtick fencing (renders well when browsing github) with jekyll directives
   if (/```/) {
      IN = IN?0:1 # Are we already in a fenced section? Toggle.
      if (IN) { # If we are starting a fenced section
         if (/```\s*$/) {
           $0 = $0"text" # empty language is OK for backticks but not for jekyll
         }
         gsub(/```/, "{% highlight ")
         print $0" %}"
      } else { # ending a fenced section
        print "{% endhighlight %}" 
      }
    } else { # not a fencing line
      if (IN) { # but in a fenced section, so add indent to make sure code is rendered with <pre>
        print "    "$0
      } else {
        print
      }
    }
}

与原始版本不同的是,它page.home在所有页面中设置了一个变量。这个可以用来定位根目录的相对路径,所以可以用来定位css之类的静态资源。在_layouts/.default.html我有:

<link rel="stylesheet" href="{{ page.home }}css/main.css">

通过这种方式,我可以编辑 css,在本地构建 jekyll 站点,并在浏览器中查看结果,而无需等待 github 在服务器上构建它。

于 2013-07-12T10:59:15.853 回答
0

我最近制作了一个包gh-pages-generator来解决这个问题 - 它使用多个 MD 文件和一个配置文件生成多页站点。

它正确更新页面之间的所有链接。将更改提交回 gh-pages 分支相对容易使其成为 CI 的一部分。

我在这里这里使用它。

于 2016-08-09T22:34:47.850 回答
0

这并不难,两次复制并粘贴到终端中就可以了。

Jekyll允许您导入您的降价文件,然后它将负责将它们转换为 HTML。诀窍README.mdindex.md使用{% include_relative README.md %}. 我们可以这样做:

值得一试的是如何Jekyll在 github 上设置一个超级准系统站点(它只是两个文件!

设置

您可以复制这两个文件并让您的页面与您当前的自述文件一起运行,只需运行一次设置复制整个代码块并粘贴到终端中):

# Copy our two files to the gh-pages branch
git checkout -b gh-pages &&
wget https://raw.githubusercontent.com/lazamar/barebones-jekyll-project-readme/master/_config.yml &&
wget https://raw.githubusercontent.com/lazamar/barebones-jekyll-project-readme/master/index.md &&
#
# Commit and publish our page on github
git add -A && git commit -m "Create project github page" &&
git push --set-upstream origin gh-pages |
#
git checkout master # go back to master branch

自动化

然后我们只需要在每次推送之前自动化将所有更改从分支复制master到分支的任务。gh-pages我们可以通过运行此脚本来做到这一点(您可以将其复制并粘贴到终端中

$(cat > .git/hooks/pre-push << EOF
#!/bin/sh
we_are_in_gh_pages="\$(git branch | grep -G "* gh-pages")"

if [ ! "\$we_are_in_gh_pages" ];
  then
    git checkout gh-pages &&
    git rebase master &&
    git push -f &&
    git checkout master # go back to master branch
fi
EOF
) && chmod 775 .git/hooks/pre-push

它将创建一个推送挂钩,将所有更改从master分支复制到gh-pages您每次运行时git push

就是这样。完毕。

于 2016-10-14T14:54:07.653 回答