Github+hexo搭建网站

2016-11-05  本文已影响0人  woniuray

### 摘要

由于以前的域名空间到期了,想想还是搭建一个免费的博客。正好了解到github上有gh-pages

这项功能,看到简洁的hexo-next主题心动了,因此就用它来搭建自己的博客。

#### 建站准备

1. github账号

2. git

3. Node.js

4. hexo

5. 多说账号

#### 安装环境

2.1 安装git

2.1.1 Windows下安装git

从官网下载git安装包(默认安装即可),下载地址:  https://git-for-windows.github.io

2.1.2 进入git bash进行设置

git config --global user.name "yourname"

git config --global user.email "email@example.com"

2.1.3 SSH Key

生成SSH Key

在git bash下:ssh-keygen -t rsa -C "youremail@example.com" (直接所有确定即可)

生成.shh目录和id_rsa(私钥)、id_rsa.pub(公钥)

添加SSH Key到github上

cd ~/.shh (进入.shh目录)

cat id_rsa.pub (查看公钥内容)

登录github,进入个人设置(Personal settings)

选择SSH and GPG keys

选择New SSH key 将id_rsa.pub的内容复制到里面即可

2.2 安装Node.js

2.2.1 Windows下安装:

官网下载:  https://nodejs.org/en/download/ (默认安装即可)

测试是否成功cmd进入DOS环境输入node --version 检查node.js版本

2.3 安装hexo博客框架

npm install -g hexo-cli  (前提是安装node.js)

2.4 安装git插件

npm install hexo-deployer-git --save  (最后再安装吧)

#### github创建仓库

选择Create a new repository

repository name命名规则: woniuray.github.io woniuray为随便起的内容,我的名字叫woniuray(其它默认创建即可)

#### 博客创建

4.1 初始化

hexo init woniuray.github.io (woniuray.github.io为文件名)

4.2 主题安装

默认主题是:landscape(无需安装),不想安装主题的可以跳过此步骤

我的主题是next,你也可以选择自己喜欢的主题进行安装

$ cd your-hexo-site

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

4.3 基础配置

4.3.1 站点配置

站点配置文件是在woniuray.github.io文件下的* _config.yml *文件

```

# Site

title: 杂记 //博客名字

subtitle: 吾尝终日而思矣,不如须臾之所学也  //副标题

description: "学习==>积累==>进步"  //博客描述

author: woniuray  //作者名字

language: zh-Hans  //网站语言中文

timezone:          //时区设置默认

# URL

url: http://woniuray.github.io  //自己站点的域名

root: /                        //站点目录

theme: next                    //站点主题

deploy:

type: git                    //使用git发布

repository: https://github.com/woniuray/woniuray.github.io.git  //3步骤github创建的仓库

branch: master                //分支

```

4.3.2 主题配置

主题配置文件为themes/next目录 _config.yml

主题默认配置即可

#### 博客发布

5.1 博文创建

在woniuray.github.io目录下输入命令

$ hexo new '文件名' //会在source/_posts创建一个文件名.md文件

5.2 博文编辑

编辑生成的.md文件(博文是用Markdown语法写的)

---

title: new//博客标题

date: 2016-10-10 10:47:49 //创建时间

tags:  //分类标签

---

正文(上面的---是必要的)

5.3 博文预览

本地预览,执行命令:

$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)(简写 hexo s)

浏览器打开https://localhost:4000本地查看

5.4 发布到github上

$ hexo clean

$ hexo generate #生成静态页面至public目录(简写 hexo g)

$ hexo deploy #将.deploy目录部署到GitHub(简写 hexo d)

#### 增加评论功能

评论功能有自带的disqus,不过国内还是使用多说

6.1 多说账号

由于多说是使用QQ、微博、微信、豆瓣、谷歌、百度等账号登录的,无需申请,直接登录即可

多说网址: http://duoshuo.com/ 点击我要安装

创建站点

站点名称:自己随便写

站点地址:自己站点的域名 例如:http://woniuray.github.io

多说域名:自己写

6.2 配置主题文件开启评论功能

在themes/next目录下打开 _config.yml,设置

duoshuo_shortname:  nanshanyi //上面多说域名中填的内容

需要分享的打开duoshuo_share: true 即可,支持分享到微博、QQ空间、微信

#### 增加本地搜索功能

7.1 安装hexo-generator-search插件

在博客目录下输入下面命令

$ npm install hexo-generator-search --save

7.2 主题配置文件中增加

themes/next/_config.yml添加

search:

path: search.xml

field: post

#### 增加标签页、分类页

8.1 命令创建

$ hexo new page tags //会在woniuray.github.io/source下创建tags文件夹内部是一个index.md和index文件夹

$ hexo new page categories  //同理

8.2 站点配置文件配置

将menu:对应下的#去掉

menu:

home: /

categories: /categories

archives: /archives

tags: /tags

#### 关于主题的使用

更多关于本主题的使用请参考:http://theme-next.iissnan.com/

上一篇下一篇

猜你喜欢

热点阅读