• 使用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!
  • 相关阅读:
    (转载)PagerView实现翻页效果
    仿腾讯QQ的紫色下拉折叠菜单代码
    很漂亮的蓝色经典CSS导航菜单代码
    纯CSS实现简约大方灰紫色下拉菜单代码
    鼠标停留在菜单上会闪烁的导航菜单代码
    停在网页顶部可关闭的工具条代码
    JavaScript浮动的导航菜单代码
    深蓝渐变下拉菜单代码
    红色小方块单击爆炸式展开的菜单代码
    很漂亮的蓝色半透明水平下拉导航代码
  • 原文地址:https://www.cnblogs.com/roronoa-sqd/p/4959051.html
Copyright © 2020-2023  润新知