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:
- Install and Initialize IPFS on your local machine
After doing this Lesson you will be able to
- Create a simple webpage and add it to IPFS
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>
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,
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.
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.
Proceed to the next lesson to learn how to View Your Webpage with IPFS and Publish to IPNS