本站是如何建成的


总结下本站是如何搭建的
ps:本文仅适合对js和服务端有一定基础的人群

本站是基于Hexo框架创建的网站,使用了gal主题搭建,在vultr的centos7系统下跑的娱乐用博客网站。

技术汇总

nodejs
git
hexo
javascript
ejs模板
一些服务端命令

Hexo初始化

1、下载nodejs并安装;

2、下载git并安装;

3、安装hexo:npm install -g hexo-cli

4、安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install

安装主题

1、安装主题,参考hexo-theme-gal,一步一步跟着走就行了,或自行在主题寻找自己喜欢的主题安装;
ps1:该主题的友情链接和个人链接设为false是不生效的,因为代码中没进行这样的判断,如不需要请自行找到/themes/gal/layout/_partial下的sidebar.js修改
ps2:该主题默认使用的是gitment,本站将其改为gittalk,原因是gitment老是加载不出来,使用方法是找到引入gitment的方法的地方全都改为gittalk,新建一个gittalk.js进行初始化
ps3:这里有个巨坑,生成分类页和标签页的时候不仅要添加type还要添加layout~,否则出不来,具体请看hexo 下的分类和表签无法显示,怎么解决? - 虾哔哔的回答 - 知乎
例如

1
2
3
4
title: tags
date: 2018-12-09 17:26:37
type: tags
layout: "tags"

ps4:生成search和404后就不要管了,更改了title就不起作用了!

查看效果

主题安装完毕后,执行hexo server,访问http://localhost:4000 即可看到本地效果;

发布到服务器(这里使用的是起服务方式,对于hexo没必要,请使用静态方式部署,方法在最下面)

服务器上用nvm安装nodejs
wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
重启服务器(reboot)
nvm install stable

安装hexo脚手架npm install -g hexo-cli

创建文件夹
mkdir /data
mkdir /data/web
cd /data/web

本站是用xftp直接把代码拉到服务器的,后续再研究如何自动化部署

文件都上传到服务器后 npm install 自己根据自己的服务器位置决定是否更改淘宝源

利用screen把服务器挂后台
screen -S hexo
hexo server
先ctrl+a然后ctrl+d挂起

浏览器访问http://ip:4000 就能访问,如果不行请去服务器的管理台把4000端口打开

安装nginx (参考How To Install Nginx on CentOS 7)
sudo yum install epel-release
sudo yum install nginx
sudo systemctl start nginx //启动服务

如果有防火墙
sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

允许开机启动sudo systemctl enable nginx.service

访问ip能看到nginx就证明成功了

然后更改nginx配置
vim /etc/nginx/nginx.conf
把server改成如下

1
2
3
4
5
6
7
8
9
10
11
server {
listen 80;
server_name 您的域名;

location / {
proxy_pass http://localhost:4000;
}

access_log /var/log/nginx/blog.access.log;
error_log /var/log/nginx/blog.error.log;
}

这时重启nginxsudo systemctl restart nginx后访问你的ip或域名即可看到刚刚部署的网站

后续写文章请在本地hexo new “title” 写文章,具体请看hexo官方文档

添加阿里云免费一年的https证书

去阿里云提交申请填写好对应信息即可

提交完信息后需要在dns解析设置TXT 把阿里云提供的主机记录和记录值填写进去保存,再回ssl证书列表页面点击验证即进入待审核状态,剩下就是等待审核通过;
审核通过后下来证书,这里用nginx方式部署

nginx.conf中新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
listen 443;
server_name 您的域名;
ssl on;
root html;
index index.html index.htm;
ssl_certificate "/etc/nginx/cert/ssl.pem";#路径自己填写
ssl_certificate_key "/etc/nginx/cert/ssl.key";#路径自己填写
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:4000;
}
}

然后在原有的http server 80端口添加
rewrite ^(.*)$ https://$host$1 permanent;
强制跳转到www下
rewrite ^(.*) $https://www.$server_name$1 permanent;
即可实现输入域名跳转到https下

重启nginxsudo systemctl restart nginx即可看到具体效果

2018/12/9 更新静态文件部署

研究了下自动化部署,发现对于有自己服务器的人每个方式都是巨坑,最简单的还是xftp拉到服务器,然后执行hexo clean && hexo g生成静态文件
然后nginx的

1
2
3
location / { 
proxy_pass http://localhost:4000;
}

修改为

1
2
3
4
location / {
root /data/web/public; #这里的路径是值生成的静态文件目录public的路径,请根据自己的情况更改
index index.html;
}

其他不用修改,然后重启即可

静态文件方式就不用启动服务器了

如果你在本地执行hexo再上传那连nodejs和hexo都不用装,仅需安装nginx即可~