史上最快用GitHub、Hexo搭建我的博客

欢迎访问个人博客

一. 准备工做

• 电脑一台(本文是基于Mac)
• 安装Git
• 安装Node.js
• GitHub帐号一枚

若是读者电脑上已经装了git、Node、而且有GitHub帐号，那么搭建我的博客绝对不超过抽一支烟的时间。

二. 安装git

1. 在 Mac 上安装 Git，官方给了有两种方式。最容易的当属使用图形化的 Git 安装工具，界面如图，下载地址在下：

Git GUI下载地址

2. 另外一种是经过 MacPorts (http://www.macports.org) 安装。若是已经装好了 MacPorts，用下面的命令安装 Git：

$ sudo port install git-core +svn +doc +bash_completion +gitweb
复制代码

译注：还有一种是使用 homebrew（https://github.com/mxcl/homebrew）：brew install git。

安装git官网教程

三. 安装Nodejs

安装Nodejs也有两种方式GUI和终端命令

1. GUI下载地址

Nodejs安装包下载地址

2. 终端执行命令

先安装nvm，这是Nodejs版本管理器，能够轻松切换Nodejs版本。

1. curl方式安装nvm.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
复制代码

下面是nvm部分输出，重点在最后，只有执行最后几条命令nvm才算安装完成。

% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 11329  100 11329    0     0   4130      0  0:00:02  0:00:02 --:--:--  4130
=> Downloading nvm from git to '/Users/huanghaipo/.nvm'
=> Initialized empty Git repository in /Users/huanghaipo/.nvm/.git/


=> Appending nvm source string to /Users/huanghaipo/.bashrc
=> bash_completion source string already in /Users/huanghaipo/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
//这里是执行命令
export NVM_DIR="/Users/leon/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
复制代码

根据提示执行命令load nvm,最后几条命令每一个人的都不一样。

$ export NVM_DIR="/Users/leon/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ nvm
复制代码

使用nvm安装node

$ nvm install node
复制代码

验证node及npm版本，若是有下方输出证实安装成功。

$ node -v
v11.14.0
$ npm -v
6.7.0
复制代码

四. 建立Github域名和仓库

1. 注册GitHub帐号

注册Github帐号，Username很重要，域名将是帐号名加.github.io，username.github.io。

2. 建立仓库

注册帐号后咱们须要建立一个存储网站数据的仓库，点击首页右上角加号，点击New repository按钮建立仓库。

Respository name 中的username.github.io 的username 必定与前面的Owner 一致，记住username后面会用到。

到此准备工做已经所有完成了。接下来就是安装hexo了。

五. 安装Hexo

以上工做所有完成咱们就能够安装Hexo了。一个崭新的博客将要出现。

1. 执行下方命令安装hexo

$ sudo npm install hexo-cli -g
复制代码

安装完成后咱们就能够初始化博客了，若是想要把文件放到某个目录下先cd到指定目录下在执行下方命令，若是没有指定目录默认是的你的我的主目录下。

//username就是你刚才仓库的名称
$ hexo init username.github.io
复制代码

2. 配置博客设置

初始化博客后咱们须要修改配置文件已达到想要的效果如名字、主题等。

主题安装

为了美观咱们安装一个火热的主题。先cd到刚才生成的目录下执行下方命令。

$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
复制代码

基础设置

找到_config.yml文件username.github.io/_config.yml修改下方基础配置保存修改。 注意_config.yml中配置项的冒号后面要用空格隔开，再跟内容不然启动服务时会报错。

title: huanghaipo    //博客的名字
author: huanghaipo  //你的名字
language: zh-Hans    //语言 中文
theme: next   //刚刚安装的主题名称
deploy:
type: git    //Github发布
repo: https://github.com/username/username.github.io.git    // 刚建立的Github仓库连接也能够选择ssh
复制代码

3. 编写文章

前期工做已近基本完成，接下来咱们能够写文章了。发布就能够获得一枚我的博客，首先新建一个.md文件，命名为firstEssay.md，写入下方内容。放到username.github.io/source/_posts文件下。

---
 title: 个人第一篇文章
 ---
**个人第一篇文章**
复制代码

或者cd到你的博客文件夹执行下方命令行会获得一个md文件。

hexo new post "这是测试新建md文档"      //名字随便取
复制代码

执行完以上命令，获得md文件，内容以下。

---
title: 这是测试新建md文档
date: 2019-04-24 10:20:50       
tags:                            //博客标签
---
复制代码

4. 启动测试

启动服务，直接浏览器中输入https://localhost:4000或者直接点击我 访问。

$ hexo s
复制代码

5. 安装hexo-deployer-git自动部署发布工具

$ npm install hexo-deployer-git --save
复制代码

6.发布

以上步骤都完成后，咱们就能够把生成的静态网页文件发布到Github上。之后直接经过链接就能够访问这个博客了。

$ hexo clean && hexo g && hexo d
命令解释
hexo clean   //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g       //生成缓存和静态文件
hexo d       //从新部署到服务器
复制代码

若是你使用的是HTTP可能会让你输入帐号密码，输入正确后，稍等片刻，就会吧文件上传到Github上，而后直接访问刚才username.github.io就能看到本身的博客了。若是有新的文章只须要放到username.github.io/source/_posts下而后执行上面的命令就OK了。

最终效果

优化

若是以为这个主题很差看请或者想要更新博客更方便、更美观，请看这里。

hexo主题 主题配置 基础配置 hexo插件

hexo经常使用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
复制代码

踩坑记录:

终端报错:

FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 70, column 1: ...
复制代码

解决办法：_config.yml中配置项的冒号后面要用空格隔开，再跟内容

出现 error deployer not found:git 或者 error deployer not found:github 的错误
复制代码

解决办法：执行 npm install hexo-deployer-git --save

中文乱码问题
复制代码

解决办法：将文件的内容编码改成UTF8格式

'hexo sever'可以成功运行，可是localhost:4000没法访问
复制代码

解决办法：执行hexo s -p 5000，改用其余端口启动