美文网首页
从WordPress转Hexo小记

从WordPress转Hexo小记

作者: fatesnight | 来源:发表于2018-11-19 19:50 被阅读0次

       之前准备搭建博客的时候,直接是买了阿里云上面的WordPress镜像服务器,从Mysql到PHP环境到WordPress已经搭建好了,只要稍微做点修改就能用。之后吧,由于WordPress对于Markdown的支持实在太差,导致写博客只能Markdown写完之后转HTML传到服务器上,再在博客里写一个链接放主要内容。之后也比较受不了WordPress的臃肿,加上hexo的一些主题如Next确实很简洁优雅,下定决心转hexo。
       Wordpress是传统的PHP加HTML加CSS加JS的网页形成格式,操作方式是直接网页登录控制台进行操作。hexo主要是在本地主机用node.js按照主题格式静态渲染完你用md格式写的文章形成网页文件,然后上传到你服务器上的网站根目录上完成访问。


    回顾一下迁移过程中遇到的主要问题和大概流程:

    ssh公钥和私钥的开启

    这个主要是由于每次用hexo写博客要用hexo d这个命令将本地文件传输到服务器上。然后如果不开启ssh公私钥认证的话,每次都要输入服务器用户的密码,十分麻烦。

    开启过程大概如下:
    1、在终端输入ssh -keygen -t rsa则会用rsa标准生成一对公钥和私钥。这个过程中你可以选择输入一个密码,也可以直接按enter跳过,密码输入选择为空。之后你能够cd ~/.ssh在这个文件夹里找到生成的私钥id_rsa和公钥id_rsa.pub。
    2、之后需要把公钥放在服务器上,这个网上有很多方法,最简单的方式是ssh-copy-id–i ~/.ssh/id_rsa.pub root@(你的网址域名或者ip)这种方法不需要我们手动进行文件的创建,相应的文件内容会自动的追加进去。输入之后会叫你输入你服务器的登录密码,输入之后完成公钥的传输。
    3、然后vim /etc/ssh/ssh_config去里面修改一项#PermitFileLogin,确定后面是yes。

    让hexo和你的服务器配合

         hexo的安装就不说了,网上教程很多,但是网上大多是hexo+GitHub的搭建方式,所以大多用git的方式传输,用git的方式要设置hooks钩锁之类的,还要创建一个git用户,比较麻烦。对于直接用服务器搭建,这里有一个较简单的方法。

    用Rsync完成文件传输

    先在hexo的主目录下npm install hexo-deployer-rsync --save安装Rsync。
    在主目录下打开vim _config.yml在里面修改如下内容

    deploy:  
      type: rsync  
      host: <host>  
      user: <user>  
      root: <root>  
      port: [port]  
      delete: [true|false]  
      verbose: [true|false]  
      ignore_errors: [true|false]
    

    port默认是22,host是ip地址或者域名,user输root,root是你网站在服务器上的根目录。

    同时服务器端也要安装Rsync

    对于centOS
    yum install rsync即可

    把wordpress占用的网站根目录文件夹改成hexo

         本来在服务器的www文件夹下新建了一个hexo的文件夹,并把刚刚设置Rsync的root的路径指向了这个文件夹,然后把apache里的配置文件httpd.conf的网站根目录也进行修改。但是问题是修改了之后那个文件夹的所有者和组都得调成www用户组,这样才能使得网站正常登陆。
         或者就直接把Rsync的root的路径指向原来的网站根目录(对于阿里云的wordpress镜像默认是/home/www/htdocs)这样hexo会直接把原来和WordPress相关的东西全部删除,然后把自己渲染完的东西输入进去,这样也不错,十分省事,就是得记得wordpress上的东西和文章要先在控制台用导出功能导出为xml格式的文件,之后可以直接在hexo上导入。

    调整成hexo解决图片插入有黑色边框的问题

    到对应主题的主文件夹下
    vim /source/css/_common/components/post/post-expand.styl在这个文件里面找到下面的内容,按如下方式进行修改,就能使得插入的图片边上不再有影响美观的细细黑框:

    img {
        box-sizing: border-box;
        margin: auto;
        padding: 0px;
        border: 0px ;
    
      }
    

    让百度和谷歌能检索到你的文章

    第一步:下载站点认证文件

    百度认证链接
    谷歌认证链接
    认证的步骤都是按照网页上的提示先下载对应的HTML认证文件。直接拷贝到hexo文件夹的source文件下面

    第二步:下载插件和修改_config.yml

    然后先打开终端安装两个插件,这两个插件会根据你的博客文章自动帮你生成站点文件(这个东西之后需要主动提交给百度和谷歌)

    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
    
    

    还需要在hexo的根目录下打开_config.yml(上图最左上的那个文件),在里面的末尾加上:

    # 自动生成sitemap
    sitemap: 
      path: sitemap.xml
    baidusitemap: 
      path: baidusitemap.xml
    

    在这个文件里面还需要在20行左右的地方作如下修改,在skip_render下面写入你的认证文件名,这是告诉hexo不要对这些文件进行其他处理,直接传到服务器对应目录下面

    第三步:完成认证和站点地图的上传

    修改完这些之后就可以在hexo主目录下用终端输入hexo clean``hexo g -d来渲染并把文件传输到服务器。

    打开服务器根目录里面大概会有这么几个文件:

    其中sitemap.xml和baidusitemap.xml就是刚刚提到的用于生成站点地图的文件,可以看到其余两个验证文件也在里面了。

    这时候就可以在刚刚打开的百度和谷歌的站点认证上完成认证。然后还要在这两个站点管理网页提交你的站点地图,一般按照格式输入https://你的域名/sitemap(谷歌)https://你的域名/baidusitemap(百度)就行了。

    这时候验证基本就完成了。

    让hexo支持mathjax

    这个本来其实不算什么大问题,很顺利地看网上教程改完了,不过由于一开始的一个CDN地址停止支持了,找了好久才换到新的支持的。

    主要参考CSDN上的这篇博客

    记录一下关键的更换CDN的地址,去themes/next下面的_config.yml把原来失效的CDN改为新的即可

    # MathJax Support
    mathjax:
      enable: true
      per_page: true
      #cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
      cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    
    

    相关文章

      网友评论

          本文标题:从WordPress转Hexo小记

          本文链接:https://www.haomeiwen.com/subject/dgoafqtx.html