教你如何搭建一个自己的博客

大概分为以下步骤

环境准备(node.js、git、github)
安装Hexo
配置Hexo
把Hexo和github pages连接起来
发表文章
博客主题推荐
NexT主题的简单配置
增加404公益广告页

环境准备

大概分为以下3个步骤

Node.js 安装
Git 安装
Github 账号配置
- Node.js 安装
  - node.js 下载 : Windows Installer 64-bit
  - install : 下一步直到结束
  - 检查是否安装成功.
```
node -v
npm -v
```
  - 如果失败，将node.exe加进环境变量*
- Git 安装
  - git 下载 : Git
  - install : 下一步直到结束
  - 检查是否安装成功
```
git --version
```
- Github 账号配置

yourname和github name相同

![build_blog4](https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvbGZueC5jb20vYnVpbGRfYmxvZzQucG5n?x-oss-process=image/format,png)
![build_blog5](https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvbGZueC5jb20vYnVpbGRfYmxvZzUucG5n?x-oss-process=image/format,png)
* **点击launch automatic page generator**
![build_blog6](https://imgconvert.csdnimg.cn/aHR0cDovL2ltYWdlLndvbGZueC5jb20vYnVpbGRfYmxvZzYucG5n?x-oss-process=image/format,png)

安装Hexo

创建hexo文件夹
在hexo文件夹下创建node_global and node_cache文件夹
将上面的两个文件夹加入环境变量

然后

npm config set prefix your_node.js_installation_path\node_global
npm config set cache your_node.js_installation_path\node_cache

接下来安装

npm install hexo-cli -g
mkdir hexo
cd hexo
hexo init
npm install hexo --save

检查是否安装成功

配置Hexo

hexo g
hexo s

Then come back INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

Do not press Ctrl+C or it will stop.

打开http://0.0.0.0:4000/在浏览器中将出现:

连接Hexo和github pages

大概分为以下步骤

配置个人git信息(如果是第一次)

git config --global user.name "wolfnx"
git config --global user.email "lostnx@gmail.com"
ssh-keygen -t rsa -C "lostnx@gmail.com"

打开文件hexo下的_config.yml，找到deployment并按如下修改：
```
deploy:
type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master
```
yourname是github名称

发布

创建一篇信的博客名叫buildblog。
```
hexo new post "buildblog"
```
此时D:/Develop/Hexo/source_posts下就会buildblog.md文件，你可以编辑这个文件通过markdown编辑器。
```
hexo g //generate
hexo d //deploy

hexo d -g //generate before deploy 
```
如果”deployer not found:git” appears，你必须安装：*
```
npm install --save hexo-deployer-git
```

博客主题推荐

这个主题简单而美丽。目前，Github上Star最高的Hexo主题支持几种不同的样式。作者提供了非常完整的配置说明。

build_blog8

NexT主题的简单配置

Hexo中有两个主要的配置文件，名称均为_config.yml。其中之一位于站点的根目录，主要包含Hexo本身的配置；另一个位于主题目录中，此配置由主题作者提供，主要用于配置与主题相关的选项。
为了便于描述，在以下描述中，前者称为站点简档，而后者称为主题简档。
- 安装NexT
  
  Hexo安装主题的方法非常简单，只需将主题文件复制到站点目录的主题目录，然后修改配置文件。
```
cd yoursite/theme
git clone https://github.com/theme-next/hexo-theme-next next
```
- 打开主题
  
  打开站点配置文件，找到主题字段并将其值更改为next。
```
theme: next
```
- 验证主题
  
  首先启动Hexo本地站点，然后打开调试模式。
```
hexo s -debug 
```
  or
```
hexo s --debug
```
  在命令行输出中提示：
  
  NFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
  
  现在，您可以使用浏览器访问上面的地址，检查该站点是否正常运行。
- theme配置
  
  你可能需要访问外网
  
  Theme configuration

增加404公益广告页

GitHub Pages具有创建404页面的准则： Custom 404 Pages

推荐使用Tencent Public Welfare 404

创建一个404.html文件并将其放在以下路径中：

build_blog10

Html Content:

HTML>

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="robots" content="all" />
		<meta name="robots" content="index,follow"/>
		<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
	</head>
	<body>
		<script type="text/plain" src="http://www.qq.com/404/search_children.js"charset="utf-8" homePageUrl="/"
		homePageName="Back to my homepage">
		</script>
		<script src="https://qzone.qq.com/gy/404/data.js" 	charset="utf-8">
		</script>
		<script src="https://qzone.qq.com/gy/404/page.js" 	charset="utf-8">
		</script>
	</body>
</html>