搭建hexo博客

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

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

1. 安装nodejs^1

// 此处采用的是源码安装，需要时间较久

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. 安装git^2

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). 配置hexo^3

  安装完毕后的主题默认是landscape，如果你不喜欢的话，可以上这里查阅有什么主题，我采用的是ocean主题。
  基础的配置可以查看下方主题设计者的文档

· Ocean中文文档^4

4. 添加一些功能

· 标签云

· 摘要

· 评论

· 访问统计

· 计算字数及阅读时间

· 音乐-网易云外链

· 背景织网特效

· live2d

· 运行时间

· 图片懒加载

· 推荐阅读

· 版权信息

· 在线联系

· 支持数学公式

· 多渠道分享

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

(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. 部署到github^5

(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.

//接下来

<span style=";font-family:'Times New Ro