使用Hexo在Github上搭建你的博客【教程汇总】

#教程一

前言

自从投身于互联网学习的怀抱中后,一直想搭建一个属于自己的个人博客。了解过WordPress
,不过因为不懂服务器的知识只得暂时作罢;也看过csdn、博客园等,方便是方便,不过主题样式无法个人定制,这对于美工出身的我简直无法忍受。听朋友说起hexo,并且能够部署在github上,甚是方便,照着教程,一步一步搭建了这个博客。在搭建博客过程中遇到了很多问题,写下这篇教程的原因就是希望能够给需要的人些许帮助。

hexo简介

Hexo 是一个快速、简洁且高效的博客框架。出自台湾大学生tommy351 之手,是一个基于Node.js的静态博客程序。Hexo 使用 Markdown(关于markdown在后面会有更详细的介绍)或其他渲染引擎解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

开发环境

安装Node.js

直接到官网下载安装即可 或 通过 nvm
cURL:

1
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

1
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js

1
$ nvm install 0.10

安装Git

  • windows: 下载并安装Git
  • Mac: 使用 Homebrew, MacPorts 或下载 安装程序 安装
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

安装Hexo

安装完node.js和git之后,即可以通过npm安装hexo了
打开git bash,键入以下命令

1
$ npm install -g hexo-cli

安装完成后可以通过 $ hexo version查看hexo版本信息

初始化

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

或者通过cd命令进入你想放置的文件夹
然后 $ hexo init

初始化完成后,你会在该文件夹下得到如下的目录结构

1
2
3
4
5
6
7
8
9
10
.

├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes

本地启动

执行命令

1
$ hexo server

成功启动则会看到反馈信息
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
此时端口4000被打开,打开浏览器,输入上面所示网址
出现了默认的主题界面,心情是不是有点激动~

有的电脑通过命令$ hexo server本地启动后,查看到的反馈信息中的网址可能如下所示
http://0.0.0.0:4000/ (如博主自己的电脑…)
经测试发现直接输入该网址是无法访问的,还是需要通过 http://localhost:4000/ 来访问

至此,Hexo的安装工作基本完成,下面介绍hexo的使用方法

博客配置

_config.yml
这是网站的配置信息,可以在些配置网站的基本参数
网站

网址

若您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/

目录

文章

分类 & 标签

日期/时间格式

分页

扩展

hexo指令

init

1
$ hexo init [folder]

新建一个网站,也可以先进入目录,再hexo init

new

1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

layout在此意为布局。Hexo 有三种默认布局:postpagedraft,它们分别对应不同的路径,而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

generate

1
$ hexo generate

生成静态文件

server

1
$ hexo server

本地启动服务器

deploy

1
$ hexo deploy

部署网站

list

1
$ hexo list <type>

列出网站资料

以上指令是可以简写的,如
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
heox d == hexo deploy
同时,hexo还支持复合命令,如 hexo d -g 意为 先静态化处理,再部署
平常写博客上面的这些指令就差不多够用了
详细指令说明可参阅https://hexo.io/zh-cn/docs/commands.html

创建新文章

下面我们开始写第一篇博文,进入安装hexo的目录,git bash或本地命令行均可

1
$ hexo new "我的第一篇博文"

你会发现在_posts目录下生成文件 “我的第一篇博文.md”

然后我们可以开始以markdown语法编写文章

markdown的语法说明可以参照
http://www.ituring.com.cn/article/504
http://ibruce.info/2013/11/26/markdown/
个人感觉上面的介绍已经比较详细了,博主就不在这多啰嗦了,不过关于图片的引入方法
如果是网络图片,参照上面的教程
如果是本地图片,则需要在source目录下新建images文件夹,将图片放入该目录中
例如![](/images/example.jpg)


写完之后保存,本地启动服务器hexo server
在浏览器中打开http://localhost:4000 即可看到我们刚刚写完的文章已经发表了,页面右侧还会自动加入新的目录和标签等,是不是非常简单!!

发布到github

静态化处理

执行命令

1
$ hexo generate

在此说明一下静态化处理的目的,由于我们用hexo所搭建的这个博客,是静态网站,即只有html,css和javascript,无法动态更新。静态化处理即生成只有html、css和javascript的网站。

部署到github

  • 注册github帐号
  • 建立一个仓库,名为[your_user_name.github.io]

    已有github帐号的请忽略第一步

编辑配置文件_config.yml,在deploy部分,设置github的项目地址

1
2
3
deploy:
type: git
repository: git@github.com:example/example.github.io.git

然后执行命令

1
$ hexo deploy

若没问题的话会提示你输入帐号密码,之后就部署成功了,可以在github查看,
点击右侧的setting

在此页面中你会看到

这就是你网站部署的地址了,打开此网址,即可看到你发布的网站

在执行hexo deploy命令时,可能会提示找不到git
解决方法:
在Hexo 3.0版本后deploy git 被分开的,所以需要安装,安装命令如下:
npm install hexo-deployer-git --save ,安装好后再尝试一下就ok

绑定域名

如果对于github默认分配的二级域名example.github.io满意的话,就用这个也是可以的。
如果不太满意,可以购买一个域名,博主是从阿里云购买的.com
域名。从网上大家的评论来看.com和.me的域名评价比较高,而且.com是国际域名,
比.cn的总归要方便一些(你懂的~)
购买域名都是按年付费的,.com和.me的一年50-60人民币,一般第一年都有优惠。

设置域名有两种方式

  • 主域名绑定: 如example.com
  • 子域名绑定:如blog.example.com

主域名绑定

source根目录下新建文件 CNAME,无后缀,纯文本文件,内容为要绑定的域名
example.com,如果要使用www.example.com的形式,文件内容改为www.example.com

DNS设置
主机记录@,类型A,记录值192.30.252.153
主机记录www,类型A,记录值192.30.252.153
参考https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider

子域名绑定

比如使用域名example.com的子域名blog.example.com
CNAME文件内容为blog.example.com

DNS设置
主机记录blog,类型CNAME,记录值example.github.io
参考https://help.github.com/articles/tips-for-configuring-a-cname-record-with-your-dns-provider

更换主题

https://github.com/hexojs/hexo/wiki/Themes,可以从这上面挑选一个自己喜欢的主题
比如我觉得next还不错,
进入github的项目地址后

复制如图所示的右侧地址
theme目录下,执行命令

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

完成后会在theme目录下生成hexo-theme-next主题文件夹
打开_config.yml配置文件,找到theme选项
将默认的theme: landscape更换为
theme: hexo-theme-next
此时,启动服务器hexo server可查看效果,之后便可静态化然后部署到github上即可。

http://theme-next.iissnan.com/这是next主题的说明,可参照此修改默认配置。
其他主题也可借鉴说明

配置插件

评论系统

由于 hexo默认集成的是Disqus评论系统,所以你懂的~
国内推荐使用多说
直接用你的qq/微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。如果使用Next主题,在网站配置_config.yml(非主题的_config.yml配置文件!) 中配置duoshuo_shortname为多说的 基本设置->域名 中的shortname即可。你也可以在多说后台自定义一下多说评论框的格式,比如评论框的位置
这样,评论系统就加好了

RSS订阅

这个功能已经有人写好了插件,直接安装即可

1
$ npm install hexo-generator-feed

然后在站点配置文件_config.ymlplugins选项中添加

启动服务器,打开http://localhost:4000/atom.xml,就可以看到RSS已经生效了。

Sitemap站长地图

同RSS一样,直接安装

1
$ npm install hexo-generator-sitemap

然后在plugins中添加
- hexo-generator-sitemap
启动服务器,打开http://localhost:4000/sitemap.xml,就可以看到Sitemap已经生效了。

自定义界面

执行new page命令

1
$ hexo new page "about"

source下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的 _config.yml 中将其配置显示出来。页面的其他部分会自动补全,只添加内容即可

如果不想在about页面显示默认的评论框,添加comments: false,就可以了。

统计

由于 Google Analytics 偶尔会被墙,可以用百度统计,以Next主题为例,
百度统计申请一个帐号,添加你的博客地址
在代码获取界面

?后面的这串字母加数字即是你的百度分析ID,复制下来,
在站点配置文件中添加如下所示

添加完后过一段时间才能在百度统计看到结果

网站图标

将你的favicon.ico放到source目录下即可
图标的制作可以在 比特虫网站制作

后记

因为我的博客http://blog.waydrow.com基本是免费做出来的,所以写下这篇博文,希望可以帮助到其他人,也感谢此开源项目的贡献!
参考资料
http://blog.fens.me/hexo-blog-github/
http://www.tuicool.com/articles/AfQnQjy
http://blog.lmintlcx.com/post/blog-with-hexo.html#绑定顶级域名

如有问题,欢迎留言或者发送邮件到Waydrow@163.com

#教程二

简介

Hexo是由一个台湾的大神弄出来的东东。可以使用此工具来生成个人博客。很神奇高大上的东东。
大神的博客:http://zespia.tw/
hexo官网:https://hexo.io/

1. 安装Git

如何安装git详情查看

2. 安装Node.js

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

可以下载 node-v0.10.33-x64.msi

安装时直接保持默认配置即可。

3.环境配置

3.1安装Hexo

windows鼠标右键==>git bash

1
$ npm install -g hexo

等待安装完毕就可以了

这里注意:mac安装的或有不同,详情请参照hexo官网https://hexo.io/zh-cn/docs/index.html

3.2初始化hexo的文件

mac初始化hexo文件

1
hexo init hexo-lcx

在电脑中建立一个名字叫「Hexo」的文件夹,然后在此文件夹中右键打开Git Bash。执行下面的命令

1
$ hexo init

3.3安装依赖包

先执行下面的代码,一般需要等待一段时间。成功后可以看到xxx文件夹

1
npm install

以下命令都是要执行的

1
npm install hexo-deployer-git

3.4启动服务

hexo server

用浏览器打开http://localhost:4000/或者http://127.0.0.1:4000/就能看到网页了
推荐使用现代化浏览器(Chrome)获得最佳效果
按Ctrl+C停止本地预览服务

3.5添加一篇自己的文章

hexo是支持markdown,创建完成后可以进入提示的路径修改文本*.md的内容

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

执行完命令重复3.4的命令

4.hexo的基本讲解

4.1 目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site #站点信息
title: Waylenwang #标题
subtitle: 专注互联网 #副标题
description: waylenwang #站点描述,给搜索引擎看的
author: waylenwang #作者
email: #电子邮箱
language: zh-CN #语言

# URL #链接格式
url: http://waylenwang.github.io #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:

# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录

# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
enable: true #是否启用
line_number: true #显示行号
tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2

# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev

# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss

# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page

# Disqus #Disqus评论,替换为多说
disqus_shortname:

# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:

plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap

# Deployment #部署
deploy:
type: git
repo: git@github.com:Waylenwang/Waylenwang.github.io.git #或者是https://github.com/Waylenwang/Waylenwang.github.io.git

4.2常用命令

1
2
3
4
5
6
7
8
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

命令简写

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

5.发布

5.1创建github仓库

1
2
名字必须是:   your_github_name.github.io
例如我的: Waylenwang.github.io

5.2修改_config.yml

编辑全局配置文件 _config.yml 中的 deploy 部分

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

5.3部署

1
2
hexo clean//清理数据缓存,建议每次都清楚
hexo d //部署

部署成功的信息
[info] Deploy done: github

5.4成功

在浏览器输入http://waylenwang.github.io/就能看到网页了。

更换主题

在经过上一篇的博客搭建后,很多是否对默认的主题并不是很满意,是否希望可以打造一款属于自己风格的博客主题呢?

有哪些主题可以更换
github上的hexo的主题大全
知乎上的hexo的主题排行版
hexo官方主题

如何进行更换主题
如何使用 Jacman 主题

主题和博客的相关配置

添加导航项目

以我的路径为例:G:\Hexo\themes\jacman\_config.xml主题默认的两个导航是主页和归档: /archives后是导航的访问路径。前面是导航的名称 根据这个规律自行添加导航和访问路径即可

1
2
3
4
5
6
##### Menu  导航项
menu:
主页: /
归档: /archives

摄影: /cameras
About: /abouts

为导航项设置加载页面

archives导航是默认开启的,archives导航下的文章默认的目录是source\_posts\在此文件夹下新建xx.md文件。归档下就会显示相应的文章item
cameras和abouts导航对应的文件夹是sourc/cameras和source/abouts。并在此目录下新建index.md.之后点击对应的menus时就默认加载目录下index.md文件

生成rss

生成插件

1
npm install hexo-generator-feed --save

配置hexo/_config.xml(详情可以查看第一篇时提供的_config.xml)

1
2
3
plugins: #插件,例如生成 RSS 和站点地图的
- hero-generator-feed
- hexo-generator-sitemap

这里要注意的是该配置必须在themes设置的前面配置,否则不起作用。配置完后clean一下重新生成一下就好。
最后需要在导航上添加你的RSS链接。具体查看相关的主题配置。

以下是RSS的链接(比如我的),部署到服务器,输入此链接看是否生效

1
2
3
4
5
6
7
8
9
10
11
 waylenw.github.io/atom.xml

#教程三

  因为还没有一篇教程能让我依次操作后顺利完成部署,索性简单记录自己的操作步骤备用了。
<!-- more -->
## 安装 Git 插件
Hexo 目前没有自带 Git 部署模块,需手动安装:

``` bash
npm install hexo-deployer-git --save

部署配置

将博客同时部署到 GitHub 和 GitCafe:

1
2
3
4
5
6
deploy:
type: git
message: [message]
repo:
github: <repository url>,[branch]
gitcafe: <repository url>,[branch]
1
2
3
# <!-- 自用地址 -->
github: git@github.com:MOxFIVE/MOxFIVE.github.io.git,master
gitcafe: git@gitcafe.com:MOxFIVE/MOxFIVE.git,gitcafe-pages

Git 个人信息配置

漏了这步最后部署可能遇到问题:

1
git config --global user.name "用户名"
1
git config --global user.email "邮箱地址"
1
2
3
# <!-- 自用配置 -->
git config --global user.name "MOxFIVE"
git config --global user.email "mo@outlook.com"

添加 SSH 公匙

为了方便部署时跳过密码一步到位:

生成并进入 SSH 目录

1
2
mkdir ~/.ssh
cd ~/.ssh

生成密匙,一路回车

1
ssh-keygen -t rsa -C "邮件地址"

打开生成的 id_rsa.pub,将其中的全部内容复制添加为 GitHubGitCafe 的 SSH 密匙

1
cat id_rsa.pub

部署博客

可省,但先运行这步可避免不少问题

1
hexo clean

直接执行hexo d,会自动生成静态文件然后进行部署

1
hexo d

首次部署需在弹出框输入 yes 继续,之后畅通无阻

参考资料

  1. Hexo 部署: https://hexo.io/zh-cn/docs/deployment.html
  2. hexo-deployer-git: https://github.com/hexojs/hexo-deployer-git
  3. 添加 SSH 公钥 by GitCafe on 2015: https://help.gitcafe.com/manuals/help/ssh-key
  4. 将Hexo部署到GitCafe by 盛夏 on 2014/9/18: http://www.sumrday.com/2014/09-18-Hello-Hexo.html
  5. 让GitCafe项目托管变成外链空间 by 遊離式 on 2012/11/7: http://u-lis.com/archives/2417

#教程四

前言
最近发生了一些事情,不知道该怎么面对,想让自己忙起来,没有时间去想别的事情。同时,让我对过去进行了一个反思,以及对将来进行了初步的规划,我想改变,也一定会改变,借此博客,记录我成长的点点滴滴。希望我希望看到的人能看到,也希望能给大家带来点帮助。

第一篇博客就用来记录下我搭建这个独立博客的经过吧

##准备##

###静态博客和动态博客###

所谓静态博客,它是在写好文章后,在本地生成静态页面后再上传到服务器(Jekyll在Github Page上的例子有点特殊,后面会讲到),而不是像传统的Wordpress等基于动态语言、数据库博客那样在访问的时候从数据库读取数据动态生成页面。静态博客最大的优点是速度快,对网站使用的空间要求也不高,想找一个不支持静态页面的空间也是挺难的,缺点嘛,功能没有Wordpress等传统博客那么强。静态博客的”静态”主要体现在浏览者的角度,而不是写作者的角度,其最终的HTML文件,也是计算机生成的。静态博客与动态博客的差别就好像去超市里买一罐咖啡与去咖啡厅点一杯咖啡的差别。

在静态博客出现之前,更多的人选择的是传统的动态博客。传统的动态博客一般有2种常见的方法:

  • 自建博客网站:需要了解数据库、HTML/CSS和PHP等很多Web编程知识
  • 注册公共博客:一般要受制于公共博客服务提供商的博客创作工具的写作效率

实际上大部分博主写博客仅仅是个人性质的,文章数量不多,流量也不大,所以并不需要自己建站那么复杂。但如果注册公共博客,又会非常依赖服务提供商所提供的主题、功能和写作工具,缺少自由度。静态博客就可以很好的弥补两者的缺点。静态博客和传统博客最大的区别就在于写作与发布的过程有所不同。

静态博客首先会在本地进行离线写作,然后通过工具将离线本地作品转化为HTML网页发布到在线网站上
动态博客首先要建立网站(当然也可以注册一个公共博客服务),然后在线完成博客的编辑和发布
静态博客可以让博主更专注于写作,而不是花费很多精力在建站技术和写作工具上:

  • 博主不需要折腾各种建站技术,任何支持静态网页的主机空间和云存储空间都可以拿来发布博客
  • 博主可以自由选择自己喜欢的本地写作工具,而不需要受制于在线博客写作工具的质量火热用户体验

###GitHub 与 静态博客###

静态博客是个新生事物。静态博客的流行跟著名的开源社区Github的支持是分不开的。因此,绝大部分静态博客平台设计得还是比较极客,更适合有一定编程技能的人来使用,并不适合完全零起点的完全没有编程知识的普通用户。而Github除提供在线Markdown编辑器之外,还提供了Github Page服务,可以将用户托管在Github上的Markdown博客发布为静态网站。博主完全可以将自己的博客站免费寄放在Github上。此外,通过Github发布博客,还有一个额外的好处,那就是你的博客文章可以用Git来管理,这样你就可以在Github上获得博客文章的完整发布历史(像程序员管理源代码一样),并且可以随时获取历史版本或回退和回退到特定的版本上,相当于有了强大的备份系统。

###Hexo

hexo出自台湾大学生tommy351之手,是一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。

本着不花钱,爱折腾的原则,本人选择Hexo加上Git Pages 的方法搭建自己的独立博客

##开始

###Hexo环境安装

在Hexo的官网详细介绍了Hexo的安装和使用,安装Hexo的前提是需要先安装Node js和Git。

####Ubuntu 安装NodeJS

在ubuntu上安装Node.js也有很多方法,最常见的有两种:一种是通过Node.js的官网下载源码编译安装,另一种就是按照Hexo官网介绍的方法安装,这边以第二中方式为例.

  • 下载和安装nvm,nvm介绍请看:
1
2
3
4
#这边可以使用curl也可以通过wget
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
#不过,我只有wget方法能成功
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
  • nvm安装好了之后,通过nvm安装node.js
1
2
#0.12 为node.js版本,Current Version: v0.12.7
$nvm isntall 0.12

至此Nodejs安装完毕,我们可以通过命令查看nodejs 版本

1
2
wyq@wyq-m81 ~ $ node -v
v0.10.25

####Ubuntu安装Git
在ubuntu中安装git还是相当简单的,直接使用包管理器进行安装就好:

1
2
$sudo apt-get install git
$sudo apt-get install git-core

Nodejs 和 git都已经安装好了,接下来就可安装我们的主角Hexo了

1
$ npm install -g hexo-cli

安装过程有点慢,这个时候你可以问候一下GFW.

###Github pages 仓库创建

安装好Hexo后,就该另一个主角Github pages 登场了.关于Github pages的介绍,请看这里,它主要的作用是github给你或你的团队展示你的项目的地方,我们用这个来放我的博客简直再适合不过了.
new repo
new repo

Github pages本质还是你github上的一个repository,只不过它的命名规则是[suername].github.io的形式,并且每个github只能有这么一个这样的仓库.创建好这样的仓库后就可以在浏览器地址栏输入[username].github.io进行访问了.

##执行

Hexo和Github pages 准备好以后,我们就可以正式开始博客建立了.

###初始化本地博客目录

1
2
3
4
5
6
#在home新建一个文件夹,用于本地存放博客
$mkdir Blogs
$cd Blogs
#用hexo命令在Blogs目录中初始化环境
$hexo init
$npm install

这个时候,其实Hexo为我们生成了一个默认的名为HelloWorld的一篇博客,接下来我们看下这篇博客

###生成静态文件

1
2
#使用hexo generate命令可以将我们编写的markdown文件转换成html文件
$hexo generate

###本地服务开启

1
2
wyq@wyq-m81 ~/Blog $ hexo server
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

这个时候在浏览器地址栏输入localhost:4000就可看到Hexo为我们生成的这边博客了
大概就是这个样子(默认的标题和名字已经被我改掉啦)

默认HellowordPost

到此我们已经把基本建博客的流程走过一遍了,怎么样,是不是很easy呀.接下来我们完成三个事情:创建一个篇新的博客,给博客换个主题,上传到Github pages.

###创建新的博客

1
2
3
4
5
6
7
8
9
10
#使用hexo new [postname]新建一篇博客
$hexo new firstblog
#完成之后,进入到source/_psots目录就可以看到我们刚才新建的博客了
$cd source/_posts
$ll
drwxr-xr-x 2 wyq wyq 4096 Jul 30 11:25 .
drwxr-xr-x 3 wyq wyq 4096 Jul 29 16:17 ..
-rw-r--r-- 1 wyq wyq 53 Jul 30 11:25 firstBlog.md
-rw-r--r-- 1 wyq wyq 852 Jul 29 18:04 HelloWorld.md
#firstBlog.md就是我们刚才新建的一篇博客

博客文章都是md格式的markdown文件,我们打开来看下

1
2
3
4
#Hexo默认为我们生成了三行
title: firstBlog #这边博客的标题
date: 2015-07-30 11:25:44 #博客创建时间
tags: #博客的tag

那我们只需要使用markdown语法在这个文件里面写我们的博客就ok了,这里推荐在线markdwon编辑器,CMD markdown,至于markdown语法,我们只需要了解常用的就行了,学习成本几乎等于0,Github markdown语法

###更改博客主题
Hexo 有丰富的主题支持,这也是我选择它的原因之一,在这里列出了所有的Hexo 主题,大家可以选择自己喜欢的使用.我这里以Yilia为例

在我们使用hexo init 初始化本地博客环境后,会看到如下的文件目录结构:

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes

这边先直介绍其中几个:

  • _config.yml文件整个博客的配置文件,
  • source/_posts文件夹包含了当前整个博客的所有文章
  • themes 文件夹包含了当前的主题文件.

我们要使用Yilia主题

  • 在当前目录(这里就是Blogs)中,clone Yilla 代码
1
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

*更改_config.yml文件,在最后加入使用主题语句

1
theme: yilia
  • 进入到主题目录,编辑主题配置文件
1
2
$cd themes/yilia
$vim _congif.yml

主题文件的配置说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
# Header
menu:
主页: /
所有文章: /archives
# 随笔: /tags/随笔

# SubNav
subnav:
github: "#"
weibo: "#"
rss: "#"
zhihu: "#"
#douban: "#"
#mail: "#"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"

rss: /atom.xml

# Content
excerpt_link: more
fancybox: true
mathjax: true

# Miscellaneous
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: ""
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: true
#是否开启云标签
tagcloud: true

#是否开启友情链接
#不开启——
#friends: false
#开启——
friends:
奥巴马的博客: http://localhost:4000/
卡卡的美丽传说: http://localhost:4000/
本泽马的博客: http://localhost:4000/
吉格斯的博客: http://localhost:4000/
习大大大不同: http://localhost:4000/
托蒂的博客: http://localhost:4000/

#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货…

###生成静态文件,在本地预览

1
2
$hexo generate
$hexo server

效果如下
use yilia theme

**ok,大功告成,就差把博客部署到github.io了

##将博客部署到github pages中
在博客配置文件_config.yml中,有个deployment一节,在这边我们进行github pages 的配置

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git #注意,这边是git不是github,hexo 3.0以后就要求使用git,不然会出现deploy失败情况.
repo: https://github.com/YanceyWang/YanceyWang.github.io
branch: master

配置好了之后,就可以吧我们博客deploy到github 上啦.

1
2
3
$hexo clean
$hexo generate
$hexo deploy

之后,在地址栏输入[username.github.io] 就可以访问你的博客了.

##使用7牛图床

考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。我墙裂推荐七牛,访问速度极快,支持日志、防盗链和水印。

免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求,这对个人博客来说足够,不够的话点这个活动页面,也可通过邀请好友获得奖励,我也求一下七牛邀请。有一点要说明的是,七牛没有目录的概念,但是文件名可以包含/,比如2013/11/27/reading/photos-0.jpg,参考这里关于key-value存储系统。

  • 首先要去7牛官网注册帐号,然后准备好身份证前后照,进行身份验证,不然很多功能无法使用.
    验证好了大概就是这个样子
    身份验证

  • 接着就可以创建空间了
    创建空间

  • 然后进行图片上传,获取外连
    获取外连

  • 还可以新建样式,给图片设置缩放,加水印等.
    新建样式

后记
今天就写到这吧,本来昨天在公司已经配置的差不多了,以为回家能够轻车熟路的在windows上弄好环境,结果是我想多了.在ubuntu上用习惯了命令,在win上真是痛苦啊,想打开终端,CTRL+ALT+T,结果才发现是在win上,想看目录ll,结果提示没有这个命令..一气之下下载了Ubuntu 14.04 给PC装了双系统.
第一次写博客,肯定有很多不足之处,让大家见笑了,希望您提出您的宝贵意见,我会努力做的越来越好.
这篇文章只是Hexo搭博客的基础篇,可能会有进阶篇,会介绍域名购买,评论系统使用以及更多的一些优化.

文章目录
  1. 1. 前言
  2. 2. hexo简介
  3. 3. 开发环境
    1. 3.1. 安装Node.js
    2. 3.2. 安装Git
    3. 3.3. 安装Hexo
  4. 4. 初始化
  5. 5. 本地启动
  6. 6. 博客配置
  7. 7. hexo指令
    1. 7.1. init
    2. 7.2. new
    3. 7.3. generate
    4. 7.4. server
    5. 7.5. deploy
    6. 7.6. list
  8. 8. 创建新文章
  9. 9. 发布到github
    1. 9.1. 静态化处理
    2. 9.2. 部署到github
  10. 10. 绑定域名
    1. 10.1. 主域名绑定
    2. 10.2. 子域名绑定
  11. 11. 更换主题
  12. 12. 配置插件
    1. 12.1. 评论系统
    2. 12.2. RSS订阅
    3. 12.3. Sitemap站长地图
    4. 12.4. 自定义界面
    5. 12.5. 统计
    6. 12.6. 网站图标
  13. 13. 后记
  • 简介
  • 1. 安装Git
  • 2. 安装Node.js
  • 3.环境配置
    1. 1. 3.1安装Hexo
    2. 2. 3.2初始化hexo的文件
    3. 3. 3.3安装依赖包
    4. 4. 3.4启动服务
    5. 5. 3.5添加一篇自己的文章
  • 4.hexo的基本讲解
    1. 1. 4.1 目录结构
    2. 2. 4.2常用命令
  • 5.发布
  • 5.1创建github仓库
    1. 1. 5.2修改_config.yml
    2. 2. 5.3部署
    3. 3. 5.4成功
  • 更换主题
  • 主题和博客的相关配置
  • 生成rss
    1. 1. 部署配置
    2. 2. Git 个人信息配置
    3. 3. 添加 SSH 公匙
    4. 4. 部署博客
    5. 5. 参考资料
  • ,