V-P-S 服务器搭建 hexo博客

一、V-P-S介绍

        V-P-S(Virtual Private Server 虚拟专用服务器)技术,将一台服务器分割成多个虚拟专享服务器的优质服务。实现VPS的技术分为容器 [1]  技术,和虚拟化技术 [2]  。在容器或虚拟机中,每个V-P-S都可分配独立公网IP地址、独立操作系统、实现不同V-P-S间磁盘空间、内存、CPU资源、进程和系统配置的隔离,为用户和应用程序模拟出“独占”使用计算资源的体验。V-P-S可以像独立服务器一样,重装操作系统,安装程序,单独重启服务器。V-P-S为使用者提供了管理配置的自由,可用于企业虚拟化,也可以用于IDC资源租用。

        这些VPS主机以最大化的效率共享硬件、软件许可证以及管理资源。每个VPS主机都可分配独立公网IP地址、独立操作系统、独立超大空间、独立内存、独立CPU资源、独立执行程序和独立系统配置等. V-P-S主机用户除了可以分配多个虚拟主机及无限企业邮箱外, 更具有独立主机功能, 可自行安装程序,单独重启主机。

二、Hexo介绍

        Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

三、环境准备

        v-p-s服务器:

            操作系统:Centos 7.4

            git

            Node.js

四、安装步骤

    1、更新系统yum源

        首先,进行服务端的系统更新,yum update -y

        image.png

    2、关闭系统防火墙和selinux

        systemctl stop firewalld

        systemctl disable firewalld

        vi /etc/sysconfig/selinux 

        image.png

    3、安装Git:

        sudo yum install -y git-core

        image.png

        查看git版本

        git version

        image.png

    4、安装Node.js,

        yum install -y nodejs

        image.png

        无法通过yum源安装 nodejs,可从官网上下载,然后进行安装:

        https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz

        下载下来 然后上传到服务器 也可以用wget下载

        安装wget        

        yum install -y wget

        image.png

        wget 下载 nodejs

        wget https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.xz

        image.png

        安装 nodejs

        tar --strip-components 1 -xvf node-v8.12.0-linux-x64.tar.xz

        node -v

        image.png

    5、安装hexo:

        npm install hexo-cli -g

        image.png

    6、初始化博客文件夹

        hexo init hexo

        image.png

    7、安装 hexo 的扩展插件

        cd hexo

        nmp install -y

        image.png

    8、生成静态页面

        hexo generate   或     hexo g

        image.png

    9、启动hexo服务

        hexo s

        image.png

    10、浏览登录:

        http://IP:4000

        image.png

    

五、安装nginx服务

    1、安装nginx

        yum install nginx -y

          image.png

        由于yum中没有nginx的安装包,需要其他方法进行安装

    2、  使用rpm安装nginx

        rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

        image.png

        yum install nginx -y

        image.png

    3、配置nginx

        vim /etc/nginx/conf.d/default.conf

        image.png

        vim /etc/nginx/nginx.conf 

           image.png

    4、重启服务、设置开机启动

        systemctl restart nginx

        systemctl enable nginx

        image.png

    5、浏览器认证

        http://域名

        image.png

        

六、更换主题

    1、关闭hexo服务

        按ctrl+c关闭server

        image.png

    2、切换到主题目录

        cd /root/hexo/themes

        image.png

    3、下载主题

        把需要的主题从GitHub网站上下载下来

        git clone https://github.com/litten/hexo-theme-yilia.git

        ls

        image.png

    4、重命名主题文件夹,然后修改配置文件

        cp -R hexo-theme-yilia/ yilia

        ls    

        image.png

        cd /root/hexo

        vim _config.yml 

        image.png

    5、重启服务

        systemctl restart nginx 

        hexo s

        image.png

    6、浏览器验证

        http://域名

        image.png       

 七、安装hexo-admin插件

    1、安装hexo-admin

        npm install --save hexo-admin

        image.png

    2、重启服务器、浏览器验证

        hexo s

        http://localhost:4000/admin/

        image.png

    3、设置后台密码

        修改站点配置文件:

        cd /root/hexo

        vim _config.yml 

        image.png

        备注:username  是用户名   password_hash是密码的哈希映射值。不同版本的node.js的哈希算法是不一样的。用服务端生成有效的密码哈希值

        image.png

    4、浏览器验证

        hexo s

        http://localhost:4000/admin

        image.png

    5、将hexo-admin 管理界面设置nginx

        每次访问hexo-admim管理界面,都需要输入 http://域名:4000/admin,可以将hexo-admin的管理界面设置到nginx服务。

        编辑nginx的配置文件:  vim /etc/nginx/conf.d/default.conf 

            image.png

        重启nginx服务:   systemctl restart nginx

        通过浏览器网页验证结果:http://域名/admin

            image.png

        

        

        

八、博客备份至github

    1、登录GitHub官网,注册账号或者登录账号:

        http://www.github.com

        image.png

        这里我以前已经注册过GitHub账号,登录后,显示该界面。

    2、创建新的仓库

        image.png

    3、填写新的仓库信息

        image.png    4、查看已经创建好的仓库

        image.png

    5、配置SSH

        在VPS服务器端运行以下命令,生成密钥:

        ssh-keygen

        直接敲三次回车,既可以生成id_rsa.pub文件,里面记录着SSH key的内容

        image.png

    6、复制SSH key

        vim ~/.ssh/id_rsa.pub

        image.png

    7、GitHub中进行配置

        打开刚注册的GitHub,点击Setting:

        image.png

    8、添加SSH key

        点击左边的 “SSH and GPG key”,然后点击“Net SSH key”

        image.png

    9、复制SSH key

        随便输入ssh key的title,然后将VPS服务器生成的SSH key粘贴到key的对话框中

        image.png

    10、查看已添加的SSH 

        image.png    11、测试SSH是否配置成功

        在VPS服务器端进行测试,输入以下信息:

        ssh -T [email protected]

        image.png

        提示测试已连接成功

    12、配置VPS服务器端的SSH

        打开Hexo目录下的_config.yml,光标移动至最下面,配置信息如下:

        vim _config.yml

        image.png

    13、备份hexo至GitHub:

        hexo clean

        hexo g

        hexo d

        image.png

        

        image.png

        image.png

        发现找不到git,需要执行以下命令:

        npm install hexo-deployer-git --save

        image.png

        再执行 hexo d

        image.png

    14、查看GitHub,是否同步

      image.png

 九、hexo管理界面在线发布

    1、 hexo是一种静态博客,平时写博客比较方便,但是没有后台管理,在修改博客或者写博客时会比较麻烦,在此使用了hexo-admin插件提供了在web UI下对博客进行增删改查。对于hexo-admin的 具体安装和配置,在上面的部分已经详细介绍,在此主要是使用deploy按钮实现在线发布。

    2、deploy的介绍

        hexo-admin有一个功能是deploy,具体的实现是使用nodejs的spawn函数来执行发布的脚本。  刚开始不懂spam的使用,后来查过很多资料,了解到deploy的输入位置是对hexo-admin的配置里面deployCommand选项,可以为空。但是需要注意的是,admin的添加需要在 deploy下面,不然会提示找不到脚本,我是找了很多资料才发现的。

    3、编写脚本

        最好将脚本存放在hexo的安装目录下,我的hexo目录是 :

     /root/hexo

       编写脚本:

        touch hexo-generate.sh;

         vim hexo-generate.sh;

        image.png


        备注:  命令详解

        cd /root/hexo        #切换到hexo目录

        hexo clean             #清除缓存文件 db.json  和已生成的静态文件 public       (网站显示异常时,可以执行这条命令试试。)

        hexo g                    # 生成网站静态文件到默认设置的public文件夹

        hexo d                    #  自动生成网站静态文件,并部署到设定的仓库。是 hexo deploy 的缩写。

    4、赋予执行权限

         chmod +x hexo-generate.sh 

        ll

        image.png

    5、修改_config.yml文件

        vim _config.yml

        image.png

    6、重启hexo服务

        hexo s

        image.png

    7、浏览器发布博客,进行验证

        image.png

    8、查看博客

        image.png

        

十、自动同步到GitHub

        通过上面的deploy,能够自动发布博客,但是登录Github,发现不能同步到Github中,查看deploy输出的错误信息,如下:

        image.png

    1、在~/ 下,touch创建文件 .git-credentials,用vim编辑器编辑此文件,输入内容格式:

            touch .git-credentials

            vim .git-credentials   文件内容如下:

            https://{username}:{password}@github.com               # username:GitHub的用户名     password:GitHub的密码

            image.png

    2、在终端下执行:

        git config --global credential.helper store

        image.png

    3、查看 ~/.gitconfig 配置文件:

        vim .gitcofig

        image.png

    4、同步测试

        image.png

    提示同步成功:

        image.png

    5、登录GitHub查看

            image.png

十一、设置每个文章在首页显示

        hexo在写作的时候,如果在文中添加<!--more--> 则该标记之前的部分就会成为该文章的简述,显示在首页里。文件的目录在:/themes/[主题名]/layout/_partial/article.ejs 其中的一段为:

        image.png

       从代码上看,post.excerpt 就是加了 more 标记之后的文章摘要,如果 post.excerpt 存在且在首页的话,则显示文章的摘要和「Read More」按钮。当不符合上述条件(post.excerpt 存在且在首页),就显示整个文章的内容 post.content。

        因为我需要的是在文章里没有 more 标记时自动添加标记,所以需要改动的代码是要放在 else 后面的。我打算在文章没有 more 标记的时候,截取文章的前两段作为摘要,如果文章少于两段,则直接显示整篇文章内容。 

        修改后的代码:

        image.png

十二、设置首页的所有文章链接

     1、安装插件

        在博客根目录(注意不是yilia根目录)执行以下命令:

        npm i hexo-generator-json-content --save

        image.png

    2、修改配置文件

        在根目录_config.yml里添加配置:

        

 jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

        image.png

    

        

        

               

        

             

        


        

        

        

        

        

        

       


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章