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

内容 版本
本地系统 ubuntu 18.04 LTS
服务器 腾讯云 ( 已转至github.io )
服务器系统 ubuntu 16.04 LTS
域名 jarrychen.xyz(已备案)
nginx 1.10.3
nodejs 10.16.3
npm 6.12.1
提交搜索引擎 BaiduGoogle,搜狗,360,NaverBingYandex,神马

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

1. 安装nodejs1

// 此处采用的是源码安装,需要时间较久
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

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

3. hexo-cli

(1). 安装hexo-cli

//需要使用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,如果你不喜欢的话,可以上这里查阅有什么主题,我采用的是Sakura主题。
  基础的配置可以查看下方主题设计者的文档

  • Sakura中文文档4


4. 添加一些功能

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


5. 部署到服务器上

(1). 安装nginx

//为了方便和快一点,这里采用的是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证书上传到服务器中。

//进行了前面这些操作后
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端口上运行
     }
}

//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模块

//这里安装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

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

//先安装部署到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并部署

//生成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. 提交给搜索引擎以下是各搜索引擎对应的站点提交入口