都说 hexo 是静态的 Blog,当时不明觉厉= =。后来终于知道了什么意思......所谓的静态,其实就是因为你不能改云端,而是依赖本地数据,然后使用命令将本地数据变成 web 数据再使用浏览器进行查看......因为这玩意显然要在本地处理,所以每次本地修改之后还要上传到 git 或者是服务器所以看起来麻烦点而已 ......

Local

Hexo 这个东西的数据全部是本地式的 QwQ,包括主题样式文章啥的都是的,所以本地非常重要,服务器云端反而不难搞了。

Step1

安装必要工具

sudo apt install npm
sudo apt install nodejs
npm install hexo-cli -g

Step2

安装Hexo。

创建一个文件夹,名字自选,使用终端进入这个目录,接下来的操作后Hexo的相关文件将全部会在里面(O3O)。

hexo init
npm install

然后文件夹下的东西基本上就全了,安装完成,接下来是本地基本操作。

Step3

Hexo命令。

Hexo 的命令行在第一步里已经安装好了,那么接下来注视着你的文件夹内的东西,并使用命令hexo g看看。

你会发现多了一个 public 文件夹对不对,那就是对本地数据整合之后将会在浏览器上展示的结构,全在里面的。这时候,你再运行hexo clean试试 -- public 就消失啦!这就是清除缓存,而 g 命令可以理解为编译整合文件得到缓存。

然后就是新建文章,这里命令很简单:hexo new 文章名。然后就会生成文章名.md这样的玩意= =,那么文章在哪里呢?在你装Hexo文件的目录的source/_post下,你就会发现它,然后你就可以直接编辑了。删除?直接在编辑的那个文件夹里删掉文章就好了。

Hexo的另一个核心命令就是hexo s,它的作用就是在本地展现你的网站,使用这个命令后,在浏览器里打开localhost:4000即可看到效果。

Service

Step1

安装必要工具。

首先需要将文件传上来,这里我们选择使用 git ,然后对于网页展示我们使用久负盛名的 nginx。

sudo apt install nginx git-core

Step2

Hexo仓库与权限。

git 传上来需要有个仓库,那么我们新建一个仓库,就叫 hexo.git。

mkdir hexo.git
cd hexo.git
git init --bare

然后来到/var/www文件夹下,我们的网页就会存放在这里的某一个文件夹下,这里我们创建一个文件夹hexo,然后赋予它操作权限,同时赋予自己权限来操作它。

mkdir hexo
chmod 0755 hexo
chown root:root -R /var/www/hexo

Step3

nginx 与 git 配置。

我们首先注意到,当我们将本地网页文件传上来之后,我们可能还要到服务器端操作一番,以能够将网页文件放到/var/www/hexo下展示,这样太麻烦了。怎么办?很简单,git自带一个功能,那就是只要有文件传输它就会执行某个脚本。那么我们怎么做呢?写个脚本就好了!

vim hexo.git/hooks/post-receive 看你的文件夹建在哪里吧

向其中输入:

!/bin/bash

GIT_REPO=~/hexo.git                      # 触发 hook
TMP_GIT_CLONE=/tmp/hexo # 存在 /tmp 下
PUBLIC_WWW=/var/www/hexo # 展示网站的目录
rm -rf ${TMP_GIT_CLONE} # 删除之前内容
git clone $GIT_REPO $TMP_GIT_CLONE # 将 Git 仓库上传的内容复制到/tmp
rm -rf ${PUBLIC_WWW}/* # 删除展示网站的目录的全部内容
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW} # 将/tmp所有内容复制到网站目录

保存退出即可。

然后你在浏览器里兴奋地输入你服务器的IP地址,并回车!然而并没有成功= =

因为我们还需要向 nginx 写入配置,将/var/www/hexo作为主目录。

cd /etc/nginx/sites-available
vim default

然后将内容删除,写上:

server {
listen 80;
listen [::]:80; root /var/www/hexo;
index index.html index.htm index.nginx-debian.html; server_name 你的域名;#如果没有的话就别填了QwQ location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
root /var/www/hexo;
access_log off;
expires 1d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
root /var/www/hexo;
access_log off;
expires 10m;
}
location / {
root /var/www/hexo;
if (-f $request_filename) {
rewrite ^/(.*)$ /$1 break;
}
}
}

然后:wq保存退出,然后使用

service nginx restart

重启nginx即可,然后你在浏览器地址栏中输入服务器IP,就会展现你/var/www/hexo目录下的网页文件内容了!

Local Update Setting

Step1

安装上传插件。

总还是要依赖一个插件的= =

npm install hexo-deployer-git --save

Step2

安装上传插件。

在本地的 Hexo 文件存放文件夹下,有一个 _config.yml 编辑它,在底部加上:

deploy:
type: git # 设置上传模块为 Git
repo: root@服务器IP:hexo.git # 连接到服务器
branch: master # 存储在 master 分支(主分支)

Step3

上传

在 Hexo 本地文件夹下运行:

hexo clean && hexo g && hexo d

然后输入服务器密码,然后浏览器上打开网站,上传完成!

Hexo搭建(VPS)的更多相关文章

  1. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)

    前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...

  2. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)

    前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...

  3. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

  4. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

    前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...

  5. 使用 GitHub 和 Hexo 搭建个人独立博客

      Wordpress这类博客系统功能强大,可对与我只想划拉的写点东西的人,感觉大材小用了.而且wp需要部署,网站的服务器也会带来问题,国内的服务器首先需要备案,费用不低:国外服务器访问速度受影响.近 ...

  6. 利用Hexo搭建个人博客-博客发布篇

    通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...

  7. 利用Hexo搭建个人博客-博客初始化篇

    上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境.相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面,让 ...

  8. 利用Hexo搭建个人博客-环境搭建篇

    我是一个爱写博客进行总结分享的人.然而,有着热爱写博客并且深知写博客好处的我,却没有好好的把这个习惯坚持下来.如今毕业已经一年多了吧,每一次与师弟师妹们聊天,我总会意味深长的建议他们,一定要定期梳理总 ...

  9. 使用Hexo搭建专属Blog

    喜欢折腾的自己最开始在博客园有仿写几篇Blog,虽也可以自己改变风格,可是到底不是独立的一块儿地方,要知道独立的才是自己的;有属于自己独立的域名和Blog,真真是一件很爽的存在.在各种大牛的分享下在G ...

随机推荐

  1. 直流-直流(DC-DC)变换电路_BUCK&BOOST变换电路

    1. 直流—直流变换器通过对电力电子器件的通断控制,将直流电压断续地加到负载上,通过改变占空比改变输出电压平均值. BUCK线路原理图如上,其中Q管/MOS作为开关管,驱动电压一般为PWM. 当开关管 ...

  2. PLSA主题模型

    主题模型 主题模型这样理解一篇文章的生成过程: 1.          确定文章的K个主题. 2.          重复选择K个主题之一,按主题-词语概率生成词语. 3.          所有词语 ...

  3. Linux基础命令---杀死进程pkill

    pkill pkill可以给指定的进程发送信息,它可以结束某个执行的进程或者目录登录的用户. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedo ...

  4. vue组件通信之任意级组件之间的通信

    <div id="app"> <comp1></comp1> <comp2></comp2> </div> ...

  5. 垂直打击之JVM剖析

    让Java应用程序运行是一回事,但让他们跑得快就是另外一回事了.在面对对象的环境中,性能问题就像来势凶猛的野兽.但JVM的复杂性将性能调整的复杂程度增加了一个级别.这里Refcard涵盖了JVM in ...

  6. 【react开发】使用swiper插件,loop:true时产生的问题解决方案

    这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...

  7. Vue小案例 之 商品管理------批量删除与商品数量的调整

    通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName ...

  8. fjwc2019 D2T2 定价 (栈+set+贪心)

    #182. 「2019冬令营提高组」定价 先瞄下数据范围 对于所有数据,1≤n≤1000,1≤m≤10^9,1≤q≤500000 .\textbf{2 操作的个数不超过 1000.} $10^9$位, ...

  9. mybatis 3.2.*打印sql结果集

    虽然可以写个interceptor记录下,但是总归没有log4j来的自然.一段时间不查问题,总是要忘了,记录下: 在mybatis 3.2.*中,可以在log4j中如下配置: log4j.logger ...

  10. mysql "The user specified as a definer ('root'@'%') does not exist" 问题

    在重配mysql的时候碰到, 解决办法: 重新授权 grant all privileges on *.* to root@"%" identified by ".&qu ...