关闭

利用githubpages创建你的个人博客

标签: github博客
13068人阅读 评论(18) 收藏 举报
分类:

最近好多人都开始创建自己的博客网站写博客了, 有钱的买域名买主机好好的折腾一番. 没钱的就使用githubpages搭建自己的博客, 使用githubpages只能放静态网页, 不过这难不倒那些开了挂的coder, 各种静态博客生成器应运而生, 例如比较出名了hexo.

利用这些静态博客生成器我们可以方便的在本地写博客, 然后上传github进行浏览, 这些生成器的原理也很简单, 就是需要什么网页, 我们在本地生成好, 然后放github就可以. 那么问题来了? 我们如何创建一个属于自己的githubpages呢? 这篇文章我们就来一步步的完成一个githubpages的创建.

准备工作

第一步, 首先你得有个github帐号, 作为一个coder,如果你连github帐号也没有的话, 自己趴下1000个蹲起!
有了github帐号, 然后就是创建一个新的仓库了, 这个仓库的名称是有要求的, 必须是你的你的github帐号.github.com, 创建完成之后,是这样的.

不过,这个时候我们的仓库什么东西还没有, 所以我们还要初始化点东西, 点击右上角的settings, 在网页的最下面点击* Launch automatic page generator*, 然后一路继续, 你会来到一个页面:

这里是让你选择主题, 由于我们最后要自己上传网页, 所以这里默认就好, 直接点击publish pages下一步就可以了.

ok, 理论上现在你的个人博客就已经创建好了, 通过浏览器访问一下https://你的github帐号.github.io你会发现以下网页:

在这准备工作都完成后, 我们需要将仓库文件clone到本地:

然后在本地大胆的删除所有内容.

好爽!!! 下面我们就开始创建自己的网页了.

开始搭建自己的博客

在完成上面的准备工作后, 我们就开始寻找博客模板,创建我们自己的博客网站了, 这里我使用了hexo的一个主题, 官网是:http://kywk.github.io/

我们将html,css,js文件copy到我们的本地仓库里, 然后下面今天的重点就开始了.

TitanPages登场

因为我们要创建的是静态网页, 所以我们还需要一些工具来帮我们完成这个复杂的工作. 这里我选择使用TitanPages, 大家可以到https://github.com/qibin0506/TitanPages进行下载, 他提供了源码和编译文件的下载, 如果是linux用户, 可直接使用tt文件, 如果是windows用户, 可直接解压tt.zip文件,使用里面的tt.exe文件. 这里我就以linux用户使用tt文件进行演示.

在使用tt之前,我们需要了解一下如何使用, 大家可以看他的readme, 也可以在命令行通过tt -help keyword进行查看, 来看看一般的使用方法吧.
使用命令: tt -help detail

使用方法还是很简单的, 这里我们大致说一下

  1. -type 我们可以选择create build view等参数, create参数用来创建一个新的文章文件, build参数是将我们的新文章编译成网页文件, view参数用来通过浏览器浏览我们新生成的网页.
  2. -file 不管是create,还是build,还是view, 这个参数都是必须的,就是指定我们要操作的文件, 例如create的时候是指定我们要创建的文件.
  3. -author 这个参数是在build的时候使用的,指定文章的作者.
  4. -tmpl 也是在build的时候使用的, 指定我们编译时使用的网页模板

好了, 下面我们就来创建一篇博客吧,
执行命令:tt -type create -file 我的第一篇博客

文章创建完成了, 下面我们就可以开心的写博客了, 打开我们写博客的目录, 你会发现多了一个raw目录,里面正是我们刚才创建的文件, 现在我们开始在这个文件中写文章了.

ok, 必须是markdown格式的,写完后, 我们就需要根据模板生成网页了, 那模板该怎么写呢? 通常我们都是修改网页. 一些规则如下.

文章模板文件content.html的书写:
1 .使用占位符{{.Title}}表示文章的标题
2. 使用占位符{{.Date}}表示文章的日期
3. 使用占位符{{.Author}}表示文章的作者
4 .使用占位符{{.Desc}}表示文章的描述
5. 使用占位符{{.Content}}表示文章内容

这里贴一小段代码:

    <h1 class="post-title">{{.Title}}</h1>
    <section class="post-content">
      {{.Content}}
    <footer class="post-footer">
      <section class="author">
        <h4>{{.Author}}</h4>
      </section>

那现在我们开始编译成html文件,
使用命令tt -type build -file 我的第一篇博客 -author 作者 -tmpl ./content.html

ok, 现在文章部分我们完成了, 是不是很简单, 不过有了文章,我们还需要一个目录啊, 目录该如何生成呢? 其实也很简单.
使用命令tt -type cate就可以完成目录的自动创建了.

从图片中我们发现, 其实是自动生成了一个js文件, 那这个js文件我们该怎么用呢? 关于这个js文件里的几个函数说明如下:

  1. pageCount() 函数会返回分页页码总数(默认分页大小为5)
  2. getQueryString(query) 函数可以获取指定的querystring参数, 通常我们用来获取当前页码
  3. get(currentPage) 函数会根据当前页码返回数据数组, 该数组中包含了索引页需要的信息

索引信息数组中包含的信息如下:

  1. title 文章的标题
  2. date 文章生成的时间
  3. desc 文章的简要描述

这里有一点需要注意下, 上面提到了一个desc属性是关于文章的简要描述的, 对于这个desc有一个规则是, 在我们生成网页的模板中,必须要指定<meta name='description'></meta>的值为{{.Desc}}.
而且,我们通过上面的函数说明还可以看出, 这个自动生成的js文件还允许我们使用分页效果!!!

一切障碍扫除以后, 我们就开始使用这个category.auto.js文件进行我们目录文件的修改了. 下面是我使用的代码.

<script type="text/javascript" src="./js/category.auto.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var page = getQueryString("page")
        var count = pageCount()
        if (page == null) {
            page = 1
        }else {
            page = parseInt(page)
        }

        if(page > 1) {
            document.getElementById("nav").innerHTML += "<a class='newer-posts' href='?page="+(page - 1)+"'>← Newer Posts</a>"
        }

        document.getElementById("nav").innerHTML += "<span class='page-number'>Page "+page+" of "+count+"</span>"

        if(page < count) {
            document.getElementById("nav").innerHTML += "<a class='older-posts' href='?page="+(page + 1)+"'>← Older Posts</a>"
        }

        if (page <= count) {
            var result = get(page)
            for (var i=0;i<result.length;i++) {
                document.getElementById("content").innerHTML += "<article class='post'><header class='post-header'><span class='post-meta'><time datetime='"+result[i].date+"' itemprop='datePublished'>"+result[i].date+"</time><h2 class='post-title'><a href='./html/"+result[i].title+".html'>"+result[i].title+"</a></h2></header><section class='post-excerpt'><p>"+result[i].desc+"</p> <p><a href='./html/"+result[i].title+".html' class='excerpt-link'>Read More...</a></p></section></article>"
            }
        }
    }

</script>

ok, 到现在位置, 我们的第一篇博客就完成了, 而且之后我们再写博客, 只需要创建文件, 写博客, 生成html,创建目录就ok了. 接下来, 我们就需要将博客html文件和这个category.auto.jscopy到我们上面clone下载的仓库中去了.
下载我的项目结构如下:

文章文件全部放在了html*目录下, 那个category.auto.js文件放在了js目录中. 现在我们用浏览器打开一下那个**index.html看一下.

ok, 很完美, 现在我们可以上传到github了.
使用命令一下命令上传到github:

git add -A
git commit -m ""
git push origin master

等待上传成功后, 我们就可以通过你的用户名.github.io进行访问了.

文章的最后, 我们还是给出TitanPages这个项目的github地址, 大家可以尝试一下:https://github.com/qibin0506/TitanPages

8
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

手把手教你用github pages搭建博客 最新版

本文来自于我的个人博客,转载请注明 http://www.woaitqs.cc/2016/06/08/blog-seo-baidu 如果给你40分钟,可以搭建一个如下图所示的网站,你愿意吗?如果你愿意,那我们就开始干!背景介绍搭建博客网站有各种各样的方法,根据不同的需求,又不同的做法。如果你只是...
  • superjimmy
  • superjimmy
  • 2016-06-10 12:23
  • 15802

使用GitHub pages 搭建一个心仪的个人博客

(一)前言: 建议:慢慢看,也就这一篇用心了点写 说来话长,一把辛酸泪,可算是弄好了。 1 起因:在很早很早,大一的时候,估计快记不得日子了,那时候来到PC吧创业团队,一个大一级的学长通过买源码创建了一个社区论坛,因为那时候的社区比较流行,学长让我们注册个账号,发个心情,然后加个积分,再升个...
  • xudailong_blog
  • xudailong_blog
  • 2017-12-09 22:36
  • 585

利用github pages建博客

1.前言 鉴于我自身建站经历,不熟悉各种编码语言,口袋里没有多少钱,却殷切希望拥有一个独立的个人博客,在翻阅了各种教程后,看完各种眼花缭乱的代码后,终于将这个网站在github pages上搞出来了。在此,我不希望大家都重蹈覆辙,为了方便大家,我在此为大家做一个傻瓜教程 2.了解gith...
  • topsecrethhh
  • topsecrethhh
  • 2016-11-28 10:28
  • 673

教你用github pages搭建个人网站

(1)新建仓库 ok,首先你需要一个github的账号,立志作为一名优秀的程序员,这个账号是应该有的,如果没有赶快申请一个。 有了账号以后,首先点击新建仓库,如图: 然后到达仓库信息填写界面,如图: 这里只要注意一个地方,就是仓库的名称,必须是:你的用户名...
  • qq_34060722
  • qq_34060722
  • 2017-06-20 18:29
  • 452

使用GitHub Pages搭建个人博客

前言创建一个属于自己的个人博客理由千千万,但作为一枚热爱文史的纯工科技术狗的我想法很简单,主要有如下理由: 某些书籍的读后感 某些技术笔记的收藏和整理 和网友学习交流的渠道之一 工作生活的感悟 让自己的学习有迹可循 也算是推介自己 其实归根结底是出于一种情结,那就是不经审视思考总结记录的知...
  • A36567
  • A36567
  • 2017-07-23 22:44
  • 214

Hexo + Github Pages 搭建博客 且不同设备上同步写作

安装为什么选择Github Pages + Hexo 穷(githubpages 免费,且送300M的空间) 还算好用(写完上传就两步,多插件) 颜值丰富多变(可以自己设置别人弄好的主题) 你需要准备什么 一台 mac 一个 github 账号 node.js homebrew hexo 步骤分解 ...
  • Lin_Ting
  • Lin_Ting
  • 2017-02-12 23:47
  • 594

Github pages 搭建个人博客

前言: 两个目的: 一是自己写点文章、笔记之类的,加深理解。 二是将自己的项目也放上去,应该可以说方便项目展示和后期管理。(因为刚好我选的模板有个项目模块,可能后期会使用到,于是头脑发热想到这个)Ps: 最主要的还是写博文不积极,一直在学习,更新的非常慢。项目这一块后期再挂上去,现在还没有自...
  • lifestorm
  • lifestorm
  • 2017-06-30 06:02
  • 117

可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

前言:博主目前大三,Web 前端爱好者。写博客的好处,不是为了写而写,而是一个记录思想的过程。不要考虑它能带给你什么,而是你自己从中收获了什么。最近刚好有空,于是就参照网上的各种教程,搭建了一个博客。现在把 Hexo + GitHub Pages 搭建博客的完整过程记录下来
  • QQ80583600
  • QQ80583600
  • 2017-06-01 09:12
  • 2973

基于Hexo+GitHub Pages 搭建博客详细教程

摘要 :这是一篇有关如何使用Github Pages和Hexo搭建自己独立博客的详尽教程,里面介绍了如何使用和配置Hexo框架,如何将Hexo部署到自己的Github项目中,域名注册,以及域名的绑定等功能。前言:就在一个多月前,我经过百般折腾花了三天时间搭建了一个属于自己的博客,我觉得还是很有必要把...
  • u011974987
  • u011974987
  • 2016-05-06 17:13
  • 6779

使用Github Pages建独立博客

Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点。Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery、Twitter等。为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他...
  • wave_1102
  • wave_1102
  • 2014-11-27 17:01
  • 2077
    个人资料
    • 访问:647558次
    • 积分:6905
    • 等级:
    • 排名:第3917名
    • 原创:80篇
    • 转载:0篇
    • 译文:2篇
    • 评论:625条
    文章分类
    博客专栏
    友情链接

    鸿洋_

    Aggie的博客

    梁肖技术中心

    极客导航

    最新评论