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 的设置,填写我们刚刚建立的子域名,点击保存。

保存后 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.ioecho 'Hello World 我爱这个世界' > index.md

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

git add --allgit 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

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

(0)

相关推荐

  • 如何将 SAP UI5 应用托管到 Github 网站上并运行

    本文我本来想用标题"如何将 SAP UI5 应用部署到 Github 网站上并运行",但实际上这种操作并没有真正将 SAP UI5 应用部署到传统意义上的服务器,而仅仅是利用了 G ...

  • 教你在Github搭建自己的blog

    GitHub已经变成唯一一个IT类网站在全球网站访问量占到前十位的网站之一了.它提供的GitHub Pages也是非常方便的帮助我们去建立一个静态网站,如果我们单纯记录一些文本加图片的内容,通过Git ...

  • 分分钟搞定一个拥有顶级域名的个人博客

    xxx.github.io虽然可以用,但是每次访问都需要输入这么长很麻烦,而且总感觉逼格不高啊.恰逢最近阿里云的.top域名在做活动,首年2块钱就可以注册一个,加之折腾github pages挺久了, ...

  • Hexo(5)-购买并绑定域名

    本系列其它文章: 用 GitHub + Hexo 建立你的第一个博客 [Hexo]部署博客及更新博文 Hexo(3)-安装自己喜欢的主题 各位同学博客汇总:来吧!互相链接吧! 哈哈,震撼人心的时刻终于 ...

  • 用 GitHub + Hexo 建立你的第一个博客

    在博客平台上注册,比如 博客园.CSDN.新浪博客 等. 利用博客框架搭建,如 WordPress.Jekyll.hexo 等. 自己用代码写一个. 其中,第一种最简单,也最受限,说不定还会被删帖删号 ...

  • 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)

    之前写过一篇 使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源,在那之后,又陆续想到并实施了几点利用 jsDelivr 进一步加速静态资源加载的措施,新起一篇作为记录和分享. ...

  • 利用CDN加速GithubPage访问速度

    在国内,githubpage的访问速度相当感人,于是使用CDN加速就变得十分有必要了. 文章目录 Github Page Netlify 其他说明 Github Page Github Pages为G ...

  • Github Pages + Hugo 搭建个人博客

    文章目录 Github Pages + Hugo 搭建个人博客 零.效果 一.创建 Github 库 二.安装 Hugo 和 Git 三.新建 Hugo 网站 四.选择 Hugo 主题 五.新建文章 ...

  • 哟呵,Github 免费从 0 到 1搭建个人博客网站

    之前有朋友说想要搭建自己的博客玩玩,于是就有了这篇: 使用 wordpress 从0到1搭建一个属于你自己的博客网站 后来有些朋友觉得略麻烦,又要整服务器整域名,又要搭建各种 PHP.Mysql 环境 ...

  • Django-Vue搭建个人博客:Markdown正文

    原创 杜赛 杜赛说编程 博客文章需要排版,否则难以凸显标题.正文.注释等内容之间的区别.作为博客写手来说,比较流行且好用的排版是采用 Markdown 语法. 严格来说, Markdown 是一种排版 ...

  • 义乌之狼:近两天在搭建个人博客和一些感想

    义乌之狼:近两天在搭建个人博客和一些感想

  • 如何搭建个人博客站点

    博客地址: 1.如何使用 github page 部署个人博客 登录 github,点击右上角新建仓库,仓库名填 username.github.io,其中 username 填自己的 github ...

  • GitBook | 手把手教你搭建 免费博客 / 网络文档 / 多人协作编辑~

    写在前面 硕士期间在折腾某些分析的时候,就发现好些软件的操作文档都是用GitBook写的,并且挂到网上供用户检索与浏览,实在是方便而又简洁好看 最近CJ提到了一下GitBook,便抽空鼓捣了一下,感觉 ...

  • 使用vuepress快速搭建个人博客(完整配置与源码)

    大家都说yarn比npm好,今天全局安装yarn尝试下 cnpm install -g yarn 安装完成后,查看yarn版本 yarn --version 项目搭建 安装vuepress yarn ...

  • 【保姆级】利用Github搭建自己的个人博客,看完就会

    大家好,我是辰哥~ 作为一名喜欢技术的爱好者,平时喜欢把自己学习技术的心得或者一些踩坑.易错的过程记录下来,首选的是技术平台(博客),今天辰哥来教大家如何利用Github来搭建一个自己的个人博客平台. ...