---

title: 使用Hexo和github搭建自己的博客超详细奶妈级别教程
author: echo
categories: ‘-hexo’
tags: ‘-hexo’
abbrlink: 5238
date: 2019-06-25 18:12:01
img:
top:
cover:
coverImg:
password:
toc:
mathjax:
summary:

更多文章请移步:我的博客

入门简介

博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。今天我们学习的是Hexo+Github的方式。

Github Pages可以被认为是用户编写的、托管在github上的静态网页。使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦。此外还可以绑定自己的域名。

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

环境安装

Git安装

百度搜索git，点击进入

点击Downloads

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3X3Wh5KO-1592449172593)(https://raw.githubusercontent.com/lxwise/images/master/img/01.png)]

接着

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKQPWvnw-1592449172595)(https://raw.githubusercontent.com/lxwise/images/master/img/jkl.jpg)]

不知道的朋友可以鼠标右击此电脑（或我的电脑）点属性就可以看到了!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0Cuvfv6-1592449172598)(https://raw.githubusercontent.com/lxwise/images/master/img/03.png)]

然后无限下一步安装就行了（注意安装目录不要有中文字符和空格）

git安装好在任何一个文件夹右击鼠标后出现以下选项，证明Git安装好了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qIJ913K-1592449172600)(https://raw.githubusercontent.com/lxwise/images/master/img/04.png)]

安装Nodejs

百度搜索nodejs或直接点击此处进入下载官网

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FqKj0TGq-1592449172602)(https://raw.githubusercontent.com/lxwise/images/master/img/05.png)]

然后无限下一步安装就行

检验Git是否安装成功

在桌面右键鼠标，可以看到菜单里多了 Git GUI Here 和 Git Bash Here两个选项，第一个是图形界面的Git操作，另一个是命令行，选择第二个

输入``git --version`  `node -v  
`npm -v`

如果出现版本号则表示安装成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ANYPp6n7-1592449172603)(https://raw.githubusercontent.com/lxwise/images/master/img/06.png)]

安装Hexo

新建一个文件夹如：我的文件夹为：D\blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装，第一个命令表示安装 hexo，第二个命令表示安装 hexo 部署到 git page 的 deployer，如图所示即为安装成功

npm install hexo-cli -g
npm install hexo-deployer-git --save

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELffZ97j-1592449172604)(C:\Users\liuxin\Desktop\新建文件夹\07.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wMOfjJLK-1592449172605)(https://raw.githubusercontent.com/lxwise/images/master/img/1587815492340.png)]

Hexo配置

在创的文件夹下右键鼠标，点击 Git Bash Here，输入以下命令，如图所示则安装成功

hexo init

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLCZxvGi-1592449172606)(https://raw.githubusercontent.com/lxwise/images/master/img/image-20200426184659932.png)]

Hexo安装完成后，将在blog目录中新建所需要的文件，如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QSYSu3UZ-1592449172607)(https://raw.githubusercontent.com/lxwise/images/master/img/10.png)]

Hexo使用命令

hexo  sever ： #启动博客程序``hexo clean： #用来清理缓存文件``hexo g  ：    #生成文件`
`hexo  s   ：  #运行本地服务器`
`hexo  d   ： #上传到服务器

出现如下界面就可以访问博客啦，在浏览器地址栏输入http://localhost:4000就可以访问了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2fMXolZj-1592449172609)(https://raw.githubusercontent.com/lxwise/images/master/img/11.png)]

访问页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3g8pAom-1592449172611)(https://raw.githubusercontent.com/lxwise/images/master/img/12.png)]

将博客部署到Github上

注册Github账户

点击此处访问github官网，点击 Sign Up 注册账户

登录后点击!

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7g0LRVY-1592449172612)(https://raw.githubusercontent.com/lxwise/images/master/img/158781661405338.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unKcawGp-1592449172613)(https://raw.githubusercontent.com/lxwise/images/master/img/13.png)]

配置SSH密钥

只有配置好 SSH 密钥后，我们才可以通过 git 操作实现本地代码库与 Github 代码库同步，在你第一次新建的文件夹里面（如：我的文件夹为：D\blog） Git Bash Here 输入以下命令：

 `$ ssh-keygen -t rsa -C "your email@example.com"` `//引号里面填写你的邮箱地址`之后会出现：`Generating public/private rsa key pair.`  Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  `//到这里可以直接回车将密钥按默认文件进行存储`然后会出现：`Enter passphrase (empty for no passphrase):`  //这里是要你输入密码，其实不需要输什么密码，直接回车就行 `Enter same passphrase again:`  接下来屏幕会显示：`Your identification has been saved in /c/Users/you/.ssh/id_rsa.`  Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.  The key fingerprint is:  这里是各种字母数字组成的字符串，结尾是你的邮箱  The key's randomart image is:  `这里也是各种字母数字符号组成的字符串`  

运行以下命令，将公钥的内容复制到系统粘贴板上也可以去C盘的用户目录下

比如我的C:\Users\liuxin\.ssh找到id_rsa.pub打开复制

$ clip < ~/.ssh/id_rsa.pub

GitHub 账户中添加你的公钥

①登陆 GitHub，进入 Settings：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcVNCYJS-1592449172614)(https://raw.githubusercontent.com/lxwise/images/master/img/14.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nToz6N79-1592449172616)(https://raw.githubusercontent.com/lxwise/images/master/img/15.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArhJ9XZz-1592449172618)(https://raw.githubusercontent.com/lxwise/images/master/img/16.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m5QHZ9ZA-1592449172619)(https://raw.githubusercontent.com/lxwise/images/master/img/17.png)]

测试

输入以下命令：注意：git@github.com不要做任何更改！

ssh -T git@github.com

之后会显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjfBt7pq-1592449172620)(https://raw.githubusercontent.com/lxwise/images/master/img/18.png)]

输入 yes 后会显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czKslw5L-1592449172620)(https://raw.githubusercontent.com/lxwise/images/master/img/19.png)]

此时表示设置正确

配置Git个人信息

Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理

git config --global user.name "此处填你的用户名"
git config --global user.email "此处填你的邮箱"

到此为止 SSH Key 配置成功，本机已成功连接到 Github

将本地的 Hexo 文件更新到 Github 的库中

登录 Github 打开自己的项目 your name.github.io

鼠标移到 Clone or download 按钮，选择 Use SSH

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mSPTVcgJ-1592449172622)(https://raw.githubusercontent.com/lxwise/images/master/img/20.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4J8nB5zW-1592449172623)(https://raw.githubusercontent.com/lxwise/images/master/img/21.png)]

打开你创建的文件夹（如：D:\blog）打开该文件夹下的 _config.yml 文件,我的是部署过得所以文件比你们的多

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RNN3oFb0-1592449172625)(https://raw.githubusercontent.com/lxwise/images/master/img/22.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLPf5Oal-1592449172626)(https://raw.githubusercontent.com/lxwise/images/master/img/www.jpg)]

然后在D/blog目录下点击 Git Bash Here输入以下命令

hexo g
hexo d

或直接执行

hexo g -d

执行完之后会让你输入你的 Github 的账号和密码，如果此时报以下错误，说明你的 deployer 没有安装成功

ERROR Deployer not found: git

需要执行以下命令再安装一次：

npm install hexo-deployer-git --save

再执行 hexo g -d，你的博客就会部署到 Github 上了

访问博客

进入你的项目点击settings,选择Options，往下翻找到GitHub Pages里面就是你的博客地址，现在每个人都可以通过此链接访问你的博客了！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TA53nCkE-1592449172628)(https://raw.githubusercontent.com/lxwise/images/master/img/qqq.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pwAls0GQ-1592449172630)(https://raw.githubusercontent.com/lxwise/images/master/img/mmm.jpg)]

Hexo博客发表文章

新建一个空文章

输入以下命令，会在项目D:\blog\source_posts中生成 文章标题.md 文件，文章标题根据需要命名

hexo n "文章标题"

也可以直接在D:\blog\source_posts目录下右键鼠标新建文本文档，改后缀为 .md 即可，这种方法比较方便

用编辑器编写文章:

推荐几款好用的md编辑器

md 全称 Markdown

1.Typora

2.MarkdownPad2

3.BookPad

4.小书匠

5.Sublime Text 3

文章标题，标签，分类，封面图片，摘要等，可以在 Front-matter 里面配置（Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，官方文档：https://hexo.io/zh-cn/docs/front-matter ），举个例子：

---

layout: 页面布局（配合主题文档使用）
title: 文章名称
date: 文章日期
comments: 文章是否开启评论
photos: 文章封面图（仅部分主题支持）
tags:

• 文章标签一
• 文章标签二
  categories: 文章分类
  description: 文章描述，即要在首页显示的摘要（仅部分主题支持）

---

这里是摘要

<!-- more -->

这里是正文

注意：description 和 <!-- more --> 方式显示摘要二选一即可，部分主题不支持description，每个配置英文冒号后面要空一格，不同主题配置有所差异，具体要参考主题文档

当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上

hexo clean

hexo g

hexo d

现在访问你的博客就可以看见写好的文章啦！

好了现在就可以邀请你朋友一起看你的个人博客啦！！