Lesson: Create a Simple Webpage and Add It to IPFS
This lesson shows you how to create a simple webpage and add it to IPFS. Once you are able to do this you can make your webpages as beautiful or complex as you would like, and add them to IPFS using the same basic commands.
To do the steps in this lesson you must:
After doing this Lesson you will be able to
- Create a simple webpage and add it to IPFS
If the IPFS daemon is not running already, then start the daemon now
$ ipfs daemon
Create a new webpage directory in your user's home directory.
$ cd ~ (or cd %userprofile% on Windows)
$ mkdir simple-webpage
$ cd simple-webpage/
Download this nice kitten image using ipfs:
$ ipfs cat QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg > cat.jpg
Using a text editor, create a file called
index.htmland copy/paste the following content:
simple-webpagedirectory and close the text editor. If you like, you may open
index.htmlin the browser to see the webpage.
This simple webpage only has 2 files,
cat.jpg. Now you will add the
simple-webpagedirectory to IPFS:
$ cd ..
$ ipfs add -r simple-webpage/
You should see output like the following:
added Qmd286K6pohQcTKYqnS1YhWrCiS4gz7Xi34sdwMe9USZ7u simple-webpage/cat.jpg
added QmNiBYXmgwLvT4xBiL8cX9j5H3AckiEjAnLZsoBiK6xEEr simple-webpage/index.html
added QmZhCL5rkWjH4MotDxKHUDaUESEKhTxSE7Xr16zwe59sjT simple-webpage
432.98 KiB / 432.98 KiB [=============================================] 100.00%
Notice that you used the command
ipfs addwith the
-roption to tell IPFS to recursively add the contents of the directory.
You can work on a webpage locally and then add it to IPFS. When you add your webpage directory content to IPFS, you use
ipfs addwith the
-roption to recursively add all of the files within the directory to IPFS.