Hexo半小时搭建个人博客

欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~

目录：
1. Git 安装及GitHub账号注册
2. NodeJS 安装
3. Hexo 安装
4. 基本主题next
4.1. 开启GitPages服务
4.2. 创建一个本地博客站点
4.3. 同步GitHub，允许公共访问
4.4. 下载主题-Next(官网)

一 Git 安装及GitHub账号注册

Git详细安装教程————点击此处

GitHub账号注册详细教程————点击此处

二 NodeJS 安装

NodeJs详细安装过程和环境配置————点击此处

三 Hexo 安装

Hexo基本框架搭建过程————点击此处

四 基本主题next

开启GitPages服务

搭建我们的个人博客需要一个唯一的域名，当然我们可以申请购买一个域名来使用，但是在不是太必要的情况下，我们也可以通过Github Pages获得一个免费使用的域名，这需要我们在Github上新建一个仓库，如下：

• 登录Github，右上角创建一个项目，也可以参照我的另外一个同系列的文章
• hexo搭建个人博客之Github账号注册

GitPages

这个过程和建立普通的仓库没什么区别，关键在于新仓库的名字，一定要是UserName+“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是：https://UserName.github.io的形式。
注意：固定新仓库的名字格式并非必须，只是这样操作生成的博客域名比较短小简洁，另起他名生成博客域名会很冗长。

点击Create Repository之后，选择settings

Settings

进入如下：

找到GitHub Pages找到choose theme

ChooseTheme

之后进入主题仓库,任意选择一个主题，这里我选择的是这个

SelectTheme

此时再去查看settings,会发现GitHub Pages变化如下

SettingsChange

现在，我们就可以使用https://UserName.github.io，访问自己的博客网站了，打开链接我们会看到默认主题的个人博客样式如下(虽然有点点丑，是吧)

创建一个本地博客站点

打开windows命令面板，输入以下指令

hexo init myBlog

测试本地博客

hexo g  //g是generetor的缩写，生成博客 
hexo s  //s是server的缩写，启动服务 

此时打开浏览器，输入 http://localhost:4000/，我们将会看到Hexo自带默认主题显示的博客样式如下(呃，是好看了那么一点点)：

hexo主题

同步GitHub，允许公共访问

在本地我们已经搭建了博客，但是还只能自己本地访问。若要别人也能看到，那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗，这里就要用到了。
首先找到我们的博客仓库，并拷贝仓库地址：

[图片上传失败...(image-ea8045-1548752241758)]

然后修改本地站点的配置_config.yml文件，修改deploy下的配置如下：

deploy:
  type: git // 类型为 git
  repository: [email protected]:ForeManWang/ForeManWang.github.io.git // 这里写仓库地址
  branch: master

现在，我们再次访问链接：https://userName.github.io，就会发现这里的界面和本地的一样了。如此一来我们搭建的个人博客网站就基本完成了。

下载主题-Next(官网)

安装Git部署插件

npm install hexo-deployer-git --save // 有版本号即成功
// 部署指令
hexo clean // 每次同步之前操作，清理缓存
hexo g //将md文档生成博客
hexo d //同步到github

下载Next,参考安装包，或直接克隆

git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在 Hexo 中有2份主要的配置文件，其名称都是_config.yml。
一份是站点配置文件，在站点根目录下
另一份是主题配置文件，在主题目录下，比如我们这里用到的是next主题，则在myHexoBlog\themes\next下

打开themes/next/下的_config.yml,查找scheme，可以看到四种不同的风格。去掉#注释，即启用对应的scheme，博主采用Gemini主题，大家可以依次测试效果，选择自己喜欢的scheme。
打开根目录下的_config.yml，查找theme字段，将字段改为theme: next(冒号:之后要有空格分隔，否则无效) 之后通过hexo g和hexo s，再在浏览器中访问localhost:4000即可本地预览主题效果。

Hexo博客首页

主题基础配置

设置过程中，可运行在本地查看，步骤跟之前一样(注意所有的：后面都要空一格!!!)。

设置菜单

找到主题next的_config.yml查找menu``，去掉#`注释即可显示对应的菜单项。

next_menu配置

设置网站基本信息和语言

找到站点的_config.yml，找到Site如下设置。

next主题基本信息

设置个人信息

找到主题next的_config.yml，找到social如下设置。

next主题外链修改

设置头像

进入themes/next/source/uploads下，找到avatar.png，放入一张同样大小的图片替换名字。之后找到主题next的_config.yml，找到avatar如下设置。

Avatar

更多美化next主题参考

请点击next美化主题1-4

hexo seo优化

整个系列文档推荐

hexo搭建个人博客之Git安装

hexo搭建个人博客之Github账号注册

hexo搭建个人博客之NodeJs安装

hexo搭建个人博客之Hexo安装

hexo搭建个人博客详细教程

装逼路上的小插曲一：博客上传图片无法显示

本文参考文档

Hexo搭建个人博客（一）——框架搭建

Hexo搭建个人博客网站详细流程

Hexo博客搭建