使用个人服务器搭建hexo博客

教大家怎么用服务器搭建hexo博客

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 hexo官网

开始安装

服务器配置: 某讯学生机(CentOS 7.2 64位)应为便宜嘛,虽然现在1块钱的学生机取消了,但是还是在可以的。
本地环境:win10

安装前提

  1. Node.js的安装

    1).node.js官网下载安装程序(win推荐)

  2. Git安装

    • Windows:下载并安装 git.
    • Mac:使用 Homebrew, MacPortsbrew install git;或下载 安装程序 安装。
    • Linux (Ubuntu, Debian):sudo apt-get install git-core
    • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core
  1. hexo安装

    以上必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

    1
    $ npm install -g hexo-cli

本地站点

安装Hexo后,在指定shift+鼠标右键打开Git Bash Here就会弹出在当前目录下的git命令行,并执行以下命令

1
2
3
$ hexo init <folder>        ---hexo 初始化目录
$ cd <folder> ---进入hexo目录
$ npm install ---安装依赖

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

ps: 我第一次安装时总是蜜汁报错,一脸懵逼。后面才发现原来init Heox的时候好像是默认安装的,所以安装前请看下根目录package.json下是否已经安装

目录各文件详细介绍 推荐仔细看一下

以上三部操作后 创建新的文章

new

1
$ hexo new [layout] <title>

generate

1
$ hexo generate

生成静态文件。

server

1
$ hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/ 输入server后命令行会提示地址。

以上正常操作下即可在本地环境观看自己所搭的博客,请确保以上都已实现。 hexo官网有更详细的步骤介绍

服务器环境(默认root权限)

在这里我小小的安利一波腾讯云(ps:只是小小安利),应为它带一个开发者实验室这简直对linux和后端小白的福音,深受win的毒害的我,没有图形界面就是不舒服。。。在这里可以限时试用腾讯云的服务器虽然有时间但时间足够你去操作,再一个这里面每一个实验环境都可以去试。。如果怕把自己的服务器玩坏,可以先到这里熟练一下练练手。(ps:如果你想买他的服务器的话请点这里)

服务器所需

  • 安装Nginx

    1
    yum install -y git nginx

ps: 在开发者实验室nginx详细教学

  • Nginx 配置
    创建文件目录, 用于博客站点文件存放, 并更改目录读写权限
    1
    2
    3
    -p /data/www/hexo
    -R $USER:$USER /data/www/hexo
    -R 755 /data/www/hexo

添加 index.html 用于检测配置 Nginx 是否成功

1
vim /data/www/hexo/index.html

添加如下代码:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<p>配置 Nginx成功</p>
</body>
</html>

配置 Nginx 服务器

1
2
3
vim /etc/nginx/nginx.conf

# vim 查找: /listen 80

通过 vim 查找功能找到如下代码, 并修改

1
2
3
4
5
6
7
8
......
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name www.xxx.com; # 填写个人域名 写不写都无所谓
root /data/www/hexo; #改成你刚才写的路径,nginx将会监听该目录下的index.html文件
}
......

ps: 在这如果你不熟悉vim等操作的话,还是推荐来这图形化界面开发者实验室nginx详细教学

直接访问服务器 IP 或者域名显示

Nginx 配置成功

则Nginx 配置成功。。。。

如果看不懂就去跟着开发者实验室nginx详细教学这个教程走下去,更详细的了解一下nginx

  • Git 配置
    创建文件目录(为方便查找故于nginx托管目录放一起), 用于私人 Git 仓库搭建, 并更改目录读写权
1
2
3
-p /data/GitHeox
-R $USER:$USER /data/GitHexo
-R 755 /data/GitHexo

Git 初始化裸库

1
2
cd /data/GitHexo
git init --bare hexo.git

创建 Git 钩子(hook)

1
vim /data/GitHexo/hexo.git/hooks/post-receive

用于指定 Git 的源代码 和 Git 配置文件

1
2
#!/bin/bash
git --work-tree=/data/www/hexo --git-dir=/data/GitHexo/hexo.git checkout -f #注:路径保持一致

写入post-receive保存并退出后, 给该文件添加可执行权限。(该文件是不会自己生成,需手动(vim)创建)

1
chmod +x /data/GitHexo/hexo.git/hooks/post-receive

觉得操作不便均可在之前推荐的nginx开发者实验室继续操作。

最后一步:

找到刚才初始化hexo根目录下_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
title: 页面标题     //页面标题
subtitle: 小标题 //小标题
description: 描述 //描述
author: 作者 //作者
language: zh-Hans //语言
timezone: //时区

# URL
### If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
### url: //个人域名

......

# Deployment
### Docs: https://hexo.io/docs/deployment.html
deploy: //发布对应的github账号 可空
type: git
repo: root@118.xxx.xxx.xx:/data/GitHexo/hexo //用户名@域名或IP地址:/data/GitHexo/hexo

这一步就相当于你要本地的仓库匹配连接服务器的git仓库,所以ip和路径不能有错。

  • 清除缓存(以后一般最好对hexo执行操作前都清一次缓存,免得蜜汁报错)

    1
    hexo clean
  • 生成静态页面:

    1
    hexo generate
  • 将本地静态页面目录部署到云服务器

    1
    hexo deploy

    素质三连后,会弹出窗口让你输入服务器密码,正确输入密码后即可上传。

    现在已经完成 Hexo 个人博客网站搭建, 即可通过服务器 IP 或者域名即可访问

    如果想换主题,我是用了next主题进去官网有详细教程,在这我就不多说了。。

    感谢您看到最后!阿里嘎多