说在前面的话

因为完全是个小白,搭建这个博客花了差不多两天的时间,看了很多相关的教程,又Google了一些资料,简直痛苦啊,hexo是什么玩意儿,Linux命令又不了解,一些服务器相关配置的,不同教程讲述也不尽相同。不管怎么说,瓢也算学着画出来了,我这个小白得也把自己爬过得的坑记录一下,也当是自己一个回顾吧。


本教程是基于VPS来搭建hexo博客的,网上也有很多利用github pages搭建的,hexo具有全静态化,响应速度快,轻量级等的优点。故择之。

基本思路

在本地生成静态文件,把静态文件部署到VPS上,用Nginx直接做Web服务,由于hexo支持git的部署方式,从而可以实现从本地更新博客,方便快捷。

搭建流程

本机1(以windows为例)的操作

安装Node.js

Node.js官网下载最新版,一路默认安装。

安装Git

下载Git for windows一路默认安装。
Git这里我们需要注意一下,需要配置一下环境变量
然后我们需要生成SSH密钥,按下面的步骤进行。

1.打开C:\Users\<用户名>\.ssh文件夹,如果没有就新建
2.在空白处单击右键,选择Git Bash Here打开终端
3.设置git用户名

git config --global user.email "email@example.com"
git config --global user.name "username"

4.生成ssh密钥

ssh-keygen -t rsa -C "email@example.com"#一路回车生成公钥和密钥,一会要用到公钥id_rsa.pub

创建网站目录

在你电脑的任意位置创建一个文件夹(例如E:\hexo,下文以此代替),作为网站目录。

安装Hexo

打开cmd,通过cd命令进入hexo文件夹,输入node后执行如下命令

npm install -g hexo-cli
hexo init
npm install
hexo d -fg
hexo serve

打开http://localhost:4000 即可看到你的站点(当然还没有发布到网络)。
你可以看见hexo文件夹下有一个themes文件夹,这是可以自定义的,从而改变网站的呈现形式,官网也提供了一些可供选择的主题。

VPS的操作

此处为centosroot下的操作,关于连接VPS,Windows 用户请使用Putty(提示: Putty 中使用粘贴仅需鼠标右键)。
关于vi操作,按下i键进入编辑模式,编辑结束后按esc键退出,这时按 ,并输入 wq ,即可。

安装Git

yum update && apt-get upgrade -y #更新内核
yum install git-core

安装nginx

yum install nginx -y 

新建git用户添加sudo权限

adduser git
chmod 740 /etc/sudoers
vim /etc/sudoers

在vi编辑中找到如下内容:

## Allow root to run any commands anywhere
root    ALL=(ALL)     ALL

在下面添加一行

git   ALL=(ALL)     ALL

保存并退出后执行

chmod 440 /etc/sudoers

创建git仓库,并配置ssh登录

su git
cd ~
mkdir .ssh && cd .ssh
touch authorized_keys
vi authorized_keys//在这个文件中粘贴进刚刚申请的key(在id_rsa.pub文件中)
cd ~ 
mkdir hexo.git && cd hexo.git
git init --bare

测试一下,如果在git bash中输入ssh git@VPS的IP地址,能够远程登录的话,则表示设置成功了。

创建网站目录并赋予git对网站目录的所有权

cd /var/www
mkdir hexo
chown git:git -R /var/www/hexo

配置git hooks

su git
cd /home/git/hexo.git/hooks
vim post-receive

输入如下内容后保存退出,

#!/bin/bash
GIT_REPO=/home/git/hexo.git #git仓库
TMP_GIT_CLONE=/tmp/hexo
PUBLIC_WWW=/var/www/hexo #网站目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

然后赋予脚本的执行权限

chmod +x post-receive

配置Nginx

vim /etc/nginx/conf.d/hexo.conf

插入如下代码:
server {
    listen         80 ;
    root /var/www/hexo;//这里可以改成你的网站目录地址,我将网站放在/var/www/hexo
    server_name example.com www.example.com;//这里输入你的域名或IP地址
    access_log  /var/log/nginx/hexo_access.log;
    error_log   /var/log/nginx/hexo_error.log;
    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
            root /var/www/hexo;
            access_log   off;
            expires      1d;
    }
    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        root /var/www/hexo;
        access_log   off;
        expires      10m;
    }
    location / {
        root /var/www/hexo;//这里可以改成你的网站目录地址,我将网站放在/var/www/hexo
        if (-f $request_filename) {
            rewrite ^/(.*)$  /$1 break;
        }
    }
}

重启Nginx

service nginx restart

本机的最后配置

配置hexo配置文件

位于hexo文件夹下,_config.yml,修改deploy选项

deploy:
  type: git
  message: update
  repo:
    s1: git@VPS的ip地址或域名:git仓库地址,master
##例如
deploy:
      type: git
      message: update
      repo:
    s1: git@192.234.35.236:hexo.git,master

接着在hexo文件夹内,按住shift右击,选择在此处打开命令窗口(当然你也可以用cd命令),运行hexo g hexo d,如果一切正常,静态文件已经被成功的push到了blog的仓库里,如果出现appears not to be a git repo的错误,删除hexo目录下的.deploy后再次hexo g hexo d就可以了。

以上,博客已经完全建好了。

更新博客

使用一款 MarkDown 编辑器写 Blog 。写完后将文件以 *.md 的格式保存在本地[网站目录]\source\_posts中。文件编码必须为 UTF-8,这一点仅 Windows 用户需注意。

每篇 Blog 都有固定的参数必须填写,参数如下,注意每个参数的 : 后都有一个空格。

title: title
date: yyyy-mm-dd
categories: category  
tags: tag
#多标签请这样写:  
#tags: [tag1,tag2,tag3]
#或者这样写: 
#tags:
#- tag1 
#- tag2  
#- tag3  
---  
正文  

编写完后,只需要在hexo文件夹下执行hexo g && hexo d,博客即可更新。


遇到的坑

1.上传操作hexo d报错spawn git ENOENT,添加Git环境变量后可以了

2.hexo g 报错,安装hexo-delopyer-git后解决。

3.hexo d 提交到VPS网站目录里的文件并不是单独的public文件夹,检查hexo文件夹发现存在.git这个目录,删除.git文件夹即可(他是隐藏的哦)。

4.ssh git@ip,被拒绝,是远程端口默认为22端口,而不是我VPS的ssh真正端口

解决方法:在.ssh文件夹下(也就是生成公钥的文件夹)创建config文件,输入如下内容:

 # alex's git server
Host VPS的IP
HostName VPS的IP
User git
Port SSH端口
IdentityFile ~/.ssh/id_rsa

参考内容

参考了一下内容,感谢原作者!

1.http://blog.berry10086.com/Tech/deploy-hexo-to-vps/
2.https://www.multind.com/?p=36
3.https://dynamicer.com/how-to-deploy-hexo-blogs-with-git-hooks-on-vps/
4.http://huifeng.me/2015/08/16/deploy-hexo-to-vps/
.https://www.multind.com/?p=36
3.https://dynamicer.com/how-to-deploy-hexo-blogs-with-git-hooks-on-vps/
4.http://huifeng.me/2015/08/16/deploy-hexo-to-vps/