用GithubPages建博客

齐志勇

2023-12-01

e本文也发表在我的博客上，欢迎关注交流！朱噜噜的博客

前言

本文章主要内容在介绍如何在GithubPages上搭建属于自己的博客，以及搭建过程中可能遇到的问题。

Github Pages

Q: What is Github Pages?
A: Websites for you and your projects.

简而言之，Github Pages是Github为你提供的网站，你可以在上面部署自己的博客。并提供给你的博客提供一个属于你的域名：http://username.github.io

迫不及待想动手了么？不要着急，先花点时间阅读下相关教程，边学边做。

虽然在网上，有不少关于如何在Github Pages上搭建博客的文章，但是我还是建议参考官方的教程。如果你遇到问题的话，请先仔细查看下是否正确使用了官方的指导，然后再搜索解决方法。

搭建过程中的信息来源：

官方网站
Stackoverflow等论坛
相关的博客

使用Github官方支持的工具Jekyll

Q: 如何将你的博客生成网页，部署在你自己的http://username.github.io上呢？
A: 使用Jekyll工具，将你的文章，自定义网站的设计，转化为静态网站和博客。

Jekyll安装

Jekyll安装之前，需要安装Ruby实测下载速度很慢，也可以通过直接rubtinstall安装ruby比之前那个链接下载速度稍微快一点。备注：以上两个链接使用代理也很慢，所以Be patient。
如果你并不太了解如何安装，请使用Windows下安装ruby
安装完ruby之后，还需要安装rubygems。下载完解压缩在文件夹中就ok。
以上两项完成后，打开ruby的命令行窗口，并输入以下命令

$ gem sources --add http://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
$ gem install jekyll

注意：此处需要留心的是ruby的官网地址**http://gems.ruby-china.org/**
因为国内的GreatWall，所以在大陆的gems维护只能交由国内社区维护。因此，你就能理解为什么这里的sources地址是**http://gems.ruby-china.org/**。

如果你使用的是网上搜索的suorces地址，https//gems.ruby-china.org/或者是https://gems.ruby-china.org/，那么安装过程则会出现以下报错

Error fetching https://ruby.taobao.org/:
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://ruby.taobao.org/specs.4.8.gz)

Error fetching https://gems.ruby-china.org/:
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://gems.ruby-china.org/specs.4.8.gz)

原因是以上地址已不再维护gems。如果你先知道了这些，那么可以为你省点时间。

如果你需要使用到bundle exec jekyll serve进行本地调试，请阅读下一小节Bundle安装。如果你只是使用jekyll serve进行调试，可以等你需要的时候再阅读。

Bundle安装

你已经使用过ruby命令，请先切换到你的仓库地址，这里使用的是C:\Software\AndroidProjects\Git\Thinny>，试试看输入以下指令

$ gem bundle install

Opps，出现问题了，不过不用担心。按照提示来，你就能解决。

如果你安装过程中出现以下相似的问题，试着看看窗口的提示，然后使用gem install wdm -v '0.1.1'，问题就解决了。

很简单吧，你说呢。

Gem::InstallError: The ‘wdm’ native gem requires installed build tools.
Please update your PATH to include build tools or download the DevKit from ‘http://rubyinstaller.org/downloads’ and follow the instructions at ‘http://github.com/oneclick/rubyinstaller/wiki/Development-Kit’
An error occurred while installing wdm (0.1.1), and Bundler cannot continue.
Make sure that gem install wdm -v '0.1.1' succeeds before bundling.

下载安装DevKit

如果你按照以上步骤完成了，那么接下来你还可能会发现，命令行窗口会提示你安装Devkit。你接下来要做的就是它所提示的，安装Devkit开发工具。

DevKit下载地址
 Devkit Install Guide安装指导

要是你下载并且安装了Devkit，接下来要做的，是打开ruby命令行窗口，依次输入ruby dk.rb init和ruby dk.rb install,那么你会得到和我一样的结果，如下所示：

C:\Software\Devkit>ruby dk.rb init
[INFO] found RubyInstaller v2.3.1 at C:/Software/Ruby23-x64
Initialization complete! Please review and modify the auto-generated
‘config.yml’ file to ensure it contains the root directories to all
of the installed Rubies you want enhanced by the DevKit.
C:\Software\Devkit>ruby dk.rb install
[INFO] Installing ‘C:/Software/Ruby23-x64/lib/ruby/site_ruby/2.3.0/rubygems/defaults/operating_system.rb’
[INFO] Installing ‘C:/Software/Ruby23-x64/lib/ruby/site_ruby/devkit.rb’

恭喜你，到这一步，基本已经完成了。要是你不放心，可以阅读下一小节，进行验证你安装是否正确。

验证安装

按照指令输入并验证

C:\Software\Devkit>gem install jason –platform=ruby
Fetching: jason-0.6.0.gem (100%)
Successfully installed jason-0.6.0
Parsing documentation for jason-0.6.0
Installing ri documentation for jason-0.6.0
Done installing documentation for jason after 0 seconds
1 gem installed

C:\Software\Devkit>ruby -rubygems -e “require ‘json’; puts JSON.load(‘[42]’).inspect”
[42]

安装bundle

最后，回到本章节的开头，还记得你的指令么？

切换到你本机的仓库地址，然后输入指令：

$ gem bundle install

C:\Software\AndroidProjects\Git\Thinny>bundle install
Fetching gem metadata from https://rubygems.org/…………
Fetching version metadata from https://rubygems.org/…
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies…
Using i18n 0.7.0
Using json 1.8.3
Using minitest 5.9.1
Using thread_safe 0.3.5
Using addressable 2.4.0
Using coffee-script-source 1.10.0
Using execjs 2.7.0
Using colorator 1.1.0
Using colored 1.2
Using ffi 1.9.14
Using multipart-post 2.0.0
Using forwardable-extended 2.6.0
Using gemoji 2.1.0
Using net-dns 0.8.0
Using public_suffix 1.5.3
Using sass 3.4.22
Using rb-fsevent 0.9.7
Using kramdown 1.11.1
Using liquid 3.0.6
Using mercenary 0.3.6
Using rouge 1.11.1
Using safe_yaml 1.0.4
Using jekyll-feed 0.5.1
Using mini_portile2 2.1.0
Using jekyll-paginate 1.1.0
Using jekyll-sitemap 0.10.0
Using jekyll-swiss 0.4.0
Using minima 1.2.0
Using unicode-display_width 1.1.1
Using parallel 1.9.0
Using yell 2.0.6
Installing wdm 0.1.1 with native extensions
Using bundler 1.13.6
Using tzinfo 1.2.2
Using coffee-script 2.4.1
Using ethon 0.9.1
Using rb-inotify 0.9.7
Using faraday 0.9.2
Using pathutil 0.14.0
Using jekyll-sass-converter 1.3.0
Using nokogiri 1.6.8.1
Using terminal-table 1.7.3
Installing activesupport 4.2.7
Installing jekyll-coffeescript 1.0.1
Installing typhoeus 0.8.0
Installing listen 3.0.6
Installing sawyer 0.7.0
Installing html-pipeline 2.4.2
Installing html-proofer 3.3.1
Using jekyll-watch 1.5.0
Installing octokit 4.3.0
Installing jekyll 3.2.1
Installing github-pages-health-check 1.2.0
Installing jekyll-gist 1.4.0
Installing jekyll-github-metadata 2.1.1
Installing jekyll-mentions 1.2.0
Installing jekyll-redirect-from 0.11.0
Installing jekyll-seo-tag 2.0.0
Installing jemoji 0.7.0
Installing github-pages 98
Bundle complete! 3 Gemfile dependencies, 60 gems now installed.
Use bundle show [gemname] to see where a bundled gem is installed.
Post-install message from html-pipeline:
Thank you for installing html-pipeline!
You must bundle Filter gem dependencies.
See html-pipeline README.md for more details.
https://github.com/jch/html-pipeline#dependencies
Post-install message from github-pages:
Thank you for installing github-pages!
GitHub Pages recently upgraded to Jekyll 3.0, which
includes some breaking changes. More information:
https://github.com/blog/2100-github-pages-jekyll-3

Finally！完成了。

本机调试

到这步，你终于可以看看自己实现的博客了。1请先将ruby命令行窗口切换到你仓库的地址，然后使用jekyll serve。阅读窗口提示，打开浏览器，输入默认的地址127.0.0.1:4000。回车。

应该是你想象中的网页吧~

恭喜你，你可以在本机上调试你的博客了~

调试小记

我在用jekyll 3.3.0本地调试的时候jekyll serve --watch。
Ps:jekyll serve默认是会monitor file changes。出现了以下问题，你可以参考：

–watch arg is unsupported on Windows.
If you are on Windows Bash, please see: https://github.com/Microsoft/BashOnWindows/issues/216

StackoverFlow解决办法

修改办法是注释C:\Software\Ruby23-x64\lib\ruby\gems\2.3.0\gems\jekyll-3.3.0\lib\jekyll\commands\build.rb中的关于windows平台的限制。

如果卸载3.3.0，转用3.2.1也是可以的。请你等待bug修复。

参考链接

发布文章

你已经阅读过官方指导，但我还是提醒下。在你的仓库中_posts中，MD文章的名称必须是2016-10-23-github-pages也就是：年-月-日-文章标题。

你通过Github客户端或者是Git，将_posts中的文章push到你在Github上的仓库中，就完成了文章的发布。

后记

目前来看，从CSDN Markdown编辑器的MD文件不能直接发布在Jekyll上。各种Markdown编辑器对于markdown语言的支持不尽相同，也就是说，你的MD文章可能在博客中显示效果不同。这是由于Jekyll对于Markdown的支持程度。

选择一款你喜欢的Markdown编辑器吧。你就可以开始发博客了。

以上。

Good Luck！

用GithubPages建博客

前言

Github Pages

相关的教程

相关问题