美文网首页
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