Lately, my supervisor asks me to set up an academic web page, which is an inevitable thing anyone should do in their academic career, especially in Computer Science. With a little help from friends, I eventually figure out a general way to make one.
Basically, all the thing you need to prepare is:
- Create an account to access to School’s server. In my case, NUS’s server is Sunfire.
- Knowledge in web programming. Believe me, I have never set up a single website before. You have 2 options: coding from scratch, or buying a template and modify the text as you want(“a very worthwhile investment” according to my Prof).
- Download this file. It is a very handy instruction of how to interact with a UNIX server, as well as how to set up a basic HTML page.
HOW IT WORKS
First, you design your own website on your own computer. When you have satisfies with your work, you can upload it on school’s server. By this way, if you moved to other schools in the future, the only thing that matters is your original file, which can then be easily uploaded to the new server once again.
Make a web page
A simple one: open your editor (Notepad for instance) and type following lines:
<html> <head> <title> This is my webpage </title> <body> Hello World! </body> </html>
Save the file name as “index.html”. Now open the file with your Browser (Chrome). See the result. This is how your web page would look like.
A more beautiful one: as I understood, a more professional web page consists of 2 main components: a HTML file and CSS files. Imagine CSS files as any types of furniture you can have in the house, and HTML file would organise them in a proper way to make your house the coolest in town. So if you want to create a new tab, you can call an instance which already defined in CSS file, and type its name in the HTML file.
You can forget everything I have said because the best way to learn is playing around a well-designed template. Open the HTML file, modify this and that, and save the file to see what change, then you can learn how it works in about an hour. One thing to note is that other files such as images are usually stored in separate folders, which could give you a hint to Ctrl+F (search) how to interact with them.
You can find my template here.
File transfer to server
Next, you gather all your files and store them in a folder named “public_html”. Use option File Transfer to transfer that folder to the root directory. Type following commands so that people from the Internet can access to your web page:
cd ~ chmod 711 ./ chmod 711 ./public_html chmod 744 ./public_html/index.html
Now open your server and type in the address of your page <school’s addresss> <your account>. Mine is http://www.comp.nus.edu.sg/~hxvinh/.
Next time you update, remember to type the above lines again to make sure you grant access to your page. It took me approximately 3 days for Google to index my page automatically so that everyone around the word can find the page by typing in your name.
Check my web page here 😀