Windows下使用GitHub+Hexo搭建个人博客

首先,资料参考自http://blog.csdn.net/wx_jin/article/details/51027783,我对其中有些内容进行了补充与修改,因为其中有些内容过时了,有些内容有纰漏。—特此说明

准备工作

安装Node.js

下载地址:Node.js下载地址
可以通过node -v命令测试是否安装成功。
具体操作:①win+r –> ②cmd –> ③node -v
如果成功的话,是这样:

PS:在这里我要安利一个软件,它可以用来代替cmd,这个软件叫做cmder,十分良心,附上下载地址:cmder下载地址

安装Git

下载地址:Git下载地址







可以通过git –-version的命令来测试git是否安装成功

注册GitHub账号

去Github官网注册即可。
注册完成之后添加SSH Key(教程在下面)。
这个 SSH Key是一个认证,让github识别绑定这台机器,允许这台机器提交。
进入自己机器的

1
C:\Users\OrangeSu(这里为你的用户名)

看看该文件夹下有没有: .ssh文件夹

下面就说下怎么配置SSH Key。

生成新的SSH Key配置

生成文件

在Git Bash执行代码:

1
ssh-keygen -t rsa -C "hzpengcheng@gmail.com"

将邮箱改为你自己的邮箱。
成功后会生成两个文件id_rsa以及id_rsa.pub

添加SSH Key到GitHub

在Git hub右上角,点击头像,选择 Settings -> SSH and GPG keys -> New SSH key

复制你的id_rsa.pub里的内容到”Key”中

完成!

安装hexo

在本地新建一个文件夹,取名为Blog,文件右键,选择Git BashHere。
(如果没有,是因为你安装Git时没有选择添加右键的选项)解决方法

输入指令安装hexo:

1
npm install -g hexo

安装完成后,可在git bash中输入hexo测试是否安装成功。

设置hexo

接着初始化Hexo:

1
hexo init hexo

初始化成功会显示Start blogging with Hexo!
这时在你刚才创建的Blog文件夹里面会多出一个hexo文件夹

进入hexo目录中,输入命令npm install,安装依赖文件以及部署形成文件
进入目录:

1
cd hexo

安装:

1
npm install

部署:

1
hexo generate

开启服务

1
hexo server                     #简写 hexo s

打开浏览器输入 http://localhost:4000/ 就可以看到默认的博客(图片源于网络):

ps:hexo s只是开启了本地的服务,只能在自己机子上的4000端口可以看见效果,并未发布到git hub上,用来本地预览功能。

配置GitHubPage

登录GitHub,点击”New repository”,新建仓库。
输入仓库名:你的GitHub名称.github.io

ps:我看网上有人说创建名字一定要用你的github用户名,不然显示不出来。虽然我没试过,但是最好还是填你的用户名就好,免得出现不必要的错误。

启用GitHubPage

选择仓库中的”Settings”,找到”GitHub Pages”,在”Source”中选择master branch,然后点击save

点击”save”后页面会自动刷新,再看”GitHub Pages”时,会新出现一行提示

点击链接,会出现

界面比较简陋,在”GitHub Pages”里面除了”Source”,还有一个”Theme Chooser”, 你可以在里面选择一个你喜欢的主题。
打开自己在github的静态网址,我的http://percysu.com/Percy.github.io/,你会发现,打开是你自己刚才选择静态站点模版。

将本地hexo项目托管到GitHub

打开修改hexo目录下配置文件_config.yml

编辑最后面的deploy属性,加入代码:

/hexo/_config.yml
1
2
3
type: git
repository: git@github.com:PercySu/Percy.github.io.git
branch: master

type使用是git
repository属性改成你的仓库的地址
分支branch填写master

注意:“冒号”后面要空一格再输入

_config.yml

网站的配置文件,你可以在这里配置一些基本信息,这里列举部分关键配置:

/hexo/_config.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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 此行光明,亦复何言? #网站的标题
subtitle: 何不如笑傲风月,踏三山,伴红颜,此生无憾! #副标题
description: 世事一场大梦,人生几度秋凉? #描述
author: PercySu #作者信息
avatar: /images/avatar.png #头像,图片位置在相应主题目录下的images
language: zh-Hans #中文简体
email: hzpengcheng@163.com
timezone:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #配置主题,这里使用next主题
stylus:
compress: true #自适应布局

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git #部署环境,基于hexo+githubpage,所以这里使用git。注意:不同版本的hexo,type有可能不同,3.x以后应使用git,具体参看官方文档
repository: git@github.com:username/username.github.io.git #git仓库地址,替换成你的username即可,其他保持不变,后面会提到如何创建git仓库
branch: master

自己根据自己的需要修改。

安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

部署你本地的主题到github上

代码如下,每次修改本地文件都得执行一下代码:

1
2
3
hexo clean                #简写 hexo c
hexo generator #简写 hexo g
hexo deploy #简写 hexo d

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

大功告成!

后话

环境虽然已经搭建好了,但是这只是个框架而已,你还没有往里面填东西。你可以自己选择主题,写文章,自己定义自己的Style。

写文章

你得使用Markdown语法,很好学,不到半个小时你就能学会。
Markdown语法手册
CmdMarkdown下载

关于主题

你可以从github上clone主题,进行个性化修改,我使用的是next主题
修改教程

关于绑定域名

教程

-------------本文结束感谢您的阅读-------------