Nginx搭建基于Hexo的Blog

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

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

1. 首先

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


2. 搭建

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

  1. 安装Git

    1
    2
    3
    4
    5
    6
    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

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

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

    验证方法:

    1
    2
    git --version
    node --version

  3. 安装Hexo

    1
    $ 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用户

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

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

  2. 配置SSH公钥

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

    1. 生成公钥

      1
      ssh-keygen

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

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

      1
      ssh-copy-id root@IP

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

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

      参考:博文

  3. 安装Nginx

    1
    yum install -y nginx

    启动Nginx服务

    1
    service nginx start

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

    证明nginx安装成功

  4. 安装git

    1
    sudo apt-get install git-core
  5. 创建一个网站的根目录(用于存放网站的部署的静态文件)

    1
    2
    cd /
    mkdir var/www/Test
  6. 建立git仓库

    1
    2
    3
    cd /home/
    git init --bare Test.git
    chown -R git:git Test.git
  7. 配置hook

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

    post-receive中写入:

    1
    2
    3
    #!/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

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

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

  8. 配置Nginx

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

    输入以下内容:

    1
    2
    3
    4
    server{
    listen 8080;
    root /var/www/Test;
    }

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

    重启Nginx

    1
    service nginx restart


4. 本地Hexo配置

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

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

1
2
3
deploy:
type: git
repo: root@IP:Test.git

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


5. 发布项目

部署项目:

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

1
2
hexo generate
hexo deploy

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

1
npm install hexo-deployer-git --save

等待安装完成后:

输入:

1
2
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.


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