用 GitHub Pages 创建个人博客

此文档描述了用 GitHub Pages 创建简单个人博客的步骤，写 markdown 文件即可动态生成博客文章。

参考

https://zhuanlan.zhihu.com/p/51240503 https://blog.csdn.net/kkwant/article/details/81001120

1. 基础步骤

在Github上创建库，名称如：githubUserName.github.io。
进入设置页面，设置其为 Github pages，并设置主题。
下载库，创建目录 _posts，并在里面创建md文件，文件名格式如：yyyy-mm-dd-title.md
修改 readme.md 文件（将展示为首页） ``` — layout: default title: Blog —
Latest Posts
- 用 GitHub Pages 创建个人博客
  
  此文档描述了用 GitHub Pages 创建简单个人博客的步骤，写 markdown 文件即可动态生成博客文章。

</p> </li>

    <li>
      <h2><a href="/2020/06/08/MapTiler.html">Maptiler</a></h2>
      <p><h1 id="maptiler">MapTiler</h1>

</p> </li>

</ul>
``` - 提交并Push。 - OK，可以在 https://githubUserName.github.io 上看到你的博客了。

2. 网页路径匹配规则

网页路径匹配规则如下

优先级别：index.html > index.md > readme.md
title.md 映射为 /title
/_posts/yyyy-mm-dd-title.md 映射为 /yyyy/mm-dd/title

3. 扩展

如果对网站的布局和样式不满意，可参照以下方法调整网站

在样式选择页面，下载样式网站，解压到你的库。
其主要内容如下

. ├── _config.yml ├── _data │ └── members.yml ├── _drafts │ ├── begin-with-the-crazy-ideas.md │ └── on-simplicity-in-technology.md ├── _includes │ ├── footer.html │ └── header.html ├── _layouts │ ├── default.html │ └── post.html ├── _posts │ ├── 2007-10-29-why-every-programmer-should-play-nethack.md │ └── 2009-04-26-barcamp-boston-4-roundup.md ├── _sass │ ├── _base.scss │ └── _layout.scss ├── _site ├── .jekyll-metadata ├── - _config.yml 配置 └── - index.md 首页

参考：https://jekyllrb.com/docs/structure/

若有需要，可在_config.yml 中自定义参数

  title: Architect theme
  description: Architect is a theme for GitHub Pages.
  show_downloads: true
  google_analytics:
  theme: jekyll-theme-architect

修改_layout/default.html 布局文件。其语法可参考编程参考。
提交到Github测试效果。

4. 编程参考

以下为 GitHub Pages 的基础编码参考。主要分为变量和 模板语法 两大块。详细文档请参考官方文档：

4.1 网站变量

此类变量可在_config.yml中定义

site.lang
site.title
site.description

4.2 Github变量

此类变量描述了相关联的 github 项目的信息

- site.github.repository_name
- site.github.repository_url
- site.github.project_tagline
- site.github.owner_url
- site.github.build_revision
- site.github.zip_url
- site.github.tar_url

4.3 文档变量

此类变量描述了 .md 文件的头部信息

- page.title
- page.date
- page.author

对应的md文件顶部如下

---
title: Blog
author: ABC
date: 2020-01-01
---

4.3 帖子变量

_posts 目录下的md文件列表将被解析为 site.posts

其属性包括

- post.url      帖子地址
- post.title    帖子标题
- post.excerpt  帖子首段落文本

4.4 模板语法

模板内容变量

    <h1 id="maptiler">MapTiler</h1>

<p>Map tile images builder for baidu map, tencent map, google map, …</p>

<p>https://github.com/surfsky/MapTiler.git</p>

<h1 id="tasks">Tasks</h1>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Baidu map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Tencent map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Google map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Gaode map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Bing map</li>
</ul>

<h1 id="snap">Snap</h1>

<p><img src="https://github.com/surfsky/MapTiler/raw/master/Doc/01.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/02.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/03.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/baidu.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/tencent.png" alt="" /></p>

<h1 id="ref">Ref</h1>

<ul>
  <li>https://github.com/jiazheng/BaiduMapTileCutter</li>
  <li>http://www.jiazhengblog.com/blog/2011/10/08/422/</li>
</ul>

<h1 id="map">Map</h1>

<p>BaiduMap</p>

<ul>
  <li><a href="http://lbsyun.baidu.com/jsdemo.htm#c1_10">demo</a></li>
  <li><a href="http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/geocoding">tutori</a></li>
  <li><a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a7b0">api</a></li>
  <li>
    <p><a href="http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary">lib</a>
QQMap(TencentMap)</p>
  </li>
  <li><a href="https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/drawingLibrary">demo</a></li>
  <li><a href="https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview">tutori</a></li>
  <li><a href="https://lbs.qq.com/webApi/javascriptV2/jsDoc/jsDocIndex">api</a></li>
  <li><a href="https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview">webservice api</a></li>
</ul>

<h1 id="map-tile">Map tile</h1>

<blockquote>
  <p>https://blog.csdn.net/u013929284/article/details/53614281
http://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/</p>
</blockquote>

<p>各地图查询接口示例</p>

<ul>
  <li>
    <p>高德地图</p>

    <p>http://wprd03.is.autonavi.com/appmaptile?style=7&amp;x=26705&amp;y=14226&amp;z=15</p>
  </li>
  <li>
    <p>百度地图</p>

    <p>http://online1.map.bdimg.com/onlinelabel/qt=tile&amp;x=6163&amp;y=1280&amp;z=15</p>
  </li>
  <li>
    <p>谷歌地图</p>

    <p>http://mt2.google.cn/vt/lyrs=m@167000000&amp;hl=zh-CN&amp;gl=cn&amp;x=26705&amp;y=14226&amp;z=15&amp;s=Galil</p>
  </li>
  <li>
    <p>腾讯地图</p>

    <p>http://rt1.map.gtimg.com/tile?z=15&amp;x=26705&amp;y=18541&amp;styleid=1&amp;version=117</p>
  </li>
  <li>
    <p>必应地图</p>

    <p>http://dynamic.t2.tiles.ditu.live.com/comp/ch/132122221030021?it=G,OS,L&amp;mkt=en-us&amp;cstl=w4c&amp;ur=cn</p>
  </li>
</ul>

<h1 id="data-for-bibiden-palace">Data for Bibiden Palace</h1>

<p>baidu</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>116.398, 39.9295
116.409, 39.9193
</code></pre></div></div>

<p>tencent</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>116.39147686767578, 39.92318118446173
116.40299185180666, 39.91298024307851
</code></pre></div></div>

变量引用

条件判断

遍历

    <h2><a href="/2020/06/19/%E7%94%A8GitHubPages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2.html">用 GitHub Pages 创建个人博客</a></h2>
    <p><p>此文档描述了用 GitHub Pages 创建简单个人博客的步骤，写 markdown 文件即可动态生成博客文章。</p>

</p>

    <h2><a href="/2020/06/08/MapTiler.html">Maptiler</a></h2>
    <p><h1 id="maptiler">MapTiler</h1>

</p>

4.5 示例

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/css/style.css?v=" media="screen" type="text/css">
    <link rel="stylesheet" href="/assets/css/print.css" media="print" type="text/css">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->

<!-- Begin Jekyll SEO tag v2.6.1 -->
<title>用 GitHub Pages 创建个人博客 | Surfsky’s Blog</title>
<meta name="generator" content="Jekyll v3.8.7" />
<meta property="og:title" content="用 GitHub Pages 创建个人博客" />
<meta name="author" content="SURFSKY" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="此文档描述了用 GitHub Pages 创建简单个人博客的步骤，写 markdown 文件即可动态生成博客文章。" />
<meta property="og:description" content="此文档描述了用 GitHub Pages 创建简单个人博客的步骤，写 markdown 文件即可动态生成博客文章。" />
<link rel="canonical" href="https://surfsky.github.io/2020/06/19/%E7%94%A8GitHubPages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2.html" />
<meta property="og:url" content="https://surfsky.github.io/2020/06/19/%E7%94%A8GitHubPages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2.html" />
<meta property="og:site_name" content="Surfsky’s Blog" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-06-19T00:00:00+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="用 GitHub Pages 创建个人博客" />
<meta name="twitter:site" content="@" />
<meta name="twitter:creator" content="@SURFSKY" />
<script type="application/ld+json">
{"@type":"BlogPosting","headline":"用 GitHub Pages 创建个人博客","dateModified":"2020-06-19T00:00:00+00:00","datePublished":"2020-06-19T00:00:00+00:00","url":"https://surfsky.github.io/2020/06/19/%E7%94%A8GitHubPages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2.html","mainEntityOfPage":{"@type":"WebPage","@id":"https://surfsky.github.io/2020/06/19/%E7%94%A8GitHubPages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2.html"},"author":{"@type":"Person","name":"SURFSKY"},"description":"此文档描述了用 GitHub Pages 创建简单个人博客的步骤，写 markdown 文件即可动态生成博客文章。","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->

  </head>

  <body>
    <header>
      <div class="inner">
        <a href="https://surfsky.github.io/">
          <h1>Surfsky's Blog</h1>
        </a>
        <h2>Blogs in GitHub Pages.</h2>
        
        
      </div>
    </header>

    <div id="content-wrapper">
      <div class="inner clearfix">
        <section id="main-content">
          <h1 id="maptiler">MapTiler</h1>

<p>Map tile images builder for baidu map, tencent map, google map, …</p>

<p>https://github.com/surfsky/MapTiler.git</p>

<h1 id="tasks">Tasks</h1>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Baidu map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Tencent map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Google map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Gaode map</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Bing map</li>
</ul>

<h1 id="snap">Snap</h1>

<p><img src="https://github.com/surfsky/MapTiler/raw/master/Doc/01.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/02.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/03.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/baidu.png" alt="" />
<img src="https://github.com/surfsky/MapTiler/raw/master/Doc/tencent.png" alt="" /></p>

<h1 id="ref">Ref</h1>

<ul>
  <li>https://github.com/jiazheng/BaiduMapTileCutter</li>
  <li>http://www.jiazhengblog.com/blog/2011/10/08/422/</li>
</ul>

<h1 id="map">Map</h1>

<p>BaiduMap</p>

<ul>
  <li><a href="http://lbsyun.baidu.com/jsdemo.htm#c1_10">demo</a></li>
  <li><a href="http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/geocoding">tutori</a></li>
  <li><a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a7b0">api</a></li>
  <li>
    <p><a href="http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary">lib</a>
QQMap(TencentMap)</p>
  </li>
  <li><a href="https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/drawingLibrary">demo</a></li>
  <li><a href="https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview">tutori</a></li>
  <li><a href="https://lbs.qq.com/webApi/javascriptV2/jsDoc/jsDocIndex">api</a></li>
  <li><a href="https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview">webservice api</a></li>
</ul>

<h1 id="map-tile">Map tile</h1>

<blockquote>
  <p>https://blog.csdn.net/u013929284/article/details/53614281
http://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/</p>
</blockquote>

<p>各地图查询接口示例</p>

<ul>
  <li>
    <p>高德地图</p>

    <p>http://wprd03.is.autonavi.com/appmaptile?style=7&amp;x=26705&amp;y=14226&amp;z=15</p>
  </li>
  <li>
    <p>百度地图</p>

    <p>http://online1.map.bdimg.com/onlinelabel/qt=tile&amp;x=6163&amp;y=1280&amp;z=15</p>
  </li>
  <li>
    <p>谷歌地图</p>

    <p>http://mt2.google.cn/vt/lyrs=m@167000000&amp;hl=zh-CN&amp;gl=cn&amp;x=26705&amp;y=14226&amp;z=15&amp;s=Galil</p>
  </li>
  <li>
    <p>腾讯地图</p>

    <p>http://rt1.map.gtimg.com/tile?z=15&amp;x=26705&amp;y=18541&amp;styleid=1&amp;version=117</p>
  </li>
  <li>
    <p>必应地图</p>

    <p>http://dynamic.t2.tiles.ditu.live.com/comp/ch/132122221030021?it=G,OS,L&amp;mkt=en-us&amp;cstl=w4c&amp;ur=cn</p>
  </li>
</ul>

<h1 id="data-for-bibiden-palace">Data for Bibiden Palace</h1>

<p>baidu</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>116.398, 39.9295
116.409, 39.9193
</code></pre></div></div>

<p>tencent</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>116.39147686767578, 39.92318118446173
116.40299185180666, 39.91298024307851
</code></pre></div></div>


        </section>

        <aside id="sidebar">
          

          

          <p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</p>
        </aside>
      </div>
    </div>

    
  </body>
</html>

5. 备注

作为简单的免费的静态网站，一些常见的博客功能是木有的

评论、排序、分页
博文的图片路径如何指定？

参考

1. 基础步骤

Latest Posts