博客搭建

发表于 | 分类于 ，
字数统计: 2.2k | 阅读时长 ≈ 9

本文是自己在vps上搭建hexo博客的记录，跟随本文 可以从零开始 搭建属于自己的博客。我的配置环境是WIN10 + CentOS7

VPS购买和搭建SSR

我选择的云服务器是vulr， 网络上有许多服务商可以选择 比如 digitalOcean， 搬瓦工，或者国内的阿里云等等。
关于vps的购买和使用自建vps服务器 SSR 已经有了很好的说明。
tips:

  1. 上述教程 中 不推荐 centOS7 实测 centOS7 搭建 ssr 以及 bbr 加速 没有 问题

  2. 在 搭建好 ssr 后 重新 变动vps 同网络相关的设置 比如 bbr 加速 nginx 配置等 会导致 ssr 无法使用。 实测 通过 删除 此前添加的ssr 账户 并且重新添加 可以恢复

hexo介绍

hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。hexo 有以下4个merits:

  1. 超快速度:Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染

  2. 一键部署:只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

  3. 支持 Markdown:Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

  4. 丰富的插件:Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

在本地安装hexo依赖环境

hexo 依赖于Node.js 以及Git 因此安装这两项。
首先是Node.js 通过Node.js 下载， 步骤比较简单 可以参考这篇教程

接下来是安装Git 在本机上没有的同学可以参考廖雪峰老师的教程

在本地安装hexo

我的local 环境 是win10 ， 首先进入刚才安装的git 

1
2
3
4
5
6
7
cd d:/hexo #切换到你的博客目录 如果没有 新建
npm install hexo-cli -g # 安装hexo
hexo init blog
cd blog
npm install
hexo g
hexo s -p 5000

至此 hexo 就安装好了 检查localhost:5000 页面 我们能够看到默认的hexo博客

hexo 命令介绍

关于hexo 的常见使用和命令 推荐查看上文所述的hexo 官方文档
最常用的包括

1
2
3
4
5
6
hexo new 文章名
hexo generate #生成博客
hexo server -p 5000 # 在本地预览 -p 指定端口 默认端口为 4000
hexo deploy # 部署至服务器
hexo clean # 清理此前的内容
hexo new page pagename # 之后的教程会用到

常用简写 

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

配置服务器环境

服务器环境选择 centOS7 以及 nginx

安装nginx

连接vps 接着 

1
2
3
4
5
6
7
yum install epel-release
yum install nginx
systemctl start nginx.service # 启动服务
systemctl enable nginx.service # 设置Nginx跟随系统启动
firewall-cmd --permanent --zone=public --add-service=http # 添加防火墙 并重启
firewall-cmd --permanent --zone=public --add-service=https
firewall-cmd --reload

接下来可以在本地浏览器 输入 vps IP 测试 Nginx 是否启动

配置虚拟主机

虚拟主机可以在一台服务器上绑定多个域名，架设多个不同的网站，一般在开发机或者要部署多个小网站的服务器上需要配置虚拟主机

创建新的网站目录

Nginx 默认把网页文件存在 /var/www/html 目录。为了方便期间，我们在 /var/www/目录下为每个站点创建一个文件夹。 

1
2
3
4
sudo mkdir -p /var/www/blog/html
sudo chown -R $USER:$USER /var/www/blog/html
sudo chmod -R 755 /var/www
vi /var/www/blog/html/index.html # 创建测试页面

在vim 下编辑 如下内容 

1
2
3
4
5
6
7
8
<html>
   <head>
       <title>Welcome!</title>
   </head>
   <body>
       <h1>Success! Working...</h1>
   </body>
</html>

调整配置文件

在 etc/nginx 目录下 使用 vim 编辑 默认 配置文件 nginx.conf 

1
vim etc/nginx/nginx.conf

调整一下内容 注意去除所有的注释 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#    server {
#        listen       80 default_server;
#        listen       [::]:80 default_server;
#        server_name  datacq.top www.datacq.top;
#        root        /var/www/blog/html;
#       index        index.html index.htm index.nginx-debian.html;
#       #root         /usr/share/nginx/html;
#       
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#       location ~ /.well-known {
#        allow all;
#       }

重启服务器 这时候再次访问 vps ip 因该能够看到 刚才编写的测试 index 页面 

1
sudo systemctl restart nginx

部署本地hexo 到 vps

hexo 的部署方式 有很多 本文采用常见的git的方式 部署

在vps 上安装git 创建仓库 编写post-receive 脚本

1
2
3
4
5
6
yum install git # 安装git
cd ~ # back to home
mkdir blog.git && cd blog.git # 在VPS上创建空白git仓库
git init --bare
cd  /root/blog.git/hooks/ 
vim post-receive

编辑内容：

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/root/blog.git  #git仓库
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/var/www/blog/html #网站目录
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

1
chmod +x post-receive  #赋予脚本的执行权限

配置local enviroment

在本机blog目录下运行下面命令，安装git部署工具 

1
npm install hexo-deployer-git --save

修改 hexo blog 的配置文件 _config.yml 中的部署相关内容 

1
2
3
4
5
deploy:
  type: git
  message: update
  repo: root@192.168.1.1:/root/blog.git/ # change ip address to your vps's
  branch: master

之后 就可以 按照此前 所属的办法 在本地预览 以及 部署至服务器

更换主题 Next

hexo 支持许多主题 可以参看hexo 主题网站 选择 自己喜欢的主题 Next 是一个使用人数较多 功能比较好的 主题 网络上美化的教程 也比较多
首先 是安装 Next 参见 推荐使用git 的方式 安装

主题美化

下面推荐几篇博客 讲述关于 配置 next 主题

  1. 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化

  2. hexo更换主题raytaylorism

MarkDown 写作

MarkDown 是一个简单的 标记语言， 在 hexo 中 使用markdown 语法 写作。
关于写作的文本编辑工具 推荐 vscode 以及 之上的 MarkDown All in One 插件。 不用安装别的编辑器 最重要的是 支持 实时预览 对于还不熟悉 markdown 语法的新手来说 这点很重要
下面给出 讲述 markdown 语法的两个 博文

  1. HEXO下的Markdown语法(GFM)写博客https://www.ofind.cn/blog/HEXO/HEXO%E4%B8%8B%E7%9A%84Markdown%E8%AF%AD%E6%B3%95/(GFM/)%E5%86%99%E5%8D%9A%E5%AE%A2.html

  2. markdown 语法说明

为hexo 配置SSL

SSL / TLS加密会为您的用户带来更高的搜索排名和更好的安全性。Let’s Encrypt 是一个认证机构（CA）。它可以提供免费证书，并且已经被大多数浏览器所信任。另外，通过工具 Certbot 可以让我们完全自动化证书的安装和更新。

下载Certbot

由于 Let’s Encrypt 的有效期是 90 天，到期后我们需要对证书进行续签，因此每隔一段时间就需要使用这个工具，建议将这个工具下载到 /sbin 目录。 

1
2
wget https://dl.eff.org/certbot-auto -O /sbin/certbot-auto
chmod a+x /sbin/certbot-auto

验证域名所有权

配置 Nginx，使要获取证书的域名对应的 80 端口可以正常访问。在 /etc/nginx/nginx.conf中server加入如下代码： 

1
2
3
location ~ /.well-known {
        allow all;
}
1
systemctl restart nginx # 重启nginx

使用 Certbot 签发证书

1
/sbin/certbot-auto certonly --webroot -w /var/www/blog/html -d www.datacq.top # 注意将参数替换为你自己的

注意 该命令的提示信息 他告诉我们 所获得的key 的存储地址 此后将会用到 在 /etc/letsencrypt/live/www.datacq.top 下 有两个 .pem 文件

修改 nginx.conf 文件

修改如下 ： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  www.datacq.com;
        root         /var/www/blog/html;
        #root         /usr/share/nginx/html;

        ssl_certificate /etc/letsencrypt/live/www.datacq.top/fullchain.pem; # 注意不要写错
        ssl_certificate_key /etc/letsencrypt/live/www.datacq.top/privkey.pem; #注意不要写错
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers on;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    server { # 监听80 http端口 将http 重定向至https
    if ($host = www.datacq.top) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
        listen 80;
        server_name www.datacq.top;
    return 404; # managed by Certbot
}
    server { # 监听80 http端口 将http 重定向至https
    if ($host =datacq.top) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
        listen 80;
        server_name datacq.top;
    return 404; # managed by Certbot
}

配置完后 重启 nginx

设置定时自动续签

正如前文提到的，Let’s Encrypt 证书的有效期只有 90 天，因此我们需要定期的对他进行续签，我们使用 cron 来设定计划任务。
编辑 crontab 文件： 

1
crontab -e

添加 certbot 命令：
在每天凌晨3点运行。该命令将检查服务器上的证书是否将在未来30天内过期，如果是，则进行更新。–quiet 指令告诉 certbot 不要生成输出。

1
0 3 * * * /sbin/certbot-auto renew --quiet

References：

  1. 用hexo搭建个人静态博客
  2. 手把手教你使用Hexo + Github Pages搭建个人独立博客
如果觉得有用的话，打赏我吧~