Nginx搭建基于Hexo的Blog

实战用Nginx搭建基于Hexo框架的Blog，并部署到阿里云服务器上

博客的由来？想必有些童鞋就早已发现了，博主的这个博客系统与网上其他大佬的博客都相似，原因就是都采用了 Hexo 框架搭建的博客系统（优点就是Hexo框架通过Markdown文本来渲染页面，大家可以了解一下哦）。本博客采用了 NexT 的主题（在网站的footer部分可以看到），有没有感觉很好看呢！所以这里就带大家实战部署自己的 blog ，希望大家看了这篇博文都能够搭建出自己的博客系统。

1. 首先

我们需要了解一下 Hexo ，官方有详细的介绍，这里不再赘述。我们直接看实战：

2. 搭建

注意：MacOS 、 Linux 、Window用户会有所差别，请看一下 Hexo 官网教程。博主这里以MacOS为例。

1. 安装Git

   1. Window用户请直接下载Git
   2. MacOS用户请在终端中输入：git   回车后会自动提示你是否安装Git，点击安装就可以了
      或者在终端输入：brew install git
   3. Linux用户：
       Ubuntu,Debian:  sudo apt-get install git-core
       CentOS:         sudo yum install git-core

2. 安装 NodeJs

   
   首先NodeJS官网有提供安装包：https://nodejs.org/en/download/ 下载安装即可
   或者：
       $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
       $ nvm install stable

   如果以上两个都安装完毕就可以安装Hexo了。

   验证方法：

   
   git --version
   node --version

   ​

3. 安装Hexo

   
   $ npm install -g hexo-cli

4. 你可以选定一个文件夹路径为存放这个博客源码的路径，然后在终端输入 hexo init Test 初始化hexo，（这里的Test是你博客项目的名称，也可以指定为Blog）

   回车后出现类似以下代码：

   

   完成后就会发现我们的源文件夹会出现下列目录结构：

   

   然后我们使用终端利用cd命令进入这个文件夹中 cd Test

   进入项目源文件后，输入 hexo s —debug就能启动项目了：

   

   如果启动成功会出现以下提示（正常情况下都会启动成功的）：

   

   意思就是我们可以在浏览器输入：localhost:4000来访问项目了

   

   这里是使用的Hexo的默认主题配置，我们也可以使用NexT的主题配置，请到NexT官网下载，将下载后的next文件夹直接丢到themes文件夹中即可，具体使用方法请查看NexT官网： NexT

3. 部署到阿里云远程服务器

博主在这里就削微说两句个人的经历了，博主因是在校大学生，所以可以购买阿里云的学生机器（9.9/月），其他云暂时不清楚。买了服务器后就是买域名了，这里说一下，.cn和.com域名都必须备案，不备案是不能访问的。请购买之前慎重选择，因为备案相对而言比较麻烦，历经时间比较长，具体可以查看阿里云官网介绍。如果大家对备案有什么疑惑欢迎联系我哦！

1. SSH连接远程服务器

   注意：博主这里使用的Ubuntu服务器系统，登录后默认是root用户

   
   ssh root@IP
   回车之后输入密码即可登录

   注意：这个IP是指你服务器的公网IP

2. 配置SSH公钥

   在连接ssh的时候，每次都要输入密码，而且你每次部署项目到云主机也要输入密码，是不是觉得很麻烦呢？（还有就是hosts.allow对IP管理很严格，可能你连接SSH密码输入错误次数超过三次，你的IP就被封掉了），所以这里我们就要配置公钥登录，从而避免每次连接SSH都要输入密码

   1. 生成公钥

      
      ssh-keygen

      注意：键入这个命令后，会提示让你给这个公钥配置密码（passphrase），我们既然是为了避免多次输入密码， 这里为什么还要给公钥配置密码呢，所以我们要一路回车，不理他（会出现三次）

   2. 然后将本地公钥拷贝到服务器

      
      ssh-copy-id root@IP

      注：这个IP是你服务器公网IP

   3. 然后我们只需要输入这一次服务器密码，以后再连接SSH就不需要输入密码了

      参考：博文

3. 安装Nginx

   
   yum install -y nginx

   启动Nginx服务

   
   service nginx start

   然后你在浏览器中输入自己的公网IP，可以看到如下：

   

   证明nginx安装成功

4. 安装git

   
   sudo apt-get install git-core

5. 创建一个网站的根目录（用于存放网站的部署的静态文件）

   
   cd /
   mkdir var/www/Test

6. 建立git仓库

   
   cd /home/
   git init --bare Test.git
   chown -R git:git Test.git

7. 配置hook

   
   cd ~/Test.git/hooks
   vim post-receive

   在post-receive中写入：

   
   #!/bin/bash
   rm -rf /var/www/Test
   git clone /root/Test.git /var/www/Test

   意思就是删除/var/www/Test/下的文件，并将root/Test.git下的文件clone到/var/www/Test目录下，这里注意一下，之前说过博主这里使用的是Ubuntu服务器，登录默认给予的是root权限，所以这里的/root即为/home

   然后我们赋予这个文件夹权限：

   
   chmod +x ~/Test.git/hooks/post-receive

   ​

8. 配置Nginx

   
   vim /etc/nginx/conf.d/Test.conf

   输入以下内容：

   
   server{
       listen 8080;
       root /var/www/Test;
   }

   点击Esc键，然后输入:wq保存并退出

   

   重启Nginx

   
   service nginx restart

4. 本地Hexo配置

当我们完成了上述服务器端操作时候，就要回到本地，开始配置hexo

进入我们本地初始化的项目源文件中，看到有一个_config.yml文件，是整个项目的配置文件，打开在最后一行你会发现deploy字样，输入下列信息：

deploy:
  type: git
  repo: root@IP:Test.git

注意：这个IP是指你服务器的公网IP

5. 发布项目

部署项目：

cd 进入你本地hexo创建的项目中，输入

hexo generate
hexo deploy

完成以上操作后，如果你直接输入hexo d会发现显示not fount git，其实是因为我们没有在这个项目中安装git插件，cd进入项目源文件路径下输入：

npm install hexo-deployer-git --save

等待安装完成后：

输入：

hexo generate
hexo deploy

然后会让你输入你公网IP对应服务器的密码，输入完成后会生成一堆静态文件，并部署到远程服务器上

如果上述一切都操作成功，你就可以在浏览器输入：IP:8080查看你的项目了：

---

结束

到此为止，已经完成了一个项目的部署，你是否看明白了呢？博主开始搭建的时候搞了很长时间，然后百度了很多资料，最后才搭建完成，所以这里记录一下，提供给那些有想法搭建博客系统的童鞋。当然这仅仅是部署一个项目，想要呈现好看的页面，你还需要仔细研究Hexo框架的使用方法（又要踩一些坑啦），相对而言，Hexo框架帮我们做了很多事情，特别是我们写文章只需要写一个Markdown文档，Hexo就能自动帮我们生成静态Html，并布局好页面，你是不是也感觉挺方便的呢？总之，我们是站在巨人的肩膀上的，前辈们帮我们铺好了路，那么，加油！

交流

如果大家有兴趣，欢迎大家加入我的Java交流群：671017003 ，一起交流学习Java技术。博主目前一直在自学JAVA中，技术有限，如果可以，会尽力给大家提供一些帮助，或是一些学习方法，当然群里的大佬都会积极给新手答疑的。所以，别犹豫，快来加入我们吧！

联系

If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.

• Blog@TyCoding's blog

• GitHub@TyCoding

• ZhiHu@TyCoding