利用GITHUBpage搭建个人博客和项目主页

Posted by Hsz on November 26, 2016

利用GITHUBpage搭建个人博客和项目主页

github 提供了github page这个静态网站托管服务,你可以为你个人或者你的项目写一个”官网”, 这样便于推广自己和自己的项目,关键他是免费的!你最多就是花个几十块买个域名就够了!

各种申请

sign up for github 就是创建账号了和一般的网站注册一样,没啥可说的,不会英文都可以完成.

和上一步一样,申请一个账号,只是因为一些众所周知的原因google在天朝是无法直接访问的(有时候github也会抽风). 这时候就需要一些”不可描述的手段”了,总之先解决了网络问题,之后就可以注册了 google一般是拿gmail邮箱做为google账号,所以申请个gmail先,这个不多说,一路没啥难度.

利用谷歌账号开通:

一般来说用google账户即可,顺便吐槽一下,国内尤其是新浪的邮箱服务真的是极差的,账户随便就丢了,还找都找不回来,还好没绑啥重要东西.

jekyll及其配置

jekyll是github支持的静态网站生成器,它支持类似jinjia2的模板格式Liquid,而且支持markdown格式,关于markdown可以看我的这篇文章, 使用它你在第一次配置好后就不用再纠结你的站了,写就好.

安装ruby环境

window 下这里下载ruby,安装好后顺手把rails一起安了吧~

安装完成后记得设置环境变量, 具体就是把安装好的ruby位置放到环境变量里去。

win+R 调出运行,然后输入cmd 呼出terminal,敲入gem install rails等待安装完成吧~~

mac下自带ruby。

安装gitpage相同的jekyll环境

命令行输入gem install bundler等待安装完,

命令行输入gem install jekyll 和 gem install jekyll-paginate等待安装完,

接下来就是找个好看的模板了,可以在这边找,当然也可以下载我的模板

将模板解压后放到你的项目文件夹即可

你可以看到其中有这样几个文件/文件夹

  • _config.yml 配置文件
  • _drafts文件夹 用来存放草稿,当运行jekyll build --drafts后,草稿将会被编译成文章,并自动加上发布如期
  • _includes文件夹 保存你网站的部件,你可以加载这些部件到你的布局或者文章中以方便重用。可以用这个标签 \{\% include file.ext \%\}来把文件 _includes/file.ext 包含进来。
  • _layouts文件夹 layouts 是包裹在文章外部的模板。布局可以在YAML头信息中根据不同文章进行选择。标签 {{ content }} 可以将content插入页面中。
  • _posts文件夹 这里放的就是你的文章了。文件格式很重要,必须要符合: YEAR-MONTH-DAY-title.MARKUPThe permalinks 可以在文章中自己定制,但是数据和标记语言都是根据文件名来确定的。
  • _site一旦 Jekyll 完成转换,就会将生成的页面放在这里(默认)。最好将这个目录放进你的 .gitignore 文件中。
  • index.html 如果这些文件中包含 YAML 头信息 部分,Jekyll 就会自动将它们进行转换。当然,其他的如 .html, .markdown, .md,或者 .textile 等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。
  • css,images,favicon.ico等不用说,就是前端折腾的工具了.

这样jekyll环境就算搭建好了

要直接用主题那就没啥可折腾的了,如果想要自己设计修改,还是先好好读读上面给的文档再下手比较好~

配置_config

_config.yml是主要需要修改的部分,这边有几个主要参数是往往要修改的

  • title 你的站点标题
  • SEOTitle: SEO标题,方便搜索引擎抓取
  • email: 你的email地址
  • description: 你站点的介绍
  • keyword: 关键字
  • url: 你网站的url 这个一定要修改
  • duoshuo_username: 你的多说账号 (如果你要用的话)
  • duoshuo_share: [true /false] (如果你要用的话)
  • ba_track_id: 百度分析工具id(如果你要用的话)
  • ga_track_id: 谷歌分析工具id(如果你要用的话)
  • ga_domain: 谷歌分析工具指向的域名(如果你要用的话)

当然具体看你下载主题的说明

jekyll逻辑简述

模板放在 _includes 里 静态文件自己定好,像我就是图片放img这类

模板内用 {{ }}来传递模块或页面的属性

用{\% \%} 描述逻辑

每个页面开头用--- ---分隔出独立位置记录这个页面的属性,其中layout:title:是 必须的属性. 一个例子:

---
layout: post
title: "helloworld"
date: 2016-05-27
author: "Hsz"
header-img: "img/post-bg-js-module.jpg"
---

运行jekyll

命令行依然cd到你的项目目录,输入 jekyll build ,运行完了后再输入 jekyll serve。 tips:没事terminal不要关。

浏览器里输入地址http:\localhost:4000你就能看到博客主页了

不用jekyll

githubpage支持直接用html+css+js的方式构建静态网站,这种方式当然是比较麻烦的但有时候也很实用,比如项目用sphinx生成api文档的时候, jekyll反而没用,这种时候就很适合用sphinx生成好静态站后直接让githubpage跳过jekyll运行.怎么弄呢?很简单,在你的项目文档根目录加个空的.nojekyll文件就行了

个人博客

github page 提供了搭建纯静态的blog的环境和工具,它允许使用jekyll作为生成器管理博客,你也可以通过一些第三方工具实现一些”动态的功能”比如说:

  • 站内搜索用的google的自定义搜索工具
  • 网站分析也是谷歌的analytics工具
  • 评论用的多说

本人这个博客就是用这种方式建立的,虽然粗糙,但也基本够用.

这个blog使用的模板是从某位前端大大的主题修改而来.这边先感谢下~ 另外还参考了另一位大大模板的一些功能。之前头一次弄折腾了两天才算弄明白一些里面的运行逻辑是咋回事, 其实还是相当简单的,当然前提是你会一点基本的建站知识和前端编程技术(不会的话就拿个现成的改吧).

接下来这个部分我会详细讲解如何搭建一个类似的小站。

利用gitpage搭建静态个人博客网站

先进入你的github主页,这里你可以查看和管理你的所有项目

从上倒下的点红笔圈中的地方新建一个项目,

设置的时候上面把我的账户替换成你的账户就可以了,点绿色按钮提交. 于是你就有了一个自己的站点位置(https://yourgitname.github.io)

下载github desktop的客户端windowsmac下(linux用命令行工具就不介绍了,会的不用看这篇文章,具体的可以看我另一篇文章),安 装好后不同平台会有不同,但是基本的还是一样的,

上图中按钮是同步用的,会将本地仓库内容覆盖github上的主仓库中, 每次同步必须在summary中填上同步的主题,下面的描述可以不填,再下面的内容是提示你哪些有改变。

你已经创建好了项目,剩下的就是在你的项目网页点击圈中的按钮,然后再你的客户端中将该项目clone下来.

选好你希望该项目本地所在的位置后等待克隆成功.

之后就是把之前自己配置好的网站源代码拷过来,然后push上去就行了.

你的个人网站会默认在<username>.github.io这个位置

实现功能 (如果你要用的话)

站内搜索功能

这个功能用的谷歌的自定义搜索,需要注册后才能用。 除了自己的代码设置外还要在谷歌自定义搜索页面上做些设置 具体如图

点击后弹出如图

enter image description here

enter image description here

enter image description here

如果你通过站长工具提交过sitemap了,那这样就能搜索了

网站分析

谷歌分析地址:https://analytics.google.com/,根据提示一步一步来,输入自己的域名啥的就好,后面可以得到一个id 百度分析地址:http://tongji.baidu.com/根据提示一步一步来,输入自己的域名啥的就好,后面可以得到一个id

如果你的主题有带分析功能,只要去配置文件将获得的俩id加上去就好,如果没有,可以修改_include中的footer.html, 添加上各家给你的js代码在最后即可

留言评论功能

这个没啥好说的,注册设置都弄好了就有了

项目主页

项目主页就比较灵活了,可以在每个项目的sitting选项中选择,

enter image description here

配置好后默认会在这样的网址出现:

<username>.github.io/<projectname>

githubpage支持:

  • 使用github自带模板通过markdown定义

sitting的界面中找到launch automatic page generator按钮, enter image description here

接着用markdown编辑你的内容 enter image description here

然后就是选择一个你觉得比较靠谱的主题,github提供了几个预选主题,都还蛮好看的 enter image description here

这种方式比较适合小型项目,可以看到基本上就是个单页web项目,但是优点是制作简单而且美观.时间成本非常小,性价比很高.

  • 在项目的master分支docs文件夹下放置项目网页

  • 在项目的master 或者 gh-pages分支下放置项目网页

这两种方式就和做blog一样了,不同之处也就是site的url不同而已,在sitting中选择对应的选项即可

enter image description here

配置域名 (如果你想用自己酷炫的域名的话)

购买域名

避免广告嫌疑我就不多说了,总之找个买就行

CNAME设置

注意只能放一个域名,一般是你所想映射过来的域名

域名解析

到你买域名的供应商那边,之后选择域名解析,这个就不截图了要不有广告嫌疑。

要注意的是有几种可能:

  • 二级域名,比如blog.xxxx.xx这种 选CNAME作为解析方式,然后把自己的原始网址放上去就行了。
  • 一级域名和www域名 除了要用CNAME外,还需要用A解析。只要在A解析中选好,没有二级域名就解析@,有www就额外加上www,ip地址是这俩:
    1. 192.30.252.153
      • 192.30.252.154

弄好了记得_config文件要改下url