跟着胖胖搭建博客

Hexo + Github Page 搭建博客

因为知识点太多需要整理所以需要一个博客来记录,之前选择过有道云笔记但不支持Md,使用过为知笔记居然有广告不能忍受.所以选择用hexo + Github page搭建属于自己的博客,还可以提升一下B格,下面是我跟着网上的教程一步一搭建的.

在github上创建仓库

  1. 创建一个名字为(必须和github名称一样) username.github.io 的Repository
  2. 配置git
    • git config --global user.email "3617150@qq.com"
    • git config --global user.name "qiuhoude"
  3. 生成密钥 ssh-keygen -t rsa -C "3617150@qq.com"(无脑回车就ok) 会在 ~/.ssh/目录下生成 ,id_rsa私钥 ,id_rsa.pub公钥
  4. github–>settings–> SSH-Keys 添加key(将公钥 id_rsa.pub内填入key中)
  5. 测试连接 ssh -T git@github.com
  6. 添加远程仓库 git remote add origin git@github.com:qiuhoude/username.github.io.git

安装Hexo,初始化,启动服务

1
2
3
4
5
npm install -g hexo-cli #安装hexo到全局  
hexo init blog #初始化hexo(会下载)
cd blog
npm install #安装所依赖的包
hexo server #本地启动

notice:
_天朝的网络下载会报错,所以先设置代理
全局设置代理:npm config set registry http://registry.npm.taobao.org

_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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 网站
title: 胖胖de码农 #网站标题
subtitle: #网站副标题
description: #给搜索引擎看的,对站点的描述,可以自定义
author: qiuhoude #在站点左下角可以看到
language: zh-CN
timezone: Asia/Shanghai

# URL 网址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://qiuhoude.github.io #网址
root: / #网站根目录
permalink: :title/ #默认 :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 #Include code 文件夹
i18n_dir: :lang
skip_render:

# Writing 文章
new_post_name: :year-:month-:day-:title.md # File name of new posts,新文章的文件名称 默认
default_layout: post #预设布局
titlecase: false # Transform title into titlecase 把标题转换为 title case
external_link: true # Open external links in new tab
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: true #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章
highlight: #代码块的设置
enable: true
line_number: true #代码行数
auto_detect: false
tab_replace:

# Category & Tag
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名


# Server 不修改
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:

# 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: 5 #每页显示的文章量 (0 = 关闭分页功能) default 10
pagination_dir: page #分页目录

# Extensions 这里配置站点所用主题和插件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #当前主题名称。值为false时禁用主题

# Deployment
## Docs: https://hexo.io/docs/deployment.html
## 需要安装 npm install hexo-deployer-git --save
deploy: #部署部分的设置
type: git
# repository: https://github.com/qiuhoude/qiuhoude.github.io.git
# repo:
# github: https://github.com/qiuhoude/qiuhoude.github.io.git,master
repo: https://github.com/qiuhoude/qiuhoude.github.io.git
branch: master
message: # commit message, default commit is Site updated {{ now('YYYY-MM-DD HH:mm:ss') }}
name: qiuhoude
email: 36117715@qq.com

# admin 管理插件
## 需要安装 npm install --save hexo-admin
## 访问 http://yoursite/admin/
admin:
username: houde
password_hash: $2a$08$41njAq3E8lx5mVsfjqLYq.PXZEc5VTmVY/nlZ2ZTZ2/ipbEbtPqy6
secret: a secret something

# 忽略README.md
skip_render: README.md

hexo 写作

创建新的文章

  • hexo new [layout] 'postName'简写hexo n
    • 其中layout是可选参数默认值为post,可在__config.yml配置default_layout
    • layout的默认3种,到scaffolds目录下查看,些文件名称就是layout名称,可以添加自己的layout
      • post 对应成文章的路径 source/_posts
      • page source
      • draft(草稿) source/_drafts

layout的内容的说明

1
2
3
4
5
6
7
8
9
#{{}}里面的是hexo变量
layout: {{ layout }} # hexo默认会处理全部markdown和html文件,若不处理设置false
title: {{ title }} #文章页面上的显示名称,不会出现在URL中
date: {{ date }} #文章生成时间
categories: #文章分类目录,可以为空,注意:后面有个空格
tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格
description: # 给搜索引擎看的,对本页的描述 参照__config.yml
photos: # 显示的图片 fancybox(需要配置主题)
- #要显示的照片

文章摘要

1
2
3
以上是摘要
<!--more-->
以下是余下全文

more以上内容即是文章摘要,在主页显示,more以下内容点击『> Read More』链接打开全文才显示。

生成静态文件并发布

  • hexo generate简写hexo g
    • 选项-d,--deploy 文件生成后立即部署网站
    • 选项-w, --watch 监视文件变动
  • hexo deploy简写hexo d 部署网站
    • -g, --generate 部署之前预先生成静态文件

本地启动

  • hexo server 简写 hexo s
    • -p, --port 重设端口
    • -s, --static 只使用静态文件
    • -l, --log 启动日记记录,使用覆盖记录格式

部署的脚本

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
#!/bin/bash
## 此脚本为自动部署Hexo Blog

## 定义Hexo路径
hexopath=you hexopath
## 定义GitHub 用户名
username=you username
## 定义GitHub 密码
password=you password

cd $hexopath

hexo cl && hexo g
## 使用expect程序进行自动交互
expect << EOF
spawn proxychains4 hexo d
expect {
"Username*" {send "$username\r";exp_continue}
"Password*" {send "$password\r"}
}
expect eof
EOF

hexo cl
echo "部署完毕!"
echo "按任意键退出。"
read

其他命令

  • hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public)
  • hexo list 列出网站资料
  • hexo version 显示 Hexo 版本
  • hexo publish [layout] <title> 可以将草稿移动到source/_posts文件夹下(和 new用法很类似)

主题

炫酷的个性博客就靠主题啦!hexo的主题列表Hexo Themes
Next 主题不错 http://theme-next.iissnan.com/getting-started.html

  • 主题安装在 themes目录下
1
git clone <repository> themes/<theme-name>

我选择的是Landscape plus,针对中国大陆的hexo用户,优化hexo官方主题landscape

  • 修改blog/_config.yml中的theme: <theme-name>

  • 修改主题下的_config.yml(Landscape plus为例子)

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
# Header
menu: # 站点顶部菜单,支持子菜单
Home: /
Archives: /archives # 归档
About: /about
# GuestBook: /guestBook留言板
rss: /atom.xml

# Content
# archive_date_format: MMM DD
excerpt_link: Read More #摘要链接文字
fancybox: true #是否开启fancybox效果
mathjax: false #是否开启latex数学公式
# archive_yearly: false #按年存档

# Sidebar 侧边栏
sidebar: right #位置

# 要加载的工具在这里添加
widgets:
- category
- tag # 标签
- tagcloud # 标签云
- archive # 归档
- recent_posts
- links

# Links 友情链接
links:
Github: http://github.com/qiuhoude
oschina blog: http://qiuhoude.oschina.net/

#评论设置
duoshuo_shortname: qiuhoude #多说账号

# Baidu share
baidushare: true

# other
favicon: /favicon.ico #网站图标
twitter:
google_plus:
fb_admins:
fb_app_id:
google_analytics: #Google分析id
  • 更新主题
1
2
cd themes/<theme-name>
git pull

部署时保证README.md不被渲染

  • 文件添加在 Hexo目录下的source根目录下创建README.md 文件。并编辑保
  • 编辑Hexo目录的_config.yml文件中的“skip_render”参数,例如
1
skip_render: README.md

网站图标

可以在 hexo\themes\<主题>\layout\_partial\head.ejs文件找到

1
2
3
<link rel="icon" href="<%- theme.favicon %>">
<!-- 修改成为 -->
<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">

可以在favicon.ico的图标放在 blog/source目录下

自定义挂件

除了默认已提供的挂件外,你还可以自定义自己的小挂件,在blog\themes\\layout_widget\下,新建自己的ejs文件,如myWidget.ejs,然后在配置文件hexo\themes\_config.yml中配置。

1
2
widgets:
- myWidget

插件

1
2
3
4
5
6
# 安装
npm install <plugin-name> --save
# 升级插件
npm update
# 卸载插件
npm uninstall <plugin-name>

评论

静态博客需要使用第三方评论系统,hexo默认集成的是Disqus,天朝还是用多说
注册多说
将多说的通用代码贴的hexo\themes\<theme>\layout\_partial\comment.ejs里面

1
2
3
4
<% if (config.disqus_shortname && page.comments){ %>
<section id="comment">
#你的通用代码
<% } %>

自定义页面

1
hexo new page "about"

在hexo/source/下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。
上述步骤,也可以手工生成,在hexo/source/下手工新建about和index.md也是完全等价的。

因为markdown对table的支持不好,我是在about中直接建立index.html,里面书写页面内容,hexo会帮你加上头和尾。

404页面

Gihub 404教程直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的
公益404:
腾讯公益404
404公益_益云(公益互联网)社会创新中心
失蹤兒童少年資料管理中心404

图床

考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。七牛,访问速度极快,支持日志、防盗链和水印。免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求七牛没有目录的概念,但是文件名可以包含/,比如2013/11/27/reading/photos-0.jpg
不足:不支持CNAME到分配的永久链接,也不能绑定未备案的自有域名,必须备案才可以。

申请域名

GoDaddy(狗爹)
DNSPod

目录结构

整个项目的目录结构

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy #执行hexo deploy命令部署到GitHub上的内容目录
├── public #执行hexo generate命令,输出的静态网页内容目录
├── scaffolds #layout模板文件目录,其中的md文件可以添加编辑
├── scripts #扩展脚本目录,这里可以自定义一些javascript脚本
├── source #文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
| ├── _drafts #草稿文章
| └── _posts #发布文章
├── themes #主题文件目录
├── _config.yml #全局配置文件,大多数的设置都在这里
└── package.json #应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

主题的目录结构

位置:bolg/themes/<主题>/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
├── languages #多语言
| ├── default.yml #默认语言
| └── zh-CN.yml #中文语言
├── layout #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _partial #局部的布局,此目录下的*.ejs是对头尾等局部的控制
| └── _widget #小挂件的布局,页面下方小挂件的控制
├── source #源码
| ├── css #css源码
| | ├── _base #*.styl基础css
| | ├── _partial #*.styl局部css
| | ├── fonts #字体
| | ├── images #图片
| | └── style.styl #*.styl引入需要的css源码
| ├── fancybox #fancybox效果源码
| └── js #javascript源代码
├── _config.yml #主题配置文件
└── README.md #用GitHub的都知道

如果你需要修改头部,直接修改blog\themes\modernist\layout_partial\header.ejs,比如头上加个搜索框:

1
2
3
4
5
6
<div>
<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
<input type="search" name="q" id="search" autocomplete="off" autocorrect="off" autocapitalize="off" maxlength="20" placeholder="Search" />
<input type="hidden" name="q" value="site:<%- config.url.replace(/^https?:\/\//, '') %>">
</form>
</div>

将如上代码加入即可,您需要修改css以便这个搜索框比较美观。

再如,你要修改页脚版权信息,直接编辑blog\themes\modernist\layout_partial\footer.ejs。同理,你需要修改css,直接去修改对应位置的styl文件。

备份博客

https://github.com/coneycode/hexo-git-backup

参考

Hexo中文网站
Github Pages
Hexo主题列表
多说
教程
http://ibruce.info/2013/11/22/hexo-your-blog/