精华内容
下载资源
问答
  • 当为URL重新加载页面时,例如example.tld/foo ,其中/foo是前端路由,则GitHub Pages服务器返回404,因为它不知道/foo 。 这个怎么运作 当GitHub Pages服务器收到使用前端路由定义的路径的请求时,例如example.tld/...
  • #如何使用Github pages写博客 为什么要用Github pages搭建博客? 免费,虽然csdn、cnblog也是免费的,但是那种只提供在线编辑,不能随意修改页面样式的网站当然没法满足我们这种折腾惯了的个人站长。用wordpress自己...
  • 用于学术网站的Github Pages模板。 这是从“ (这是:copyright:2016 Michael Rose,并根据MIT许可发行的)中派生的(然后分离)。 请参阅LICENSE.md。 我认为我的工作进展顺利,并修复了一些主要错误,但是如果您想...
  • nextjs-githubpages 使用部署到的静态 Web应用程序的模板。 该回购的结果可以在上看到 开始吧 安装和 (可选) 单击此页面顶部的绿色“使用此模板”按钮,然后按照说明进行操作。 这将创建此仓库的副本。 您可以...
  • 如何通过GitHub Pages托管Swagger API文档 该存储库是一个模板,用于使用为API动态生成漂亮的文档并通过GitHub Pages免费托管。 该模板将定期自动更新Swagger UI依赖关系并创建拉取请求。 在查看。 可以在托管该...
  • Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行?&??-附件资源
  • 将Blazor部署到GitHub Pages 该通过gh-pages分支将存储库中的Blazor WebAssembly项目发布并部署到 。 可以在示例中看到它。 这将自动执行所有必需的设置,包括添加.nojekyll文件和404.html页面重定向解决方法,这...
  • Hugo部署到GitHub PagesGitHub动作将构建您的,然后将其发布回 。 机密 TOKEN :可以推送到其他存储库的GitHub访问令牌,在这种情况下,它将是您的GitHub页面存储库。 我们不能用GITHUB_TOKEN定义,因为它是一个...
  • github pagesgithub 免费为用户提供的服务,写博客,或者部署一些纯静态项目。 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下。 https://github.com/nusr/resume-vue 1. vue-router ...
  • Modernist是GitHub Pages的Jekyll主题。 您可以,甚至也可以。 用法 要使用现代派主题: 将以下内容添加到您网站的_config.yml : theme : jekyll-theme-modernist (可选)如果您想在计算机上预览站点,请将...
  • 使用GitHub Pages创建自己的网站! 让我们暂时做到这一点! 创建GitHub帐户 (因为它将成为网站名称的一部分,所以请给它起一个好名字。注册后,请检查来自GitHub的电子邮件并进行验证!) 按右上角的Fork复制作为...
  • 这是什么 RKyo65535中的人们似乎想尽力而为。似乎引发了图像和神秘的页面 执照 图片发布于CC BY-NC 4.0 您可以自由使用脚本,但是对于由脚本造成的任何损害,我们概不负责。 如有变更,恕不另行通知。...
  • GitHub Action,可为GitHub Pages方便地部署Jekyll站点。 故事 如我们所知,GitHub Pages在safe模式下运行,并且仅允许。 要在GitHub Pages中使用gem,您需要在本地构建或使用CI(例如 , )并将其部署到gh-pages...
  • 这是一个模板和一些使用运行 Github Pages 的说明。 这个 repo 包含我认为使用和的个人博客的最少部分: Frontpage 包含您最近的博客文章: _pages/frontpage.md 存档所有帖子: _pages/archive.md 关于页面: _...
  • 不幸的是,Jekyll Paper通过'jekyll-archive'插件实现了类别页面,而GitHub Pages不支持它。 因此,该项目是针对自托管博客的,Github Pages版本也可以在。 这是Jekyll Paper的。 产品特点 React灵敏 分页 的RSS ...
  • Cayman是GitHub Pages的Jekyll主题。 您可以,甚至也可以。 用法 使用开曼主题: 将以下内容添加到您网站的_config.yml : theme : jekyll-theme-cayman (可选)如果您想在计算机上预览站点,请将以下内容添加...
  • 主要介绍了使用 Github Actions 自动部署 Angular 应用到 Github Pages,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • GitHub Pages-crx插件

    2021-04-04 19:58:54
    语言:English 将链接添加到GitHub存储库的GitHub页面
  • 部署到GitHub PagesGitHub Action 如果您有兴趣,我的其他 GitHub动作! 用法 工作流程 以下是使用虚拟HTML页面部署到GitHub Pages的简单代码段。 该存储库还提供了,并且部署。 name : website on : push jobs...
  • OpenPWA是使用Github Pages部署pwa的样板。 如何建立自己的? 在github上分叉这个项目 在设置中启用Github页面选项 完毕!! 在GitHub页面部分中获取链接 :red_exclamation_mark: :white_exclamation_mark: 这包括...
  • 当repo中有一个gh-pages分支但没有设置主页时,将缺失的链接添加到存储库页面。 支持语言:English
  • 页面博客 针对GitHub Pages的自动更新博客创建操作
  • 一个样板项目,包括对Jekyll,GulpJS,SASS,PostCSS,BrowserSync,Autoprefixer的完整设置,以及使用Gulp部署到GitHub Pages。 样板中装有Bootstrap和jQuery(通过CDN),以帮助您开始进行项目。 我还提供了一些...
  • Github Pages 无法更新

    千次阅读 2019-12-26 13:25:28
    写了一篇文章,提交到 GitHub Pages,但不知道为什么,一直无法显示出来。文章查了很多遍,没有找到原因。折腾了一上午,毫无进展。 搁置了几天后,打开 163 邮箱,发现 GitHub 发了很多邮件: 打开一看,算是明白...

    写了一篇文章,提交到 GitHub Pages,但不知道为什么,一直无法显示出来。文章查了很多遍,没有找到原因。折腾了一上午,毫无进展。

    搁置了几天后,打开 163 邮箱,发现 GitHub 发了很多邮件:

    打开一看,算是明白了。

    按照提示把问题修正一下就 OK 了。

    展开全文
  • ta下 我的第一个GitHub Pages存储库
  • github-pages-deploy GitHub Pages部署脚本 安装 此命令取决于Git。 $ git clone https://github.com/dceoy/github-pages-deploy.git $ cp github-pages-deploy/github-pages-deploy /path/to/bin/ # a path in ${...
  • 文章目录第一步,建立Github仓库第二步,设置仓库开启Github Pages第三步,使用Github内置主题第四步,jekyll的目录结构第五步,jekyll的模板编程语言Liquid的使用第六步,_config.yml配置第七步,_layout模板配置 ...

    本文将会全面介绍一下如何使用Github Pages + jekyll搭建个人站点,所谓极简的意思就是不用使用git和本地构建jekll服务,直接在Github网站上编辑设置即可,但会涉及到jekll的一些配置和编程控制。可以参看我的网站模板:https://scottcgi.github.io 使用了github内置的主题修改而成。

    第一步,建立Github仓库

    首先到这里Github,创建一个仓库。

    仓库名称有固定的格式: username.github.io,其中username必须是Github账户的用户名(我的是scottcgi),github.io是固定的,这个地址将会成为个人站点的网站地址。另外,我们可以勾选Initialize this repository with a README,让仓库自动创建一个README.md文件,我们用它来做站点的首页(当然也可以不创建,后面自行创建,或是建立index.html也行)。

    注意: username如果不是Github账户名,这个仓库就会成为username.github.io的子站点,比如访问地址会是:username.github.io/aaa.github.io。可见,username.github.io是github默认分配给你的域名,同名仓库即代表着默认网站内容。而username.github.io/仓库名称,是用来访问你的其它仓库的地址。

    第二步,设置仓库开启Github Pages

    进入仓库设置界面,如图。

    这里能够重新修改仓库的名称,比如这个仓库内容是fork别人的,就可以在这里修改成自己的username.github.io名称。

    Setting页面下有Github Pages的设置选项。绿色表示部署成功,每次修改仓库内容,都会出发Github jekyll重新编译部署,需要1-2分钟的时间,更新才能体现。如果有编译错误,包括js,css,html,markdown语法问题,都会显示红色以及错误页面和行号,同时会发邮件通知。其中,Source有以下几个选项:

    • gh-pages branch 是项目新建一个分支命名为这个,使用这个分支来做站点内容。
    • master branch 是使用主分支也是默认的,来作为站点内容。
    • master branch/docs folder 是使用主分支的docs文件夹来作为站点内容。
    • None 就是禁用Github Pages。

    如果是username.github.io只能使用主分支,其它仓库项目可以选择其它两个。接下来Choose a theme是Github提供的内置的网站主题,选择即可应用无需其它设置。Custom domain是自定义域名,本文暂不讨论。

    第三步,使用Github内置主题

    选择好主题,过一会刷新网站地址就已经能看到效果了,而在Code页面仅有两个文件。

    编辑README.md文件的内容,就会默认显示在网站首页,_config.yml 是jekyll的全局配置文件,现在里面只有一句话,theme: jekyll-theme-modernist。我们可以手动修改这个theme主题配置,网站就会应用不同的主题。

    Github内置支持的几个主题,官方的仓库在这里:https://pages.github.com/themes,每个README.md里都有介绍如何设置。

    那么我们现在就有两种方法来使用这些主题:

    • 第一种,就是直接fork一个主题仓库,然后修改仓库名称为我们自己的,然后修改我们需要的部分。

    • 第二种,只是简单的Choose (Change) theme(或在_config.yml设置theme),然后我们对照着官方仓库的主题目录,需要改什么文件就按照同样的路径拷贝单独一个文件到自己的仓库来修改(保持路径一致),这样就可以保持自己仓库的简洁。(如果使用了github内置的主题,github就会把你仓库的内容和内置主题内容合并到一起编译成静态网页。)

    另外,更多主题可以参看这两个地址(不要挑花眼了): jekyll themesjekyll wiki site

    第四步,jekyll的目录结构

    我们只需要关注几个核心的目录结构如下(可以自己创建):

    • _layouts (存放页面模板,md或html文件的内容会填充模板)
    • _sass(存放样式表)
    • _includes (可以复用在其它页面被include的html页面)
    • _posts(博客文章页面)
    • assets(原生的资源文件)
      • js
      • css
      • image
    • _config.yml (全局配置文件)
    • index.html, index.md, README.md (首页index.html优先级最高,如果没有index,默认启用README.md文件)
    • 自定义文件和目录

    更多更详细的目录结构参看jekyll官网:https://jekyllrb.com/docs/structure

    第五步,jekyll的模板编程语言Liquid的使用

    • 变量 {{ variable }} 被嵌入在页面中,会在静态页面生成的时候被替换成具体的数值。常用的全局变量对象有:sitepage。这两个对象有很多默认自带的属性,比如:{{ site.time }}{{ page.url }}。更多的默认值参看:https://jekyllrb.com/docs/variables

      • site对象对应的就是网站范围,自定义变量放在_config.yml中,比如title:标题使用{{ site.title }}访问。
      • page对象对应的是单个页面,自定义变量放在每个页面的最开头,比如:
         ---
         myNum:100
         myStr:我是字符串
         ---
        
        使用{{ page.myNum }}{{ page.myStr }} 访问。
    • 条件判断语句,更多详见:https://shopify.github.io/liquid/tags/control-flow

      {% if site.title == 'Awesome Shoes' %}
          These shoes are awesome!
      {% endif %}
      
      {% if site.name == 'kevin' %}
          Hey Kevin!
      {% elsif site.name == 'anonymous' %}
          Hey Anonymous!
      {% else %}
          Hi Stranger!
      {% endif %}
      
    • 循环迭代,更多详见:https://shopify.github.io/liquid/tags/iteration

      {% for product in collection.products %}
          {{ product.title }}
      {% endfor %}
      
    • 默认函数,可以对变量进行一些处理,比如大小写转化、数学运算、格式化、排序等等,在Liquid中叫做Filters。比如{{ "Hello World!" | downcase }}转换字符串为小写。更多内置函数详见:https://jekyllrb.com/docs/liquid/filters

    第六步,使用_config.yml文件设置jekyll

    如果不是fork别人的仓库,就需要自己创建一个这个文件。然后,我们就可以配置一些默认的属性来控制jekyll的编译过程。更多详细的内置属性详见:https://jekyllrb.com/docs/configuration/default

    同时我们可以自定变量,会自动绑定到site对象上,比如我们可以把导航配置到_config.yml中:

    nav:
    - name: Home
      link: /
    - name: About
      link: /about.html
    
    // 以下嵌入页面,page.url以 "/" 开头
    <nav>
      {% for item in site.nav %}
        <a href="{{ item.link }}" 
          {% if page.url == item.link %} style="color: red;" {% endif %}
        >
          {{ item.name }}
        </a>
      {% endfor %}
    </nav>
    

    当然,我们也可以把一些数据单独放入一个yml文件,然后放在固定的数据文件夹_data下,比如_data/navigation.yml,这样访问这个文件的数据对象就是site.data.navigation

    第七步,_layouts模板配置

    _layouts文件夹存放的是页面模板,默认需要一个default.html,什么意思?就是说,layout提供一个页面的布局框架,这是固定的模式,包括样式、结构、布局、脚本控制等等。然后,我们在用其它md或html文件去动态填充这个框架,这样就形成了一个完整的页面。比如我的default.html页面如下:

    <!doctype html>
    <html lang="{{ page.lang | default: site.lang }}">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        {% seo %}
    
        <link rel="icon" href="https://avatars0.githubusercontent.com/u/1797320" type="image/x-icon" title="scottcgi">
        <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
        
        <script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    
      </head>
      <body>
        <div class="wrapper">
          <header {% unless site.description or site.github.project_tagline %} class="without-description" {% endunless %}>
            <h1>{{ site.title | default: site.github.repository_name }}</h1> 
            <p>{{ page.description | default: site.description }}</p>
           
            <ul>
            {% for item in site.nav %}
              {% if page.url == item.link %}
                <li style="background-color:#069">
                  <a href="{{ item.link }}">
                    <strong>{{ item.name }}</strong>
                  </a>
                </li>
              {% else %}
                <li><a href="{{ item.link }}">{{ item.name }}</a></li>
              {% endif %}
            {% endfor %}
            </ul>
          </header>
          <section>
    
          {{ content }}
    
          </section>
        </div>
        
        <footer>
          <p>{{ site.copyright | default: "copyright not found in _config.yml" }}</p>
        </footer>
      </body>
    </html>
    
    • {% seo %} 是jekyll的一个插件提供的seo优化,详情在这里:https://github.com/jekyll/jekyll-seo-tag
    • 核心在于 {{ content }} 这个变量是内置的,会用我们的md或html页面填充这部分内容。
    • 其它的,我们看到会大量使用变量和流程控制代码,来填充模板的方方面面。
    • 于是,填充模板的内容,一方面是来自读取配置文件的变量,一方面是来自_includes的页面,还有就是来自 {{ content }} 对应的页面。

    当然,我们也可以不使用 {{ content }} 来填充模板,而是使用_includes的页面来代替{{ content }} ,但这样不够灵活,因为使用 {{ content }},我们可以在每个页面单独设置对应的layout模板。

    第八步,md和html页面编写

    站点内容页面,可以使用markdown或html来编写,但markdown编写的md文件,在浏览器地址访问的时候依然使用html文件后缀。推荐使用markdown来书写内容,语法参见:Github md 示例Github md 教程。比如下面这个About.md页面:

    ---
    layout: default
    title: About
    ---
    # About page
    
    This page tells you a little bit about me.
    

    layout: default 就是告诉jekyll这个页面使用哪个模板,即这个页面会放入哪个模板的{{ content }}。当然,我们可以在_layouts文件夹下提供多个不同的模板,然后根据需要不同的页面使用不同的layout

    页面可以放在任意位置和目录,访问的时候从站点域名开始,带上目录名称,再次注意需要使用html结尾。如果想要自定义浏览器的访问路径,可以参看详细设置:permalinks

    md和html页面的区别:

    • md有自己的语法,可以使用少量的html标签,最终会编译成html,侧重于内容编写。
    • html可以随意使用html标签,可以使用liquid模板语言,侧重于页面模板和功能控制。

    至此,我们就可以在github上,新建md文件然后编辑提交,等待几分钟编译生成之后,就可以在浏览器里看到页面内容了。

    第九步,博客文章编写和管理

    我们自然可以新建目录,提交文章,然后添加一个文章列表页面。但我们也可以把这些交给jekyll的内置机制来完成,因为它提供了一些方便的内置文章管理功能。

    • _posts文件夹是内置的放置文章的目录,我们可以将固定格式year-moth-day-name.md名称的md文件放到这里。比如新建一篇md的博客文章放到_posts目录下:

      ---
      layout: post
      ---
      这是一篇博客文章。
      
    • 接下来我们需要添加一个post的模板页面到_layouts文件夹下面。

      ---
      layout: default
      ---
      
      <h1>{{ page.title }}</h1>
      <p>{{ page.date | date_to_string }} - {{ page.author }}</p>
      
      {{ content }}
      

      可见,模板页面本身也可以使用模板,这里post使用了default模板,而这里{{ content }} 就会填充_posts下面编写的页面(如果页面使用了layout: post模板)。

    • 最后,我们还需要编写一个博客文章列表的页面,用来展示所有的文章。比如在根目录新建blog.html页面:

      ---
      layout: default
      title: Blog
      ---
      
      <h1>Latest Posts</h1>
      
      <ul>
        {% for post in site.posts %}
          <li>
            <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
            <p>{{ post.excerpt }}</p>
          </li>
        {% endfor %}
      </ul>
      
      • site.posts jekyll会自动生成_posts目录的对象。
      • post.url jekyll会自动会设置在_posts目录下的页面url。
      • post.title 默认是md文件名称,但也可以在文章页面自定义title: 我的文章自定义名称
      • post.excerpt 默认是文章第一段的摘要文字。

    第十步,Github Pages的限制

    Github Pages 并不是无限存储和无限流量的静态站点服务,一些限制如下:

    • 内容存储不能超过1GB。
    • 每个月100GB流量带宽。
    • 每小时编译构建次数不超过10次。(在线修改重新编译并未发现这个限制)
    • 更多参看官方说明:usage-limits

    总结

    在实际的使用过程中,我发现完全可以在Github网站上,编写md和html页面,修改js和css文件,来完成站点的设置和搭建。只不过每次修改都要触发Github jekyll的编译行为,有点慢(不知道是不是增量编译),没有在本地修改调试的速度快。

    更多jekyll详细的设置和功能,参看官方网站的文档:https://jekyllrb.com/docs

    展开全文
  • GitHub Pages 兼容的 Jekyll 环境的 Vagrant 文件 用于构建与 GitHub Pages 兼容的 Jekyll 环境的简单 Vagrant 文件。 使用“官方”github-pages gem。 使用此环境构建和测试基于 GitHub Pages 的 Jekyll 站点,...
  • Hexo与Github Pages搭建个人博客 Hexo与Github Pages搭建个人博客 系统环境配置 安装Nodejs和Git 安装Hexo Github Pages Github Pages是什么 表格 定义列表 代码块 脚注 目录 数学公式 UML 图 离线写博客 ...

    Hexo与Github Pages搭建个人博客


    系统环境配置

    配置安装环境:

    • Ubuntu 16.04.3 LTS
    • 4.4.0-93-generic
    hexo: 3.3.9
    hexo-cli: 1.0.3
    os: Linux 4.4.0-93-generic linux x64
    http_parser: 2.5.0
    node: 4.2.6
    v8: 4.5.103.35
    uv: 1.8.0
    zlib: 1.2.8
    ares: 1.10.1-DEV
    icu: 55.1
    modules: 46
    openssl: 1.0.2g-fips
    

    使用Hexo需要在系统上支持Nodejs和Git。

    安装Node.js和Git

    sudo apt-get install nodejs
    sudo apt-get install npm
    sudo apt-get install git 
    

    注意:
    如果在后面使用过程中报错信息/bin/sh: 1: node: not found,是由于Ubuntu重命名node命令为nodejs导致,可以采用安装nodejs-legacy或者建立符号链接来修复该问题。

    sudo apt-get update && sudo apt-get install nodejs-legacy
    sudo ln -s /usr/bin/nodejs /usr/bin/node
    

    ###安装Hexo

    $ cd ~/hexo
    $ npm install hexo-cli -g
    $ hexo init blog
    $ cd blog
    $ npm install
    $ hexo g # 或者hexo generate
    $ hexo s # 或者hexo server,可以在http://localhost:4000/ 查看
    

    常用的Hexo的几个命令:

    1. hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
    2. hexo server (hexo s) 启动本地web服务,用于博客的预览
    3. hexo deploy (hexo d) 部署播客到远端(比如github, heroku等平台)

    其他常用命令:

    $ hexo new "postName" #新建文章
    $ hexo new page "pageName" #新建页面
    

    常用简写

    $ hexo n == hexo new
    $ hexo g == hexo generate
    $ hexo s == hexo server
    $ hexo d == hexo deploy
    

    常用组合

    $ hexo d -g #生成部署
    $ hexo s -g #生成预览
    

    我们在终端下输入hexo s启动hexo server服务,在浏览器中输入localhost:4000,可以看到启动界面,如下图所示:
    这里写图片描述

    Github Pages

    Github Pages是什么

    Gihub Pages用于介绍在GitHub托管的项目,不过,由于他的空间免费稳定,很适合用来搭建一个博客。
    每个帐号只能有一个仓库来存放个人主页,而且仓库的名字必须是username/username.github.io,这是特殊的命名约定。你可以通过http://username.github.io 来访问你的个人主页。注意个人主页的网站内容是在master分支下的。
    ###创建自己的Github Pages
    创建自己的Github Pages需要在项目的Settings下找到Github Pages选项,选择Choose a theme生成自己的Github Pages,创建完成之后需要有一次提交操作git commit,之后就可以通过http://username.github.io访问了。
    这里写图片描述

    部署Hexo到Github Pages

    部署Github的原理

    1. 之前步骤中在Github上创建的那个特别的repo(username.github.io)一个最大的特点就是其master中的html静态文件,可以通过链接http://username.github.io来直接访问。
    2. Hexo -g 会生成一个静态网站(第一次会生成一个public目录),这个静态文件可以直接访问。
    3. 需要将hexo生成的静态网站,提交(git commit)到github上。

    使用hexo deployment部署

    hexo可以部署到很多平台,具体参考deployment,如果需要部署到github,需要_config.yml中做如下修改:

    deploy:
      type: git
      repo: git@github.com:username/username.github.io.git
      branch: master
    

    然后在命令行中执行如下命令完成部署。

    hexo d
    

    表格

    Markdown Extra 表格语法:

    项目价格
    Computer$1600
    Phone$12
    Pipe$1

    可以使用冒号来定义对齐方式:

    项目价格数量
    Computer1600 元5
    Phone12 元12
    Pipe1 元234

    定义列表

    Markdown Extra 定义列表语法:
    项目1
    项目2
    : 定义 A
    : 定义 B

    项目3

    定义 C

    定义 D

    定义D内容

    代码块

    代码块语法遵循标准markdown代码,例如:

    @requires_authorization
    def somefunc(param1='', param2=0):
        '''A docstring'''
        if param1 > param2: # interesting
            print 'Greater'
        return (param2 - param1 + 1) or None
    class SomeClass:
        pass
    >>> message = '''interpreter
    ... prompt'''
    

    脚注

    生成一个脚注1.

    目录

    [TOC]来生成目录:

    数学公式

    使用MathJax渲染LaTex 数学公式,详见math.stackexchange.com.

    • 行内公式,数学公式为: Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN
    • 块级公式:

    x = − b ± b 2 − 4 a c 2 a x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} x=2ab±b24ac

    更多LaTex语法请参考 [这儿][3].

    UML 图:

    可以渲染序列图:

    张三 李四 嘿,小四儿, 写博客了没? 李四愣了一下,说 忙得吐血,哪有时间写。 张三 李四

    或者流程图:

    Created with Raphaël 2.2.0 开始 我的操作 确认? 结束 yes no
    • 关于 序列图 语法,参考 [这儿][4],
    • 关于 流程图 语法,参考 [这儿][5].

    离线写博客

    即使用户在没有网络的情况下,也可以通过本编辑器离线写博客(直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

    用户写博客的过程中,内容实时保存在浏览器缓存中,在用户关闭浏览器或者其它异常情况下,内容不会丢失。用户再次打开浏览器时,会显示上次用户正在编辑的没有发表的内容。

    博客发表后,本地缓存将被删除。

    用户可以选择 把正在写的博客保存到服务器草稿箱,即使换浏览器或者清除缓存,内容也不会丢失。

    **注意:**虽然浏览器存储大部分时候都比较可靠,但为了您的数据安全,在联网后,请务必及时发表或者保存到服务器草稿箱

    浏览器兼容

    1. 目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
    2. IE9以下不支持
    3. IE9,10,11存在以下问题
      1. 不支持离线功能
      2. IE9不支持文件导入导出
      3. IE10不支持拖拽文件导入

    参考链接
    1.手把手教你使用Hexo + Github Pages搭建个人独立博客
    2.如何搭建一个独立博客——简明Github Pages与Hexo教程
    3.使用Github Pages建独立博客
    4.手把手教你用Hexo+Github 搭建属于自己的博客
    5.hexo next 为文章添加分类
    6.Hexo使用攻略-添加分类及标签
    7.hexo之next主题优化整理


    1. 这里是 脚注内容. ↩︎

    展开全文
  • 最开始的灵感来源为使用 travis + gitbook + github pages 优雅地发布自己的书[^1],后来在学习的过程中发现Github Actions和Github结合的更加密切,因此将Travis CI替换成了Github Actions,并在原文的基础上进行了...

    前言

    本文最终实现的是:利用Github Actions自动导出Gitbook并将其部署到Github Pages

    效果展示:https://wangzhebufangqi.github.io/Leetcode/

    项目github地址:https://github.com/wangzhebufangqi/auto-export-gitbook
    (如果觉得有趣,不妨点个star!😄后续更新第一时间会放在这个仓库)

    最开始的灵感来源为使用 travis + gitbook + github pages 优雅地发布自己的书1,后来在学习的过程中发现Github Actions和Github结合的更加密切,因此将Travis CI替换成了Github Actions,并在原文的基础上进行了一系列优化。

    本文涉及到的主要工具、技术有:

    • markdown
    • gitbook
    • git/github
    • github pages
    • travis ci
    • github actions

    默认你会以下的技能:

    • 使用过github,掌握了一定的命令
    • fq

    Getting Started

    如果你想快速使用👉使用方法
    (最终使用时本地无需安装gitbook,本地只需要配置好git环境)

    Gitbook

    安装

    环境需求

    • NodeJS(4.0及以上版本)
    • Windows, Linux, Unix, 或 Mac OS X

    其中,NodeJS可在其官网(https://nodejs.org/zh-cn/)下载安装。安装好后可查看版本号:

    image-20201118151905747

    利用npm安装gitbook

    安装好NodeJS后,可利用它的包管理器(npm)安装gitbook:

    npm install gitbook-cli -g
    

    npm的包安装分为本地安装(local)、全局安装(global)两种
    本地安装:
    npm install xxx 安装到命令行所在目录的node_module目录。
    全局安装:
    npm install xxx -g 安装到 \AppData\Roaming\npm\node_modules目录

    gitbook-cli是一个实用程序,可在同一系统上安装和使用多个版本的gitbook。 它将自动安装所需版本的gitbook。安装好后可查看版本号:

    image-20201118151758803

    创建

    gitbook能创建模板书:

    gitbook init [./directory]
    

    最后一个参数为创建的目录,可省略,默认为当前目录下。

    image-20201118154028943

    命令执行完后会生成两个文件:README.mdSUMMARY.md

    README.md文件用来介绍该书籍,SUMMARY.md文件为该书籍的目录。

    对SUMMARY.md文件进行如下编辑:

    # Summary
    
    * [Introduction](README.md)
    * [Easy](easy/README.md)
        * [1.Two Sum](easy/1.Two Sum.md)
        * [7.Reverse Integer](easy/7.Reverse Integer.md)
    * [Medium](medium/README.md)
        * [2.Add Two Numbers](medium/2.Add Two Numbers.md)
        * [3.Longest Substring Without Repeating Characters](medium/3.Longest Substring Without Repeating Characters.md)
    

    再次执行命令gitbook init,如果目录里的文件不存在,将会自动创建:

    image-20201118155520614

    然后我们对其中的md文件编写相应的内容即可。

    输出

    website

    执行命令可进行预览:

    gitbook serve ./{book_name} 
    

    最后一个参数指定输出静态网站内容的目录,可省略,默认会在当前目录下新建一个子目录_book

    image-20201118160610682

    若只执行gitbook build,会生成_book目录,但不能预览。

    _book目录中包含以下文件:

    │  index.html
    │  search_index.json
    │
    ├─easy
    │      1.Two Sum.html
    │      1.Two Sum.md
    │      7.Reverse Integer.html
    │      7.Reverse Integer.md
    │      index.html
    │      README.md
    │
    ├─gitbook
    │  │  gitbook.js
    │  │  style.css
    │  │  theme.js
    │  │
    │  ├─fonts
    │  │  └─fontawesome
    |  |		..(略)
    │  ├─gitbook-plugin-fontsettings
    |  |		..
    │  ├─gitbook-plugin-highlight
    │  │		..
    │  ├─gitbook-plugin-livereload
    │  │		..
    │  ├─gitbook-plugin-lunr
    │  │		..
    │  ├─gitbook-plugin-search
    │  │		..
    │  ├─gitbook-plugin-sharing
    │  │		..
    │  └─images
    │          apple-touch-icon-precomposed-152.png
    │          favicon.ico
    └─medium
            2.Add Two Numbers.html
            2.Add Two Numbers.md
            3.Longest Substring Without Repeating Characters.html
            3.Longest Substring Without Repeating Characters.md
            index.html
            README.md
    

    可以看到原md文件都对应生成了一个html文件(README.md生成了index.html),新生成的gitbook文件夹包含了一些主题、样式、字体、插件、图像等。

    同时也可以看到,默认加载了7个插件。关于插件的内容,后文会详细介绍。

    在网址localhost:4000即可预览书籍,即本机的4000端口。按CTRL+C键可退出,退出后,浏览器页面点击目录不再跳转。

    image-20201118160828465

    这时候如果想将书籍提供给他人阅读,岂不是只需要将这个静态网站打包,再上传到服务器上即可?没错!就是这样。

    ebook

    gitbook创建的书籍还可以导出为电子书,比如pdf、epub和mobi格式。

    gitbook pdf ./ ./mybook.pdf
    
    gitbook epub ./ ./mybook.epub
    
    gitbook mobi ./ ./mybook.mobi
    

    其中,最后一个参数表示输出文件的文件名,可省略,默认输出为当前目录下的book文件。
    再前面一个参数表示gitbook所在的目录。

    直接运行上述命令可能会报错,导出电子书之前,需先安装一款本地电子书管理工具:Calibre

    安装后记得将其安装根目录添加到环境变量PATH中

    然后就可以成功的导出为电子书了。

    转成的pdf格式如下:

    image-20201118165358050

    可惜的是有个小问题,导出的pdf无论是左侧书签还是TOC目录,在跳转上存在着一些问题。但是导出的epub和mobi都非常棒。

    配置

    所有的配置都以JSON格式存储在名为 book.json 的文件中。主要有以下字段:

    字段示例说明
    gitbook{ “gitbook”: “>=2.0.0” }探测用来生成书本的GitBook的版本。格式是一个 SEMVER 条件。
    title{“title”: “Summary”}书名,默认从README中提取
    authon{“author”: “tom”}作者名
    description{ “description”: “This is my first book!” }定义了书本的描述,默认是从 README(第一段)中提取的。
    isbn{ “isbn”: “978-7-115-32010-0” }定义了书本的ISBN
    language{ “language”: “fr” }定义了书本的语言,默认值是 en
    direction{ “direction”: “rtl” }用来重新设置语言的文字方向的。rtl:从右至左。ltr:从左至右
    styles{“styles”: { “website”: “styles/website.css”, “pdf”: “styles/pdf.css” } }自定义书本的css
    plugins{ “plugins”: [“myplugins”] }插件列表
    pluginsConfig{ “pluginsConfig”: { “myplugins”: { “message”: “Hello World” } } }插件配置
    structure{ “structure”: {“readme”: “INTRO.md” } }指定README,SUMMARY等文件的路径
    variables{ “variables”: { “myTest”: “Hello World” } }定义在 模板 中使用的变量值
    links“links” : { “sidebar” : { “Home” : “https://wangzhebufangqi.github.io” } }在左侧导航栏添加链接信息

    插件

    插件是扩展 GitBook 功能(电子书和网站)最好的方式。

    查找插件

    在nmp官网(https://www.npmjs.com/ )上搜索关键词gitbook-plugingitbook即可

    添加插件

    添加至book.json文件后,再执行命令gitbook install将插件下载至本地即可

    {
    	"plugins": ["myPlugin", "anotherPlugin"]
    }
    

    删除插件

    如果不想使用自带的插件,在插件名称前面加-

    {
    	"plugins":[ "-search"]
    }
    

    如果不是自带的,将其从插件列表中去掉即可。

    插件推荐

    折叠目录👉Expandable-chapters-small

    {    
        "plugins": ["expandable-chapters-small"] 
    }
    

    提供非官方的github按钮(star, fork, sponsor, and follow )👉github-buttons

    {
      "plugins": [
        "github-buttons"
      ],
      "pluginsConfig": {
        "github-buttons": {
          "buttons": [{
            "user": "azu",
            "repo": "JavaScript-Plugin-Architecture",
            "type": "star",
            "size": "large"
          }, {
            "user": "azu",
            "type": "follow",
            "width": "230",
            "count": false
          }]
        }
      }
    }
    
    OptionDescription备注
    userGitHub username that owns the repo/Username to sponsor必须,用户名
    repoGitHub repository to pull the forks and watchers counts必须,仓库名
    typeType of button to show: watch, fork, sponsor, or follow必须,4种类型之一
    countShow the optional watchers or forks count: none by default or true可选,是否显示计数
    sizeOptional flag for using a larger button: none by default or large可选,按钮大小

    Google Analysis👉ga

    {
        "plugins": ["ga"],
        "pluginsConfig": {
            "ga": {
                "token": "UA-XXXX-Y"
            }
        }
    }
    

    在Google Analysis官网(https://analytics.google.com/)(需fq)开通服务获取Token

    百度多渠道统计👉baidu-tongji-with-multiple-channel

    单渠道:

    {
        "plugins": [
            "baidu-tongji-with-multiple-channel"
        ],
        "pluginsConfig": {
            "baidu-tongji-with-multiple-channel": {
                "token": "73be72a36cee8ef8daa9843c7861cecc"
            }
        }
    }
    

    推荐!百度统计官网:https://tongji.baidu.com/

    Disqus评论插件👉disqus

    {
        "plugins": ["disqus"],
        "pluginsConfig": {
            "disqus": {
                "shortName": "XXXXXXX"
            }
        }
    }
    

    登录disqus官网(https://disqus.com/)(需fq),申请一个shortName。

    页面顶部编辑本页👉editlink

    {
      "plugins": ["editlink"],
      "pluginsConfig": {
        "editlink": {
          "base": "https://github.com/zhaoda/webpack-handbook/edit/master/content",
          "label": "Edit This Page",
          "multilingual": false
        }
      }
    }
    

    复制代码按钮👉copy-code-button

    {
        "plugins": ["copy-code-button"]
    }
    

    锚点导航-ex👉anchor-navigation-ex

    {
      "plugins": [
           "anchor-navigation-ex"
      ]
    }
    
    • 给页面H1-H6标题增加锚点效果
    • 浮动导航模式
    • 页面内顶部导航模式
    • 导航标题前的层级图标是否显示,自定义H1-H3的层级图标
    • plugins[“theme-default”],页面标题层级与官方默认主题的showLevel层级关联
    • plugins[“theme-default”],插件样式支持官网默认主题的三种样式:White、Sepia、Night
    • 在页面中增加<extoc></extoc>标签,会在此处生成TOC目录
    • 在页面中增加<!-- ex_nonav -->标签,不会在该页面生成悬浮导航
    • config.printLog=true,打印当前的处理进度,排错很有用
    • config.multipleH1=false,去掉丑陋的多余的1. 序号(如过您的书籍遵循一个MD文件只有一个H1标签的话)
    • config.showGoTop=true,显示返回顶部按钮 V1.0.11+
    • config.float.floatIcon 可以配置浮动导航的悬浮图标样式 V1.0.12+
    • 在页面中增加<!-- ex_nolevel -->不会在该页面生成层级序号 V1.0.12+

    定制页脚👉page-footer-ex

    {
        "plugins": [
            "page-footer-ex"
        ],
        "pluginsConfig": {
            "page-footer-ex": {
                "copyright": "[mrcode](https://github.com/zq99299)",
                "markdown": true,
                "update_label": "<i>updated</i>",
                "update_format": "YYYY-MM-DD HH:mm:ss"
            }
        }
    }
    

    基于Prism的代码高亮👉prism

    使用prism时,要移除默认的代码高亮插件highlight

    {
      "plugins": ["prism", "-highlight"]
    }
    

    选择CSS样式:(https://github.com/PrismJS/prism

    "pluginsConfig": {
      "prism": {
        "css": [
          "prismjs/themes/prism-solarizedlight.css"
        ]
      }
    }
    

    通过别名化现有前缀来支持非标准语法前缀:

    "pluginsConfig": {
      "prism": {
        "lang": {
          "flow": "typescript"
        }
      }
    }
    

    忽视某些语言:

    "pluginsConfig": {
      "prism": {
        "ignore": [
          "mermaid",
          "eval-js"
        ]
      }
    }
    

    中文搜索👉search-pro

    {
        "plugins": [
          "-lunr", "-search", "search-pro"
        ]
    }
    

    捐赠打赏👉donate

    {
        "plugins": ["donate"],
        "pluginsConfig": {
            "donate": {
              "wechat": "例:/images/qr.png",
              "alipay": "http://blog.willin.wang/static/images/qr.png",
              "title": "默认空",
              "button": "默认值:Donate",
              "alipayText": "默认值:支付宝捐赠",
              "wechatText": "默认值:微信捐赠"
            }
        }
    }
    

    左侧拖拽栏👉splitter

    {
        "plugins": ["splitter"]
    }
    

    更多插件推荐可参考gitbook常用的插件2

    其他

    自动生成SUMMARY.md文件

    前面提到,修改SUMMARY.md文件后,再执行gitbook init命令可以创建不存在的文件。那么是否存在一种方法,使得新创建md文件后,无需去手动修改SUMMARY.md呢?

    (若是不去修改SUMMARY.md文件呢?创建的md文件就不会被导出为html文件,加入不了静态网站或电子书)

    实际上,存在两种方法可以自动生成SUMMARY.md文件,一种是gitbook-plugin-summary,另一种是Gitbook Summary

    第一种是一个插件,笔者尝试了几次没有取得好的效果,这里就不采用它了。

    第二种是先将其作为一个npm包,进行全局安装,然后运行脚本,效果挺好。

    下面对第二种方法进行简单的介绍:

    安装

    npm install -g gitbook-summary
    

    下载到路径:C:\Users\LENOVO\AppData\Roaming\npm\node_modules\gitbook-summary

    使用

    进入到项目根目录,执行book sm命令,即可生成SUMMARY.md文件。后面可带参数:

    image-20201118202054326

    PS F:\gitbookTest> book sm --help
    Usage: summary|sm [options]
    
    Generate a `SUMMARY.md` from a folder
    
    Options:
      -r, --root [string]           root folder, default is `.`
      -t, --title [string]          book title, default is `Your Book Title`.
      -c, --catalog [list]          catalog folders included book files, default is `all`.
      -i, --ignores [list]          ignore folders that be excluded, default is `[]`.
      -u, --unchanged [list]        unchanged catalog like `request.js`, default is `[]`.
      -o, --outputfile [string]     output file, defaut is `./SUMMARY.md`
      -s, --sortedBy [string]       sorted by sortedBy, for example: `num-`, defaut is sorted by characters
      -d, --disableTitleFormatting  don't convert filename/folder name to start case (for example: `JavaScript` to `Java Script`), default is `false`
      -h, --help                    output usage information
    

    为了简便,可以将参数写入到book.json文件中,比如:

    {
        "title": "json-config-name",
        "outputfile": "test.md",
        "catalog": "all",  // or [chapter1,chapter2, ...]
        "ignores": [],  //Default: '.*', '_book'...
        "unchanged": [], // for example: ['myApp'] -> `myApp` not `My App`
        "sortedBy": "-",
        "disableTitleFormatting": true // default: false
    }
    

    然后只需在命令行执行book sm即可。

    采用这种方式自动生成的SUMMARY.md文件:

    # Summary
    
    - [Easy](easy/README.md)
      * [1.Two Sum](easy/1.Two Sum.md)
      * [7.Reverse Integer](easy/7.Reverse Integer.md)
    - [Medium](medium/README.md)
      * [2.Add Two Numbers](medium/2.Add Two Numbers.md)
      * [3.Longest Substring Without Repeating Characters](medium/3.Longest Substring Without Repeating Characters.md)
    

    可参考的book.json文件

    基础版:

    {
    	"title": "Summary",
    	"plugins" : [
    		"expandable-chapters",
    		"github-buttons",
    		"editlink",
    		"copy-code-button",
    		"page-footer-ex",
    		"anchor-navigation-ex",
    		"expandable-chapters-small",
    		"prism", 
    		"-highlight",
    		"-lunr", 
    		"-search", 
    		"search-pro",
    		"donate",
    		"splitter"
    	],
    	"pluginsConfig": {
    		"editlink": {
    			"base": "https://github.com/wangzhebufangqi/ActionTest/tree/main",
    			"label": "Edit This Page"
    		},	
    		"github-buttons": {
    			"buttons": [{
    				"user": "wangzhebufangqi",
    				"repo": "ActionTest",
    				"type": "star",
    				"size": "small"
    			}]
    		},	
    		"page-footer-ex": {
                "copyright": "By [wangzhebufangqi](https://github.com/wangzhebufangqi),使用[知识共享 署名-相同方式共享 4.0协议](https://creativecommons.org/licenses/by-sa/4.0/)发布",
                "markdown": true,
                "update_label": "<i>updated</i>",
                "update_format": "YYYY-MM-DD HH:mm:ss"
    		},	
    		"prism": {
    			"css": ["prismjs/themes/prism-solarizedlight.css"],
    			"lang": {"flow": "typescript"}
    		},	
    		"donate": {
    			"wechat": "https://gitee.com/wangzhebufangqi/PictureBed/raw/master/20201122131942.png",
    			"alipay": "https://gitee.com/wangzhebufangqi/PictureBed/raw/master/20201122131820.png",
    			"title": "",
    			"button": "Donate",
    			"alipayText": "支付宝捐赠",
    			"wechatText": "微信捐赠"
    		}
    		
    	},
    	"ignores" : ["_book", "node_modules"]
    }	
    

    使用的插件无需在第三方网站上进行注册。只需要修改对应的github用户名与图片链接即可。

    小结

    gitbook是一个基于Node.js的命令行工具,可使用Github/Git来制作精美的电子书。这部分介绍了gitbook的本地预览,后文会介绍将其部署到Github Pages上。

    更多gitbook相关可参考Gitbook文档(中文版)3

    Github Pages

    概述

    Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。

    每个github账号有且只有一个主页站点(<username>.github.io),无限多的项目站点(<username>.github.io/repo)。

    开通

    新建github仓库

    如未开通主页站点,先新建名为<username>.github.io(如:wangzhebufangqi.github.io)的仓库,再在其中添加文件index.html即可访问主页站点,可能需要等10分钟左右。

    其实不开通主页站点也能开通项目站点。

    利用主页站点配合jekyll、hexo等静态博客生成系统可以搭建博客。可以参考笔者的博客搭建4。闲话休提,下面的主角是项目站点。

    新建空仓库gitbookTest,不必勾选添加README.md文件

    image-20201119191310496

    按前文所提到的,只需要将_book中的文件上传到该仓库,再开通Github Pages就能访问站点了。试一试:

    cd _book
    git init
    git add .		#添加_book目录下的所有文件
    git commit -m "first commit"
    git branch -M main
    git remote add origin https://github.com/wangzhebufangqi/gitbookTest.git  #注意修改用户名
    git push -u origin main
    

    push完成后仓库目录为:

    image-20201119212710757

    设置Github Pages

    进入仓库,Settings -> Options -> Github Pages

    选择好分支与目录,点击Save。

    image-20201119213533949

    访问项目站点(wangzhebufangqi.github.io/gitbookTest):(下图效果未新增插件,有时更新站点需要较长时间)

    image-20201119213825955

    到这一步,已经成功的将gitbook生成的书籍部署到了Github Pages上。但是又有问题来了,每次新增或删除文件时,都要执行gitbook build,进入到_book目录,再手动push,能不能更简单、智能一些呢?

    新建gh-pages分支

    Github支持一个名为Travis CI的服务,后面会提到,可以简单看成能执行线上脚本的工具。这就需要将根目录也push进仓库。同时也可以发现,Github Pages可以选择分支,这就提供了一种思路:

    1. 将项目根目录下所有源文件push进仓库的main分支
    2. 利用Travis CI服务生成_book
    3. 将_book中的所有文件push进同一个仓库的gh-pages分支
    4. Github Pages依赖的分支设置为gh-pages(默认完成)

    如此这般。下面在不利用Travis CI的情况下测试一遍:

    删除并新建github仓库

    进远程仓库,Settings -> Options ->Danger Zone -> Delete this repository

    删除远程仓库比较麻烦,为了方便这里将其直接删除再重新新建(本地git记录也要删掉)。

    将根目录下所有文件push进main分支(gitbook编译前)

    git init
    git add .		#添加根目录下的所有文件
    git commit -m "first commit"
    git branch -M main
    git remote add origin https://github.com/wangzhebufangqi/gitbookTest.git  #注意修改用户名
    git push -u origin main
    

    gitbook编译

    gitbook build
    

    在项目根目录下重新生成_book文件夹

    将_book目录下所有文件push至gh-pages分支

    cd _book
    git init
    git remote add origin https://github.com/wangzhebufangqi/gitbookTest.git
    git add .
    git commit -m "second commit"
    git branch -M main
    git push --force --quiet "https://github.com/wangzhebufangqi/gitbookTest.git" main:gh-pages #将_book中的main分支强制提交到远程仓库的gh-pages分支,不提示多余消息
    

    可以看到创建分支成功

    image-20201119225049542

    设置Github Pages依赖分支

    会默认设置好为gh-pages的根目录

    image-20201119225222220

    小结

    至此,整个流程的大概思路就清楚了:在main分支进行写作,gitbook静态网站资源保存至gh-pages分支。

    其实生成的gitbook导出至gitbook.com可能会更方便。但是现在登录该网站需要fq,而且对免费用户的书籍也有数量限制。因此就选择导出至Github Pages,数量无限制,而且又能DIY,最后实现也很方便,何乐而不为呢?

    下一步是利用Travis CI服务,利用main分支的源文件,自动进行gitbook build,并把生成的静态网站push到gh-pages分支,使得Github Pages生效。

    Travis CI

    概述

    Travis CI是在软件开发领域中的一个在线的,分布式的持续集成服务,用来构建及测试在GitHub托管的代码。

    Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。

    持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。

    开始使用

    Travis CI的官方网站有两个,https://travis-ci.org/为免费版,https://travis-ci.com/为收费版(有免费次数)。但是.org在2020/12/31后会更改为一个只读的网站,目前正在进行.org向.com的迁移,所以这里选择.com。

    Q. When will the migration from travis-ci.org to travis-ci.com be completed? #

    A. In an effort to ensure that all of our users - whether you build open-source, public or private repositories - receive regular feature updates, security patches and UX/UI enhancements, we are announcing that travis-ci.org will be officially closed down completely no later than December 31st, 2020, allowing us to focus all our efforts on bringing new features and fixes to travis-ci.com and all of our awesome users like yourself on the travis-ci.com domain.

    Q. What will happen to travis-ci.org after December 31st, 2020? #

    A. Travis-ci.org will be switched to a read-only platform, allowing you to see your jobs build history from all repositories previously connected to travis-ci.org.

    进入网址https://travis-ci.com/

    登录Travis CI

    SIGN IN WITH GITHUB,登入之后点击ACTIVATE ALL REPOSITORIES USING GITHUB APPS

    image-20201120160731510

    批准安装Travis CI

    image-20201120215456470

    激活Travis Ci服务


    点击https://travis-ci.com/网站上方的Dashboard会显示Active respositories。

    编写.travis.yml

    Travis 要求项目的根目录下面,必须有一个.travis.yml文件。这是配置文件,指定了 Travis 的行为。该文件必须保存在 Github 仓库里面,一旦代码仓库有新的 Commit,Travis 就会去找这个文件,执行里面的命令。

    该文件采用的格式为YAML。示例:

    language: python
    sudo: required
    before_install: sudo pip install foo
    script: py.test
    

    上面代码中,设置了四个字段:运行环境是 python,需要sudo权限,在安装依赖之前需要安装foo模块,然后执行脚本py.test。

    下面根据此次任务编写所需的.travis.yml文件:

    language: node_js   #运行环境为nodejs
    node_js:            #设置版本号
      - "10"
    cache: npm
    
    notifications:      #通知
      email:
        recipients:
          - 1823636309@qq.com   #设置通知邮件
        on_success: change
        on_failure: always
    
    install:                             #install阶段 安装依赖
      - npm install -g gitbook-cli       #安装gitbook 
      - gitbook install                  #安装插件
      - npm install -g gitbook-summary   #使自动生成SUMMARY.md的一个工具
    
    script:                              #script阶段 运行脚本
      - book sm                          #利用安装的工具gitbook-summary自动生成SUMMARY.md文件
      - gitbook build                    #gitbook编译,生成静态网站站点_book
      
    
    after_script:                        #script阶段之后执行
      - cd _book                         #进入_book目录
      - git init                         
      - git remote add origin https://${REF}    #设置要托管到的仓库名
      - git add .                               #添加_book目录下的所有文件
      - git commit -m "Updated By Travis-CI With Build $TRAVIS_BUILD_NUMBER For Github Pages" 
      - git branch -M main
      - git push --force --quiet "https://${TOKEN}@${REF}" main:gh-pages  #强制推送到gh-pages分支
    
    branches:
      only:
        - main
    
    env:
      global:
        - REF=github.com/wangzhebufangqi/gitbookTest.git # 设置 github 地址
    

    测试

    创建github个人访问令牌

    为了使Travis CI有权限往github仓库提交代码,还需要在github上创建个人访问令牌(Personal access tokens

    Settings -> Developer Settings -> Personal access tokens

    点击Generate new token,勾选repo ,再点击Generate Token生成个人访问令牌。

    image-20201120152054343

    生成的个人访问令牌详细信息只会出现一次,妥善保存。

    令牌填入Travis CI

    回到Travis CI,选择仓库gitbookTest,More options -> Settings -> Environment Variables

    image-20201120153029436

    将复制好的个人访问令牌填入环境变量,将其命名为TOKEN,前面的脚本用的就是这个值。

    image-20201120153319292

    将项目托管至github

    这里为了更直观的看到效果,可以删除远程仓库重新新建,并将本地.git文件、gitbook编译生成的_book文件夹删除,然后将上文提到的.travis.yml文件添加至项目根目录,最后进行push:

    git init
    git add .		#添加根目录下的所有文件
    git commit -m "first commit"
    git branch -M main
    git remote add origin https://github.com/wangzhebufangqi/gitbookTest.git  #注意修改用户名
    git push -u origin main
    

    push成功后,Travis CI检测到有.travis.yml文件,收到任务(Job Received),然后进行排队(Queued),再是开启虚拟机(Booting virtual machine),开始执行脚本,在Job log栏可以查看进度/日志,View config可以查看配置信息(.travis.yml)。

    image-20201121001230700

    image-20201121001619000

    最后不出意外的话如下图,如失败请检查上述步骤是否有错漏之处(成功或失败会发邮件通知):

    image-20201121001724476

    检查github可发现,gh-pages分支被创建并且更新了相关文件,项目站点也可以被访问。

    小结

    到这部分,已经成功结合了gitbook+Github Pages+Travis CI,完成了最初的设想。但Travis CI到2021年可能会需要付费,因此下一部分考虑用Github Action替换Travis CI。
    更多信息,如加密Token,.travis.yml完整的生命周期等,可参考持续集成服务Travis CI教程5

    小插曲:

    笔者一开始不知道竟然有两个官网,在.org网站上遭遇了很长的排队时长,一个多小时才开始执行脚本。
    在这里插入图片描述
    后来发现正值.org网站向.com网站迁移完成之际,难怪如此。

    关于Travis CI以后是否还面向免费用户,官网上有个相关的Q&A:

    Q. Will Travis CI be getting rid of free users? #

    A. Travis CI will continue to offer a free tier for public or open-source repositories on travis-ci.com and will not be affected by the migration.

    现在免费用户有10000初始积分(Credit),build会消耗积分,关于后续积分补充可能需要申请或氪金。

    Github Actions

    概述

    GitHub Actions 是 GitHub 的持续集成服务,于2018年10月推出。

    持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions。

    很多操作在不同项目里面是类似的,完全可以共享。GitHub 注意到了这一点,想出了一个很妙的点子,允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用。

    如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成过程,就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

    github官方的actions放在https://github.com/actions,可以进行引用,比如:

    name: learn-github-actions				#文件名
    on: [push]								#push触发
    jobs:
      check-bats-version:
        runs-on: ubuntu-latest				#运行环境设置为支持的最新版ubuntu
        steps:
          - uses: actions/checkout@v2		#https://github.com/actions/checkout/tree/v2
          - uses: actions/setup-node@v1		#https://github.com/actions/setup-node/tree/v1
          - run: npm install -g bats
          - run: bats -v
    

    更多细节可参考Github Actions官方文档6

    快速开始

    GitHub Actions 的配置文件叫做 workflow 文件,存放在代码仓库的.github/workflows目录。

    github新建远程空仓库ActionTest,本地新建文件夹ActionTest,新建文件README.md,新建目录.github/workflows,在该目录下新建文件test.yml,文件内容参见上一节。

    image-20201121162130104

    git init
    git add .
    git commit -m "first commit"
    git branch -M main
    git remote add origin https://github.com/wangzhebufangqi/ActionTest.git
    git push -u origin main
    

    进行push后,Github Actions检测到文件.github/workflows/test.yml,开始执行脚本

    image-20201121163428531

    点击进去查看工作日志

    image-20201121163710068

    一些版本信息如下:

    比如设置的ubuntu为18.04.5的LTS版本、用到了两个github官方的actions:checkout和setup-node

    Current runner version: '2.274.2'
    Operating System
      Ubuntu
      18.04.5
      LTS
    Virtual Environment
      Environment: ubuntu-18.04
      Version: 20201115.1
      Included Software: https://github.com/actions/virtual-environments/blob/ubuntu18/20201115.1/images/linux/Ubuntu1804-README.md
    Prepare workflow directory
    Prepare all required actions
    Getting action download info
    Download action repository 'actions/checkout@v2'
    Download action repository 'actions/setup-node@v1'
    

    image-20201121164057650

    可以尝试更多命令,此处不赘述。熟悉之后开始编写这次所需要的.yml文件。

    编写.github/workflow/*.yml

    .yml文件缩进很重要,YAML、YML在线编辑(校验)器可以检验yml格式是否正确。

    主要命令已经在.travis.yml写过了,这里将其转换为Github Actions所需的格式:

    name: auto-generate-gitbook
    on:                                 #在main分支上进行push时触发  
      push:
        branches:
        - main
    
    jobs:
      main-to-gh-pages:
        runs-on: ubuntu-latest
            
        steps:                          
        - name: checkout main
          uses: actions/checkout@v2
          with:
            ref: main
                
        - name: install nodejs
          uses: actions/setup-node@v1
          
        - name: configue gitbook
          run: |
            npm install -g gitbook-cli          
            gitbook install
            npm install -g gitbook-summary
                    
        - name: generate _book folder
          run: |
            book sm
            gitbook build
            cp SUMMARY.md _book
                    
        - name: push _book to branch gh-pages 
          env:
            TOKEN: ${{ secrets.TOKEN }}
            REF: github.com/${{github.repository}}
            MYEMAIL: 1823636309@qq.com                  # !!记得修改为自己github设置的邮箱
            MYNAME: ${{github.repository_owner}}          
          run: |
            cd _book
            git config --global user.email "${MYEMAIL}"
            git config --global user.name "${MYNAME}"
            git init
            git remote add origin https://${REF}
            git add . 
            git commit -m "Updated By Github Actions With Build ${{github.run_number}} of ${{github.workflow}} For Github Pages"
            git branch -M main
            git push --force --quiet "https://${TOKEN}@${REF}" main:gh-pages
    

    测试

    新建Person Access Token

    在个人设置里生成一个新的个人令牌,权限仅选择repo即可。进入仓库,点击Settiings -> Secrets -> New repository,将其命名为TOKEN

    image-20201121172401974

    将项目托管至github

    添加一些测试的md文件,在前文push的基础上再进行push:

    git add .
    git commit -m "update"
    git push
    

    image-20201122002152059
    项目站点:https://wangzhebufangqi.github.io/ActionTest/
    测试成功。

    小结

    至此,成功的用Github Actions替代了Travis CI。Github Actions比起Travis CI,Github Actions毫无疑问和Github结合的更好,用户可以使用他人分享在GitHub Marketplace的workflows,非常方便。而且对开源仓库是免费的。

    一些错误:

    一个step中不能同时含有键usesrun

    image-20201121221429203

    设置email和name

    image-20201121221631485

    后记

    笔者最开始是因为实在太喜欢gitbook样式的书籍了,就想着自己DIY一下,于是在学习的过程中学到了很多。后面会慢慢改进的。
    在这里插入图片描述


    1. 使用 travis + gitbook + github pages 优雅地发布自己的书 ↩︎

    2. gitbook常用的插件 ↩︎

    3. Gitbook文档(中文版) ↩︎

    4. 搭建我的个人博客 ↩︎

    5. 持续集成服务 Travis CI 教程 ↩︎

    6. Github Actions官方文档 ↩︎

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,454
精华内容 24,181
关键字:

githubpages