搭建个人博客,Hexo&Github

一、环境配置

系统:windows 7 64位,编辑器: notepad++ ,控制台:cmder

搭建博客使用hexo&&Github

cmder是一个用于替代Windows下CMD的一个工具,官网的下载特别慢,可能被墙了,下面直接给出百度云的连接,cmder分mini和full两个版本,下面给出的是full版。

cmder下载

下载下来后直接解压后就可以用了,具体使用配置点这里

配置Github

首先注册、登录 https://github.com/

记住自己的Username(很重要)

然后右上角选择 Create a new repository https://github.com/new

Repository name (填自己的名字) yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了)

node、git安装配置

1、安装 Node.js https://nodejs.org/en/

这里提一下,现在最新版本的Node.js里已经集成了npm,不用另外下载安装了。

这里给出具体的安装教程链接http://www.jianshu.com/p/03a76b2e7e00

2、安装 Git https://github.com/waylau/git-for-win

3、安装完成后,在开始菜单里找到“Git”->“Git Bash”,名称和邮箱是Github上的

4、安装 Hexo。所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

在任意文件夹界面鼠标右键,选择Cmder Here,进入cmder界面

输入:

λ npm install -g hexo-cli

到这里,环境配置就结束另外。

二、 编写,发布

接下来我们需要用Hexo初始化一个博客,然后更改一些自定义的配置,或者加上自己喜欢的主题,写上第一篇文章,然后发布到自己的个人GitHub网站(username.github.io)

在电脑F盘(自己随意)目录下新建文件夹 test(这个文件夹名称随你自己,不固定,这个文件夹就是用来放你的博客项目文件夹的),进入test,点击鼠标右键,打开cmder

1、初始化博客

将下面的 username 替换成你自己的username(其实也无所谓,作者强迫症),执行成功后,会创建出一个名为 username.github.io 的文件夹。

hexo init username.github.io

稍微等待下,速度有点慢。成功提示

INFO  Start blogging with Hexo!

因为你初始化hexo 之后source目录下自带一篇hello world文章, 所以直接执行下方命令

$ hexo generate
# 启动本地服务器
$ hexo server
# 在浏览器输入 http://localhost:4000/就可以看见网页和模板了
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

访问http://localhost:4000/,便可以看到网站初步的模样,如下图所示

注意:

如果这里的这个页面无法打开,可能是因为你的4000端口被占用了,所以你按照上面的提示stop hexo,然后输入

hexo server -p 3600

换一个端口就可以了,然后登陆http://localhost:3600/

这个端口你可以随你喜好,不一定非要3600

2、配置博客

主题更改

为了使博客不太难看,我们需要安装一个主题,在cmder中切换至刚刚生成博客主目录,即(username.github.io),安装主题

λ git clone https://github.com/iissnan/hexo-theme-next themes/next 
//“themes”是“username.github.io”文件夹里面的一个文件夹
//“next”是对即将下载的一个主题包文件的命名

如果想要使用其他主题只需要点击更多主题进入后选中其中一个在详情页面中找到GitHub的标志点击,然后复制地址替换上面的: https://github.com/iissnan/hexo-theme-next 并且为其改一个名字即可,

另一个获取主题的简单方式就是直接在GitHub中搜索”hexo-theme”就能够获得无数主题,随便找几个喜欢的下载,获取地址的操作步骤如下面两图:

主题安装完成后,要对主题进行必要的设置

基础配置文件在username.github.io/themes/next/_config.yml中修改,这里略过。更多设置….

基础配置

使用notepad++打开文件username.github.io/_config.yml修改,下面把几个必须设置的列出来按需求修改,记得保存, 还有注意配置的键值之间一定要有空格
Hexo官网更多配置

title: 勇不言弃     //你博客的名字
subtitle:     //显示在博客名字下方,类似于个性签名
description:   //网页描述
author: XayLei        //你的名字
language: zh-Hans    //语言 中文 或者也可以是 zh-CN
timezone: Asia/Shanghai

注意:

在上面的配置中,如果有中文信息,最后的页面显示中可能会有乱码,具体还没有解决方法,如果出现了乱码请自行Google解决,或者不用中文。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape    //themes文件夹目录下任意一个主题的名称

# Deployment
# Docs: https://hexo.io/docs/deployment.html
deploy:
type: git   //使用Git 发布
repo: https://github.com/XayLei/XayLei.github.io.git  // 刚创建的GitHub仓库(可能需要自己添加此行)
branch: master

3、发表文章

在博客主文件夹中右键打开cmder,输入:

λ hexo new "测试文章"
INFO  Created: F:\test\username.github.io\source\_posts\测试文章.md

hexo就会自动在博客中的source文件夹中新建一个md文件。

找到该文章,使用markdown编辑器打开编辑即可,编辑完后保存。

最后一步,发布到网上

安装hexo-deployer-git自动部署发布工具,与上面一样,打开cmder,输入:

λ npm install hexo-deployer-git --save

发布

测试没问题后,我们就生成静态网页文件发布至我们的GitHub pages 中。

λ hexo clean && hexo g && hexo d

终端可能会让你输入GitHub的邮箱和密码,正确输入后,骚等片刻,就会把你的博客上传至GitHub 了。以后在每次把博客写完后,执行一下这个命令就可以直接发布了,非常方便。

查看效果

恭喜你能走到这一步,你的博客已经完成了,在浏览器中输入 https://username.github.io 就能够访问了。

最后应该是类似这个样子的

三、总结

发布文章的步骤:

1、hexo new 创建文章

2、Markdown语法编辑文章

3、部署(所有打开CMD都是在username.github.io目录下)

hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo generate #生成
hexo server #启动服务预览,非必要,可本地浏览网页
hexo deploy #部署发布

简写Tips:

hexo n “我的博客” == hexo new “我的博客” #新建文章

hexo p == hexo publish

hexo g == hexo generate#生成

hexo s == hexo server #启动服务预览

hexo d == hexo deploy#部署

好了,全部过程就是这样,如果遇到了文章中没有提到的问题,自己Google,都有解决方法的。

参考资料:

【1】崔斯特的博客

【2】简书-李勇92