zoukankan      html  css  js  c++  java
  • 使用Github搭建个人博客网站

    1 新建一个repo,创建一个没有父节点的分支gh-pages(github规定,只有该分支中的页面,才会生成网页文件):   

    mkdir jekyll_demo
    cd jekyll_demo
    git init
    git checkout --orphan gh-pages

       然后在该分支下创建如下目录和文件:         

        

      _config.yml是jekyll的配置文件,我们在里面填入如下内容:  baseurl: /jekyll_demo 

      _layouts 目录,用于存放模板文件, default.html文件,作为Blog的默认模板,内容如下:         
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>{{ page.title }}</title>
    </head>
    <body>
      {{ content }}
    </body>
    </html>

       _posts 目录,用于存放blog文章,可以在这里创建文章 2012-08-25-hello-world.html(文件名必须为"年-月-日-文章标题.后缀名"的格式,

       如果网页代码采用html格式,后缀名为html;如果采用markdown格式,后缀名为md),文章内容如下:

    ---
    layout: default title: 你好,世界 ---
    <h2>{{ page.title }}</h2> <p>我的第一篇文章</p> <p>{{ page.date | date_to_string }}</p
    >

    //每篇文章必须有一个yaml头部,用来设置一些元数据。
    //"layout:default",表示该文章的模板使用_layouts目录下的default.html文件;
    //"title: 你好,世界",表示该文章的标题是"你好,世界",如果不设置这个值,默认使用嵌入文件名的标题,即"hello world"

       index.html文件,为博客首页,内容如下:

      

    ---
    layout: default
    title: 我的Blog
    ---
    <h2>{{ page.title }}</h2>
    <p>最新文章</p>
    <ul>
      {% for post in site.posts %}
        <li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
      {% endfor %}
    </ul>

    //首页使用了{% for post in site.posts %},表示对所有帖子进行一个遍历
    //{{site.baseurl}}就是_config.yml中设置的baseurl变量

      以上内容写好后,提交到本地库  git add *               git commit -m "first post" 


    2 在github上新建一个同名的repo,然后在本地仓库执行推送命令(username改为自己的用户名):

         $ git remote add origin https://github.com/username/jekyll_demo.git 

         $ git push origin gh-pages 

    大功告成,等待一会,访问http://username.github.io/jekyll_demo/ 就可以看到第一篇文章了。

           

    
    








    KEEP LEARNING!
  • 相关阅读:
    Python
    版本控制
    后台
    前端
    提升权限 关闭系统
    SC命令(windows服务开启/禁用)
    获取当前电脑全部网络连接名字
    x64 win64编译环境下ADO链接Access数据库的问题解决
    Netsh命令-网络禁用开启
    windows主机防护
  • 原文地址:https://www.cnblogs.com/roronoa-sqd/p/4959051.html
Copyright © 2011-2022 走看看