如何搭建个人网页（三）—— 图床

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 2.4k 阅读时长 ≈ 4 分钟

开始

在markdown里插入的图片是默认保存在本地的，这样发布到线上之后肯定是无法看到的，因此我们需要借助图床来存储这些图片，本章将会讲如何购买oss，如何使用，以及typora的快速配置。

这一章其实与网页的搭建没什么直接关系，可以先暂时跳过。

本章特别鸣谢：lollipop

一 购买和配置OSS（对象存储服务）

为什么要用到OSS

Markdown 是一种轻量级的标记语言，常用于撰写博客文章、文档、论坛帖子等。在 Markdown 中插入图片时，通常需要用图片的 URL 来链接和显示图片。如果将图片直接存储在本地，博客更新、迁移或备份时可能会出现问题，因此我们常常将图片存储到图床中，然后markdown中插入这些图片的链接，就可以在任何地方都能看到这些图片了。

那么如何获得一个图床？OSS（对象存储服务） 可以作为图床的后端存储服务，提供图片存储、管理和分发功能。将图片存储到 OSS 中，可以利用 OSS 提供的高性能、高可靠性、低延迟的存储和访问能力，同时结合CDN 加速，确保全球用户快速访问图像资源。OSS 作为图床的后端存储，不仅可以支持图片的上传和存储，还可以根据需求提供各种功能，如图片处理、自动缩放、格式转换等。

一般好的OSS都是收费的，当然也有免费的OSS，但效果不好，我选择阿里云OSS。

简而言之：希望markdown中的图片可以在任何地方浏览 —-> 用图床存图片 —->购买OSS当图床

购买和配置OSS

阿里云 OSS（Object Storage Service）是阿里云提供的一种安全、可靠、高效的云存储服务，专为海量数据存储和管理而设计。它支持大规模的文件存储和高并发数据访问，提供了灵活的存储管理、数据备份、灾备、内容分发等功能。OSS 可以存储各种类型的数据，如图片、视频、音频、文档等，广泛应用于网站托管、数据备份、媒体处理等领域。

我们选择购买阿里云OSS，具体步骤如下：

  1. 注册一个阿里云账号（如果没有），建议用手机号注册，不会忘记。

  2. 访问阿里云官网OSS服务：对象存储 OSS_云存储服务_企业数据管理_存储-阿里云，点击立即购买。

  3. 按所需的配置选择，我这里选的是 OSS资源包/标准-本地冗余存储/华东5（南京-本地地域）/40GB/3年，价格为27元。

    image-20241212232603586

  4. 进入控制台（右上角），点击资源概览/我的资源/对象存储OSS，然后点击左边的Bucket列表，创建Bucket，起一个名称，依次选择地域-南京/标准存储/本地冗余存储，然后完成创建。

  5. 此时可以看到刚刚创建的bucket，点进去，左边栏选择“权限控制/阻止公共访问”，将其关闭；然后“权限控制/读写权限”，改为公共读。这样别人才能看到里面的东西。

此时OSS就基本设置好了，我们可以在bucket里上传图片，然后复制文件url，最后在markdown插入图片时，填写该url即可。

二 Typora快速配置

前面提到，尽管我们已经可以使用oss了，但这样还是太麻烦，可以对typora进行一些配置，这样我们在用typora写markdown时，插入图片会直接在oss里存储图片，非常方便，具体步骤如下：

  1. 进入OSS控制台，再进入刚刚创建的bucket，左边栏选择“权限控制/访问控制RAM”，然后点击“前往RAM控制台”。

    f11d4f9ff052fc2e847c48da7ac555fb

  2. 点击左边栏“身份管理/用户”，然后创建用户。

    15303e3326b5b02336dec73c23b8f476

  3. 填写名称，勾选“使用永久AccessKey访问”。

    image-20241212235220229

  4. 此时可以看到AccessKeyID和AccessKeySecret，这个页面只会显示一次！记录下来，很关键。

    image-20241213150502524

  5. 回到刚刚的用户界面，给刚刚创建的用户添加权限，全选然后确定。

  6. 打开Typora，依次点击文件/偏好设置/图像，按下图所示选择，然后点击下载或更新（这里可能需要梯子）。

    c0ba21abb93799b19c2eb4e6420de246

  7. 点击打开配置文件，参考如下填写并保存，这里的accessKeyId和accessKeySecret在第4步中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
        "picBed": {
            "uploader": "aliyun",
            "current": "aliyun",
            "aliyun": {
                "accessKeyId": "xxxxxxxx",
                "accessKeySecret": "xxxxxxxxx",
                "bucket": "jinqiqing-bucket",
                "area": "oss-cn-nanjing",
                "path": "img/"
            },
            "transformer": "path"
        },
        "picgoPlugins": {
            "picgo-plugin-super-prefix": true
        },
        "picgo-plugin-super-prefix": {
            "prefixFormat": "YYYY/MM/DD/",
            "fileFormat": "YYYYMMDD-HHmmss"
        }
    }

  8. 点击“验证图片上传选择”，测试是否成功。

设置好了以后，在用typora写markdown时，直接将图片插入，就会自动上传到你的OSS中。

继续

接下来我们将回到个人网页，讲述如何安装和使用Hexo-Next——一种hexo主题，用来美化和丰富我们的网站。