使用Github搭建Hexo静态博客！

Author： XSY
发布时间：June 4, 2018
4319 views
No comments
2876 words
Categories：技术文档

## 前言
首先我们中学生马上期末考试了，哥哥姐姐们也马上中，高考了，祝贺中国的考生们：
**愿你盖上笔帽的那一刻，有勇士收刀回鞘般的骄傲！**
我相信你们一定可以
给自己的人生画上最好的转折号！
## 正文
### 步骤一
安装Node.js和配置好Node.js环境，打开cmd命令行，成功界面如下
![1-1](https://cdn.xsiy.ltd/photo/hexo-github/1-1.png "1-1")
### 步骤二
安装Git和配置好Git环境，安装成功的象征就是在电脑上任何位置鼠标右键能够出现如下两个选择
![1-2](https://cdn.xsiy.ltd/photo/hexo-github/1-2.png "1-2")

####注意：
一般出于安全考虑，只有在Git Bash Here中才能进行Git的相关操作。如果需要在cmd命令行里调用Git，那么就要配置电脑的环境变量Path，或者在安装的时候选择use Git from the Windows Command Prompt。这个随你的便，影响不是很大，成功配置的界面如图

![1-3](https://cdn.xsiy.ltd/photo/hexo-github/1-3.png "1-3")
### 步骤三
Github账户注册和新建项目，项目必须要遵守格式：账户名.github.io，不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README

![1-4](https://cdn.xsiy.ltd/photo/hexo-github/1-4.png "1-4")

在建好的项目右侧有个`settings`按钮，点击它，向下拉到GitHub Pages，你会看到那边有个网址，访问它，你将会惊奇的发现该项目已经被部署到网络上，能够通过外网来访问它。

![1-5](https://cdn.xsiy.ltd/photo/hexo-github/1-5.png "1-5")

### 步骤四
安装Hexo，在自己认为合适的地方创个文件夹，我是在D盘建了一个blog文件夹。然后通过命令行进入到该文件夹里面
不会进入自己百度！

![1-6](https://cdn.xsiy.ltd/photo/hexo-github/1-6.png "1-6")

输入

npm install hexo -g
开始安装Hexo

![1-7](https://cdn.xsiy.ltd/photo/hexo-github/1-7.png "1-7")

输入`hexo -v`，检查hexo是否安装成功

![1-8](https://cdn.xsiy.ltd/photo/hexo-github/1-8.png "1-8")

输入`hexo init`，初始化该文件夹
时间可能会有点长，对只是有点长而已啦

![1-9](https://cdn.xsiy.ltd/photo/hexo-github/1-9.png "1-9")

![2-1](https://cdn.xsiy.ltd/photo/hexo-github/2-1.png "2-1")

看到后面的“**Start blogging with Hexo！**”，激动有木有啊！！！！！

接着输入`npm install`，安装所需要的组件

![2-2](https://cdn.xsiy.ltd/photo/hexo-github/2-2.png "2-2")

输入`hexo s`，开启服务器，访问该网址，正式体验Hexo

![2-3](https://cdn.xsiy.ltd/photo/hexo-github/2-3.png "2-3")

#### 问题：
假如页面一直无法跳转，那么可能端口被占用了。此时我们ctrl+c停止服务器，接着输入“hexo server -p 端口号”来改变端口号

![2-4](https://cdn.xsiy.ltd/photo/hexo-github/2-4.png "2-4")

那么出现如下图就成功了

![2-5](https://cdn.xsiy.ltd/photo/hexo-github/2-5.png "2-5")

### 步骤五
然而然而，别激动！还要上传到Github page
让我们来设置设置Git的user name和email（如果是第一次的话）吧
然而上传设定等参考我的文章
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://www.xsy.fun/archives/39/" target="_blank" class="post_inser_a no-external-link no-underline-link">
<div class="inner-image bg" style="background-image: url(https://xsycdn.oss-cn-beijing.aliyuncs.com/photo/github/github12.png);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">将本地项目上传到Github</p>
<div class="inster-summary text-muted">
前言今天教大家如何将本地仓库上传到Github，很方便的！Git安装大家都会啦，我就不说了~操作第一步我们需要先创...
</div>
</div>
</a>

</div>

</div>
####问题：
假如ssh-key配置失败，那么只要以下步骤就能完全解决

首先，清除所有的key-pair
`ssh-add -D`
`rm -r ~/.ssh`
删除你在github中的public-key

重新生成ssh密钥对
`ssh-keygen -t rsa -C "xxx@xxx.com"`

接下来正常操作
在github上添加公钥public-key:
1、首先在你的终端运行 `xclip -sel c ~/.ssh/id_rsa.pub`将公钥内容复制到剪切板
2、在github上添加公钥时，直接复制即可!
3、保存

### 步骤六
配置Deployment，在其文件夹中，找到_config.yml文件，修改repo值（在末尾）

repo值是你在github项目里的ssh，大家都知道吧，我就不多说了！

### 步骤七
新建一篇博客，在cmd执行命令：`hexo new post “博客名”`

这时候在文件夹_posts目录下将会看到已经创建的文件

![2-6](https://cdn.xsiy.ltd/photo/hexo-github/2-6.png "2-6")

在生成以及部署文章之前，需要安装一个扩展：
    npm install hexo-deployer-git --save

![2-7](https://cdn.xsiy.ltd/photo/hexo-github/2-7.png "2-7")

使用编辑器编好文章，那么就可以使用命令：hexo d -g，生成以及部署了

![2-8](https://cdn.xsiy.ltd/photo/hexo-github/2-8.png "2-8")

部署成功后访问你的地址：
http://用户名.github.io
那么将看到生成的文章

## 没啦

Last modification：January 14, 2019

If you think my article is useful to you, please feel free to appreciate

使用Github搭建Hexo静态博客！

XSY • 2018 年 06 月 04 日

![1-4](https://cdn.xsiy.ltd/photo/hexo-github/1-4.png "1-4")

![1-5](https://cdn.xsiy.ltd/photo/hexo-github/1-5.png "1-5")

### 步骤四
安装Hexo，在自己认为合适的地方创个文件夹，我是在D盘建了一个blog文件夹。然后通过命令行进入到该文件夹里面
不会进入自己百度！

![1-6](https://cdn.xsiy.ltd/photo/hexo-github/1-6.png "1-6")

输入

npm install hexo -g
开始安装Hexo

![1-7](https://cdn.xsiy.ltd/photo/hexo-github/1-7.png "1-7")

输入`hexo -v`，检查hexo是否安装成功

![1-8](https://cdn.xsiy.ltd/photo/hexo-github/1-8.png "1-8")

输入`hexo init`，初始化该文件夹
时间可能会有点长，对只是有点长而已啦

![1-9](https://cdn.xsiy.ltd/photo/hexo-github/1-9.png "1-9")

![2-1](https://cdn.xsiy.ltd/photo/hexo-github/2-1.png "2-1")

看到后面的“**Start blogging with Hexo！**”，激动有木有啊！！！！！

接着输入`npm install`，安装所需要的组件

![2-2](https://cdn.xsiy.ltd/photo/hexo-github/2-2.png "2-2")

输入`hexo s`，开启服务器，访问该网址，正式体验Hexo

![2-3](https://cdn.xsiy.ltd/photo/hexo-github/2-3.png "2-3")

#### 问题：
假如页面一直无法跳转，那么可能端口被占用了。此时我们ctrl+c停止服务器，接着输入“hexo server -p 端口号”来改变端口号

![2-4](https://cdn.xsiy.ltd/photo/hexo-github/2-4.png "2-4")

那么出现如下图就成功了

![2-5](https://cdn.xsiy.ltd/photo/hexo-github/2-5.png "2-5")

首先，清除所有的key-pair
`ssh-add -D`
`rm -r ~/.ssh`
删除你在github中的public-key

重新生成ssh密钥对
`ssh-keygen -t rsa -C "xxx@xxx.com"`

### 步骤六
配置Deployment，在其文件夹中，找到_config.yml文件，修改repo值（在末尾）

repo值是你在github项目里的ssh，大家都知道吧，我就不多说了！

### 步骤七
新建一篇博客，在cmd执行命令：`hexo new post “博客名”`

这时候在文件夹_posts目录下将会看到已经创建的文件

![2-6](https://cdn.xsiy.ltd/photo/hexo-github/2-6.png "2-6")

在生成以及部署文章之前，需要安装一个扩展：
    npm install hexo-deployer-git --save

![2-7](https://cdn.xsiy.ltd/photo/hexo-github/2-7.png "2-7")

使用编辑器编好文章，那么就可以使用命令：hexo d -g，生成以及部署了

![2-8](https://cdn.xsiy.ltd/photo/hexo-github/2-8.png "2-8")

部署成功后访问你的地址：
http://用户名.github.io
那么将看到生成的文章

## 没啦

使用Github搭建Hexo静态博客！

Leave a Comment Cancel reply

小程序版Typecho构建

Typecho复制弹窗提示

关于劣质疫苗事件，你需要了解这些

华为电信HN8145V XGpon获取超级管理员密码

随机网站背景

中考前的生活

Git 常用命令速查表（一）

新HTTPS跳转方式

将本地项目上传到Github

Hitokoto一言API

使用Github搭建Hexo静态博客！