csdn_spider/blog/ds19991999/原创-- 利用GitHub_Pages搭建简易个人博...

12 KiB
Raw Blame History

原创

利用GitHub_Pages搭建简易个人博客

利用GitHub_Pages搭建简易个人博客

个人博客已经开通:https://ds19991999.github.io,欢迎访问

1.基本实现

  1. 在github上建库库名必须是usrname.github.com,usr必须是你github账号的用户名1. 在Jekyll上面选择喜欢的模板下载到本地以Bef为例1. Git操作建议使用客户端Git命令行操作
//1.打开git bash配置用户名和邮件
git config --global user.name "your name"
git config --global user.email "your email"

//2.克隆你在github上建立的要建立个人博客的库
git svn clone url

//3.提交文件测试
touch test.c //新建一个文件用于测试
git add test.c
git commit -m "第一次提交测试"
git remote add test.c https://github.com/ds19991999/ds19991999.github.com.git
git push //可能不成功按照提示进行操作可能是config里面的文件没有用户名和邮箱

//我用下面命令就就正常了应该是之前的库是空的需要先建一个banch分支
git push test.c
git push --set-upstream test.c master

//4.直接将本地的Bef博客模板clone到远程库上
git banch //查看本地分支此刻应该只有master一个分支
//git checkout -b  本地分支名 //新建本地分支并切换分支(在本地分支进行开发)
//git pull origin 远程仓库分支名//将远程仓库分支上的代码更新到本地
git status //查看当前状态
git add .  //提交所有  或者git add  提交文件名此前应该将Bef模板中的文件直接clone到本地仓库
git commit -m "提交信息备注" //提交到本地仓库
git push origin 要提交的分支名称(一般是master)  //将本地仓库推送到远程仓库里面

//注傻瓜式操作直接将Bef文件夹中所有文件拖动到github仓库

4.访问自己的博客主页
https://usrname.github.io,比喻我的:https://ds19991999.github.io

2.关于GitHub Pages

GitHub Pages 是 GitHub 面向用户、组织和项目开放的公共静态页面搭建托管服
务,允许站内生成网页,也允许用户自己编写网页,然后上传。站点可以被免
费托管在 GitHub 上,可以选择使用 GitHub Pages 默认提供的域名 github.io
或者自定义域名来发布站点。GitHub Pages 支持自动利用 Jekyll 生成站点,
GitHub Pages 可以被认为是用户编写的、托管在 GitHub 上的静态网页。

搭建中小型 Blog特别是个人博客确实是个很好的选择。既拥有绝对管理权
又享受 GitHub 带来的便利更主要的是这一切是免费的GitHub 提供无限流量.

3.关于Jekyll的结构

|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

_config.yml

配置文件,用来定义你想要的效果,设置之后就不用关心了。

_includes

_layouts

模板文件存放的位置。模板需要通过YAML front matter来定义
来定义,{ { content }}标记用来将数据插入到这些模板中来。

发布的文章会根据文章顶部的 yaml 文件头来设置一些元数据,如 layout:default表示该文章的模板使用 _layouts 目录下的 post.html 文件title:,表示该文章的标题,如果不设置这个值,默认使用嵌入文件名的标题等等。

_posts

你的动态内容,一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定,必须是2012-02-22-artical-title.MARKUP这样的形式,
MARKUP是你所使用标记语言的文件后缀名根据_config.yml中设定的链接规则可以根据你的文件名灵活调整文章的日期和标记语言后缀与文章的标题是独立的。

在博客上发布文章的时候,只需要在此文件夹中加入带有 YAML 头信息的 MarkDown 文件,然后 push 到 GitHub就会被自动渲染成 HTML。

_site

这个是Jekyll生成的最终的文档不用去关心。最好把他放在你的.gitignore文件中忽略它。

其他文件夹

你可以创建任何的文件夹,在根目录下面也可以创建任何文件,假设你创建了project文件夹下面有一个github-pages.md的文件,那么你就可以通过yoursite.com/project/github-pages访问的到如果你是使用一级域名的话。

4.Jekyll的配置

配置文件在_config.yml文件中不必一一追究了需要的可以参考官方文档关于Jekyll配置的官方文档,但Permalink和自定义项这两个很重要。

用来定义你最终的文章链接是什么形式,他有下面几个变量:
- year 文件名中的年份
- month 文件名中的月份
- day 文件名中的日期
- title 文件名中的文章标题
- categories 文章的分类,如果文章没有分类,会忽略
- i-month 文件名中的除去前缀0的月份
- i-day 文件名中的除去前缀0的日期

配置效果
- permalink: pretty /2018/06/15/slap-chop/index.html
- permalink: /:month-:day-:year/:title.html /06-15-2018/slap-chop.html
- permalink: /blog/:year/:month/:day/:title /blog/2018/06/15/slap-chop/index.html
- permalink: /:title /github-pages

自定义项

例如我们定义了title:BeiYuu的博客这样一项,那么你就可以在文章中使用{ { site.title }}来引用这个变量了,非常方便定义些全局变量。

5.YAML Front Matter和模板变量

对于YAML格式的文章Jekyll的格式很严格必须是这样的

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

前后的—不能省略在这之间你可以定一些你需要的变量layout就是调用_layouts下面的某一个模板他还有一些其他的变量可以使用
- permalink 你可以对某一篇文章使用通用设置之外的永久链接
- published 可以单独设置某一篇文章是否需要发布
- category 设置文章的分类
- tags 设置文章的tag

6.使用Disqus管理评论

注意是管理评论Disqus支持很多的博客平台注册账号什么的就不提了,参见下图:image

Unversal Code

这里使用网友推荐的Universal Code,然后会看到一个介绍页面,把下面这段代码复制到你的模板里面,可以只复制到显示文章的模板中:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname 这个地方需要改成你配置的网站名
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

异步加载处理

为提高性能需要进行异步加载处理提高性能。比如在最开始页面打开的时候不显示评论当你想看评论的时候点击“显示评论”再加载Disqus的模块。

$('#disqus_container .comment').on('click',function(){
        $(this).html('加载中...');
        var disqus_shortname = 'beiyuu';
        var that = this;
        BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //这是一个加载js的函数
});

7.使用Gitalk添加评论功能

  1. 注册 GitHub ApplicationAuthorization callback URL 填写当前使用插件页面的域名,比喻我的https//ds19991999.github.io/,注意注意记住最后的clientID 和 clientSecretowner 是自己的用户名.1. 创建 comments.html(以about页面为例)
{% if page.comments != false %}

    {% if site.comments_provider == 'gitalk' %}
        <div id="gitalk-container"></div>
        <script src="/assets/js/gitalk.min.js"></script>
        <script>
        var gitalk = new Gitalk({
            id: '{{ page.url }}',
            clientID: '{{ site.gitalk.clientID }}',
            clientSecret: '{{ site.gitalk.clientSecret }}',
            repo: '{{ site.gitalk.repo }}',
            owner: '{{ site.gitalk.owner }}',
            admin: ['{{ site.gitalk.owner }}'],
            labels: ['gitment'],
            perPage: 50,
        })
        gitalk.render('gitalk-container')
        </script>
    {% endif %}
{% endif %}
  1. 在 GitHub 上创建仓库 blog-comments添加如下代码到 _config.yml
    clientID 和 clientSecret 是第一步注册的时候得到的owner 是自己的用户名.
comments_provider: gitalk
gitalk:
    owner: jueye3
    repo: blog-comments
    clientID: fa5504fe07f319cba9ee
    clientSecret: 30532bea61e8b63dc5a852e448621a8c89cef99b
  1. 下载 gitalk.min.js 和 gitalk.css
    下载 gitalk.min.js放到 assets/js 文件夹下)和 gitalk.css放到assets/css 文件夹下), push 后访问.1. 使用 GitHub 账号登陆初始化,就可以使用评论功能了.

8.添加代码高亮插件

两个可选插件DlHightLight代码高亮组件Google Code Prettify。DLHightLight支持的语言相对较少一些有js、css、xml和htmlGoogle的高亮插件基本上任何语言都支持也可以自定义语言也支持自动识别也有行号的特别支持。

Google的高亮插件使用也比较方便只需要在\

9.增加统计插件

  1. 在百度统计上注册账号并登陆,然后新增网站
    image
    image1. 在 _includes 下创建 baidu-anaylysis.html,内容是百度统计生成的代码,如下图:
    image1. 在 head.html 文件中添加 {% include baidu-anaylysis.html %}Push后可以检查是否成功
    image1. 代码正确安装,可以查看报告了
    image

10.绑定域名

在github库中

新建一个 CNAME 文件(无后缀名),用文本编辑器打开,在首行添加你的网站域名,如 http://xxxx.com,注意前面没 http://example.com 或者 xxx.example.com。

在域名解析提供商

以百度云为例:
- 先添加一个 CNAME主机记录写 @,后面记录值写上你的 http://xxxx.github.io
- 再添加一个 CNAME主机记录写 www后面记录值也是 http://xxxx.github.io
- 这样别人用 www 和不用 www 都能访问你的网站(其实 www 的方式,会先解析成 http://xxxx.github.io,然后根据 CNAME 再变成http://xxx.com,中间是经过一次转换的)。

11.参考资料

https://github.com/ds19991999/ds19991999.github.com/blob/master/README.md
http://gitbook.cn/m/mazi/article/5af260fd6f98784056d381ce
http://beiyuu.com/github-pages
https://chrisniael.gitbooks.io/gitbook-documentation/content/index.html

License

GNU General Public License v3.0