IPFS+IPNS搭建简单网页及更新内容

1. 如何在IPFS新增一个文件

1.1 新建file.txt文件

打开终端,切换到桌面,新建一个文件夹test,切换到test中,通过vi新建一个文件file.txt,文件里面随便输入yuyangray保存并且退出。

yuyangdeMacBook-Pro:~ yuyang$ cd /Users/yuyang/Desktop
yuyangdeMacBook-Pro:Desktop yuyang$ mkdir test
yuyangdeMacBook-Pro:Desktop yuyang$ cd test
yuyangdeMacBook-Pro:test yuyang$ vi file.txt

1.2 查看ipfs相关命令

yuyangdeMacBook-Pro:test yuyang$ ipfs help
USAGE
  ipfs - Global p2p merkle-dag filesystem.

  ipfs [--config= | -c] [--debug= | -D] [--help=] [-h=] [--local= | -L] [--api=]  ...

SUBCOMMANDS
  BASIC COMMANDS
    init          Initialize ipfs local configuration
    add     Add a file to IPFS
    cat      Show IPFS object data
    get      Download IPFS objects
    ls       List links from an object
    refs     List hashes of links from an object
  
  DATA STRUCTURE COMMANDS
    block         Interact with raw blocks in the datastore
    object        Interact with raw dag nodes
    files         Interact with objects as if they were a unix filesystem
    dag           Interact with IPLD documents (experimental)
  
  ADVANCED COMMANDS
    daemon        Start a long-running daemon process
    mount         Mount an IPFS read-only mountpoint
    resolve       Resolve any type of name
    name          Publish and resolve IPNS names
    key           Create and list IPNS name keypairs
    dns           Resolve DNS links
    pin           Pin objects to local storage
    repo          Manipulate the IPFS repository
    stats         Various operational stats
    p2p           Libp2p stream mounting
    filestore     Manage the filestore (experimental)
  
  NETWORK COMMANDS
    id            Show info about IPFS peers
    bootstrap     Add or remove bootstrap peers
    swarm         Manage connections to the p2p network
    dht           Query the DHT for values or peers
    ping          Measure the latency of a connection
    diag          Print diagnostics
  
  TOOL COMMANDS
    config        Manage configuration
    version       Show ipfs version information
    update        Download and apply go-ipfs updates
    commands      List all available commands
  
  Use 'ipfs  --help' to learn more about each command.
  
  ipfs uses a repository in the local file system. By default, the repo is
  located at ~/.ipfs. To change the repo location, set the $IPFS_PATH
  environment variable:
  
    export IPFS_PATH=/path/to/ipfsrepo
  
  EXIT STATUS
  
  The CLI will exit with one of the following values:
  
  0     Successful execution.
  1     Failed executions.

1.3 将file.txt添加到ipfs节点

yuyangdeMacBook-Pro:test yuyang$ ls
file.txt
yuyangdeMacBook-Pro:test yuyang$ ipfs add file.txt 
added QmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB file.txt
yuyangdeMacBook-Pro:test yuyang$ cat file.txt
yuyangray
yuyangdeMacBook-Pro:test yuyang$ ipfs cat QmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB
yuyangray

当执行完ipfs add file.txt这个命令以后,会将file.txt添加到ipfs当前的节点中,并且会对file.txt文件生成一个唯一的hashQmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB,如果想查看本地ipfs节点的数据,可以通过ipfs cat QmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB进行查看。

  • 当我试图通过http://ipfs.io/ipfs/QmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB进行数据访问时,却无法访问。

  • 虽然数据已经添加到当前的你自己的IPFS节点中,但是并没有同步到IPFS网络,所以暂时在网络上无法访问。

  • 接下来执行下面的命令同步节点数据到IPFS网络,再试图在网络上查看数据。

新建一个终端,执行ipfs daemon

yuyangdeMacBook-Pro:~ yuyang$ ipfs daemon
Initializing daemon...
Successfully raised file descriptor limit to 2048.
Swarm listening on /ip4/10.1.0.73/tcp/4001
Swarm listening on /ip4/127.0.0.1/tcp/4001
Swarm listening on /ip4/192.168.0.4/tcp/4001
Swarm listening on /ip6/::1/tcp/4001
Swarm listening on /p2p-circuit/ipfs/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97
Swarm announcing /ip4/10.1.0.73/tcp/4001
Swarm announcing /ip4/127.0.0.1/tcp/4001
Swarm announcing /ip4/192.168.0.4/tcp/4001
Swarm announcing /ip6/::1/tcp/4001
API server listening on /ip4/127.0.0.1/tcp/5001
Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8080
Daemon is ready

IPFS网络查看数据

浏览器访问https://ipfs.io/ipfs/QmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB

2. 通过ipfs创建目录存储文件

我们也可以通过ipfs的相关命令在ipfs的根目录下面创建文件夹,并且将file.txt文件移动或者拷贝到我们创建的文件夹中。

  • cp不会改变文件hash,mv会改变hash寻址。

创建文件夹

yuyangdeMacBook-Pro:test yuyang$ ipfs files mkdir /yuyang

拷贝文件

yuyangdeMacBook-Pro:test yuyang$ ipfs files cp /ipfs/QmWGCG977fHt4Cgf8HxnbX52wB2GGW2T5yqLMiVETvTdEB /yuyang/file.txt

查看文件目录

yuyangdeMacBook-Pro:test yuyang$ ipfs files ls /
yuyang
yuyangdeMacBook-Pro:test yuyang$ ipfs files ls /yuyang/
file.txt

读取内容

yuyangdeMacBook-Pro:test yuyang$ ipfs files read /yuyang/file.txt
yuyangray

3. 如何在IPFS新增一个目录

3.1 使用ipfs add -r可以上传一整个目录

在桌面新建文件夹ipfs_yuyang,其中有一个txt文件contactme.txt和一张图片ripndip.png

yuyangdeMacBook-Pro:test yuyang$ cd /Users/yuyang/Desktop
yuyangdeMacBook-Pro:Desktop yuyang$ ipfs add -r ipfs_yuyang/
added QmP3HhazUp27KRG4i5eHPkGNW6AMHEARQ1MafMjWykavLN ipfs_yuyang/contactme.txt
added QmSLnchQXh9gJrDKvQ5UFLZAj5f7icb2yWsWmcUKUYY3gj ipfs_yuyang/ripndip.png
added QmcKhzuT2rBMSNfYa1tSQv7sQzdYSQ4XRisy5f9oD9387s ipfs_yuyang

3.2 通过路径访问contactme.txt文件数据

如果我们上传的是目录,那么可以通过下面几种方式访问到contactme.txt文件的数据。

yuyangdeMacBook-Pro:Desktop yuyang$ ipfs cat QmP3HhazUp27KRG4i5eHPkGNW6AMHEARQ1MafMjWykavLN
contact yuyang
yuyangdeMacBook-Pro:Desktop yuyang$ ipfs cat /ipfs/QmP3HhazUp27KRG4i5eHPkGNW6AMHEARQ1MafMjWykavLN
contact yuyang
yuyangdeMacBook-Pro:Desktop yuyang$ ipfs cat /ipfs/QmcKhzuT2rBMSNfYa1tSQv7sQzdYSQ4XRisy5f9oD9387s/contactme.txt
contact yuyang

3.3 通过Hash查看数据IPFS网络数据

  • 访问目录:https://ipfs.io/ipfs/QmcKhzuT2rBMSNfYa1tSQv7sQzdYSQ4XRisy5f9oD9387s

  • 通过目录访问文件:https://ipfs.io/ipfs/QmcKhzuT2rBMSNfYa1tSQv7sQzdYSQ4XRisy5f9oD9387s/contactme.txt

  • 通过文件hash直接访问:https://ipfs.io/ipfs/QmP3HhazUp27KRG4i5eHPkGNW6AMHEARQ1MafMjWykavLN

4. 创建简易的网页发布到IPFS

在这里我先自己写一个简单的网页给大家演示,先在桌面新建一个site文件夹,然后按照下面的步骤在site文件夹中建立index.htmlstyle.css文件。

4.1 创建一个index.html文件




  
  Hello IPFS!
  


  

Hello IPFS!

4.2 创建一个style.css文件

h1 {
  color: green;
}

4.3 添加到ipfs

yuyangdeMacBook-Pro:Desktop yuyang$ ipfs add -r site/
added QmS4a85WLxie6Zy6Tntg6CccyGHyV4823Vo1vkjGBYhetP site/index.html
added QmZL2UBTwnhcLv66fARL9UV8W8a9ZA4iwTLcaUCsB1u1yW site/style.css
added QmPAygbESghBjPbLhGJAda5rA9GCBMHMGfgwLoB61DfnxX site

最后一行是项目根目录的hash,你先通过ipfs daemon同步网络,然后可以通过https://ipfs.io/ipfs/<你的项目根目录hash>,即https://ipfs.io/ipfs/QmPAygbESghBjPbLhGJAda5rA9GCBMHMGfgwLoB61DfnxX访问项目。

4.4 访问网站

浏览器打开https://ipfs.io/ipfs/QmPAygbESghBjPbLhGJAda5rA9GCBMHMGfgwLoB61DfnxX,效果图如下:

4.5 发布到IPNS

当我们修改网站内容重新添加到ipfs时,hash会发生变化,当我们网站更新时,我们可以将网站发布到IPNS,在IPNS中,允许我们节点的域名空间中引用一个IPFS hash,也就是说我们可以通过节点ID对项目根目录的IPFS HASH进行绑定,以后我们访问网站时直接通过节点·ID访问即可,当我们更新网站时,重新发布到IPNS即可。

yuyangdeMacBook-Pro:Desktop yuyang$ ipfs name publish QmPAygbESghBjPbLhGJAda5rA9GCBMHMGfgwLoB61DfnxX
Published to QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97: /ipfs/QmPAygbESghBjPbLhGJAda5rA9GCBMHMGfgwLoB61DfnxX

当我们执行ipfs name publish命令时,会返回我们的节点ID,你可以通过ipfs id进行查看验证是否是你的节点ID

验证id:

yuyangdeMacBook-Pro:Desktop yuyang$ ipfs id
{
    "ID": "QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97",
    "PublicKey": "CAASpgIwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQC6fMRFRKKg7rn7fJVVENsmSp/qftAV0FApEEFi0LNJOW9oYENCNykCc6Vpwg0/9oXjfkywAJqENgEycUV1ZdK75Ef9NJlY5vy62e2aitF83ock89zAeXXLU4GhXifW/foT5DsHHSe0rseBmybZDHjAOJtfhaN4K4yusw23wzvt9Fg8S3qNszEaImYtWUlS08piiR0tWdz+24I/oWiSnWB855KVCdLnYnwy6M3OLgeuJvXB2XGwnbtj4Q1jvp9rf/KGjHtb0KB9DwfowZ/ypvrDUNakbjNGYfn3I+AvRl1Qz4++o57VtbRmZYThygWnz9vTjqj0NDX2ftYh6MrZkSg5AgMBAAE=",
    "Addresses": [
        "/ip4/127.0.0.1/tcp/4001/ipfs/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97",
        "/ip4/192.168.0.4/tcp/4001/ipfs/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97",
        "/ip4/169.254.187.113/tcp/4001/ipfs/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97",
        "/ip6/::1/tcp/4001/ipfs/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97",
        "/ip4/182.139.92.248/tcp/32065/ipfs/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97"
    ],
    "AgentVersion": "go-ipfs/0.4.14/",
    "ProtocolVersion": "ipfs/0.1.0"
}

验证id绑定的网站hash:

ipfs name resolve 
yuyangdeMacBook-Pro:Desktop yuyang$ ipfs name resolve QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97
/ipfs/QmPAygbESghBjPbLhGJAda5rA9GCBMHMGfgwLoB61DfnxX

我们现在就可以根据节点id,通过IPNS进行访问了:
https://ipfs.io/ipns/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97

注意上面是ipns而不是ipfs。

4.6 修改网站内容,重新发布到IPNS

现在去style.css中修改字体颜色:

h1 {
  color: red;
}

重新添加site文件夹到ipfs:

yuyangdeMacBook-Pro:Desktop yuyang$ ipfs add -r site/
added QmS4a85WLxie6Zy6Tntg6CccyGHyV4823Vo1vkjGBYhetP site/index.html
added QmUTwP64HnrQp3GJuVeuvwaQ79rxa8waQL5yj3qkCswqvk site/style.css
added QmWhEUU1ksDShPTqhPEEXohfnhBvpwaCHtxhnbf3Fi1piH site

可以看到除了index.html文件的hash值没变外,style.csssite文件夹的hash值都不是之前的hash值了。

浏览器打开https://ipfs.io/ipfs/QmWhEUU1ksDShPTqhPEEXohfnhBvpwaCHtxhnbf3Fi1piH,效果图如下:

重新发布到IPNS:

yuyangdeMacBook-Pro:Desktop yuyang$ ipfs name publish QmWhEUU1ksDShPTqhPEEXohfnhBvpwaCHtxhnbf3Fi1piH
Published to QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97: /ipfs/QmWhEUU1ksDShPTqhPEEXohfnhBvpwaCHtxhnbf3Fi1piH

再次根据节点id,通过IPNS进行访问:
https://ipfs.io/ipns/QmVhF9zg4qcrVTw8jkkCGvTJGXJjvwX6CvRuxzUErEyx97

可以看到,由于网站的内容发生了变化,对应的hash值也发生了变化,这会导致其他人通过旧的网站hash值,访问不到更新后的网站。而使用IPNS,将每次更新后的网站hash值绑定到我们的节点id,他人只需要记住你的节点id,通过IPNS,就可以一直访问最新的网站内容。

参考:【IPFS + 区块链 系列】 入门篇 - IPFS+IPNS+个人博客搭建
作者:黎跃春

你可能感兴趣的:(IPFS+IPNS搭建简单网页及更新内容)