GitHub托管静态博客指南

环境配置
1、Node.js
2、Git

域名

域名注册

域名解析

阿里云控制台解析域名:

  • 记录类型:A
  • 主机记录:@
  • 解析线路:默认
  • 记录值: 192.30.252.153
  • MX优先级: –
  • TTL: 10分钟

GitHub

  • 1、注册GitHub账号
  • 2、建立新仓库,名字必须为user_name.github.io
  • 3、添加SSH公钥

设置账号:

1
2
git config --global user.email "me@lousama.com"
git config --global user.name "lousama"

生成密钥:

1
2
3
ssh-keygen -t rsa -C "me@lousama.com"
//接下来是输入密钥的文件路径,可以手动指定 也可以直接回车
//不指定的话默认是在 ~/.ssh下

上传密钥

1、打开.pub后缀文件,添加到github中
2、拷贝ida_rsa和id_rsa.pub到Git目录下的.ssh目录。

验证

1
2
ssh -T git@github.com
Hi lousama! Youve successfully authenticated,but GitHub does not provide shell access.

hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页,编译文字效率非常之高,操作却非常的简单,hexo生成的静态网页可以直接放在GitHub Pages上。

安装

确保Node和Git都成功安装之后,

1
npm install -g hexo

初始化

cd到指定的目标目录,然后执行初始化

1
hexo init

至此,安装工作已经全部完成!

常用命令

1
2
3
4
hexo new "postName" #新建文章
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub

这些命令还阔以简写:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

PS:以上命令必须要在hexo的init目录执行。

写文章

执行以下命令新建文章:

1
hexo -n [layout] "postName"

postName是显示在URL中的名字,layout是可选的参数,默认的是post,这个参数的值就在/scaffolds目录下,这些文件的名字就是layout参数的值,你可以新建自己的layout,也编译编辑现有的。比如打开post.md:

1
2
3
4
5
6
title: {{ title }} //默认等于postName,即文章标题,可以任意修改,不会出现在URL中
date: {{ date }} //文章生成时间,默认取的当前日期
categories: //文章分类目录,可以为空
tags: //文章标签,可空,多标签格式:[tag1,tag2,tag3]
---
从这里开始输入正文

PS:hexo中所有配置的: 后面必须有个空格,不然会解析失败
hexo n hello命令会在hexo/source/_post下生成一个hello.md的文件。

接下来的,就可以使用喜欢的编辑器来尽情书写你的文章,GitHub Pages支持Markdown语法,关于Markdown语法可以自行索索,很简单。

在正文中可以加入<!-- more -->标志来区别文章摘要,该标记上方的内容会显示在文章列表中,标记下方的内容必须点开正文才能看到。

文本的编码格式请使用UTF-8

文件结构

我们先来看一下hexo的文件结构

1
2
3
4
5
6
7
8
9
10
├── .deploy_git
├── .gitignore
├── _config.yml //hexo的主要配置目录
├── db.json //数据信息,所有的页面全部以json存在这个文件里
├── node_modules //hexo命令指向的目录
├── package.json //hexo相关的版本信息
├── public //执行hexo g后,输出的静态网页的目录,该目录为上传github的实际目录
├── scaffolds //layout模版目录
├── source //文件源码目录,该目录下的md和html都会被hexo处理,一些根目录文件如头像图标,CNAME文件等都放在这里。
├── themes //主题目录,git clone的主题放在这里

接下来我们重点看一下_config.yml这个文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Lousama //网站标题
subtitle: 道狭草木长,夕露沾我衣 //网站副标题
description: 道狭草木长,夕露沾我衣 //网站描述,给搜索引擎用的
author: Lousama //网站作者,通常在博客下方显示
language: en //语言,对应的值为hexo/themes/xxx/languages/下的文件名
timezone: //时区 默认东八

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://lousama.com //你的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory-默认的结构
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: [README.md]
avatar: /img/favicon.png

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: //代码高亮
enable: true
line_number: true //显示行号
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 分页设置
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

# Deployment 部署相关
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:lousama/lousama.github.io.git
branch: master

域名绑定

域名绑定的话显示需要在域名解析的时候把ip A过去,然后是github仓库的分支根目录(本地的话即hexo/source目录下)必须有CNAME文件,内容填写域名即可。

主题

萝卜白菜各有所爱,各人审美各有差异,不过玩博客搭配个赏心悦目的主题也是一大乐事。
可以参考官方的主题站,也可以参考GitHub的主题列表,也可以参考知乎的主题推荐。

主题安装

主题的安装非常简单,找到你喜欢的主题,Fork下来,(顺手star一发,正所谓遗人玫瑰手有余香)。然后直接git clone到hexo/themes下即可。
主题使用的话打开hexo/_config.yml,找到theme:修改为你clone的主题名字即可。

主题配置

不同的主题配置略有差异,不过主要配置文件是hexo/themes/xxx下面的_config.yml文件。具体的配置可参考主题的README

图床

GitHub本身连接就很快,图片还放在项目里的话会更卡,可以使用七牛来做图床。
免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求,这对普通用户来说已经大大的足够了。
除此之外,七牛除了作为图床以外还可以存储其他的静态文件,比如一些连接耗时的JS等。

服务器

调试

执行以下命令

1
hexo s

输入命令后会启动服务器,您的网站会在 http://localhost:4000 下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。

如果您想要更改端口,或是在执行时遇到了 EADDRINUSE 错误,可以在执行时使用 -p 选项指定其他端口,如下:

1
hexo s -p 5000

部署

先执行以下命令生成静态文件到source目录:

1
hexo g

然后执行以下命令提交到github:

1
hexo d

其他

其他的诸如想要加入统计,分享,评论等功能需要在主题里进行设置
其他的插件功能实现思路是在每个html里都引入第三方js,那么就需要把js加载渲染模版中,保证生成的html都包含这些js。

统计

google analytics or baidu analytics

google被墙了,但google analytics依然可以使用,因为追踪代码的js调用的并不是google.com的子域名,但要看分析结果还得翻出去才行。

作一个环保的程序员,尽量不要用baidu。
做一个环保的程序员
翻墙首选推荐lantern

登陆谷歌分析首页(https://analytics.google.com/analytics/web)。
上面页签选管理–媒体资源–跟踪信息–跟踪代码。

1
2
3
4
5
6
7
8
9
10
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-72383275-1', 'auto');
ga('send', 'pageview');

</script>

得到上述的js代码。
那么怎么引入呢?

现在大多数的主题都有对google analytics的插件支持,只需要在_config.yml中添加google analytics属性为true,然后在themes/layout/下找到类似google-analytics.js的文件即可。

如果实在找不到,也可以自行添加。一般这类文件添加的位置都在head或者foot的位置,所以一般在_partial目录下找到渲染foot或head的部分,将代码嵌入即可(其他插件同理)。

分享

jiathis

评论

Disqus(国外)或多说(国内)