Hexo+Github搭建站点技术详解

 

Hexo+Github搭建站点技术详解

Hexo+Github搭建站点技术详解

——Power By Ramostear

1、环境安装

1.1 安装Git

请参考【附件1Git的安装步骤】

 

1.2 安装node.js

下载node.js:http://nodejs.org/download/

可以根据需要下载最新的版本进行安装。

安装时直接保存默认选项安装即可。

2、配置Github

2.1 建立Repository仓库

Github中建立与你注册时用户名一致的仓库,仓库名为【your_user_name.github.io】。必须按照此格式进行创建,如本教程中创创建的的Github仓库:ramostear.github.io

 

 

2.2 配置SSH-Key

SSH-Key的配置至关重要,如果没有配置SSH-Key,将会导致后续的部署站点到Github失败。首先打开git-bash终端,在命令行中输入如下的命令:

$ ssh-keygen -t rsa -C your_email_address

回车之后将会出现几行提示,默认回车键就好,例如本例中的信息:

 

此时SSH-Key已经生成,默认是放在C:\Users\Administrator\.ssh目录下(Windows OS)。然后进入Github官网,点击Settings按钮进入,选择SSH and GPG keys选项,点击New SSH key按钮添加SSH keys

 

 

 

输入SSH keys Title(任意),将C:\Users\Administrator\.ssh\id_rsa.pub文件内容拷贝到Key中,点击Add SSH Key按钮完成SSH Key的添加。

 

最后在git-bash终端中输入如下命令验证SSH key是否生效:

$ ssh -T git@github.com

若出现如下的提示,则说明SSH key 已经配置成功。

 

3、安装Hexo

关于Hexo的安装配置过程,详细的细节请根据当前你下载的Hexo版本号,参看官方的安装步骤,请参考【附件3Hexo安装步骤详解】。

 

3.1 安装Hexo

打开本地安装好的Git控制台,执行如下的命令:

$ npm install -g hexo

 

3.2 快速启动

1):设置站点名字

在本机上建立一个名字叫[Hexo]的文件夹(例如我在本机上建立了F:\Hexo),然后在此文件夹中创建一个站点文件夹Ramostear并右键打开Git Bash,执行如下的命令:

$ hexo init

[info] Copying data

[info] You are almost done! Don`t forget to run npm install before you start blogging with Hexo

Hexo随后会自动在目标文件夹建立网站所需要的文件,然后按照提示,运行 npm install,注意运行时的所在路径:F:\Hexo\Ramostear目录下运行该命令。

npm install

执行该命令后,会在F:\Hexo\Ramostear目录下安装node_modules

 

2):安装hexo-server启动服务器

在启动服务之前,需要额外的安装hexo-server模块,在hexo3.x版本以后,把服务器独立成了一个模块,在启动服务之前,需要手动安装此模块,否则请求http://localhost:4000/将无任何响应。在F:\Hexo\Ramostear目录中运行如下的命令:

$ npm install hexo-server --save

 

3):启动服务器

F:\Hexo\Ramostear目录下运行如下的命令:

$ hexo server -p 8888

[info] Hexo is running at http://localhost:8888/.Press Ctrl+C to stop.

出现该提示表明Hexo Server 已经启动,在浏览器窗口打开http://localhost:8888/,这时可以看到Hexo已经为你生成了一篇Blog。你可以使用“Ctrl+C”组合键停止Hexo Server。本教程没有使用默认的“hexo server”来启动hexo,而是给hexo server指定了一个8888端口,防止端口冲突。

 

3):创建新的文章

打开Git Bash命令行窗口,目录跳转到F:\Hexo\Ramostear下,执行如下的命令:

$ hexo new My New Post

[info] File created at F:\Hexo\Ramostear\source\_posts\My-New-Post.md

刷新http://localhost:8888/,可以发现已经生成了一篇新的文章“My New Post”。

NOTE:

在执行$ hexo new My New Post ”命令时,建议先关闭Hexo Server,这样可以避免服务器多次创建文章。

 

4):生成静态文件

Generate Static Files,执行如下的命令,可以将Markdown文件生成对应的静态网页。

$ hexo generate

该命令执行结束后,会在F:\Hexo\Ramostear\public\目录下生成一系列的.html,css等文件。

 

5):编辑文章

$ hexo new My New Post”命令执行后会在F:\Hexo\Ramostear\source\_posts目录下生成一个markdown文件:My-New-Post.md,可以使用支持markdown语法的编辑器对该文件进行编辑。

 

6):安装hexo-deployer

在部署站点之前,还需要安装hexo-deployer模块,执行如下的命令:

$ npm install hexo-deployer-git --save

 

7):部署到Github

在部署代码到Github之前需要配置_config.yml文件,首先在_config.yml文件中找到如下的代码片段:

# Deployment

## Docs: http://hexo.io/docs/deployment.html

deploy:

  type:

将其修改为如下的类容:

# Deployment

## Docs: http://hexo.io/docs/deployment.html

deploy:

  type:git

      repo:git@github.com:ramostear/ramostear.github.io.git

  branch: master

 

NOTE:

Repository:地址必须是SSH形式的urlgit@github.com:ramostear/ramostear.github.io.git),不能是HTTPS形式的urlhttps://github.com/ramostear/ramostear.github.io.git,否则会报如下的错误:

$ hexo deploy

[info] Start deploying:github

[error] https://github.com/ramostear/ramostear.github.io is not a valid repositor URL!

在配置好部署信息后,在来配置站点信息,找到#Site.....代码片段,将其修改为自己的站点信息,例如本教程:

# Site

title: Ramostear

subtitle: 谭朝红的博客

description: 致力于云计算SaaS软件开发和大数据分析应用

author: ramostear|谭朝红

language: zh-CN

timezone: Asia/Shanghai

NOTE:

这里要注意的是,在“:”之后有一个半角空格,如果忘记加上这个空格,将会报错。

最后在命令行中输入如下的命令将站点部署到Github上:

$ hexo deploy

.......

INFO Deploy done:git

 

9):测试站点

Hexo+Github搭建站点的大致流程已经基本完成,通过http://your_user_name.github.io即可访问刚才部署成功的站点。例如本教程的访问地址:http://ramostear.github.io,如图所示:

 

 

8):总结:部署步骤

在本地添加或者编辑文章后,可以安装以下的三个步骤来进行操作。

(1)hexo clean

(2)hexo generate

(3)hexo deploy

在本机上进行代码调试的时候,可以使用如下的命令来简化命令行的输入:

(1)hexo g #生成静态文件,对应 hexo generate命令

(2)hexo s #启动本地服务,进行文章预览调试,对应hexo server命令

(3)Hexo s -g # 可以将上述两个命令简化输入。

4、Hexo命令

4.1 常用命令

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的版本

 

4.2 复合命令

hexo deploy -g  #生成加部署

hexo server -g  #生成加预览

 

4.3 简写命令

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

5、Hexo主题安装

Hexo官方提供了多个站点主题,可根据个人喜好选择安装。获取最新的Hexo主题请访问https://hexo.io/themes/进行下载。本教程以hexo-theme-spfk为例子进行介绍。

 

5.1 安装主题

Git Shell 切换到F:\Hexo\Ramostear目录下,然后执行下面的命令,将hexo-theme-spfk

下载到themes/hexo-theme-spfk目录中。

$ git clone https://github.com/luuman/hexo-theme-spfk.git themes/hexo-theme-spfk

修改站点目录下的_config.yml配置文件中的theme属性,将其设置为hexo-theme-spfk

然后执行下面的命令更新hexo-theme-spfk主题。

cd themes/hexo-theme-spfk

git push