| hexo, github pages, 博客

使用GithubPages搭建自己的博客

配置完成后的示例：

–使用主题：TKL

https://hongyanding.github.io/

些文章配置环境以mac os 举例。

环境配置

  • 安装Node（必须）
1
2
3
作用：用来生成静态页面的.
安装：到Node.js官网下载相应平台的最新版本，一路安装即可。
问题：windows系统可能在cmd里不能识别命令，nodejs文件夹下面有npm,直接用npm安装环境既可。这时会自动配置环境变量。
  • 安装Git（必须）
1
2
作用：把本地的hexo内容提交到github上去.
安装：Xcode就自带有Git，windows安装也很简单。
  • 申请GitHub（必须）
  • 安装HEXO（必须）

安装HEXO

安装前提：上面几步均完成

安装步骤：

  1. 创建一个文件夹,如blog,用户存放hexo的配置文件,然后进入blog里安装Hexo。安装完成后blog就是你的博客根目录，所有的操作都在里面进行。
  2. 执行如下命令安装Hexo：

windows:

npm install -g hexo

mac:

sudo npm install -g hexo

初始化然后，执行init命令初始化hexo,命令：

hexo init

3.验证安装

  • 生成静态页面：

    hexo generate（或者 hexo g）

  • 启动本地服务，进行文章预览调试

    hexo server

  • 浏览器输入http://localhost:4000

配置Github Pages

很多人可能并不清楚github pages是干嘛的，官网是：https://pages.github.com/，
其实算github提供的一个服务，我们可以免费的再其上面搭建自己的网站，也有很多人利用github pages作为自己的个人博客站点。

  1. 建立Repository
    image

    建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】，固定写法

这里备份一下如何使用自己的html代码搭建个人站点。

clone到本地

命令行进入硬盘上任意一个文件夹，然后执行

git clone https://github.com/hongyanding/hongyanding.github.io.git

注意修改为你的仓库地址，如果你的电脑上并不支持git命令，你可以搜索git 安装，先安装好git并配置好环境。

到达本地之后，我们就可以准备好需要更新进去的页面了，比如我新建一个index.html内容如下：

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<h1>这是我使用github pages搭建的个人站点。</h1>
</body>
</html>

完成之后，记得保存，index.html必须和你clone下来的.git文件夹在同一个目录.
完成之后，就是提交了。

注意首先命令行进入你的hongyanding.github.io这个目录，然后依次执行git add . , git commit -m “注释”，git push，然后输入你的用户名，密码即可。

更新成功之后，你的个人站点搭建成功了。
默认访问地址是：

https://hongyanding.github.io/

到此就可以使用自己的html 来作为自己的站点了。
下面继续介绍使用HEXO做个人博客.

  1. 建立关联

    我的blog在本地/Users/work/blog，blog是我之前建的东西也全在这里面，有：
    _config.yml node_modules public source
    db.json package.json scaffolds themes

现在我们需要_config.yml文件，来建立关联，命令：

vim _config.yml

翻到最下面，改成下面这样子的

1
2
3
4
5
6
7
deploy:
     type: git
     repo: https://github.com/hongyanding/hongyanding.github.io.git
     branch: master

然后执行命令：

npm install hexo-deployer-git –save

  1. 执行配置

    hexo deploy (或者 hexo d)

4.验证部署
浏览器中输入

http://hongyanding.github.io/

就行了，我的github的账户叫hongyanding,把这个改成你github的账户名就OK

这里备注一下部署步骤：
每次部署的步骤，可按以下三步来进行。

hexo clean

hexo generate

hexo deploy

一些常用命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo new"postName" #新建文章
hexo new page"pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

写文章

执行new命令，生成指定名称的文章至hexo\source_posts\postName.md。

hexo new [layout] “postName” #新建文章

其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称【post, page and draft】(默认是post)[点这里看详细说明]。

1
2
3
4
5
Layout	Path
post	source/_posts
page	source
draft	source/_drafts

当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md

1
2
3
4
title: { { title } }
date: { { date } }
tags:
---

请注意，大括号与大括号之间我多加了个空格，否则会被转义，不能正常显示。

我想添加categories，以免每次手工输入，只需要修改这个文件添加一行，如下：

1
2
3
4
5
title: { { title } }
date: { { date } }
categories: 
tags: 
---

postName是md文件的名字，同时也出现在你文章的URL中，postName如果包含空格，必须用”将其包围，postName可以为中文。

注意所有文件：后面都必须有个空格，不然会报错。

看一下刚才生成的文件hexo\source_posts\postName.md，内容如下：

1
2
3
4
5
6
title: postName #文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: #文章分类目录，可以为空，注意:后面有个空格
tags: #文章标签，可空，多标签请用格式[tag1,tag2,tag3]，注意:后面有个空格
--->
这里开始使用markdown格式输入你的正文。

修改配置 用户名及路径等

如果想修改头像可以直接在主题的_config.yml文件里面修改，友情链接，之类的都在这里。

修改头像
我当前的路径/Users/work/blog/themes/yilia，ls 你可以看到

Gruntfile.js _config.yml package.json

README.md layout source

vim _config.yml 进去，找到 #你的头像url avatar: 后接一个URL就行了，头像就修改成功了

修改主题和作者名字

我当前的路径/Users/work/blog，ls 你可以看到

_config.yml node_modules public source themes

db.json package.json scaffolds ssh-keygen

vim _config.yml 进去，找到 author: ding，修改成你自己的名字就行了

修改主题，然后继续往下找到

1
2
3
4
5
6
7
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme:yilia

改成theme: yilia，theme:后面接你自己的主题名字就行了,然后分别执行

部署

hexo g

提交

hexo d

主题推荐

这里有很多主题列表，一定有一款适合你~
Cover- A chic theme with facebook-like cover photo

Oishi- A white theme based on Landscape plus and Writing.

Sidebar- Another theme based on Light with a simple sidebar

TKL- A responsive design theme for Hexo. 一个设计优雅的响应式主题

Tinnypp- A clean, simple theme based on Tinny

Writing- A small and simple hexo theme based on Light

Yilia- Responsive and simple style 优雅简洁响应式主题

Pacman voidy- A theme with dynamic tagcloud and dynamic snow

主题设置举例：

  1. 找到喜欢的主题及github下载地址
  2. clone 到本地

    git clone https://github.com/SuperKieran/TKL.git themes/TKL

  3. 修改_config.yml主题配置

    theme: TKL

注意冒号后有个空格。之前设置不成功，原因是没有空格。设置时请注意。
4.提交修改

hexo g

5.更新主题（写在这里备忘）

cd themes/TKL

TKL 是主题名。

git pull

将自己的域名直链到csdn博客(这个和HEXO的使用没关系了)

（1）域名购买与解析

ok，首先你要有个域名，那么就要去申请域名了，这里我们可以通过万网申请：https://wanwang.aliyun.com/，查找你想申请域名，如果可以买，购买就可以了。

购买域名完成，进入万网的管理控制台：

image

找到你已经购买的域名，点击解析，进入如下页面：
image

然后点击添加解析，ip可以跟我填写的一致，当然以防发生变化，你可以ping你的url：

例如：

ping www.hongyangandroid.github.io

然后拿到返回的这个IP也可以。

恩，根据上表，选择一个IP，填写两条记录其实就可以了：

  • 主机记录www对应www.zhanghongyang.com
  • 主机记录@对应zhanghongyang.com

ok，设置完成解析之后，是不是直接访问域名就能跳转到我们刚才的github页面呢？

恩，是不能，你去访问会显示404.

我们还差一个环节。

（2）CNAME

差什么呢，差一个CNAME文件(无后缀)，这个文件需要提交到我们刚才创建的仓库，内容为我们的域名，例如:

image

然后记得执行：git add . , git commit -m “注释”，git push，然后输入你的用户名，密码即可，忘了命令往前翻。

更新成功之后，检查下，确定成功了，就可以通过你的域名访问了，例如：

image

ok，到这里你已经学会了如何通过你购买的域名与github pages结合，即通过你购买的域名访问你的个人站点了。

一般情况下，到这里就可以庆祝了，比如你想托管你的简单的网页设置。

但是，如果你和我一样，博客在其他平台下托管，你想通过购买的域名跳转到该平台，你的任务还没结束。

（3）神奇的JS

好吧，其实一点也不神奇，也就一行js跳转代码。

对于我这种情况，我不需要任何内容，只要一行js就好了，我可以这么写index.html：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<script>
    window.location.href="http://blog.csdn.net/lmj623565791";
</script>
<body>
</body>
</html>

然后我提交就搞定了，我就可以通过zhanghongyang.com直接跳转到我的博客页面了。

but，心细的人并没有满足，比如我们手机访问的csdn列表页面和电脑的列表页面不同的，于是我们可以更加完善我们的js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        window.location.href="http://blog.csdn.net/lmj623565791";
    } else {
        window.location.href="http://m.blog.csdn.net/blog/index?username=lmj623565791";
    }
}
browserRedirect();
</script>

通过判断userAgent来确定是否是来自手机端的，如果是手机端的访问mobile的页面，否则访问pc端页面。

参考链接

http://blog.csdn.net/lmj623565791/article/details/51319147

http://www.jianshu.com/p/465830080ea9

http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source=tuicool