SOUSIC

哈库呐玛塔塔

0%

Nginx搭建基于Hexo的Blog

发表于 更新于 分类于 Valine：
本文字数： 4.4k 阅读时长 ≈ 4 分钟

一、基础知识

  1. 框架有三种选择：(Jekyll、Hexo、WordPress)
  1. Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，简单来说就是你输入ip/域名时帮你打开网页文件的。

二、本地环境

MacOS 、Linux 、Window安装过程不同，具体请看Hexo官网教程。本篇以MacOS为例。

1. 安装Git

1) MacOS:

1
brew install git

2) Linux

  • Ubuntu,Debian: sudo apt-get install git-core
  • CentOS: sudo yum install git-core
  • 验证是否安装成功：git --version

2. 安装NodeJs

NodeJS官网有提供安装包：https://nodejs.org/en/download/ 下载安装即可
验证是否安装成功：node --version
如果出现版本信息即安装成功

3. 安装Hexo

1) 安装

1
npm install -g hexo-cli

有的是用npm install -g hexo

他们的不同之处请看Hexo 与 Hexo-cli 的关系、入门教程

2) 使用

本地创建一个文件夹存放Hexo的博客源码，cd进该文件夹后输入: hexo init ProjectName（这里的ProjectName就是你的项目文件名称，如 hexo init blog）。完成后源文件夹会出现如下目录结构：

目录

cd 进该文件夹(如blog)后输入hexo s -debug或者hexo server 就能启动项目了。如果启动成功会出现以下提示：

在浏览器输入localhost:4000 就能访问项目了。

初始使用是Hexo的默认主题，我们也可以使下载NexT的主题配置，将下载后的next文件夹直接丢到themes文件夹中即可，具体使用方法请查看NexT官网。或者下载其他hexo主题

三、服务器

ps:如果使用github.io，只需以 github用户名.github.io 为名建立一个仓库就行了，之后可以用 github用户名.github.io 访问博客

服务器，域名，备案等自行查看参考文章。

1. SSH连接远程服务器

1
ssh USERNAME@IP

USERNAME为服务器用户名，一般阿里的的服务器初始用户名为root，IP为你的公网IP地址，如：ssh root@111.111.111.111

2. 配置SSH公钥

1) 生成公钥

1
ssh-keygen

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

2) 将本地公钥拷贝到服务器

1
ssh-copy-id USERNAME@IP

如果之前已经生成过的，用以下命令：

1
ssh-copy-id -i sshPATH USERNAME@IP

如:ssh-copy-id -i .ssh/id_rsa.pub root@111.111.111

id_rsa是私钥，id_rsa.pub是公钥，要传到服务器的是公钥.pub（参考三、1）

3) 只需要在步骤最后输入一次服务器密码，以后再连接SSH就不需要输入密码了

3. 安装Git

1
sudo apt-get install git-core

4. 安装Nginx

1
sudo apt-get install nginx

启动nginx：

1
service nginx start

然后你在浏览器中输入自己的公网IP，可以看到如下就证明nginx安装成功：

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

1
mkdir /var/www/blog

6. nginx的配置

我的Nginx版本是1.10.3，一般nginx配置文件夹是在/etc/nginx/下的，如果是其他版本的，先搞清楚自己的配置文件夹在哪里的，有的是在/usr/下。

目前找到三种配置的办法

1) 网上大部分教程都是在 /etc/nginx/conf.d 这个文件夹下 vim FILENAME.conf.d 来创建一个配置文件，在里面写入

1
2
3
4
5
6
7
8
server{
    listen 80;//端口号
    server_name _;//域名
    root /var/www/blog;/*网站根目录，出于权限问题考虑，建议把网站配置在www文件目录下*/
    location / {
        index index.htm index.html
    }
}

但是我试了很多次都没有成功，不太清楚conf.d目录下的配置怎么载入的。

2) 修改总配置文件

首先备份一下nginx.conf ：

1
2
cd /etc/nginx
cp nginx.conf nginx.conf.bak

然后vim修改 /etc/nginx/nginx.conf ，把server模块里的端口号(listen)、域名(server_name)、根目录(root)改为和1）相同。
因为nginx.conf是总配置文件，某个小错误可能会导致网站打不开，所以更推荐第三种。

3) 修改 /etc/nginx/sites-available/default

vim /etc/nginx/sites-available/default
同上，把server把server模块里root后面改为你的网页根目录。本例是改为root /var/www/blog;
注：如果需要配置多个虚拟主机，需要用ln -sf /etc/nginx/sites-available/* /etc/nginx/sites-enabled创建软连接，具体请查看参考

然后重启Nginx

1
service nginx restart

7. Git的建仓与配置

建仓：
第1）步和第2）步有两种方法

方法一：

1) 创建一个文件夹存作为git仓库

1
mkdir PATH/FILENAME

如：mkdir ~/blog.git
然后 cd ~/blog.git

2) 建仓

1
git init --bare

方法二：

1）

1
cd ~

2）

1
git init --bare FILENAME

如：git init --bare blog.git

3）如果新建了用户，或者不是root（管理员）账号，还需要修改仓库的权限：

1
chown -R USERNAME:GROUP FILENAME

比如新建了一个用户git来建站，则 chown -R git:git ~/blog.git
本例没有这一步，就略过修改权限
配置hooks：

1
2
cd ~/blog.git
vim post-receive

在post-receive中写入：

1
2
3
#!/bin/bash
rm -rf /var/www/blog
git clone /root/blog.git /var/www/blog

或者：

1
2
#!/bin/bash
git --work-tree=/var/www/blog --git-dir=/root/blog.git checkout -f

赋予这个文件夹权限：

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

四、本地Hexo配置

回到本地的机器上，进入你的hexo文件夹（就是你完成hexo init的那个）
找到_config.yml, 修改里面的deploy：

1
2
3
4
deploy:
  type: git
  repo: USERNAME@IP:GitPath //如：root@111.111.111.111:/root/blog.git
  branch: master

注：USERNAME指的是你的服务器用户名，本例是root
IP是指你服务器的公网IP
GitPath是服务器上的Git仓库路上，按上面的流程应该是：/root/blog.git

如果使用的是github.io，那么整个repo就改为你的github仓库地址，如：https://xxx.github.io

五、发布项目

1.cd进你的hexo根目录（就是你完成hexo init的那个）

1
2
hexo generate
hexo deploy

或者hexo g -d

如果显示not fount git，是因为我们没有在这个项目中安装git插件：

1
npm install hexo-deployer-git —save

安装完后再来一遍 hexo g -d

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

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

Hexo基本命令

1.新建文章

1
hexo new "文章名"

2.刷新(目的是删除原来的public文件夹，避免污染)

1
hexo clean

3.生成&&部署

1
hexo g -d

主题配置

还不错的主题

参考：

ps:

如果想在首页不显示某篇文章，只在分类中显示，可以修改 themes/next/layout/index.swig 文件，把

1
2
3
4
5
6
{% block content %}
  <section id="posts" class="posts-expand">
    {%- for post in page.posts %}
      {{ partial('_macro/post.swig', {is_index: true}) }}
    {%- endfor %}
  </section>

改为

1
2
3
4
5
6
7
8
{% block content %}
  <section id="posts" class="posts-expand">
    {%- for post in page.posts %}
      {%- if post.hide != true %}
        {{ partial('_macro/post.swig', {is_index: true}) }}
      {%- endif %}
    {%- endfor %}
  </section>

然后在要隐藏文章的md文件的front-matter中加上hide: true