在阿里云VPS上部署Hexo

自双11购入了阿里云的VPS后,一直想着捯饬些什么,首当其冲的就是搭一个博客站点。之前使用过WordPress、Joomla、Drupal、国人的Typecho、Emlog、Zblog等。前几个国外的博客虽然功能、插件、模版丰富,但感觉略显臃肿,过多冗余之处,不适合做个人站点使用,尤其不适合笔者的1G1M的小水管主机。而国人的Typecho、Emlog感觉不错,安装使用简单、占用内存少、界面清新,没有多余的功能,支持Markdown,还原写作本质。但在使用中,出现不少小问题,细节不完善,影响实际体验,遂弃之。直到遇见了Hexo……

Hexo的介绍不再赘述,可以登录其中文官网了解。其实在接触Hexo之前,笔者就对纯静态的博客框架有所了解,比如jekyll、octopress等。与Hexo一样,他们的共同的优点就是部署页面纯静态html,加载速度快、浏览体验好、占用内存小,支持Markdown,当然最重要的一点是有逼格。最终放弃Jekyll等等选择Hexo的原因是:相对于Jekyll基于Ruby实现,Hexo基于Node.js,在Windows上安装Node.js环境更简单,另外,Hexo的主题更符合我的品位。

这类静态博客系统最大的一个缺陷就在于要求用户具有一定的技术水平,Hexo是我见过最难建立的博客系统。网上有很多文章是把Hexo部署到Github或者Coding等,优点是搭建快捷、免费,缺点显而易见,Github远在大洋彼岸,加载速度可想而知,而Coding则是有广告。既然已经有了云主机,当然不能浪费。笔者阅读了网上N多文章及教程,踩过坑,走过弯路,在经历N次的失败后,终于搭建成功。下面就把最简明扼要的过程列出来,谨以此自勉或造福后人。


准备条件

VPS及域名

笔者购买的是阿里云的轻量云服务器,1核1G1M20GSSD,CentOS 7.4系统,搭配宝塔面板(方便可视化操作),本文操作过程理论上适用于其他Linux系统。域名需添加A解析记录指向主机IP,域名购买、解析(国内VPS需备案)的过程请自行搜索。

SSH工具

SSH工具是我们用来以命令行的方式远程操作服务器端。Putty小巧、免费,Xshell功能更强大,但是收费。笔者使用的是Putty,点此下载(最新版),注意本地操作系统,自行下载相应版本安装。如何使用SSH工具连接VPS,请看阿里云的官方教程

本地端配置

本地配置很简单,依次安装好Node.js和Git,再安装Hexo即可,Hexo需要前两者的支持。本人是用的win10系统,本地端不需要什么配置,只要安装相应版本即可,Mac或Linux系统应该更容易。

安装Node.js

这里给出Node.js官方下载链接:https://nodejs.org/zh-cn/download/
安装没什么好说的,一路默认下一步即可。

安装Git

同样给出Git官方下载链接:https://git-scm.com/downloads
对应自己的本地系统下载即可,这个套件不仅仅在windows上安装了Git版本控制系统,最重要的是这个套件提供了Git Bash,一个可以在windows上运行的Linux风格shell,除非你够硬核,能忍受win的cmd,否则通过Git Bash使用hexo无疑是最佳选择。下图的选项建议勾选,视觉效果有明显提升。其余选项保持默认即可。

安装并熟悉Hexo

Hexo最好的教程当然是官方文档!先不用花时间全看完官方文档,这里稍微说下要点,部署好之后可以仔细研究官方文档。

首先是安装,在Git Bash下输入这条命令就安装Hexo了,简单吧。不过这仅仅是把Hexo的程序写进了系统,网站还没有部署好。

npm install -g hexo-cli
  • 注意:npm在国内被墙了,国内用户需要挂代理,否则输入命令后半天没反应。这里推荐一个最好的办法。每次要用npm命令时,先输入以下命令行。
npm config set registry https://registry.npm.taobao.org

接下来熟悉怎么使用Hexo

  1. 首先建立一个站点

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

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

    以上,也可以先新建一个文件夹,直接右键Git Bash Here。然后hexo init即可。

  2. 新建一篇文章

    hexo new <title>

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

  3. 编辑文章
    就是编辑你新建的md文件啦。这就需要markdown编辑器喽,当然mac就省事了,对于win系统,Typora和MarkdownPad编辑器,看个人喜好选择。

  4. 启动本地服务器

    hexo s

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

    这里要吐槽一下,若Win安装了Foxit PDF阅读器会占用4000端口,需要用hexo s -p 5000命令把端口换成5000来执行启动。或者把foxit文件夹里的某个protect.exe删除,是它占用了4000端口。

  5. 生成静态文件

    hexo g

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

  6. 部署到服务器

    hexo d

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

掌握以上命令基本就OK了,还有一条hexo clean用来清理缓存,其他的一般用不到,有兴趣的再看官方文档。接下来我们看VPS服务器端配置。

VPS服务器端配置

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

创建用户

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

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

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

yum install sudo

再次,为了方便,赋予hexo用户root权限,使用vi命令在/etc/sudoers中添加一行。不会vim编辑临时搜一下,简单,当然也可以通过宝塔面板进行可视化操作。

vi /etc/sudoers

找到这一行添加:

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

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

这里为什么要用到Git呢?因为这里的Hexo发布博客是用Git来部署的,而Git又是基于ssh连接的,所以实现一键发布博客就得配置这玩意了。其实很简单,有的教程复杂化了,注意这里最后一步是在本地端操作。

  1. 服务器端生成ssh密钥

    su hexo
    cd /home/hexo
    mkdir .ssh
    cd .ssh
    ssh-keygen -t rsa

    在生成密钥时,会要求你输入一个加密密码,可以不填写(一路回车),实现无密码登陆。完成后会在/home/hexo/.ssh/文件夹下生成2个key,一个公钥id_rsa.pub,一个私钥id_rsa,编辑此文件夹中的authorized_keys文件(如没有则新建一个),把公钥里面的内容全部复制粘贴进去(包含公钥开头的ssh-rsa)。然后把公钥和私钥2个文件下载到本地,后面会用到。

  2. 服务器端确保配置及权限正确(这一步仅为确保,可暂时忽略,若后面ssh连接不成功可返回此步骤检查)

    查看/etc/ssh/sshd_config文件配置是否如下:

    HostKey /etc/ssh/ssh_host_rsa_key
    RSAAuthentication yes
    PubkeyAuthentication yes
    AuthorizedKeysFile .ssh/authorized_keys

    确保用户hexo.ssh文件夹及相关密钥文件权限正确

    chown -R hexo:hexo /home/hexo
    chmod 700 /home/hexo
    chmod 700 /home/hexo/.ssh
    chmod 644 /home/hexo/.ssh/authorized_keys //公钥文件的所有权限
    chmod 600 /home/hexo/.ssh/id_rsa //私钥文件的所有权限

    查看是否有安装ssh并安装,没有的话使用yum安装

    rpm -qa |grep ssh //检查是否有ssh
    yum install ssh //如果没有ssh运行,则执行此命令安装ssh

    安装完后启动服务

    service sshd start
    service sshd status //检查是否已启动,看到running即可
  3. 本地端ssh配置

    打开Git Bash,输入pwd查看本地用户的文件夹地址,如下图,一般默认在C:\User\你的账户名。然后打开用户文件夹里的.ssh文件夹,把刚刚从服务器上下载到本地的两个密钥文件拷贝进去。

  4. 本地端ssh验证

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

OK,无密码ssh登陆完成,配置过程注意是在本地端还是服务器端操作。如果连接不成功,返回上述第2步检查。

安装配置nginx

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

  1. 添加nginx源,安装nginx
    /etc/yum.repos.d目录下创建一个yum源文件nginx.repo,用vi编辑或用宝塔写入如下内容。

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

    安装nginx(宝塔里面也有一键安装nginx,不过这种方式更简单)

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

    rm /etc/nginx/conf.d/*

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

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

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

  3. 修改nginx配置文件
    /etc/nginx/nginx.conf中第一行的user值修改为hexo

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

    su hexo
    cd ~
    mkdir www
  5. 验证配置是否正确,如下图。

  6. 启动nginx服务并测试

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

    在浏览器中输入你的域名或VPS的IP地址,出现hello nginx字样表示nginx代理服务器搭建成功!

安装配置Git

即将完成任务~

  1. 安装Git

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

    cd ~
    mkdir hexo.git
    cd hexo.git
    git init --bare //初始化git仓库,bare表示空仓库
  3. 配置Git仓库的hooks

    hooks,钩子,就是将不同目录的数据实现同步。具体如下,在Git仓库hooks目录下创建文件post-receive并修改权限

    cd hooks
    touch post-receive
    chmod 755 post-receive

    将以下内容添加到post-receive

    #!/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部署模块

国内用户别忘记挂代理。

npm install hexo-deployer-git --save

修改站点配置文件_config.yml

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.shup.cn #这里修改你的网址或者IP
root: /

部署项配置:

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

部署验证

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

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

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

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

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