Nginx搭建基于Hexo的Blog

最新推荐文章于 2024-10-11 19:26:10 发布

TyCoding

最新推荐文章于 2024-10-11 19:26:10 发布

阅读量7.1k

点赞数 6

文章标签： hexo blog Nginx

本文链接：https://blog.csdn.net/TyCoding/article/details/80480541

版权

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

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

1. 首先

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

2. 搭建

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

安装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

安装 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

安装Hexo
```
$ npm install -g hexo-cli
```
你可以选定一个文件夹路径为存放这个博客源码的路径，然后在终端输入 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域名都必须备案，不备案是不能访问的。请购买之前慎重选择，因为备案相对而言比较麻烦，历经时间比较长，具体可以查看阿里云官网介绍。如果大家对备案有什么疑惑欢迎联系我哦！

SSH连接远程服务器
注意：博主这里使用的Ubuntu服务器系统，登录后默认是root用户
```
ssh root@IP
回车之后输入密码即可登录
```
注意：这个IP是指你服务器的公网IP
配置SSH公钥
在连接ssh的时候，每次都要输入密码，而且你每次部署项目到云主机也要输入密码，是不是觉得很麻烦呢？（还有就是hosts.allow对IP管理很严格，可能你连接SSH密码输入错误次数超过三次，你的IP就被封掉了），所以这里我们就要配置公钥登录，从而避免每次连接SSH都要输入密码
1. 生成公钥
```
ssh-keygen
```
  注意：键入这个命令后，会提示让你给这个公钥配置密码（passphrase），我们既然是为了避免多次输入密码，这里为什么还要给公钥配置密码呢，所以我们要一路回车，不理他（会出现三次）
2. 然后将本地公钥拷贝到服务器
```
ssh-copy-id root@IP
```
  注：这个IP是你服务器公网IP
3. 然后我们只需要输入这一次服务器密码，以后再连接SSH就不需要输入密码了
  参考：博文
安装Nginx
```
yum install -y nginx
```
启动Nginx服务
```
service nginx start
```
然后你在浏览器中输入自己的公网IP，可以看到如下：
证明nginx安装成功
安装git
```
sudo apt-get install git-core
```
创建一个网站的根目录（用于存放网站的部署的静态文件）
```
cd /
mkdir var/www/Test
```

建立git仓库

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

配置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
```

配置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，并布局好页面，你是不是也感觉挺方便的呢？总之，我们是站在巨人的肩膀上的，前辈们帮我们铺好了路，那么，加油！