Hexo搭建静态博客

Author Avatar
wshunli 12月 14, 2015
  • 在其它设备中阅读本文章

前言

第一篇文章献给 Hexo。

Hexo简介

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

  • 超快速度 Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持 Markdown Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  • 丰富的插件 Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

环境配置

安装node.js

Node.js https://nodejs.org

Node.js安装图解教程_百度经验
http://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html

安装Git

Git http://git-scm.com

推荐下载2.5.0版本、最新版本(2.6.4)总是出现问题。
Git for windows 2.5.0 具体下载地址:
https://github.com/git-for-windows/git/releases/tag/v2.5.0.windows.1

如何在windows下安装GIT_百度经验
http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

配置Github

在Windows下,打开Git Bash。

检查SSH keys的设置

首先我们需要检查你电脑上现有的ssh key:

$ cd ~/.ssh

如果显示“No such file or directory”,跳到第三步,否则继续。

备份和移除原来的ssh key设置:

因为已经存在key文件,所以需要备份旧的数据并删除:

$ ls
config  id_rsa  id_rsa.pub  known_hosts
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

生成新的SSH Key:

输入下面的代码,就可以生成新的key文件,我们只需要默认设置就好,所以当需要输入文件名的时候,回车就好。

$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
然后系统会要你输入加密串(Passphrase):
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>

最后看到这样的界面,就成功设置ssh key了:

添加SSH Key到GitHub:

在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。

用文本编辑工具打开id_rsa.pub文件,如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。

在GitHub的主页上点击头像再点击设置按钮:settings:

选择SSH Keys项,把复制的内容粘贴进去,然后点击Add Key按钮即可:

测试一下

可以输入下面的命令,看看设置是否成功,git@github.com的部分不要修改:

$ ssh -T git@github.com

如果是下面的反应:

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?`

不要紧张,输入yes就好,然后会看到:

Hi <em>username</em>! You've successfully authenticated, but GitHub does not provide shell access.

设置你的账号信息

现在你已经可以通过SSH链接到GitHub了,还有一些个人信息需要完善的。

Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。

$ git config --global user.name "你的名字"
$ git config --global user.email "your_email@youremail.com"

好了,你已经可以成功连接GitHub了。

使用GitHub Pages建立博客

应用github pages创建自己的个人博客_百度经验
http://jingyan.baidu.com/article/ed2a5d1f3732cb09f7be1745.html

安装Hexo

关于Hexo的安装配置过程,请以官方给出的步骤为准。
文档 | Hexo https://hexo.io/zh-cn/docs/

Installation

打开Git命令行,执行如下命令

$ npm install -g hexo

Setup your blog

在电脑中建立一个名字叫Hexo的文件夹(比如我建在了D:\Hexo),然后在此文件夹中右键打开Git Bash。执行下面的命令

$ hexo init
[info] Copying data
[info] You are almost done! Don't forget to run `npm install` before you start b
logging with Hexo!

Hexo随后会自动在目标文件夹建立网站所需要的文件。然后按照提示,运行 npm install(在 D:\Hexo下)

npm install

会在D:\Hexo目录中安装 node_modules。

Start the server

运行下面的命令(在D:\Hexo下)

$ hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

表明Hexo Server已经启动了,在浏览器中打开 http://localhost:4000/,这时可以看到Hexo已为你生成了一篇blog。

你可以按Ctrl+C 停止Server。

Create a new post

新打开一个git bash命令行窗口,cd到D:\Hexo下,执行下面的命令

$ hexo new "My New Post"
[info] File created at d:\Hexo\source\_posts\My-New-Post.md

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

Generate static files

执行下面的命令,将markdown文件生成静态网页。

$ hexo generate

该命令执行完后,会在 D:\Hexo\public\ 目录下生成一系列html,css等文件。

编辑文章

$ hexo new "My New Post"

会在D:\Hexo\source\_posts目录下生成一个markdown文件:My-New-Post.md

可以使用一个支持markdown语法的编辑器(比如 Sublime Text 2)来编辑该文件。

部署到Github

部署到Github前需要配置_config.yml文件,首先找到下面的内容

# Deployment
##Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

然后将它们修改为

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:wshunli/wshunli.github.io.git
  branch: master

测试

当部署完成后,在浏览器中打开http://wshunli.github.io ,正常显示网页,表明部署成功。

总结:部署步骤

每次部署的步骤,可按以下三步来进行。

hexo clean
hexo generate
hexo deploy

总结:本地调试

在执行下面的命令后,

$ hexo g #生成
$ hexo s #启动本地服务,进行文章预览调试

浏览器输入http://localhost:4000,查看搭建效果。
此后的每次变更_config.yml 文件或者新建文件都可以先用此命令调试,尤其是当你想调试新添加的主题时。

配置Hexo

Hexo的配置文件是位于blog文件夹下的_config.yml文件。
修改配置文件请使用Notepad++或者Sublime Text 2之类的程序,不要使用Windows自带的记事本。
以下为Hexo 3.0.0初始配置。常规需要修改的地方已加中文注释,未加注释的参数不建议新手修改。

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo ##站点标题
subtitle: ##站点副标题
description: ##站点描述
author: John Doe ##作者
language: ##语言包,需要主题自带才可设置。如Jcaman自带简繁英,设置简体中文填入 zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com ##站点域名
root: /
permalink: :year/:month/:day/:title/ ##文章永久链接格式,可添加.html后缀,如 :title.html
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:

# 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
  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: landscape ##当前主题名称

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

安装主题

Hexo提供了很多主题,具体可参见Hexo Themes。这里我选择使用NexT主题。

安装

1.将Git Shell 切到D:/Hexo目录下,然后执行下面的命令,将NexT下载到 /themes/pacman 目录下。

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

2.修改你的博客根目录D:/Hexo下的config.yml配置文件中的theme属性,将其设置为NexT。

3.更新NexT主题

cd themes/next  
git pull

NOTE:先备份_config.yml 文件后再升级

配置

如果next的默认设置不能满足需要的话,你可以修改 /themes/next/下的配置文件_config.yml来定制。

NexT - an elegant theme for Hexo.
http://theme-next.iissnan.com

安装插件

Plugins | Hexo https://hexo.io/plugins/

多说评论系统

多说 - 社会化评论系统http://duoshuo.com/
1.登录后在首页选择 “我要安装”。
2.创建站点,填写站点相关信息。多说域名 这一栏填写的即是你的 duoshuo_shortname,如图:

3.创建站点完成后在站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中的值。

例如:

duoshuo_shortname: iissnan-notes

百度统计

1.登录 百度统计,定位到站点的代码获取页面
2.复制 hm.js? 后面那串统计脚本 id,如:

3.编辑 站点配置文件,新增字段 baidu_analytics 字段,值设置成你的百度统计脚本 id。

Swiftype 搜索

使用 Swiftype 之前需要前往 Swiftype 配置一个搜索引擎。
然后,编辑 站点配置文件,新增 swiftype_key 字段,值为你的 swiftype 搜索引擎的 key。

优化Hexo

404页面

\themes\next\source添加404.html即可

使用七牛做图床

推荐使用QRSBox

QRSBox 同步工具 | 七牛云存储 http://developer.qiniu.com/docs/v6/tools/qrsbox.html

官网有详细介绍、我就不再赘述。

https://portal.qiniu.com/signup?code=3lmfxlfwo25w2


参考资料
1、Hexo搭建Github静态博客 - 金石开 - 博客园 http://www.cnblogs.com/zhcncn/p/4097881.html
2、使用Github Pages建独立博客 | BeiYuu.com http://beiyuu.com/github-pages
3、Hexo | Setsuna’s Blog http://www.isetsuna.com/categories/Hexo/
4、hexo | Zippera’s blog http://zipperary.com/categories/hexo/
5、博客搬家记:从 Wordpress 到 Hexo+Github | 00’s Adventure http://www.uegeek.com/2016/01/10/from-wordpress-to-hexo/

在此一并致谢!

如果本文对您有所帮助,且您手头还很宽裕,欢迎打赏赞助我,以支付网站服务器和域名费用。 https://paypal.me/wshunli 您的鼓励与支持是我更新的最大动力,我会铭记于心,倾于博客。
本文链接:https://www.wshunli.com/posts/9642fffa.html