前言
第一篇文章献给 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
推荐下载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/
在此一并致谢!
评论 (0)