GitHub Pages 搭建教程 - 少数派

标签: | 发表时间:2021-07-04 17:44 | 作者:
出处:https://sspai.com

互联网从诞生发展至今日,每天有无数的人在上面留下自己的足迹,他们用它记录生活、抒发情感、分享见解,这一切都离不开一个可以承载文字的平台,一个独立的、由自己掌控的平台,而 GitHub Pages 就是这么一个平台。

在这个平台里你可以使用自己的个性域名;可以在海量的主题里挑选最适合你的那一款,如果你技术极客,也可以根据自己的喜好,设计属于自己的个性化页面;你既可以在线创建和发布网站,也可以在本地通过客户端工具或者命令行进行网站和内容的管理。

你完全可以通过 GitHub Pages 展示和输出自身价值,甚至可以把它打造成属于自己的互联网「身份证」。

为什么使用 GitHub Pages

如果你把他作为一个轻量级的个人博客服务,GitHub Pages 相较 WordPress 之类的建站服务有什么优势呢?

  • 首先他是完全免费的,相较其他的同类产品,他能替你省下一笔服务费,节约下的钱可以让你买一些其他的会员服务;
  • 无须自己购买云服务进行搭建,只需按步骤一步步操作即可,即使你不懂他的技术细节;
  • 支持的功能多,玩法丰富,你可以绑定你的域名、使用免费的 HTTPS、自己 DIY 网站的主题、使用他人开发好的插件等等;
  • 当完成搭建后,你只需要专注于文章创作就可以了,其他诸如环境搭建、系统维护、文件存储的事情一概不用操心,都由 GitHub 处理

当然了,作为一款免费的服务,我们也是要遵守 GitHub 官方使用建议和限制,在使用的时候项目和网站的大小不要超过 1GB,也不要过于频繁的更新网站的内容(每小时不超过 10 个版本),每个月的也要注意带宽使用上限为 100GB。

综合来看,GitHub Pages 依旧可以说是中小型博客或项目主页的最佳选项之一。

如何使用 GitHub pages

介绍了这么多,下面就具体来谈谈如何使用它。

基本页面的生成

首先你需要注册一个 GitHub 账号,并在个人主界面里选择创建一个新的 Repository 。

进入页面后,在 Repository name 的位置填写域名,格式是  username.GitHub.io

图片

创建成功之后,点击右上角的 Settings

找到 GitHub Pages 选项,选择一个 GitHub 官方提供的主题

这里我们就随意选择一个主题 Cayman,来看看他的效果是什么样的

选择完毕之后 GitHub Pages 就会自动帮你生成好网站,在他跳转的界面点击 Commit changes 按钮,网站就可以访问了。

在浏览器里输入你的项目名称,比如  brick713.GitHub.io,就可以看到,你刚刚选择的主题的个人网站的页面了。

到这里如果你只是想做一个例如可以随时在互联网上访问的简历,那么你只需要 GitHub Pages 项目的主页修改你  index.md 文件就可以了,比如我给出的这个模板。

修改完后,点击上图中左下角的 Commit Changes,然后访问你的自定义域名你就可以看到如下的样式了。

如果你想做一个功能更丰富的博客,那我们继续往下走。

配置自定义域名并免费使用 HTTPS

在 2018 年 5 月 1 日之后,GitHub Pages 已经开始提供免费为自定义域名开启 HTTPS 的功能,并且大大简化了操作的流程,现在用户已经不再需要自己提供证书,只需要将自己的域名使用 CNAME 的方式指向自己的 GitHub Pages 域名即可。

首先在你的 DNS 解析里添加一条解析记录,例如我选择添加子域名 blog.moyu.life通过 CNAME 的方式指向我刚刚自定义的 GitHub Pages 域名 brick713.GitHub.io。添加完成后等待 DNS 解析的生效(DNS 的解析记录生效到全球可能需要几分钟时间)。

之后重新回到最开始进入过的 Settings 界面,找到 GitHub Pages 的设置,填写我们刚刚建立的子域名,以我自己的 blog.moyu.life 举例,点击保存。

保存后 GitHub 需要一定的时间生成证书并确认域名的解析是否正常,我们只需要耐心的等待即可,成功后显示结果如下

现在我们再访问 blog.moyu.life 就会发现,我们的自定义域名和 HTTPS 都生效了!可以看到证书是由著名的机构 Let's Encrypt 提供的。

网站的同步

现在我们已经有了一个基本功能健全的网站了,接下来我们需要试着对博客的内容进行管理,并且给博客添加一些更个性化的设置,官方提供两种方式:

  • 命令行方式(Mac 和 Windows 确保拥有 Git 环境)
  • 桌面客户端形式(需要安装官方提供的客户端)

如果你没有任何 Git 的基础,也不想进行一些繁琐的配置,那么我推荐你使用桌面客户端的形式进行管理,如果你有一定的技术基础,那么 Git 的方式则更适合你。这里我两种方法都介绍一下。

首先在命令行中切换到你自定义的路径下,然后 Clone 下来你的项目(操作需要在 Mac 的 Terminal 中完成,Windows 系统可以使用 Git-bash。)这里注意这里的 path 和 username 需要根据你个人情况进行替换。

              
cd ~/Path git clone https://GitHub.com/username/username.GitHub.io

接着进入你的项目的文件中,并创作一个文章。

              
cd username.GitHub.io echo "Hello World 我爱这个世界" > index.md

然后按照 Git 提交内容的流程,将我们的新创作的文章上传。

              
git add --all git commit -m "Firs Push" git push -u origin master

这里可能会碰到下面的情况:

按照他的提示我们把注册 GitHub 的邮箱和用户名依次输入即可:

              
git config user.email "你的邮箱" git config user.name "你的用户名"

之后他可能会让你输入你的 GitHub 账号和密码,不用担心,正常输入即可。当我们看到这样的提升就证明提交成功了。

可以去我们的网站主页看看是不是起了变化。

如果你是使用 GitHub 桌面客户端那么就更简单了,下载安装了客户端之后,按照客户端的提示正常登陆你的 GitHub 账号。然后 Clone 下来你的 GitHub Pages 项目。

等待 Clone 完成后,界面上会显示几种管理修改你的项目的方式。

这里我选择使用 Sublime Text 进行管理,把开始的 index.md里的内容改为 Hello World 我也爱这个世界保存,然后在客户端上我们能看到文件的变化,我们先点击左下角的 Commit to master,再点击 Fetch origin 就可以将内容上传。

然后你发现你的主页也发生了相应改变了。到这里你基本上就掌握了网站管理的基本流程和文章发布的基本流程,下面我们要开始来学会使用静态模板系统来管理博客了。

GitHub Pages 的生成工具

经历了上面的步骤,现在你的已经有了一个简单的页面了,可是他还远远未满足我们的需求,我们需要利用静态模板系统来让生产接管你博客的文章的生成,让你把更多的经历投入在创作里。下面就 GitHub 官方推荐的 Jekyll 为例子来展开讲讲。

因为 Jekyll 是基于 Ruby 的静态网页生成系统,因此我们首先得安装 Ruby 环境,在 Mac 下我们可以使用的 Homebrew 来进行安装。如果是其他操作系统,可以去参考  Ruby 官方安装文档进行安装。

              
brew install ruby

等 Ruby 安装完毕后再执行以下命令完成 Jekyll 的安装。

              
gem install jekyll bundler

然后进入你 Clone 下来的 GitHub Pages 项目的路径,例如:

执行以下命令:

              
jekyll new . --force

完成后,Jekyll 会在你指定的目录下生成好所有文件,你可以使用 bundle exec jekyll serve命令,然后就可以通过访问 127.0.0.1:4000查看初始界面的样子了。

默认的界面看起来非常的简陋也很丑,但是没关系,你可以在这些网站里根据自己的喜好找到一些美观的主题 http://jekyllthemes.org/https://jekyllthemes.io/http://themes.jekyllrc.org/

安装方法很简单,一般情况下只需要下载主题包解压后完整的,复制到你的 GitHub Pages 的项目目录里,并覆盖你之前的文件即可,有些特殊的主题要参考作者给的安装步骤,这里我随意的更换了一个主题。

主题里的所有关键性配置都在 _config.yml 文件中,你可以根据个人的喜好和不同主题支持的功能来修改具体的内容,这里就不做展开。

到这里完整的搭建的流程已经结束了,你已经可以正常访问你一路配置下来的博客了,接下来你只需要找一个趁手的 Markdown 编辑器来编辑在你本地 GitHub Pages 项目中的 _posts 文件夹里的文章,并使用前面提到的两种方式将文章同步到 GitHub 上即可。需要注意的是,文章的内容和标题需要按照 Jekyll 的格式进行写作。

文章的文件名遵循下面的格式:

              
年-月-日-标题.markdown

文章内容顶部必须有下面的 YAML 头信息:

              
--- layout: post title: Blogging Like a Hacker ---

尾巴

其实除了 Jekyll 还有非常多的第三方的静态模板系统来搭建 GitHub Pages。比如:

  • Node.js 编写的 Hexo
  • Go 编写的 Hugo
  • Python 编写的 Pelican
  • 以及更人性化的 Gridea

他们在各自的基础上实现了更多的功能,比如分析统计、搜索、评论系统、广告、分享系统等。喜欢折腾的同学不妨可以尝试尝试,未来如果有机会希望能更详细的给大家分享一下。


相关 [github pages 少数派] 推荐:

GitHub Pages 搭建教程 - 少数派

- -
互联网从诞生发展至今日,每天有无数的人在上面留下自己的足迹,他们用它记录生活、抒发情感、分享见解,这一切都离不开一个可以承载文字的平台,一个独立的、由自己掌控的平台,而 GitHub Pages 就是这么一个平台. 在这个平台里你可以使用自己的个性域名;可以在海量的主题里挑选最适合你的那一款,如果你技术极客,也可以根据自己的喜好,设计属于自己的个性化页面;你既可以在线创建和发布网站,也可以在本地通过客户端工具或者命令行进行网站和内容的管理.

基于 GitHub 的敏捷学习方法之道与术 - 少数派

- -
「持续行动,持续反思,持续进步. 需要好多年才能懂得,最好不是去震惊世界,而是要像易卜生所说的,生活在世界上. 我们都一样,渴望着建树功勋、改变世界,可是伴随着年岁的增长,却发现想要实现的梦想依然那么遥远,而时间却依然残酷得流逝着,不会仅仅因为「你」而发生丝毫的改变. 如《奇特的一生》当中所言,我对时间始终充满着敬畏之心,最好的方式也不过是奢求时间能够跟自己做朋友,伴随着我这也许注定朴实无华的一生,共同成长.

Pages中插入数学公式

- zypatroon - Tip4Mac
各位用Pages写稿子的同学不知道你们有没有遇到过需要插入数学公式的时候. 然后你会发现你把Pages翻个底儿朝天也找不到怎么做. 其实原因就是,当然Pages不支持编辑数学公式啦. 其实在不用借助第三方工具的情况下,我们仍然可以借助系统自带的一个“小兄弟”帮忙来在文章中插入我们需要的公式. 你可以在“应用程序”下面的“实用工具”里面找到它.

Chrome 13 正式版发布,加入Instant Pages功能

- Tairan Wang - ITeye资讯频道
Chrome Stable 分支正式版今天终于更新到 v13 版本,最新版本号为 13.0.782.107,随着这次更新的发布,Chrome 正式版终于迎来了 Instant Page 预先渲染功能,相信这一功能对于广大骨灰来说并不陌生,简单的说就是会自动猜测你要点击的链接,并在后台对该链接的网页内容进行预先渲染,当你点击的时候其实已经渲染完毕(或者渲染一部分了),所以会给你一种网速超快的错觉.

Google Search for iOS 应用升级,支持 Instant Pages 和快速过滤

- guoan - 谷奥——探寻谷歌的奥秘
Google Search for iOS应用刚刚升级(iTunes下载链接,同时支持iPhone和iPad),开始支持预读取网页的Instant Pages技术让你秒开搜索结果里的第一个页面. 不过跟你在电脑上不同,大家在iPad 3G和iPhone上都是比较珍惜流量的,Google这么在后台加载搜索结果页面,估计会让人心疼.

Google 官方帐号纷纷入驻 Google+ Pages

- jun - 谷奥——探寻谷歌的奥秘
其实不仅仅有一小撮企业帐号首批入驻Google+ Pages,Google自家的服务和品牌当然也可以开小灶第一批入驻. 目前已经在Google+开设Pages的官方帐号包括:. 记不住这些有着一长串数字的URL地址,又想快速找到这些帐号. 直接在Google里搜索“+帐号名”,就直接带你飞过来了(其实注意看上面列表的URL地址,就是Google搜索的地址,它会自动跳转到相应的Google+ Pages的).

Home · JohnLangford/vowpal_wabbit Wiki · GitHub

- -
There are two ways to have a fast learning algorithm: (a) start with a slow algorithm and speed it up, or (b) build an intrinsically fast learning algorithm.

GitHub - jgraph/drawio: Source to www.draw.io

- -
draw.io supports IE 11, Chrome 32+, Firefox 38+, Safari 9.1.x, 10.1.x and 11.0.x, Opera 20+, Native Android browser 5.1.x+, the default browser in the current and previous major iOS versions (e.g.

谷奥: 如何让自己网站支持 Instant Pages,让 Chrome 瞬间打开?

- nikelius - 谷奥聚合——谷奥主站+谷安 aggregator
昨天的Chrome 13使得全线的Chrome浏览器都支持了Instant Pages,就是Google搜索将会提前读取第一个搜索结果的网页,而且不仅是图片,还包括脚本和CSS文件,这样一旦你点击了第一个搜索结果(基本上你点击第一个的可能性很大),那个网页会立刻瞬间打开. 实际上这个功能也可以部署在自己的网站上,然后让使用Chrome浏览器的用户在访问你的网站之后就事先预读一个你认为读者最有可能点击的网页,这样在用户真的点击了那个页面的时候,该网站会瞬间打开.

git和github简介(上)

- linyehui - 没做完,没准备好
在此贴上本人在Web标准化交流会6月25日北京站的主题分享. 在线PPT:http://jinjiang.github.com/slides/learning-git/. PPT源码:https://github.com/Jinjiang/slides/tree/gh-pages/learning-git.