VPS服务器搭建Hexo博客教程

起初是为了Dropbox等各种需要跳墙,就买了个VPS搭Shadowsocks,后来发现VPS不搭个博客简直浪费,虽然从购买VPS起折腾了几天时间了,但是折腾起来上瘾了,哈哈哈。言归正传,选择博客框架方面,博主搜索了好多文章+知乎最后敲定用Hexo博客,又参考了大量搭建教程后,发现很多教程略显臃肿复杂,有的配置不对,有的不必要,有的不条理,因此写了这样一篇相当简明扼要的教程。

准备条件

插一句,有些人都将博客部署在GitHub Pages上托管,因为原生支持Git加上免费,应该已经有相当数量的用户了。但是用GitHub也会有些顾虑:大批博客用户涌入会让以技术为主的GitHub受到冲击;带宽服务器开销也难免以后说不准收费;GitHub偶尔会被墙的问题;甚至你的博客会被随意fork下来;百度搜索也爬取不到你的博客;用自己的域名和用托管网站的域名感觉也会不一样;最后,都买了VPS了干嘛放着不用啊!当然Github Pages也不失为一种好方式,其部署非常简单,我就不复述了,选择用这种方式的可以参考其他教程,这里说的都是用VPS搭建的。

在搭建之前需要准备好VPS服务器域名,本地操作服务器端的SSH工具(有的VPS管理页自带了命令行工具,可以不用准备,但是一般不好用,建议还是用下面的)。这里给个建议,选择任何工具之前要多搜索一下,不要走老路用过时的东西,国内首推知乎,比如你可以这样搜“XXX推荐 知乎”,里面回答都很中肯,其次是各类博客,博客就鱼龙混杂啦,需要你擦亮双眼。本文所有工具的选择都是我费了一些功夫选定的,主要参考知乎。OK,具体准备如下:

VPS服务器

本人购买的是vultr的vps服务器,装了很稳定的centos系统。对于其他linux系统配置都是一样的,当然如果你给VPS装windows系统,好吧你赢了,这里的服务端部署都是面向linux的。对于VPS购买,按照VPS提供商官网步骤来就可以了,没什么好说的。给个vultr官网注册链接,现在有优惠活动,从这个链接注册送20刀,也就是低配(1核+768M内存+15G SSD+1T/月流量,个人用是完全性能过剩的)的话你充5刀可以用5个月。

域名

看了知乎后建议在GoDaddy购买域名,应该不用我说怎么买吧。
然后使用DNSPod绑定域名并添加记录解析到你的VPS服务器地址,具体的设置也比较简单,自行搜索吧,这里不重点叙述了。

本地SSH工具

SSH工具是我们用来以Shell命令行的方式操作服务器端的,建议使用Xshellputty,Xshell功能更强一些,这里给的官方链接,注意本地操作系统,自行下载相应版本安装。

这里以Xshell为例(两者操作其实基本一样)登录VPS服务器

接下来会让输入VPS服务器用户名和密码就登录到shell界面了:

本地端配置

本地配置很简单,先安装好node.jsgit,再安装hexo即可,hexo需要前两者的支持。本人是用的win7,惭愧的讲还没有mac,但是本地端不需要什么配置,只要安装相应版本即可,mac应该更容易些。

安装node.js

这里给出node.js官方下载链接:https://nodejs.org/zh-cn/download/

安装git

同样给出git官方下载链接:https://git-scm.com/downloads

这个git组件提供了Git Bash,一个可以在windows上运行的shell!后面操作hexo就用这个,别用cmd啦。跟cmd打开方式一样,win平台通过开始-搜索Git Bash启动,输入pwd命令可以看到默认当前路径为你的用户目录下,如图

安装并熟悉hexo

hexo最好的教程当然是官方简中文档!

先不用花时间全看完官方文档,我这里稍微说下要点,之后有时间你再仔细看官方文档。

首先是安装,在Git Bash下输入这条命令就安装hexo了,简单吧。

1
$ npm install -g hexo-cli

接下来让我们熟悉怎么使用hexo。

  1. 首先建立一个站点

    1
    2
    3
    $ hexo init <folder>	//以folder为目录名建立站点文件夹
    $ cd <folder> //转移到站点目录
    $ npm install //安装依赖

    一个网站对应着一个站点文件夹,这里就是你的整个hexo博客网站。之后的操作我们都在该站点目录下进行。

  2. 新建一篇文章

    1
    $ hexo new <title>

    新建立的文章是markdown(以下简称md)文件,熟悉mac的一定知道吧,不熟悉的几分钟就能上手。我们编辑博客就是用编辑md文件实现的。在source/_post目录下,我们看到里面已经有个hello-world.md了,为了之后演示效果,先把你的删了吧

  3. 编辑文章
    就是编辑你新建的md文件啦。这就需要markdown编辑器喽,当然mac就省事了,对于win系统,本人一番知乎搜索后,选择了MarkdownPad编辑器,看个人喜好选择,这里先不着急安装。
    真要急着安装的话就打开source/_post目录下自带的hello-world.md瞅瞅吧,先不用编辑了

  4. 启动本地服务器

    1
    $ hexo server

    这条命令会在本地启动服务器,访问地址为localhost:4000,主要是我们正式发布前预览测试用的,启动后你编辑文章和主题等都可以直接更新到该网址,非常方便!但是注意,编辑站点配置文件_config.yml是需要重启该服务器才生效的。现在我们就看下自带hello-world.md的预览效果吧。还是蛮酷炫的吧!

  5. 生成静态文件

    1
    $ hexo generate

    这条命令是由各种md文件和资源生成可部署的静态html页面等,生成的资源都放在新生成的public目录下。

  6. 部署到服务器

    1
    $ hexo deploy

    部署方式有多种,对这篇文章来说,就是利用git部署到你的VPS服务器了,当然在这输入是没卵用的~我们还没配置服务器端。

掌握以上命令基本就OK了,还有一条hexo clean用来清理缓存,其他的一般用不到,有兴趣的再看官方文档。很多命令比如hexo generate都可用类似hexo g这种简单方式输入,相信聪明的你知道其他命令的简单方式。接下来我们看VPS服务器端配置。

VPS服务器端配置

这一部分的配置就用之前说的Xshell或putty来搞定!

创建用户

创建用户用于服务器端站点管理,如下:

1
2
3
# adduser hexo	//创建用户
# passwd hexo //设置密码
# su //检查是否有安装sudo

有的linux系统初始没安装sudo,为了方便,我们需要安装sudo,已有安装的话,跳过这步。

1
# yum install sudo

再次,为了方便,赋予hexo用户root权限,使用vi命令在/etc/sudoers中添加一行。不会vim编辑临时搜一下,简单。

1
# vi /etc/sudoers

找到这一行添加

1
2
root        ALL=(ALL)       ALL
hexo ALL=(ALL) ALL #这个是添加的

注意!! 服务器端代码如果是#开头代表root用户的命令,$开头代表hexo用户的命令!

配置本地端无密码ssh登录服务端

用过Hadoop和git的是不是觉得似曾相识,这里为什么要用到呢?因为这里的Hexo发布博客是用git来部署的,而git又是基于ssh连接的,所以实现一键发布博客就得配置这玩意了。其实很简单,有的教程复杂化了,注意这里有些步骤在本地端操作,为了条理,也为了符合我们学习思路,放在这里

  1. 本地端设置git用户名邮箱
    这里的用户名邮箱是在本地提交git时,服务器端做记录用的

    1
    2
    $ git config --global user.email "你的邮箱"
    $ git config --global user.name "你的用户名"
  2. 本地端生成ssh Key

    1
    2
    $ ssh-keygen -t rsa -C "你的邮箱"
    $ cat .ssh/id_rsa.pub //用于将该公钥内容复制到服务端
  3. 服务器端查看是否有安装ssh并安装

    没有的话使用yum安装

    1
    # yum install ssh

    安装完后启动服务

  4. 服务器端在用户主目录下新建.ssh文件夹并拷贝本地端公钥内容到.ssh目录下的authorized_keys

    1
    2
    3
    4
    5
    su hexo
    $ cd ~
    $ mkdir .ssh
    $ cd .ssh
    $ echo "本地端公钥(全部内容)" > authorized_keys
  5. 本地端ssh验证

    $ ssh hexo@你的域名 //@前是你创建的站点管理用户

OK,无密码ssh登陆完成,配置过程注意是在本地端还是服务器端操作。

安装配置nginx

简单来说,nginx是代理服务器,有它我们就能按照域名或IP访问网页了

  1. 添加nginx源,安装nginx
    在/etc/yum.repos.d目录下创建一个yum源文件nginx.repo,用vi编辑写入如下内容。建立文件复制粘贴应该都会吧

    1
    2
    3
    4
    5
    [nginx]
    name=nginx repo
    baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
    gpgcheck=0
    enabled=1

    安装nginx

    1
    2
    # yum install nginx -y
    # nginx -v //查看版本号验证
  2. 删除原配置文件

    1
    rm /etc/nginx/conf.d/*

    重新配置,添加以下内容到/etc/nginx/conf.d/hexo.conf

    1
    2
    3
    4
    5
    6
    7
    8
    server {
    root /home/hexo/www; #网站根目录,用来存储网站文件,后面会创建
    index index.html index.htm;
    server_name www.hellolvs.cn; #你的域名
    location / {
    try_files $uri $uri/ /index.html;
    }
    }

    看到没,这一步将你的域名和服务器下的网站根目录挂钩,主页是根目录下index.html
    很关键!!!

  3. 修改nginx配置文件
    将/etc/nginx/nginx.conf中的user值修改为hexo(偷个懒不贴了~)

  4. 切换到hexo用户,用户主目录下新建www文件夹作为网站根目录

    1
    2
    3
    su hexo
    $ cd ~
    $ mkdir www
  5. 验证配置是否正确

  6. 启动nginx服务并测试

    1
    2
    $ sudo service nginx start
    $ echo "hello nginx!" > /home/hexo/www/index.html //站点根目录下新建index.html

    在浏览器中输入你的域名或VPS的IP地址,出现hello nginx!字样表示nginx代理服务器搭建成功!然后删除index.html吧。

安装配置git

马上结束了啊!

  1. 安装git

    1
    $ sudo yum install git
  2. 初始化git仓库
    用户主目录下新建hexo.git文件夹用作git仓库并初始化

    1
    2
    3
    4
    $ cd ~
    $ mkdir hexo.git
    $ cd hexo.git
    $ git init --bare //初始化git仓库
  3. 配置git仓库的hooks
    hooks,钩子,就是将不同目录的数据实现同步。具体如下,在git仓库hooks目录下创建文件post-receive并修改权限

    1
    2
    3
    $ cd hooks
    $ touch post-receive
    $ chmod 755 post-receive

    将以下内容添加到post-receive中

    1
    2
    3
    4
    5
    6
    7
    8
    #!/bin/bash
    GIT_REPO=/home/hexo/hexo.git
    TMP_GIT_CLONE=/tmp/HexoBlog
    PUBLIC_WWW=/home/hexo/www
    rm -rf ${TMP_GIT_CLONE}
    git clone $GIT_REPO $TMP_GIT_CLONE
    rm -rf ${PUBLIC_WWW}/*
    cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

相信聪明的你能看懂这个脚本在做什么。

本地端部署验证

接下来我们就试试把博客发布到VPS服务器吧!

下面都是本地端的操作。

安装hexo git部署模块

首先我们得给hexo添加git部署支持…

1
$ npm install hexo-deployer-git --save

修改站点配置文件_config.yml

这个配置文件很重要,可以配置网站名,作者,网站URL等等,可以参考官方文档看看各项含义,这里我们配置其中的URL项和部署项就好,按下面修改。

URL项配置:

1
2
3
4
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.hellolvs.cn #你的博客网址
root: /

部署项配置:

1
2
3
4
deploy:
type: git #部署方式
repo: hexo@www.hellolvs.cn:/home/hexo/hexo.git #@符号之前是服务器的站点管理用户,之后是服务器的git仓库路径
branch: master #分支,我们只用主分支即可

部署验证

1
2
3
$ hexo clean	//清除缓存(实际是删除db.json和public文件夹)
$ hexo g //生成静态页面(public文件夹)
$ hexo d //部署到服务器

OK,完结撒花,浏览器输入你的域名看看吧!

其实就是最初给你预览的helloworld,只不过它搬到服务器了!

以后我们发布博客就用我讲解hexo那一章的第2-6步就可以了,甚至可以用hexo g -d来一键生成发布!这样你就可以专心写md了,发布只是一个命令的事!

坚持原创技术分享,您的支持将鼓励我继续创作!
分享到: