经过GitHub Pages创建我的站点总结与体会

时间 2019-12-07

标签经过 github pages 创建我的站点总结体会栏目 Git 繁體版

原文原文链接

经过GitHub Pages创建我的站点总结与体会 ----Git+Github+Jekyll+Markdown

blogjavascript

Git

(不会?请参照简易教程学习Git的总结)css

首先感谢雨知网站做者博文指点.html

Github

两种pages模式

User/Organization Pages 我的或公司站点

1) 使用本身的用户名，每一个用户名下面只能创建一个java

2) 资源命名必须符合这样的规则username/username.github.comgit

3) 主干上内容被用来构建和发布页面github

Project Pages 项目站点

1) gh-pages分支用于构建和发布chrome

2) 若是user/org pages使用了独立域名,那么托管在帐户下的全部project pages将使用相同的域名进行重定向,除非project pages使用了本身的独立域名浏览器

3) 若是没有使用独立域名,project pages将经过子路径的形式提供服务username.github.com/projectnamesass

4) 自定义404页面只能在独立域名下使用,不然会使用User Pages 404ruby

5) 建立项目站点步骤：

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
$ git clone https://github.com/USERNAME/PROJECT.git PROJECT$ git checkout --orphan gh-pages$ git rm -rf .$ git add .$ git commit -a -m "First pages commit"$ git push origin gh-pages

能够经过User/Organization Pages创建主站，而经过Project Pages挂载二级应用页面。

1)建立我的站点

2)设置站点主题,进入你的项目-setting

3)更新你的站点

4) 选择主题并发布

简明扼要步骤在github网页上创建项目,本地克隆或建同名称项目,在git bash上操做以下:
切换到项目目录->git init->git add --all->git commit -m "xxx"->git remote add origin git@github.com:yourgithubname/yourdemo->git push origin master
其中克隆的话只需先后两步.

使用Jekyll搭建博客

Jekyll是一种简单的、适用于博客的、静态网站生成引擎。它使用一个模板目录做为网站布局的基础框架，支持Markdown、Textile等标记语言的解析，提供了模板、变量、插件等功能，最终生成一个完整的静态Web站点。说白了就是，只要安装Jekyll的规范和结构，不用写html，就能够生成网站。jekyll本地环境搭建
须要下载ruby,我下的
Ruby 2.2.2

在下载时勾选环境变量，path中配置那一项，而后在电脑的开始->全部程序->Ruby文件夹->start command prompt命令行终端下输入gem update --system来升级gem
此处可能会出现: gem update --system的Gem::RemoteFetcher::FetchError错误
方法:索性换成淘宝的镜像。
gem source查看列表；
gem source -a http://ruby.taobao.org 加入淘宝的源，竟然没用https，也就不存在这个问题了；
gem source -r https://rubygems.org/ 干掉缺省的源；
gem update --system (此命令在Ruby文档下完成)

下载最新的DevKit
在刚才的命令行中敲入

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
cd C:\DevKitruby dk.rb initruby dk.rb install

继续:gem install Jekyll

并使用命令检验是否安装成功jekyll --version

安装Rdiscount，这个用来解析Markdown标记的包，使用以下命令gem install rdiscount

此时再cd到工程目录,可是在start command prompt是切换不过来的,应到Git bash 中切换到工程目录

再敲击jekyll serve

雨知博客中没有记载的很明确到底这行代码在那个命令端里完成的,全部形成我诸多错误,以下:

此时博客环境已经搭建好了.
再进行博客等的建立:
到想要建立项目的文件夹下（如cd d:xxx），运行命令：jekyll new blog
这样就会建立一个新文件夹d/blog，其结构以下：
1.文件夹_layouts：用于存放模板的文件夹，里面有两个模板，default.html和post.html,或许还有page.html.

2.文件夹_posts：用于存放博客文章的文件夹，里面有一篇markdown格式的文章--2014-01-27-welcome-to-jekyll.markdown,可作自行修改成:

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
---layout: mylayouttitle: "myblog"date: 2015-07-18 06:53:46categories: jekyll update---Welcome to my blog

3.文件夹css：存放博客所用css的文件夹(或许还有sass文件,不须要就能够删掉)
4..gitignore：能够删掉，后面会将项目添加到git项目，因此这个不须要了.
5._coinfig.yml：jekyll的配置文件，里面能够定义至关多的配置参数，具体配置参数能够参照其官网.
个人_coinfig.yml配置以下:

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
# Site settingstitle: myblogemail: sumo_dream@sina.comdescription: > # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.baseurl: "" # the subpath of your site, e.g. /blog/url: "http://ctct.github.com" # the base hostname & protocol for your sitetwitter_username: sumo_dreamgithub_username: sumodreamencoding: utf-8# Build settingsmarkdown: kramdowncomments :provider : disqusdisqus :short_name : tiansj

6.index.html：项目的首页.
个人首页以下:

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
---layout: defaulttitle: myblog---<div class="home"> <h1 class="page-heading">Posts</h1> <ul class="post-list"> {% for post in site.posts %} <li> <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span> <h2> <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> </h2> </li> {% endfor %} </ul> <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p></div>

根据实际须要，可能还须要建立以下文件或文件夹：
1. _includes:用于存放一些固定的HTML代码段，文件为.html格式，能够在模板中经过liquid标签引入，经常使用来在各个模板中复用如导航条、标签栏、侧边栏之类的在每一个页面上都同样不变的内容，须要注意的是，这个代码段也能够是未被编译的，也就是说也可使用liquid标签放在这些代码段中(会自动生成head.html,header.html,footer.html)
2. image和js等自定义文件夹：用来存放一些须要的资源文件，如图片或者javascript文件，能够任意命名
3.CNAME文件：用来在github上作域名绑定的(貌似目前的域名都是要钱的可在域名网站上购买,使用github便不收取费用,但可能不是你心仪的域名)

添加CNAME文件

在仓库根目录下添加一个CNAME文件，没有后缀名，里面内容为你的域名(如:test.com),不须要添加http/www等前缀。打开cmd,
ping username.github.io记录下IP地址

添加 DNS Service记录
去DNSPod注册个帐号，添加域名，设置两个A记录。分别是@和w w w，ip地址填上个步骤获取的IP地址

设置域名的DNS
在相应域名的Csutom DNS里，设置DNS service,添加两条记录f1g1ns1.dnspod.net和f1g1ns2.dnspod.net
漫长的等待

要全球解析生效，得等上一会了，也能够先ping一下本身的设置对不对

favicon.ico：网站的小图标

大体上jekyll生成html的流程，jekyll首先会读取以下内容进入内存中：
1. _posts及文件夹下的全部文章，将其参数和文章内容组织保存在内存中，全部的文章的内容、参数都在site.posts对象（其余文件夹下的文章不会放入site.posts中）
2. _layouts文件夹下的全部模板
3. _includes文件夹下的全部须要被引入的内容

能够看一下_posts下的jekyll给的例子：

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
---layout: posttitle: "Welcome to Jekyll!"date: 2014-01-27 21:57:11categories: jekyll update---You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.Jekyll also offers powerful support for code snippets:{% highlight ruby %}def print_hi(name) puts "Hi, #{name}"endprint_hi('Tom')#=> prints 'Hi, Tom' to STDOUT.{% endhighlight %}Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].[jekyll-gh]: https://github.com/mojombo/jekyll[jekyll]: http://jekyllrb.com

能够看到在博文的最上方有被两个---包裹起来的一段，这里就定义了文章的一些参数，更多参数在FrontMatter和Variables获取，简单的只须要关注几个就好：
1. title：文章的标题
2. date：文章的日期
3. categories：定义了文章所属的目录，一个list，将会根据这个目录的list来建立目录并将文章html放在生成的目录下，文章分类时候用，这里就不使用了
4. layout：文章所使用的模板名称，也就是_layouts中定义的模板的文件名去掉.html
5. tags：例子中没有，定义了文章的标签，也是一个list，文章分类时候用，这里就不使用了.

将这个写完的文章保存为 “年-月-日-标题.markdown”的名字形式，由于若是不修改permlinks，jekyll会根据文章的标题来建立文件夹，如2014-01-27-hello会建立成/2014/01/27/hello.html。这里就保存成2014-01-27-hello.markdown

ps：文章的文件名不要使用中文，不然会出现bug，由于在url中会escape，而服务器查找倒是按照escape后的字符串去查找
，就会出现找不到文章的状况，使用英文代替就好，定义了title变量就无所谓文件名中标题的内容了.

咱们能够打开jekyll给的例子default.html看一看模板的结构:

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>{{ page.title }}</title> <meta name="viewport" content="width=device-width"> <!-- syntax highlighting CSS --> <link rel="stylesheet" href="/css/syntax.css"> <!-- Custom CSS --> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="site"> <div class="header"> <h1 class="title"><a href="/">{{ site.name }}</a></h1> <a class="extra" href="/">home</a> </div> {{ content }} <div class="footer"> <div class="contact"> <p> Your Name<br /> What You Are<br /> you@example.com </p> </div> <div class="contact"> <p> <a href="https://github.com/yourusername">github.com/yourusername</a><br /> <a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br /> </p> </div> </div> </div> </body></html>

能够看到，模板和普通的html文件几乎是同样的。jekyll使用的是一个叫liquid的模板引擎建立html文件，这个模板引擎也有详细的文档，如今就只关注其中比较核心的部分，文章的标题和文章的内容.

能够看到模板的有这么两句{{ page.title }}, {{ content }}，这两句就分别是文章标题和文章内容的占位符，若是有文章使用了这个模板，如过使用上面写的那篇welcome的文章，标题就是myblog，content就是Welcome to my blog，这里定义一个本身的新模板，保存为mylayout.html

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> {{ page.title }} {{ page.date }} {{ content }} </body></html>

第一行是标题，而后是博文时间（在文件名中定义），而后是博文内容
这样一个简单的模板就建立好了.

在博客文件夹下，在命令行中输入jekyll build --trace就能够将全部文章文件根据其模板进行编译，生成结果，放在根目录下的_site中，这里咱们使用后，会出现以下结果：\blog_site\2015\07\18文件夹下有一个welcome.html，其内容为：

  
  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
  
  
  
  
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Sumo</title> </head> <body> Welcome to Myblog! 2015-07-18 14:53:46 +0800 <p>Welcome to my blog</p> </body></html>

能够看到，这就是编译完的博文文件，如咱们设定的，第一行是标题，而后是文件名定义的时间，而后是博文内容，若是编译错误，将会在命令行中看到一个错误栈，能够方便调试，具体哪里出错了，若是不须要看错误栈，直接使用jekyll build就好了

以后在浏览器打开yourgithubname.github.io(com)进入site主页,或是直接打开yourgithubname.github.io/blog就能够看见index.html的内容中，点击文章的标题就能够跳转到具体的博文了.

Github Page完成了博客的主要功能，写做、发布、修改，这些都是相对静态的东西，就是你本身能够控制的事情，还有一些动态的东西Github Pages没法支持，好比说文章浏览次数、文章的评论等，还有一些个性化的东西，像个性化页头页尾、代码高亮能够把博客整的更漂亮一点，其实这写均可以经过第三方应用来实现，个性化本身的博客。加上Disqus云评论:注册http://disqus.com/

使用Markdown

Markdown的宗旨是实现「易读易写」。可读性，不管如何，都是最重要的。

Markdown 的语法全由一些符号所组成，这些符号通过精挑细选，其做用一目了然。格式撰写的文件能够直接以纯文本发布，而且看起来不会像是由许多标签或是格式指令所构成。(我仍是使用的原始化马克飞象,>...<)在谷歌应用里添加的马克飞象,话说目前以为仍是很便利的(尽管没有css样式,好吧,>...<)...

剩下的活就是给我的站点定制样式和特效啦,我也得慢慢琢磨啦......逃:)