使用Hexo和github搭建免费静态博客

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

安装Nodejs

1
2
3
4
5
git clone --depth 1 https://github.com/cnpm/nvm.git ~/.nvm
echo "source ~/.nvm/nvm.sh" >> ~/.bashrc
source ~/.bashrc
nvm install stable
nvm alias default stable

安装hexo

1
npm install -g hexo-cli

配置

建站

1
2
3
hexo init blog
cd blog
npm install

配置

安装主题

1
2
git clone https://github.com/iissnan/hexo-theme-next themes/next
rm themes/next/{.git,.gitignore}

使用 Data files

https://github.com/iissnan/hexo-theme-next/issues/328

1
2
3
sed -i 's/theme:.*/theme: next/' _config.yml
mkdir -p source/_data
cp themes/next/_config.yml source/_data/next.yml

设置代码字体

source/_data/next.yml

1
2
3
4
codes:
external: true
family: monospace
size: 14

添加版权声明

source/_data/next.yml

1
2
3
4
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

创建文章时默认添加 copyright: 属性

/scaffolds/post.md

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

设置社交账号

source/_data/next.yml

1
2
3
social:
GitHub: https://github.com/hhktony || github
E-Mail: mailto:hhktony@gmail.com || envelope

配置社交帐号格式为: 地址 || 图标

不蒜子统计

source/_data/next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer:

Disqus 评论

source/_data/next.yml

1
2
3
4
disqus:
enable: true
shortname: <SHORTNAME>
count: true

配置本地搜索

1
npm install hexo-generator-searchdb --save

/_config.yml

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

source/_data/next.yml

1
2
3
4
5
6
7
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1

图片设置

/_config.yml

1
post_asset_folder: true

安装插件

1
npm install hexo-asset-image --save

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
![文字说明](img.jpg)
<div style="width: 200px; margin: auto">![文字](img.jpg)</div>
``

### 更多的配置与使用参考以下链接

- [hexo官网](https://hexo.io/zh-cn/docs/configuration.html)
- [next主题使用文档](http://theme-next.iissnan.com/)
- [Hexo 使用总结 & 常见问题](http://www.cylong.com/blog/2016/04/25/hexo-faq/)

# 部署备份方案

blog源码放在[oschina](http://git.oschina.net)上的私有 repo 里,生成的静态文件部署在 github 上,这样便于隐藏敏感信息和备份。

## 部署

```sh
npm install hexo-deployer-git --save
hexo clean
hexo d -g

/_config.yml

1
2
3
4
deploy:
type: git
repo:
github: git@github.com:hhktony/hhktony.github.io.git,master

备份

1
2
3
4
5
git init
git remote add origin git@git.oschina.net:hhktony/blog.git
git add .
git commit -m "msg"
git push -u origin master

新系统部署

1
2
3
git clone git@git.oschina.net:hhktony/blog.git
cd blog
npm install
0%