ipfs.ioIPFS Docs

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.

Prerequisites

To do the steps in this lesson you must:

Goals

After doing this Lesson you will be able to

  • Create a simple webpage and add it to IPFS

Steps

Step 1: Start the IPFS daemon

If the IPFS daemon is not running already, then start the daemon now

$ ipfs daemon

Step 2: Create webpage directory and content

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.html and copy/paste the following content:

<!DOCTYPE html>
<html>
<head>
  <title>Nice Kitty</title>
</head>
<body>
  <center>
  <h1>Nice Kitty</h1>
  <img src="cat.jpg">
  </center>
</body>
</html>

Save index.html in the simple-webpage directory and close the text editor. If you like, you may open index.html in the browser to see the webpage.

This simple webpage only has 2 files, index.html and cat.jpg. Now you will add the simple-webpage directory 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 add with the -r option to tell IPFS to recursively add the contents of the directory.

Explanation

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 add with the -r option to recursively add all of the files within the directory to IPFS.

Next Steps

Proceed to the next lesson to learn how to View Your Webpage with IPFS and Publish to IPNS

PreviousTutorial: Making Changes on the Permanent WebNextLesson: View Your Webpage with IPFS and Publish to IPNS

Last updated