美文网首页
hexo搭建个人博客并部署gitee

hexo搭建个人博客并部署gitee

作者: Mandy_Wang | 来源:发表于2021-03-25 16:12 被阅读0次

    一直想搭建一个自己的博客,但是总是用没有时间把自己的搪塞了。哈哈,今天终于忙里偷闲,完成了任务!


    既然用了hexo,那就记录一下吧

    一、环境准备

    • 安装nodeJs(使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)):

      http://nodejs.cn/download/

    • 查看安装版本:node -v,npm -v

    二、安装Hero,并搭建项目

    npm install -g hexo-cli
    
    npm install hexo
    
    hexo init blog
    
    cd blog
    
    npm install
    
    hexo g
    
    hexo s
    
    1.png 2.png 3.png

    启动后查看页面 : http://localhost:4000/

    4.png

    三、安装主题

    主题有很多,可以到这里下载自己喜欢的主题--> (https://hexo.io/themes/)

    //hexo < 5.0
     git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer
     // hexo >= 5.0
     npm i hexo-theme-ayer -S
    

    找到myblog配置文件_config.yml,找到theme添加:theme: ayer,然后执行命令:

    hexo g
    hexo s // 指定端口(hexo s -p 4001)
    [hexo官网地址](https://hexo.io/zh-cn)
    
    5.png

    四、使用Hexo Admin插件

    安装

    npm install --save hexo-admin

    生成

    ``shell
    hexo s -d

    
    #### **进入页面编辑**
    
    http://localhost:4000/admin/
    
    ![6.png](https://img.haomeiwen.com/i14845154/4b90ca795405ca14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    ### 五、本地使用图片
    
    #### 1. 安装插件
    
    ```shell
      npm install hexo-asset-image --save
    

    2. 配置文件_config.yml

    post_asset_folder: true

    3. 打开文件

    /node_modules/hexo-asset-image/index.js

    4. 修改index.js

    'use strict';
    var cheerio = require('cheerio');
    
    // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
    function getPosition(str, m, i) {
      return str.split(m, i).join(m).length;
    }
    
    var version = String(hexo.version).split('.');
    hexo.extend.filter.register('after_post_render', function(data){
      var config = hexo.config;
      if(config.post_asset_folder){
            var link = data.permalink;
        if(version.length > 0 && Number(version[0]) == 3)
           var beginPos = getPosition(link, '/', 1) + 1;
        else
           var beginPos = getPosition(link, '/', 3) + 1;
        // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
        var endPos = link.lastIndexOf('/') + 1;
        link = link.substring(beginPos, endPos);
    
        var toprocess = ['excerpt', 'more', 'content'];
        for(var i = 0; i < toprocess.length; i++){
          var key = toprocess[i];
     
          var $ = cheerio.load(data[key], {
            ignoreWhitespace: false,
            xmlMode: false,
            lowerCaseTags: false,
            decodeEntities: false
          });
    
          $('img').each(function(){
            if ($(this).attr('src')){
                // For windows style path, we replace '\' to '/'.
                var src = $(this).attr('src').replace('\\', '/');
                if(!/http[s]*.*|\/\/.*/.test(src) &&
                   !/^\s*\//.test(src)) {
                  // For "about" page, the first part of "src" can't be removed.
                  // In addition, to support multi-level local directory.
                  var linkArray = link.split('/').filter(function(elem){
                    return elem != '';
                  });
                  var srcArray = src.split('/').filter(function(elem){
                    return elem != '' && elem != '.';
                  });
                  if(srcArray.length > 1)
                    srcArray.shift();
                  src = srcArray.join('/');
                  $(this).attr('src', config.root + link + src);
                  console.info&&console.info("update link as:-->"+config.root + link + src);
                }
            }else{
                console.info&&console.info("no src attr, skipped...");
                console.info&&console.info($(this));
            }
          });
          data[key] = $.html();
        }
      }
    });
    

    5. 使用图片

    新建页面 自动生成存放文件夹

    hexo new daily # 自动生成 daily的文件夹
    # 使用
    [图片上传失败...(image-f2a535-1616659862866)]
    

    简单的使用完成了 下次有时间再分享更详细的hexo使用


    人生是旅途,也许终点和起点会重合,但我们如果一开始就站在起点等待人生的完结,那人生就会是一片苍白,其中没有美丽的风景和令人难忘的过往。当我们告别人生的时候,也不知道生命的色彩和意义。所以活在当下,从现在开始,做自己开心和喜欢的事。

    相关文章

      网友评论

          本文标题:hexo搭建个人博客并部署gitee

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