小伙伴们,大家好丫,经过几天的折腾,总算把我的项目页面弄得差不多啦。虽然加载速度还是有点抱歉,但整体上已经有模有样啦,O(∩_∩)O。今天的话,就来梳理一下从无到有如何搭出来一个项目,技术有限,也请大家多多指正哈。
  如果你没有自己服务器的话,而且只是弄着玩玩,不怎么经常性去维护的话,可以考虑部署到github或者coding呢,这里暂时只讲部署到github,coding类似。如果你有自己的服务器,并且想更多推广出去的话,那可就要好好多打理啦。本文采用的主要是hexo来搭建。

内容版本
本地系统ubuntu 16.04 LTS
服务器腾讯云
服务器系统ubuntu 16.04 LTS
域名jarrychen.xyz(已备案)
nginx1.10.3
nodejs10.16.3
npm6.12.1
提交搜索引擎BaiduGoogle,搜狗
360,NaverBing
Yandex,神马

  以下内容如果是用sudo apt-get install的话,缺少依赖时应先运行sudo apt-get update,其他的内容后续想到再补充。

1. 安装nodejs1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 此处采用的是源码安装,需要时间较久
cd /data
mkdir nodejs
cd nodejs //进入到你要放nodejs压缩包的地方,eg: /data/nodejs
wget https://nodejs.org/dist/v10.14.2/node-v10.14.2.tar.gz
//版本号详细可上官网看,建议下载最近且稳定的版本,可以避免不少坑
tar -zxvf node-v10.14.2.tar.gz
cd node-v10.14.2
./configure
make
make install //较久
node -v
npm -v //此为验证是否安装成功
// 若要npm比较稳定
// npm install -g n
// sudo n stable

2. 安装git2

1
sudo apt-get install git  //一句命令即可

3. hexo-cli

(1). 安装hexo-cli

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//需要使用npm来安装该模块
//但npm有时安装包可能卡住或者因为被墙了下载不下来,推荐换成国内的镜像
//此处采用的是taobao的
npm config set registry https://registry.npm.taobao.org

npm install -g hexo-cli //安装hexo脚手架
hexo -v //验证是否安装成功

//然后找一个你喜欢的文件夹
hexo init yourBlog

cd yourBlog
npm install //先安装一些初始必要的依赖

hexo clean //清除已经生成的页面
hexo g //生成静态页面
hexo s //运行hexo
hexo d //部署,需先配置好部署地方
  • node_modules: 依赖包
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 框架的配置文件

(2). 配置hexo3

  安装完毕后的主题默认是landscape,如果你不喜欢的话,可以上[这里](https://hexo.io/themes/)查阅有什么主题,我采用的是MiHo主题。   基础的配置可以查看下方主题设计者的文档

  • MiHo中文文档4

4. 添加一些功能

  • 标签云
  • 播放器
  • 访问统计
  • 计算字数与阅读时间
  • live2d
  • 推荐阅读
  • mathjax支持数学公式
  • 打赏

5. 部署到服务器上(ubuntu)

(1). 安装nginx

1
2
3
4
5
6
7
8
9
//为了方便和快一点,这里采用的是apt-get安装,不采取源码安装
sudo apt-get install nginx

//按y执行安装过程,若报缺少依赖,则
sudo apt-get update
sudo apt-get install nginx

//即可
//安装完毕后,浏览器输入云主机ip看到nginx欢迎页面即成功

(2). 配置nginx

  这一步比较琐碎,包括设置项目的根目录,配置http跳转https,自定义404页面,gzip压缩提高加载速度等等。不过在进行这些之前,最关键的前置步骤是需要有一个可以用的域名,指已备案,且添加解析记录到你的云主机,并且申请ssl证书上传到服务器中。


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
//进行了前面这些操作后
cd /etc/nginx //进入nginx的安装目录

cd conf.d //在此处创建ssl.conf配置http跳转https
touch ssl.conf
vim ssl.conf //此处根据自己的域名证书所在的路径,对下面eg进行替换

e.g:
server{
listen 80;
server_name domainname;
rewrite ^(.*)$ https://${server_name}$1 permanent; //这里是设置跳转最重要的地方,重定向到https上
}

server{ //https的配置
listen 443 ssl http2;
server_name domainname;
ssl on;
ssl_certificate 1_domainname_bundle.crt;
ssl_certificate_key 2_domainname.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location / { //指向项目根目录
proxy_redirect off;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:4000/; //hexo是在4000端口上运行
}
}


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
46
47
48
49
//https的跳转上面配置完还不可以,还需要配置一处地方
//在nginx目录中
cd site-available
vim default

//在server中添加
server_name localhost;
location / {
root webapproot; //你的webapp的路径
index index.html index.htm index.nginx-debian.html;
try_files $uri $uri/ = 404;
}

//然后
nginx -t //查看是否配置出错
//没有的话
nginx -s reload
service nginx restart //输入域名访问即可跳到安全的https

//搞定这个后,剩下的是配置自定义404页面和开启gzip压缩了
//404这个看个人喜好了,开启gzip压缩是很有必要的,多少能提高加载速度
cd /etc/nginx
vim nginx.conf

//配置404,在默认的配置文件中的http里添加这一段
server_tokens off;
proxy_intercept_errors on;
//这里偷懒把所有错误码都定位到404页面了
error_page 403 404 500 502 503 504 /404.html;
server {

location /404.html {
root 404页面的路径;
}
}


//开启gzip压缩
### Gzip Settings ##

gzip on; //开启gzip压缩
gzip_disable "msie6"; //针对ie浏览器要设置的
gzip_min_length 1k; //最小被压缩长度,小于这个大小的不会被压缩
gzip_vary on;
# gzip_proxied any;
gzip_comp_level 2; //压缩力度,越大压缩越厉害但耗性能,这里够用了
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png video/mp4 audio/webm video/ogg; //要压缩的文件格式

(3). 安装pm2模块

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
//这里安装pm2模块的目的是为了让你的项目持久化运行
//正常的hexo server,关掉窗口后也就停止运行了
//所以需要它来帮助运行

npm install -g pm2 //全局安装

//写一个运行的脚本
const {exec} = require('child_process')
exec('hexo s',(error,stdout,stderr)=>{
if(error){
console.log('exec error:${error}')
return
}
console.log('stdout:${stdout}');
console.log('stderr:${stderr}');
})

//保存为xx.js到你的根目录
//运行
pm2 start xx.js

//会发现把窗口关掉,去浏览器还是能照常访问

//这里每次运行hexo的几句命令都好麻烦,有没有方法可以减少呢?
//答案是有的
//编辑根目录的package.json,修改里面"script"部分
//在其中添加"build"字段
//内容写上

hexo clean && hexo g && gulp(可选) && hexo d && pm2 restart xx.js
//其中gulp是压缩代码,即把你那些html,js,css代码“丑化”,图片压缩大小
//分别表示清除已生成,重新生成,压缩,部署,持久化运行

(4). 安装hexo-admin

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
//如果你是部署到服务器上,每次上去黑窗口写或者写完再上传都比较麻烦
//自己懒得做管理端的话,是否有方便的方法来写文呢
//答案是有的,就是hexo-admin插件

cd yourBlog
npm install hexo-admin --save

hexo s
//输入根目录地址+/admin/即可登录,首次无需输入账号密码
//这毕竟是一个管理端,总不能让人随便访问
//找到页面中的settings

//点击下面的 Setup authentification here 。
//填写用户名,密码,和加密串

//然后把生成的账号,密码,和加密串等信息写到_config.yml配置文件中
//即在_config.yml中添加
admin:
username: yourusername
password_hash: yourpassword_hash
secret: your secret
command: './admin_script/hexo-generate.sh'

//然后再次运行打开相同路径即可触发登录
//为了更愉快的写文章
//可以给配置中再加个command,里面写上hexo clean && hexo g
//即每次写完总是重新生成静态文件,方便一些

6. 部署到github5

(1).安装插件并配置

1
2
3
4
5
6
7
8
//先安装部署到github上所需要的插件
npm install hexo-deployer-git --save

//进入根目录修改__config.yml文件
deploy:
type: git
repo: git@github.com:OwnerName/OwnerName.github.io.git
branch: master

(2).配置github并部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//生成ssh keys
ssh-add ~/.ssh/id_rsa

//然后
cd ~/.ssh
sudo gedit id_rsa.pub

//将内容复制下来后,登陆github,右上角进入settings
//选择SSH and GPG keys
//然后new SSH key,将复制的内容粘贴上去,保存

//新建一个respository
//命名为OwnerName.github.io

ssh -T git@github.com //测试连接是否成功

//出现下列语句则表明已经连上
Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.

//接下来
hexo clean
hexo g
hexo d //即可部署上去,之所以hexo clean,hexo g,是重新生成防止有坑

7. 提交给搜索引擎以下是各搜索引擎对应的站点提交入口





本文标题:Hexo 框架搭建项目

文章作者:JarryChen

发布时间:2019年11月01日 - 12:57

最后更新: 2020年01月04日 08:09

原始链接: https://jarrychen.xyz/archives/fc9bb284.html

× 请我喝奶茶~
打赏二维码